/*!
 * pawkeen-creators — pkc.css
 *
 * Scoped under the .pkc / .pkc-public-link / .pkc-public-link-body wrappers.
 * Nothing in this file leaks to theme styles unless the theme also uses
 * these class names (it shouldn't — the pkc- prefix is ours).
 *
 * Two surfaces:
 *   .pkc                — the Creator Hub dashboard (logged-in /pack/creator-hub/)
 *   .pkc-public-link    — the public PawKeen Link page (/me/{handle})
 *
 * Both use the same shared primitives at the top of this file (variables,
 * .pkc-btn, .pkc-field, .pkc-callout) so the look stays consistent.
 *
 * Design constraints baked in:
 *   - Mobile first. The public page is opened from an IG bio, on a phone,
 *     in bright light. Big targets, high contrast.
 *   - 44×44 minimum touch target on all interactive elements.
 *   - Visible focus rings (outline) for accessibility.
 *   - One-thumb friendly: primary CTAs are full-width on small screens.
 */

/* ============================================================
   1. SHARED ROOT — variables, baseline
   ============================================================ */
.pkc,
.pkc-public-link,
body.pkc-public-link-body {
	--pkc-color-bg:           #fafaf7;
	--pkc-color-card:         #ffffff;
	--pkc-color-text:         #1f1e1c;
	--pkc-color-muted:        #6b6862;
	--pkc-color-border:       #e8e6df;
	--pkc-color-border-strong:#cdc9bd;
	--pkc-color-primary:      #2a5d4d;
	--pkc-color-primary-hov:  #1f4a3d;
	--pkc-color-accent:       #ffa831;
	--pkc-color-danger:       #c0392b;
	--pkc-color-danger-hov:   #a52d20;
	--pkc-color-link:         #1d6aaa;

	--pkc-radius-sm: 6px;
	--pkc-radius:    12px;
	--pkc-radius-lg: 18px;

	--pkc-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
	--pkc-shadow:    0 2px 6px rgba(0,0,0,.06);
	--pkc-shadow-md: 0 4px 14px rgba(0,0,0,.08);

	--pkc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--pkc-font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

	box-sizing: border-box;
}
.pkc *,
.pkc *::before,
.pkc *::after,
.pkc-public-link *,
.pkc-public-link *::before,
.pkc-public-link *::after {
	box-sizing: inherit;
}

/* ============================================================
   2. SHARED PRIMITIVES — buttons, fields, callouts, toast
   ============================================================ */
.pkc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 10px 18px;
	font: 600 15px/1.2 var(--pkc-font);
	border: 1px solid transparent;
	border-radius: var(--pkc-radius);
	background: #f4f2eb;
	color: var(--pkc-color-text);
	cursor: pointer;
	text-decoration: none;
	transition: background .12s ease, border-color .12s ease, transform .04s ease;
	white-space: nowrap;
}
.pkc-btn:hover    { background: #ece9df; }
.pkc-btn:active   { transform: translateY(1px); }
.pkc-btn:disabled { opacity: .55; cursor: not-allowed; }
.pkc-btn:focus-visible {
	outline: 2px solid var(--pkc-color-primary);
	outline-offset: 2px;
}

.pkc-btn--primary {
	background: var(--pkc-color-primary);
	border-color: var(--pkc-color-primary);
	color: #fff;
}
.pkc-btn--primary:hover { background: var(--pkc-color-primary-hov); border-color: var(--pkc-color-primary-hov); }

.pkc-btn--ghost {
	background: transparent;
	border-color: var(--pkc-color-border-strong);
	color: var(--pkc-color-text);
}
.pkc-btn--ghost:hover { background: #f4f2eb; }

.pkc-btn--danger {
	background: transparent;
	border-color: var(--pkc-color-border-strong);
	color: var(--pkc-color-danger);
}
.pkc-btn--danger:hover {
	background: var(--pkc-color-danger);
	border-color: var(--pkc-color-danger);
	color: #fff;
}

.pkc-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font: 700 16px/1 var(--pkc-font);
	border: 1px solid var(--pkc-color-border-strong);
	border-radius: var(--pkc-radius-sm);
	background: #fff;
	color: var(--pkc-color-text);
	cursor: pointer;
	user-select: none;
}
.pkc-icon-btn:hover { background: #f4f2eb; }
.pkc-icon-btn:focus-visible {
	outline: 2px solid var(--pkc-color-primary);
	outline-offset: 2px;
}

.pkc-field {
	margin: 0 0 18px;
}
.pkc-field__label {
	display: block;
	margin: 0 0 6px;
	font: 600 14px/1.3 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-field__required { color: var(--pkc-color-danger); }
.pkc-field__input {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	font: 400 16px/1.4 var(--pkc-font);  /* 16px so iOS doesn't zoom on focus */
	color: var(--pkc-color-text);
	background: #fff;
	border: 1px solid var(--pkc-color-border-strong);
	border-radius: var(--pkc-radius);
	transition: border-color .12s ease, box-shadow .12s ease;
}
.pkc-field__input:focus {
	outline: none;
	border-color: var(--pkc-color-primary);
	box-shadow: 0 0 0 3px rgba(42, 93, 77, .15);
}
.pkc-field__input:disabled,
.pkc-field__input[readonly] {
	background: #f4f2eb;
	color: var(--pkc-color-muted);
}
.pkc-field__textarea { min-height: 88px; resize: vertical; }
.pkc-field__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--pkc-color-muted) 50%),
	                  linear-gradient(135deg, var(--pkc-color-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) center, calc(100% - 12px) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 36px;
}
.pkc-field__hint {
	margin: 6px 0 0;
	font: 400 13px/1.4 var(--pkc-font);
	color: var(--pkc-color-muted);
}
.pkc-field__prefix-input {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--pkc-color-border-strong);
	border-radius: var(--pkc-radius);
	overflow: hidden;
	background: #fff;
}
.pkc-field__prefix-input:focus-within {
	border-color: var(--pkc-color-primary);
	box-shadow: 0 0 0 3px rgba(42, 93, 77, .15);
}
.pkc-field__prefix {
	display: inline-flex;
	align-items: center;
	padding: 0 10px;
	font: 400 15px/1 var(--pkc-font);
	color: var(--pkc-color-muted);
	background: #f4f2eb;
	border-right: 1px solid var(--pkc-color-border);
}
.pkc-field__prefix-input .pkc-field__input {
	border: none;
	border-radius: 0;
	box-shadow: none !important;
}

.pkc-callout {
	margin: 0 0 18px;
	padding: 12px 14px;
	font: 400 14px/1.5 var(--pkc-font);
	color: var(--pkc-color-text);
	background: #fff8e6;
	border: 1px solid #ffe5a8;
	border-radius: var(--pkc-radius);
}
.pkc-callout strong { display: block; margin-bottom: 2px; }
.pkc-callout a { color: var(--pkc-color-link); text-decoration: underline; }

.pkc-empty {
	margin: 24px 0;
	padding: 18px;
	text-align: center;
	color: var(--pkc-color-muted);
	background: var(--pkc-color-card);
	border: 1px dashed var(--pkc-color-border-strong);
	border-radius: var(--pkc-radius);
}

.pkc-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	max-width: calc(100vw - 32px);
	padding: 10px 18px;
	font: 600 14px/1.3 var(--pkc-font);
	color: #fff;
	background: var(--pkc-color-text);
	border-radius: 999px;
	box-shadow: var(--pkc-shadow-md);
	z-index: 9999;
}
.pkc-toast--error { background: var(--pkc-color-danger); }
.pkc-toast--success { background: var(--pkc-color-primary); }

/* ============================================================
   3. ONBOARDING FORM  — used inside the hub when no profile yet,
      and as a full-page form on /pack/creator-hub/ for new users.
   ============================================================ */
.pkc-onboarding {
	max-width: 560px;
	margin: 32px auto;
	padding: 24px;
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
	box-shadow: var(--pkc-shadow);
}
.pkc-onboarding__intro { margin: 0 0 20px; text-align: center; }
.pkc-onboarding__title {
	margin: 0 0 6px;
	font: 700 22px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-onboarding__subtitle {
	margin: 0;
	font: 400 15px/1.5 var(--pkc-font);
	color: var(--pkc-color-muted);
}
.pkc-onboarding__cta { margin-top: 22px; }
.pkc-onboarding__cta .pkc-btn { width: 100%; }
.pkc-onboarding__legal {
	margin: 12px 0 0;
	font: 400 13px/1.4 var(--pkc-font);
	color: var(--pkc-color-muted);
	text-align: center;
}
.pkc-onboarding__error {
	margin: 14px 0 0;
	padding: 10px 12px;
	font: 500 14px/1.4 var(--pkc-font);
	color: #fff;
	background: var(--pkc-color-danger);
	border-radius: var(--pkc-radius);
}

/* ============================================================
   4. HUB DASHBOARD  — /pack/creator-hub/
   ============================================================
   Layout shape:
       .pkc                        (full-bleed background colour)
         └ .pkc-dash               (CSS-grid: sidebar | main)
             ├ .pkc-dash__sidebar  (sticky on desktop, scroll-pill on mobile)
             └ .pkc-dash__main
                 ├ .pkc-dash__topbar
                 └ .pkc-dash__section[data-active="true"]   (one visible)
   ============================================================ */
.pkc {
	display: block;
	min-height: 60vh;
	background: var(--pkc-color-bg);
	color: var(--pkc-color-text);
	font-family: var(--pkc-font);
	-webkit-font-smoothing: antialiased;
}
.pkc-shell {
	max-width: 720px;
	margin: 0 auto;
	padding: 24px 16px 64px;
}
.pkc-shell--narrow { max-width: 560px; }

/* --- Dashboard grid -------------------------------------------------- */
.pkc-dash {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px;
	min-height: calc(100vh - 80px);
}
@media (min-width: 880px) {
	.pkc-dash {
		grid-template-columns: 264px 1fr;
		gap: 24px;
		padding: 24px;
	}
}

/* --- Sidebar -------------------------------------------------------- */
.pkc-dash__sidebar {
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
	box-shadow: var(--pkc-shadow-sm);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 16px;
}
@media (min-width: 880px) {
	.pkc-dash__sidebar {
		position: sticky;
		top: 16px;
		align-self: start;
		max-height: calc(100vh - 32px);
		overflow-y: auto;
		margin-bottom: 0;
	}
}

.pkc-dash__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--pkc-color-border);
}
.pkc-dash__brand-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pkc-color-primary), var(--pkc-color-accent));
	box-shadow: 0 0 0 3px rgba(255, 168, 49, .15);
}
.pkc-dash__brand-text {
	font: 700 14px/1 var(--pkc-font);
	letter-spacing: .02em;
	color: var(--pkc-color-text);
}

.pkc-dash__me {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	gap: 10px;
}
.pkc-dash__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, #2a5d4d, #3b7a64);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.pkc-dash__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pkc-dash__avatar-initials {
	font: 700 16px/1 var(--pkc-font);
	letter-spacing: .02em;
}
.pkc-dash__me-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.pkc-dash__me-name {
	font: 700 14px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pkc-dash__me-handle {
	font: 400 12px/1.2 var(--pkc-font-mono);
	color: var(--pkc-color-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pkc-dash__status {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	font: 600 11px/1 var(--pkc-font);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #1f4a3d;
	background: #e3f2eb;
	border: 1px solid #b8dec8;
	border-radius: 999px;
	width: fit-content;
}
.pkc-dash__status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2a5d4d;
	box-shadow: 0 0 0 2px rgba(42, 93, 77, .18);
	animation: pkc-pulse 2.4s ease-in-out infinite;
}
@keyframes pkc-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .55; }
}
.pkc-dash__status--paused  { color: #8a6500; background: #fff3d6; border-color: #ffd97a; }
.pkc-dash__status--paused  .pkc-dash__status-dot { background: #d49100; box-shadow: 0 0 0 2px rgba(212, 145, 0, .18); }
.pkc-dash__status--pending { color: #6b6862; background: #f4f2eb; border-color: #cdc9bd; }
.pkc-dash__status--pending .pkc-dash__status-dot { background: #6b6862; box-shadow: 0 0 0 2px rgba(107, 104, 98, .18); }
.pkc-dash__status--banned  { color: #a52d20; background: #fde7e3; border-color: #f5b9b1; }
.pkc-dash__status--banned  .pkc-dash__status-dot { background: #c0392b; box-shadow: 0 0 0 2px rgba(192, 57, 43, .18); }

/* Nav — desktop = vertical stack, mobile = horizontal scroll pills */
.pkc-dash__nav {
	display: flex;
	flex-direction: row;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
@media (min-width: 880px) {
	.pkc-dash__nav {
		flex-direction: column;
		overflow-x: visible;
		padding-bottom: 0;
	}
}
.pkc-dash__nav-item {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	font: 600 14px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--pkc-radius);
	cursor: pointer;
	text-align: left;
	white-space: nowrap;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
	width: 100%;
	min-height: 44px;
}
@media (max-width: 879px) {
	.pkc-dash__nav-item { width: auto; }
}
.pkc-dash__nav-item:hover { background: #f4f2eb; }
.pkc-dash__nav-item[aria-selected="true"] {
	background: rgba(42, 93, 77, .08);
	color: var(--pkc-color-primary);
	border-color: rgba(42, 93, 77, .14);
}
.pkc-dash__nav-item:focus-visible {
	outline: 2px solid var(--pkc-color-primary);
	outline-offset: 2px;
}
.pkc-dash__nav-icon {
	width: 18px;
	height: 18px;
	flex: none;
}
.pkc-dash__nav-badge {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	font: 700 11px/1 var(--pkc-font);
	color: var(--pkc-color-primary);
	background: rgba(42, 93, 77, .1);
	border-radius: 999px;
}
.pkc-dash__nav-badge--warn {
	color: #8a6500;
	background: #fff3d6;
}

.pkc-dash__sidebar-foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--pkc-color-border);
	display: none;
}
@media (min-width: 880px) {
	.pkc-dash__sidebar-foot { display: block; }
}
.pkc-dash__footlink {
	font: 500 13px/1.3 var(--pkc-font);
	color: var(--pkc-color-muted);
	text-decoration: none;
}
.pkc-dash__footlink:hover { color: var(--pkc-color-primary); }

/* --- Main column / topbar ------------------------------------------- */
.pkc-dash__main { min-width: 0; }

.pkc-dash__topbar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
	padding: 0 4px;
}
@media (min-width: 720px) {
	.pkc-dash__topbar {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 18px;
	}
}
.pkc-dash__breadcrumb {
	margin: 0 0 2px;
	font: 600 11px/1 var(--pkc-font);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pkc-color-muted);
}
.pkc-dash__title {
	margin: 0;
	font: 700 26px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
}
@media (min-width: 720px) {
	.pkc-dash__title { font-size: 28px; }
}
.pkc-dash__topbar-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* --- Section panel container ---------------------------------------- */
.pkc-dash__section {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.pkc-dash__section[hidden] { display: none; }

/* --- Reusable panel / card ------------------------------------------ */
.pkc-panel {
	padding: 22px;
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
	box-shadow: var(--pkc-shadow-sm);
}
.pkc-panel__head {
	margin-bottom: 16px;
}
.pkc-panel__title {
	margin: 0 0 4px;
	font: 700 18px/1.3 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-panel__sub {
	margin: 0;
	font: 400 14px/1.5 var(--pkc-font);
	color: var(--pkc-color-muted);
}

/* --- Hero URL card -------------------------------------------------- */
.pkc-hero-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	padding: 24px;
	background: linear-gradient(135deg, #ffffff 0%, #f7f4ec 100%);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
	box-shadow: var(--pkc-shadow);
	overflow: hidden;
}
@media (min-width: 720px) {
	.pkc-hero-card {
		grid-template-columns: 1fr 200px;
		gap: 24px;
		align-items: center;
	}
}
.pkc-hero-card__body { min-width: 0; }
.pkc-hero-card__eyebrow {
	margin: 0 0 8px;
	font: 600 11px/1 var(--pkc-font);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pkc-color-muted);
}
.pkc-hero-card__url {
	margin: 0 0 10px;
	font: 700 22px/1.3 var(--pkc-font-mono);
	color: var(--pkc-color-primary);
	word-break: break-all;
}
@media (min-width: 720px) {
	.pkc-hero-card__url { font-size: 26px; }
}
.pkc-hero-card__sub {
	margin: 0 0 16px;
	font: 400 14px/1.5 var(--pkc-font);
	color: var(--pkc-color-muted);
	max-width: 460px;
}
.pkc-hero-card__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.pkc-hero-card__visual {
	display: none;
}
@media (min-width: 720px) {
	.pkc-hero-card__visual { display: flex; justify-content: center; }
}

/* Phone preview mock — visible right of the URL on >=720px */
.pkc-phone {
	position: relative;
	width: 168px;
	padding: 32px 12px 14px;
	background: #1f1e1c;
	border-radius: 28px;
	box-shadow: 0 12px 28px rgba(0,0,0,.15), inset 0 0 0 2px rgba(255,255,255,.05);
}
.pkc-phone__notch {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 50px;
	height: 14px;
	background: #000;
	border-radius: 999px;
}
.pkc-phone__screen {
	background: #fafaf7;
	border-radius: 16px;
	padding: 14px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.pkc-phone__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, #2a5d4d, #3b7a64);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 13px/1 var(--pkc-font);
	margin-bottom: 4px;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.pkc-phone__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pkc-phone__name {
	font: 700 11px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pkc-phone__handle {
	font: 400 9px/1 var(--pkc-font-mono);
	color: var(--pkc-color-muted);
	margin-bottom: 6px;
}
.pkc-phone__row {
	width: 100%;
	padding: 7px 8px;
	background: #fff;
	border: 1px solid #e8e6df;
	border-radius: 8px;
	font: 600 10px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pkc-phone__row--ghost {
	color: #b8b4ab;
	background: #f4f2eb;
	border-style: dashed;
	font-weight: 500;
}

/* --- Stat grid ------------------------------------------------------ */
.pkc-stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (min-width: 720px) {
	.pkc-stats-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}
}
.pkc-stat-card {
	padding: 16px;
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
	box-shadow: var(--pkc-shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.pkc-stat-card--big { padding: 20px; }
.pkc-stat-card__label {
	margin: 0;
	font: 600 11px/1 var(--pkc-font);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pkc-color-muted);
}
.pkc-stat-card__value {
	margin: 2px 0 0;
	font: 700 28px/1.1 var(--pkc-font);
	color: var(--pkc-color-text);
	letter-spacing: -.01em;
}
.pkc-stat-card--big .pkc-stat-card__value { font-size: 36px; }
.pkc-stat-card__value--small { font-size: 18px; }
.pkc-stat-card__suffix {
	font: 600 14px/1 var(--pkc-font);
	color: var(--pkc-color-muted);
	margin-left: 2px;
}
.pkc-stat-card__hint {
	margin: 4px 0 0;
	font: 400 12px/1.4 var(--pkc-font);
	color: var(--pkc-color-muted);
}
.pkc-stat-card__bar {
	display: block;
	height: 6px;
	background: #f4f2eb;
	border-radius: 999px;
	margin-top: 8px;
	overflow: hidden;
}
.pkc-stat-card__bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--pkc-color-primary), var(--pkc-color-accent));
	border-radius: 999px;
	transition: width .3s ease;
}
.pkc-stat-card--status .pkc-stat-card__value {
	color: var(--pkc-color-primary);
}

/* --- Checklist ------------------------------------------------------ */
.pkc-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pkc-checklist__item {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #f9f8f3;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
	transition: background .12s ease, border-color .12s ease;
}
.pkc-checklist__item.is-done {
	background: #f0f7f3;
	border-color: #cce4d6;
}
.pkc-checklist__check {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--pkc-color-border-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex: none;
}
.pkc-checklist__item.is-done .pkc-checklist__check {
	background: var(--pkc-color-primary);
	border-color: var(--pkc-color-primary);
}
.pkc-checklist__body { min-width: 0; }
.pkc-checklist__title {
	margin: 0;
	font: 600 14px/1.3 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-checklist__item.is-done .pkc-checklist__title {
	color: var(--pkc-color-muted);
	text-decoration: line-through;
}
.pkc-checklist__hint {
	margin: 2px 0 0;
	font: 400 12px/1.4 var(--pkc-font);
	color: var(--pkc-color-muted);
}
.pkc-checklist__cta {
	min-height: 36px;
	padding: 6px 12px;
	font-size: 13px;
}
@media (max-width: 559px) {
	.pkc-checklist__item {
		grid-template-columns: 28px 1fr;
	}
	.pkc-checklist__cta {
		grid-column: 1 / -1;
		justify-self: start;
		margin-left: 40px;
	}
}

/* --- Profile form grid ---------------------------------------------- */
.pkc-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 16px;
}
@media (min-width: 640px) {
	.pkc-form-grid {
		grid-template-columns: 1fr 1fr;
	}
}
.pkc-form-grid__full {
	grid-column: 1 / -1;
}

/* --- Coming-soon teaser --------------------------------------------- */
.pkc-soon {
	margin-top: 18px;
	padding: 22px;
	background: linear-gradient(135deg, rgba(42,93,77,.04), rgba(255,168,49,.06));
	border: 1px dashed var(--pkc-color-border-strong);
	border-radius: var(--pkc-radius);
	text-align: center;
}
.pkc-soon__badge {
	display: inline-block;
	padding: 3px 10px;
	margin-bottom: 8px;
	font: 700 11px/1 var(--pkc-font);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--pkc-color-primary);
	background: rgba(42, 93, 77, .1);
	border-radius: 999px;
}
.pkc-soon__title {
	margin: 0 0 6px;
	font: 700 16px/1.3 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-soon__body {
	margin: 0 auto;
	max-width: 480px;
	font: 400 14px/1.5 var(--pkc-font);
	color: var(--pkc-color-muted);
}

/* --- FAQ ------------------------------------------------------------ */
.pkc-faq {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pkc-faq__item {
	padding: 14px 16px;
	background: #f9f8f3;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
}
.pkc-faq__item[open] {
	background: var(--pkc-color-card);
	border-color: var(--pkc-color-border-strong);
}
.pkc-faq__item summary {
	cursor: pointer;
	font: 600 14px/1.4 var(--pkc-font);
	color: var(--pkc-color-text);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
}
.pkc-faq__item summary::-webkit-details-marker { display: none; }
.pkc-faq__item summary::before {
	content: '+';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font: 700 16px/1 var(--pkc-font);
	color: var(--pkc-color-primary);
	background: rgba(42, 93, 77, .1);
	border-radius: 50%;
	flex: none;
}
.pkc-faq__item[open] summary::before { content: '–'; }
.pkc-faq__item p {
	margin: 10px 0 0;
	padding-left: 28px;
	font: 400 14px/1.5 var(--pkc-font);
	color: var(--pkc-color-text);
}

/* Add-link form (Label + URL + Add button row) */
.pkc-link-edit { margin: 0 0 16px; }
.pkc-link-edit__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}
@media (min-width: 640px) {
	.pkc-link-edit__row {
		grid-template-columns: 1fr 1.4fr auto;
		align-items: stretch;
	}
}
.pkc-link-edit .pkc-btn { min-height: 44px; }

/* Link list */
.pkc-link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pkc-link-list__empty {
	padding: 18px;
	text-align: center;
	color: var(--pkc-color-muted);
	background: #f4f2eb;
	border-radius: var(--pkc-radius);
}
.pkc-link-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
	transition: border-color .12s ease;
}
.pkc-link-item:hover { border-color: var(--pkc-color-border-strong); }
@media (min-width: 640px) {
	.pkc-link-item {
		flex-direction: row;
		align-items: center;
	}
}
.pkc-link-item__main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}
.pkc-link-item__label {
	font: 600 15px/1.3 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-link-item__url {
	font: 400 13px/1.3 var(--pkc-font-mono);
	color: var(--pkc-color-muted);
	word-break: break-all;
}
.pkc-link-item__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
/* Inline edit row (replaces .pkc-link-item__main when editing) */
.pkc-link-item.is-editing .pkc-link-item__main { display: none; }
.pkc-link-item__edit-form {
	display: none;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}
.pkc-link-item.is-editing .pkc-link-item__edit-form { display: flex; }
.pkc-link-item.is-editing .js-pkc-link-up,
.pkc-link-item.is-editing .js-pkc-link-down,
.pkc-link-item.is-editing .js-pkc-link-edit,
.pkc-link-item.is-editing .js-pkc-link-delete { display: none; }

.pkc-profile-form__cta { margin-top: 6px; }
.pkc-profile-form__cta .pkc-btn { min-width: 160px; }

/* ============================================================
   5. PUBLIC LINK PAGE  — /me/{handle}
   ============================================================ */
body.pkc-public-link-body {
	margin: 0;
	background: var(--pkc-color-bg);
	color: var(--pkc-color-text);
	font-family: var(--pkc-font);
	-webkit-font-smoothing: antialiased;
}
.pkc-public-link {
	display: block;
	min-height: 100vh;
	padding: 16px;
}
.pkc-public-link__inner {
	max-width: 480px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Hero photo */
.pkc-public-link__hero {
	position: relative;
	width: 144px;
	height: 144px;
	margin: 12px auto 6px;
	border-radius: 50%;
	overflow: hidden;
	background: #f4f2eb;
	box-shadow: var(--pkc-shadow);
	border: 4px solid #fff;
}
.pkc-public-link__hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pkc-public-link__hero--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 56px;
	color: var(--pkc-color-muted);
}

/* Header (name + location + bio) */
.pkc-public-link__header { text-align: center; padding: 0 4px; }
.pkc-public-link__name {
	margin: 0 0 6px;
	font: 700 24px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-public-link__location {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 8px;
	font: 500 14px/1.2 var(--pkc-font);
	color: var(--pkc-color-muted);
}
.pkc-public-link__pin { width: 14px; height: 14px; }
.pkc-public-link__bio {
	margin: 0;
	font: 400 15px/1.5 var(--pkc-font);
	color: var(--pkc-color-text);
}

/* Passport card */
.pkc-public-link__passport {
	display: block;
	margin: 4px 0 4px;
}
.pkc-passport-card {
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
	box-shadow: var(--pkc-shadow);
	overflow: hidden;
}
.pkc-passport-card__head {
	padding: 10px 14px;
	background: linear-gradient(to right, #2a5d4d, #3b7a64);
	color: #fff;
}
.pkc-passport-card__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 13px/1 var(--pkc-font);
	letter-spacing: .03em;
}
.pkc-passport-card__verified-icon { width: 16px; height: 16px; flex: none; }
.pkc-passport-card__body { padding: 14px; }
.pkc-passport-card__row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
}
.pkc-passport-card__emoji { font-size: 32px; line-height: 1; flex: none; }
.pkc-passport-card__name {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.pkc-passport-card__name strong {
	font: 700 17px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-passport-card__breed {
	font: 400 13px/1.3 var(--pkc-font);
	color: var(--pkc-color-muted);
}
.pkc-passport-card__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 0;
	padding: 0;
}
.pkc-passport-card__fact {
	margin: 0;
	padding: 8px 10px;
	background: #f4f2eb;
	border-radius: var(--pkc-radius-sm);
}
.pkc-passport-card__fact dt {
	font: 600 11px/1 var(--pkc-font);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--pkc-color-muted);
	margin: 0 0 3px;
}
.pkc-passport-card__fact dd {
	margin: 0;
	font: 600 14px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-passport-card__foot {
	padding: 8px 14px;
	background: #f4f2eb;
	border-top: 1px solid var(--pkc-color-border);
	text-align: center;
}
.pkc-passport-card__pk-link {
	font: 500 12px/1 var(--pkc-font);
	color: var(--pkc-color-muted);
	text-decoration: none;
}
.pkc-passport-card__pk-link:hover { color: var(--pkc-color-primary); }

/* Link rows */
.pkc-public-link__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 4px 0 0;
}
.pkc-link-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 16px 18px;
	min-height: 56px;
	font: 600 16px/1.3 var(--pkc-font);
	color: var(--pkc-color-text);
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
	box-shadow: var(--pkc-shadow-sm);
	text-decoration: none;
	transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.pkc-link-row:hover {
	transform: translateY(-1px);
	border-color: var(--pkc-color-border-strong);
	box-shadow: var(--pkc-shadow);
}
.pkc-link-row:active { transform: translateY(0); }
.pkc-link-row__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pkc-link-row__arrow {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--pkc-color-muted);
}

/* Social icons row */
.pkc-public-link__social {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 8px 0 4px;
}
.pkc-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--pkc-color-text);
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: 50%;
	box-shadow: var(--pkc-shadow-sm);
	text-decoration: none;
	transition: background .12s ease, color .12s ease;
}
.pkc-social-icon:hover { background: var(--pkc-color-primary); color: #fff; border-color: var(--pkc-color-primary); }
.pkc-social-icon svg   { width: 22px; height: 22px; display: block; }

/* Footer (PawKeen brand mark + tag — the organic distribution hook) */
.pkc-public-link__footer {
	margin: 24px 0 0;
	padding: 16px 0 8px;
	text-align: center;
	border-top: 1px solid var(--pkc-color-border);
}
.pkc-public-link__brand {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 13px/1 var(--pkc-font);
	color: var(--pkc-color-muted);
	text-decoration: none;
}
.pkc-public-link__brand img { height: 18px; width: auto; }
.pkc-public-link__brand:hover { color: var(--pkc-color-primary); }
.pkc-public-link__brand-tag {
	margin: 8px 0 0;
	font: 400 13px/1.5 var(--pkc-font);
	color: var(--pkc-color-muted);
}
.pkc-public-link__brand-tag a {
	color: var(--pkc-color-primary);
	text-decoration: underline;
	font-weight: 600;
}

/* ============================================================
   6. PUBLIC LANDING PAGE  — /creators/
   ============================================================
   The marketing entry point. Lives inside the theme chrome
   (header + footer come from get_header/get_footer), so this
   only styles the inner main element and its sections.

   Width strategy: each section uses an inner max-width via
   margin: auto rather than wrapping every section in a
   container — keeps the markup flat and lets the future
   "wave" backgrounds bleed full-width if we ever add them.
   ============================================================ */
.pkc-landing {
	display: block;
	max-width: 1120px;
	margin: 0 auto;
	padding: 24px 20px 64px;
	color: var(--pkc-color-text);
	font-family: var(--pkc-font);
	-webkit-font-smoothing: antialiased;
}

/* --- Logged-in welcome-back bar ------------------------------------- */
.pkc-landing__returnbar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin: 0 0 24px;
	padding: 14px 16px;
	background: linear-gradient(135deg, #f5f3ec 0%, #ffffff 100%);
	border: 1px solid var(--pkc-color-border-strong);
	border-radius: var(--pkc-radius);
	box-shadow: var(--pkc-shadow-sm);
}
.pkc-landing__returnbar p {
	margin: 0;
	font: 400 14px/1.5 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-landing__returnbar p strong { color: var(--pkc-color-primary); }
.pkc-landing__returnbar .pkc-btn { align-self: flex-start; }
@media (min-width: 640px) {
	.pkc-landing__returnbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* --- Hero ----------------------------------------------------------- */
.pkc-landing__hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
	padding: 24px 0 48px;
}
@media (min-width: 880px) {
	.pkc-landing__hero {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 56px;
		padding: 48px 0 72px;
	}
}
.pkc-landing__hero-text { min-width: 0; }
.pkc-landing__hero-visual {
	display: flex;
	justify-content: center;
	align-items: center;
}
.pkc-landing__eyebrow {
	margin: 0 0 12px;
	font: 600 12px/1 var(--pkc-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pkc-color-primary);
}
.pkc-landing__h1 {
	margin: 0 0 16px;
	font: 800 32px/1.15 var(--pkc-font);
	letter-spacing: -.02em;
	color: var(--pkc-color-text);
}
@media (min-width: 720px) {
	.pkc-landing__h1 { font-size: 40px; }
}
@media (min-width: 1024px) {
	.pkc-landing__h1 { font-size: 48px; }
}
.pkc-landing__lede {
	margin: 0 0 24px;
	font: 400 17px/1.55 var(--pkc-font);
	color: var(--pkc-color-text);
	max-width: 560px;
}
.pkc-landing__lede code {
	display: inline-block;
	padding: 2px 8px;
	background: #f4f2eb;
	border: 1px solid var(--pkc-color-border);
	border-radius: 6px;
	font: 600 14px/1.4 var(--pkc-font-mono);
	color: var(--pkc-color-primary);
	white-space: nowrap;
}
.pkc-landing__lede code em {
	font-style: italic;
	color: var(--pkc-color-muted);
}
.pkc-landing__hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 16px;
}
.pkc-landing__hero-cta--centered {
	justify-content: center;
	margin-top: 16px;
}
.pkc-landing__hero-foot {
	margin: 0;
	font: 400 13px/1.5 var(--pkc-font);
	color: var(--pkc-color-muted);
}

/* Larger CTA variant — used on landing & final CTA where the page is
   "selling" and the buttons need to be the focal point. */
.pkc-btn--lg {
	min-height: 52px;
	padding: 14px 24px;
	font-size: 17px;
	border-radius: var(--pkc-radius);
}

/* --- Larger phone mock — used in hero ------------------------------- */
.pkc-phone--lg {
	width: 220px;
	padding: 38px 14px 18px;
	border-radius: 36px;
}
.pkc-phone--lg .pkc-phone__notch {
	width: 64px;
	height: 16px;
	top: 10px;
}
.pkc-phone__screen--rich {
	padding: 16px 10px 14px;
	gap: 6px;
}
.pkc-phone__avatar--lg {
	width: 56px;
	height: 56px;
	font-size: 18px;
}
.pkc-phone__name--lg {
	font-size: 13px;
}
.pkc-phone__passport {
	width: 100%;
	margin: 8px 0 4px;
	padding: 8px 10px;
	background: linear-gradient(135deg, #fff7e8 0%, #ffe8c4 100%);
	border: 1px solid #f0d9a8;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pkc-phone__passport-chip {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 4px;
	padding: 2px 6px;
	background: var(--pkc-color-primary);
	color: #fff;
	font: 700 8px/1.2 var(--pkc-font);
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 4px;
}
.pkc-phone__passport-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pkc-phone__passport-emoji {
	flex: none;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 50%;
	font-size: 14px;
	border: 1px solid rgba(0,0,0,.05);
}
.pkc-phone__passport-row > div {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.pkc-phone__passport-row strong {
	font: 700 10px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-phone__passport-row em {
	font: 400 9px/1.2 var(--pkc-font);
	font-style: normal;
	color: var(--pkc-color-muted);
}

/* --- Generic landing section --------------------------------------- */
.pkc-landing__section {
	padding: 40px 0;
	border-top: 1px solid var(--pkc-color-border);
}
@media (min-width: 720px) {
	.pkc-landing__section { padding: 56px 0; }
}
.pkc-landing__section-head {
	max-width: 680px;
	margin: 0 auto 32px;
	text-align: center;
}
.pkc-landing__h2 {
	margin: 0 0 8px;
	font: 700 26px/1.2 var(--pkc-font);
	letter-spacing: -.01em;
	color: var(--pkc-color-text);
}
@media (min-width: 720px) {
	.pkc-landing__h2 { font-size: 32px; }
}
.pkc-landing__sub {
	margin: 0;
	font: 400 16px/1.55 var(--pkc-font);
	color: var(--pkc-color-muted);
}

/* --- Features grid (6-up, responsive) ------------------------------ */
.pkc-landing__features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 640px) {
	.pkc-landing__features { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
	.pkc-landing__features { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
}
.pkc-feature {
	padding: 24px;
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
	box-shadow: var(--pkc-shadow-sm);
	transition: transform .15s ease, box-shadow .15s ease;
}
.pkc-feature:hover {
	transform: translateY(-2px);
	box-shadow: var(--pkc-shadow-md);
}
.pkc-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 14px;
	background: rgba(42, 93, 77, .1);
	color: var(--pkc-color-primary);
	border-radius: 12px;
}
.pkc-feature__title {
	margin: 0 0 8px;
	font: 700 17px/1.3 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-feature__body {
	margin: 0;
	font: 400 14px/1.55 var(--pkc-font);
	color: var(--pkc-color-muted);
}

/* --- How it works — numbered steps --------------------------------- */
.pkc-landing__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 880px) {
	.pkc-landing__steps {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 20px;
	}
}
.pkc-landing__step {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
	background: #f9f8f3;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
}
@media (min-width: 880px) {
	.pkc-landing__step {
		flex-direction: column;
		align-items: stretch;
	}
}
.pkc-landing__step-num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--pkc-color-primary);
	color: #fff;
	font: 700 16px/1 var(--pkc-font);
	border-radius: 50%;
}
.pkc-landing__step-title {
	margin: 0 0 6px;
	font: 700 16px/1.3 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-landing__step p {
	margin: 0;
	font: 400 14px/1.55 var(--pkc-font);
	color: var(--pkc-color-muted);
}

/* --- Pricing card — single, transparent ---------------------------- */
.pkc-landing__pricing {
	max-width: 480px;
	margin: 0 auto;
	padding: 32px 28px;
	background: var(--pkc-color-card);
	border: 2px solid var(--pkc-color-primary);
	border-radius: var(--pkc-radius-lg);
	text-align: center;
	box-shadow: var(--pkc-shadow-md);
}
.pkc-landing__pricing-eyebrow {
	margin: 0 0 8px;
	font: 600 12px/1 var(--pkc-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pkc-color-primary);
}
.pkc-landing__pricing-price {
	margin: 0 0 20px;
	font: 800 48px/1 var(--pkc-font);
	letter-spacing: -.02em;
	color: var(--pkc-color-text);
}
.pkc-landing__pricing-price span {
	display: block;
	margin-top: 8px;
	font: 400 14px/1.4 var(--pkc-font);
	color: var(--pkc-color-muted);
	letter-spacing: 0;
}
.pkc-landing__pricing-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pkc-landing__pricing-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font: 400 15px/1.45 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-landing__pricing-list li::before {
	content: '✓';
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: rgba(42, 93, 77, .12);
	color: var(--pkc-color-primary);
	font: 700 13px/1 var(--pkc-font);
	border-radius: 50%;
}
.pkc-landing__pricing .pkc-btn { width: 100%; }
.pkc-landing__pricing-foot {
	margin: 14px 0 0;
	font: 400 13px/1.5 var(--pkc-font);
	color: var(--pkc-color-muted);
}
.pkc-landing__pricing-foot a {
	color: var(--pkc-color-primary);
	font-weight: 600;
	text-decoration: none;
}
.pkc-landing__pricing-foot a:hover { text-decoration: underline; }

/* --- Final CTA ------------------------------------------------------ */
.pkc-landing__finalcta {
	margin-top: 40px;
	padding: 48px 24px;
	background: linear-gradient(135deg, #2a5d4d 0%, #3b7a64 100%);
	border-radius: var(--pkc-radius-lg);
	text-align: center;
	color: #fff;
}
.pkc-landing__finalcta .pkc-landing__h2 {
	color: #fff;
	margin-bottom: 24px;
}
.pkc-landing__finalcta .pkc-btn--primary {
	background: #fff;
	color: var(--pkc-color-primary);
	border-color: #fff;
}
.pkc-landing__finalcta .pkc-btn--primary:hover {
	background: #f4f2eb;
	border-color: #f4f2eb;
}
.pkc-landing__finalcta .pkc-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,.5);
}
.pkc-landing__finalcta .pkc-btn--ghost:hover {
	background: rgba(255,255,255,.1);
	border-color: #fff;
}

/* FAQ on landing — same .pkc-faq__item rules from the dashboard apply
   because both surfaces share the .pkc wrapper. No additional CSS needed. */
.pkc-public-link__brand-tag a:hover { color: var(--pkc-color-primary-hov); }


/* ============================================================
   7. CREATOR SHOWCASE  — /me/{handle}  (v0.4 reframe)
   ============================================================
   The new public template moved from a Linktree-style stack to a
   rich profile / media-kit. All `.pkc-show-*` classes live inside
   `.pkc-public-link.pkc-show` so the existing page wrapper still
   provides the brand tokens — but most legacy `.pkc-public-link__*`
   rules are bypassed in favour of the wider, multi-section layout.

   Width strategy: the cover banner runs nearly full-bleed (max
   720px), the inner column where sections live tops out at 680px.
   This is wider than the legacy 480px because the showcase has
   grids (pets, platforms, featured) that suffocate at link-page
   widths.
   ============================================================ */
.pkc-public-link.pkc-show {
	padding: 0;
}
.pkc-show__inner {
	max-width: 680px;
	margin: 0 auto;
	padding: 0 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* --- Hero: cover banner + identity card ----------------------------- */
.pkc-show-hero {
	position: relative;
	width: 100%;
	max-width: 720px;
	margin: 0 auto 16px;
}
.pkc-show-hero__cover {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	background: linear-gradient(135deg, #2a5d4d 0%, #3b7a64 50%, #ffa831 100%);
}
@media (min-width: 720px) {
	.pkc-show-hero__cover {
		height: 260px;
		border-radius: var(--pkc-radius-lg);
		margin-top: 16px;
	}
}
.pkc-show-hero__cover-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pkc-show-hero__cover--placeholder::after {
	content: "🐾";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 64px;
	color: rgba(255,255,255,.6);
}
.pkc-show-hero__cover--blurred .pkc-show-hero__cover-img {
	filter: blur(28px) brightness(.7) saturate(1.2);
	transform: scale(1.1);
}

/* Identity card sits on top, partially overlapping the cover. */
.pkc-show-hero__id {
	position: relative;
	margin: -56px 16px 0;
	padding: 16px 18px 18px;
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
	box-shadow: var(--pkc-shadow-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}
@media (min-width: 720px) {
	.pkc-show-hero__id {
		flex-direction: row;
		text-align: left;
		align-items: flex-start;
		gap: 18px;
		margin: -64px auto 0;
		max-width: 660px;
	}
}
.pkc-show-hero__avatar {
	flex: none;
	width: 96px;
	height: 96px;
	margin-top: -48px;
	border-radius: 50%;
	overflow: hidden;
	background: #f4f2eb;
	border: 4px solid #fff;
	box-shadow: var(--pkc-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (min-width: 720px) {
	.pkc-show-hero__avatar {
		width: 112px;
		height: 112px;
		margin-top: -56px;
	}
}
.pkc-show-hero__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pkc-show-hero__avatar span { font-size: 44px; line-height: 1; }
.pkc-show-hero__meta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}
@media (min-width: 720px) {
	.pkc-show-hero__meta { align-items: flex-start; }
}
.pkc-show-hero__name {
	margin: 0;
	font: 700 26px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
	word-break: break-word;
}
.pkc-show-hero__tagline {
	margin: 0;
	font: 400 16px/1.45 var(--pkc-font);
	color: var(--pkc-color-text);
	max-width: 100%;
}
.pkc-show-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}
@media (min-width: 720px) {
	.pkc-show-hero__badges { justify-content: flex-start; }
}
.pkc-show-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 999px;
	font: 600 12px/1.2 var(--pkc-font);
	letter-spacing: .01em;
}
.pkc-show-badge__icon { width: 13px; height: 13px; flex: none; }
.pkc-show-badge--ghost {
	color: var(--pkc-color-muted);
	background: #f4f2eb;
	border: 1px solid var(--pkc-color-border);
}
.pkc-show-badge--verified {
	color: #fff;
	background: linear-gradient(to right, #2a5d4d, #3b7a64);
}
.pkc-show-badge--collabs {
	color: #6e4500;
	background: #fff3d6;
	border: 1px solid #ffd97a;
}
.pkc-show-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
	width: 100%;
	justify-content: center;
}
@media (min-width: 720px) {
	.pkc-show-hero__cta { justify-content: flex-start; }
}

/* --- Showcase buttons (separate from .pkc-btn so they can be
       used on the public page even if the dashboard tokens shift) - */
.pkc-show-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	min-height: 42px;
	border-radius: var(--pkc-radius);
	font: 600 14px/1.2 var(--pkc-font);
	text-decoration: none;
	border: 1px solid transparent;
	transition: background .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
}
.pkc-show-btn:hover { transform: translateY(-1px); }
.pkc-show-btn:active { transform: translateY(0); }
.pkc-show-btn--primary {
	background: var(--pkc-color-primary);
	color: #fff;
	border-color: var(--pkc-color-primary);
}
.pkc-show-btn--primary:hover {
	background: var(--pkc-color-primary-hov);
	border-color: var(--pkc-color-primary-hov);
	color: #fff;
}
.pkc-show-btn--ghost {
	background: transparent;
	color: var(--pkc-color-text);
	border-color: var(--pkc-color-border-strong);
}
.pkc-show-btn--ghost:hover {
	background: #f4f2eb;
	color: var(--pkc-color-text);
}

/* --- Sections — shared layout/heading rhythm ------------------------ */
.pkc-show-section {
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
	padding: 22px 20px;
	box-shadow: var(--pkc-shadow-sm);
}
.pkc-show-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
	flex-wrap: wrap;
}
.pkc-show-section__h {
	margin: 0 0 14px;
	font: 700 18px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-show-section__head .pkc-show-section__h { margin: 0; }
.pkc-show-section__h--small { font-size: 14px; color: var(--pkc-color-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
.pkc-show-section__h3 {
	margin: 18px 0 10px;
	font: 600 13px/1.2 var(--pkc-font);
	color: var(--pkc-color-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.pkc-show-section__h3:first-child { margin-top: 0; }
.pkc-show-section__sub {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font: 600 12px/1.2 var(--pkc-font);
	color: var(--pkc-color-primary);
}
.pkc-show-section__sub-icon { width: 14px; height: 14px; }

/* --- Chips (used in About + Brand work) ---------------------------- */
.pkc-show-chips {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.pkc-show-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 999px;
	font: 500 12px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
	background: #f4f2eb;
	border: 1px solid var(--pkc-color-border);
}
.pkc-show-chip--solid {
	background: var(--pkc-color-primary);
	color: #fff;
	border-color: var(--pkc-color-primary);
}

/* --- About --------------------------------------------------------- */
.pkc-show-about__body {
	margin: 0 0 14px;
	font: 400 15px/1.6 var(--pkc-font);
	color: var(--pkc-color-text);
	white-space: normal;
	word-break: break-word;
}
.pkc-show-about__lang {
	margin: 10px 0 0;
	font: 400 13px/1.4 var(--pkc-font);
	color: var(--pkc-color-muted);
}
.pkc-show-about__lang strong { color: var(--pkc-color-text); margin-right: 4px; }

/* --- Pets grid ----------------------------------------------------- */
.pkc-show-pets__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 560px) {
	.pkc-show-pets__grid { grid-template-columns: 1fr 1fr; }
}
.pkc-show-pet {
	display: flex;
	gap: 12px;
	padding: 12px;
	background: #fbfaf6;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
}
.pkc-show-pet__photo {
	flex: none;
	width: 84px;
	height: 84px;
	border-radius: var(--pkc-radius);
	overflow: hidden;
	background: #f4f2eb;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pkc-show-pet__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pkc-show-pet__photo--placeholder span { font-size: 38px; line-height: 1; }
.pkc-show-pet__body { min-width: 0; flex: 1 1 auto; }
.pkc-show-pet__name {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 2px;
	font: 700 16px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
	word-break: break-word;
}
.pkc-show-pet__species-emoji { font-size: 18px; line-height: 1; }
.pkc-show-pet__breed {
	margin: 0 0 8px;
	font: 400 13px/1.3 var(--pkc-font);
	color: var(--pkc-color-muted);
}
.pkc-show-pet__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin: 0;
}
.pkc-show-pet__fact { margin: 0; padding: 6px 8px; background: #fff; border-radius: var(--pkc-radius-sm); border: 1px solid var(--pkc-color-border); }
.pkc-show-pet__fact dt { font: 600 10px/1 var(--pkc-font); letter-spacing: .05em; text-transform: uppercase; color: var(--pkc-color-muted); margin: 0 0 3px; }
.pkc-show-pet__fact dd { margin: 0; font: 600 13px/1.2 var(--pkc-font); color: var(--pkc-color-text); }

/* --- Platforms grid ------------------------------------------------ */
.pkc-show-platforms__grid {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
@media (min-width: 480px) {
	.pkc-show-platforms__grid { grid-template-columns: 1fr 1fr; }
}
.pkc-show-platforms__item { margin: 0; }
.pkc-show-platform {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: #fbfaf6;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
	color: var(--pkc-color-text);
	text-decoration: none;
	transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
a.pkc-show-platform:hover {
	border-color: var(--pkc-color-border-strong);
	background: #fff;
	transform: translateY(-1px);
}
.pkc-show-platform__icon {
	flex: none;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--pkc-color-text);
}
.pkc-show-platform__icon svg { width: 22px; height: 22px; display: block; }
.pkc-show-platform__icon--instagram { color: #c13584; }
.pkc-show-platform__icon--tiktok    { color: #111; }
.pkc-show-platform__icon--youtube   { color: #c00; }
.pkc-show-platform__icon--twitch    { color: #6441a5; }
.pkc-show-platform__icon--twitter   { color: #111; }
.pkc-show-platform__icon--blog      { color: var(--pkc-color-primary); }
.pkc-show-platform__icon--etsy      { color: #f1641e; }
.pkc-show-platform__icon--podcast   { color: #6c2ea0; }
.pkc-show-platform__meta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.pkc-show-platform__name {
	font: 600 14px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pkc-show-platform__handle {
	font: 400 12px/1.2 var(--pkc-font);
	color: var(--pkc-color-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pkc-show-platform__count {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1;
}
.pkc-show-platform__count strong {
	font: 700 16px/1 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-show-platform__count span {
	font: 400 11px/1 var(--pkc-font);
	color: var(--pkc-color-muted);
	margin-top: 3px;
}

/* --- Stats (audience snapshot, platform meta) ---------------------- */
.pkc-show-stats {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
@media (min-width: 480px) {
	.pkc-show-stats { grid-template-columns: 1fr 1fr; }
}
.pkc-show-stats__item {
	margin: 0;
	padding: 10px 12px;
	background: #fbfaf6;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
}
.pkc-show-stats__item dt {
	font: 600 11px/1 var(--pkc-font);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--pkc-color-muted);
	margin: 0 0 4px;
}
.pkc-show-stats__item dd {
	margin: 0;
	font: 500 14px/1.4 var(--pkc-font);
	color: var(--pkc-color-text);
	word-break: break-word;
}

/* --- Brand work ---------------------------------------------------- */
.pkc-show-brands {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.pkc-show-brand {
	margin: 0;
	min-height: 40px;
	min-width: 80px;
	padding: 6px 10px;
	background: #fff;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pkc-show-brand img {
	display: block;
	max-width: 100%;
	max-height: 28px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.pkc-show-brand__name {
	font: 600 12px/1.2 var(--pkc-font);
	color: var(--pkc-color-muted);
}
.pkc-show-collabs__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

/* --- Featured content grid ----------------------------------------- */
.pkc-show-featured__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
@media (min-width: 480px) {
	.pkc-show-featured__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
	.pkc-show-featured__grid { grid-template-columns: 1fr 1fr 1fr; }
}
.pkc-show-featured__item { margin: 0; }
.pkc-show-featured__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px;
	min-height: 96px;
	background: #fbfaf6;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
	color: var(--pkc-color-text);
	text-decoration: none;
	transition: border-color .12s ease, background .12s ease, transform .08s ease;
	position: relative;
}
.pkc-show-featured__card:hover {
	border-color: var(--pkc-color-border-strong);
	background: #fff;
	transform: translateY(-1px);
}
.pkc-show-featured__host {
	font: 600 11px/1 var(--pkc-font);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pkc-color-primary);
}
.pkc-show-featured__caption {
	font: 500 14px/1.45 var(--pkc-font);
	color: var(--pkc-color-text);
	flex: 1 1 auto;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pkc-show-featured__arrow {
	font: 600 16px/1 var(--pkc-font);
	color: var(--pkc-color-muted);
	align-self: flex-end;
}

/* --- Quick links section (small wrapper around the legacy stack) --- */
.pkc-show-links { padding: 18px 20px; }
.pkc-show-links .pkc-public-link__links { gap: 8px; }
.pkc-show-links .pkc-link-row { padding: 12px 14px; min-height: 48px; font-size: 14px; }

/* --- Footer (overrides legacy spacing) ----------------------------- */
.pkc-show-footer {
	margin-top: 4px;
	border-top: none;
	padding: 8px 0 24px;
}


/* ============================================================
   8. CREATOR HUB DASHBOARD — v0.4 form components
   ============================================================
   New widgets used by the rewritten creator-hub.php sections:
     .pkc-sec-form        — every section's <form>
     .pkc-form-footer     — sticky-ish row with the Save button
     .pkc-chip-grid       — the niches / collab types / categories picker
     .pkc-pet-grid        — the featured-pet picker
     .pkc-platforms       — repeatable platform rows
     .pkc-toggle-card     — open-to-collabs switch container
     .pkc-past-brands     — repeatable brand-name + logo URL rows
     .pkc-featured        — repeatable featured-post rows
   ============================================================ */
.pkc-sec-form { display: block; }
.pkc-form-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--pkc-color-border);
}
.pkc-form-footer .pkc-form-footer__hint {
	margin: 0 auto 0 0;
	font: 400 12px/1.4 var(--pkc-font);
	color: var(--pkc-color-muted);
	align-self: center;
}
.pkc-panel__h3--spaced {
	margin: 22px 0 8px;
	font: 600 14px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-panel__h3--spaced:first-child { margin-top: 0; }

/* Visually-hidden labels for repeated row inputs (still readable by AT). */
.pkc-field__label--sr {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* Smaller secondary buttons used inside row controls. */
.pkc-btn--sm { padding: 6px 12px; font-size: 13px; min-height: 32px; }

/* --- Chip grid (selectable chips backed by checkboxes) ------------- */
.pkc-chip-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}
.pkc-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid var(--pkc-color-border-strong);
	background: #fff;
	font: 500 13px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
	cursor: pointer;
	user-select: none;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pkc-chip input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0; height: 0;
}
.pkc-chip:hover { border-color: var(--pkc-color-primary); }
.pkc-chip:has(input:checked),
.pkc-chip.is-checked {
	background: var(--pkc-color-primary);
	border-color: var(--pkc-color-primary);
	color: #fff;
}

/* --- Pet picker grid ----------------------------------------------- */
.pkc-pet-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pkc-pet-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background: #fff;
	border: 2px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
	cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}
.pkc-pet-card input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.pkc-pet-card:hover { border-color: var(--pkc-color-border-strong); }
.pkc-pet-card:has(input:checked),
.pkc-pet-card.is-checked {
	border-color: var(--pkc-color-primary);
	background: #f0f7f4;
}
.pkc-pet-card__thumb {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: var(--pkc-radius-sm);
	overflow: hidden;
	background: #f4f2eb;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pkc-pet-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkc-pet-card__thumb span { font-size: 22px; line-height: 1; }
.pkc-pet-card__body { min-width: 0; flex: 1 1 auto; }
.pkc-pet-card__name {
	display: block;
	font: 600 14px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pkc-pet-card__sub {
	display: block;
	font: 400 12px/1.2 var(--pkc-font);
	color: var(--pkc-color-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 2px;
}
.pkc-pet-card__check {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--pkc-color-primary);
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
}
.pkc-pet-card:has(input:checked) .pkc-pet-card__check,
.pkc-pet-card.is-checked .pkc-pet-card__check { display: inline-flex; }

/* --- Repeatable platform rows -------------------------------------- */
.pkc-platforms { display: flex; flex-direction: column; gap: 10px; margin: 0 0 8px; }
.pkc-platforms__row {
	display: grid;
	grid-template-columns: 1fr 1fr 120px;
	gap: 8px;
	align-items: center;
	padding: 8px;
	background: #fbfaf6;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
}
@media (max-width: 540px) {
	.pkc-platforms__row { grid-template-columns: 1fr; }
}
.pkc-platforms__row .pkc-field { margin: 0; }
.pkc-platforms__row .pkc-field__input,
.pkc-platforms__row .pkc-field__select { padding: 8px 10px; font-size: 14px; }

/* --- Toggle card (open-to-collabs switch) -------------------------- */
.pkc-toggle-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #fbfaf6;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
	margin: 0 0 14px;
}
.pkc-toggle-card__body { flex: 1 1 auto; min-width: 0; }
.pkc-toggle-card__label {
	display: block;
	font: 600 14px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-toggle-card__hint {
	display: block;
	margin-top: 2px;
	font: 400 12px/1.4 var(--pkc-font);
	color: var(--pkc-color-muted);
}
.pkc-toggle {
	position: relative;
	flex: none;
	width: 44px;
	height: 24px;
	display: inline-block;
	cursor: pointer;
}
.pkc-toggle input {
	position: absolute;
	opacity: 0;
	width: 0; height: 0;
}
.pkc-toggle__track {
	position: absolute;
	inset: 0;
	background: var(--pkc-color-border-strong);
	border-radius: 999px;
	transition: background .12s ease;
}
.pkc-toggle__track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: var(--pkc-shadow-sm);
	transition: transform .15s ease;
}
.pkc-toggle input:checked + .pkc-toggle__track { background: var(--pkc-color-primary); }
.pkc-toggle input:checked + .pkc-toggle__track::after { transform: translateX(20px); }

/* --- Repeatable past-brand rows ------------------------------------ */
.pkc-past-brands { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; }
.pkc-past-brands__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 8px;
	background: #fbfaf6;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
}
@media (max-width: 540px) {
	.pkc-past-brands__row { grid-template-columns: 1fr; }
}
.pkc-past-brands__row .pkc-field { margin: 0; }
.pkc-past-brands__row .pkc-field__input { padding: 8px 10px; font-size: 14px; }

/* --- Repeatable featured-post rows --------------------------------- */
.pkc-featured { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; }
.pkc-featured__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 8px;
	background: #fbfaf6;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
}
@media (max-width: 540px) {
	.pkc-featured__row { grid-template-columns: 1fr; }
}
.pkc-featured__row .pkc-field { margin: 0; }
.pkc-featured__row .pkc-field__input { padding: 8px 10px; font-size: 14px; }


/* =========================================================================
   SECTION 9 — DASHBOARD HUB REDESIGN (v0.5)
   =========================================================================
   The Creator Studio Overview was originally a generic admin form with cold
   stat tiles. This section replaces it with the same warm, contextual,
   member-dashboard design language: dark forest-green sidebar, cream main
   surface, terracotta hero CTA, four outcome cards with status rails, year-
   so-far proof band, polished pet list, conditional bottom pitch.

   Scoped under `.pkc-dash--v2` so it doesn't touch the public showcase or
   the legacy onboarding chrome. Self-contained design tokens (don't rely on
   root --pkc-color-*) so editing brand colours here can never bleed into
   the public /me/ pages.

   Class naming: `.pkc-hub-*` for the new components (so they sit alongside
   the existing `.pkc-dash-*` and `.pkc-sec-form` styles without conflict).
   ========================================================================= */

.pkc-dash--v2 {
	/* === Brand palette (mirrors pawkeen-member's pkm tokens so the two
	       dashboards FEEL like the same product.) ============================ */
	--pkh-primary:      #D4580A;
	--pkh-primary-dark: #B84A08;
	--pkh-primary-light:#FDF0E8;
	--pkh-secondary:    #1C3D2E;
	--pkh-secondary-light:#E8F0EC;
	--pkh-accent:       #F5C842;
	--pkh-accent-light: #FFFBE8;
	--pkh-bg:           #FBF6EF;
	--pkh-surface:      #F2EAE0;
	--pkh-white:        #FFFFFF;
	--pkh-text:         #1A1A1A;
	--pkh-muted:        #5C5C5C;
	--pkh-border:       #E8E3DB;
	--pkh-error:        #C0392B;
	--pkh-success:      #1A7040;
	--pkh-success-light:#E8F4EC;

	/* Dark sidebar tones — same alpha-on-secondary trick as pkm. */
	--pkh-sage:           #A3D593;
	--pkh-rail-bg:        var(--pkh-secondary);
	--pkh-rail-hover:     rgba(255,255,255,0.06);
	--pkh-rail-active:    rgba(163,213,147,0.14);
	--pkh-rail-border:    rgba(255,255,255,0.09);
	--pkh-rail-surface:   rgba(255,255,255,0.05);

	--pkh-shadow:    0 2px 16px rgba(28,61,46,0.08);
	--pkh-shadow-lg: 0 8px 40px rgba(28,61,46,0.14);
	--pkh-radius:    14px;
	--pkh-radius-sm: 10px;
	--pkh-radius-pill:50px;

	/* Layout. Sidebar width matches pkm-sidebar so creators flipping
	   between /pack/dashboard/ and /pack/creator-hub/ get the same rail
	   geometry. */
	--pkh-rail-w:    252px;

	/* Reset a few legacy .pkc-dash styles so the v2 layout takes over
	   cleanly without us having to delete the old CSS in the same release.
	   Edge-to-edge (max-width: none) so the dark sidebar reaches the page
	   edge — same look as pkm-app and what the user is asking for. */
	display: grid;
	grid-template-columns: var(--pkh-rail-w) 1fr;
	min-height: calc(100vh - 32px);
	background: var(--pkh-bg);
	gap: 0;
	color: var(--pkh-text);
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	max-width: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 880px) {
	.pkc-dash--v2 { grid-template-columns: 1fr; }
}

/* =========================================================================
   SIDEBAR (rail) — dark forest green, brand mark, user row, nav, foot link
   ========================================================================= */

.pkc-hub__rail {
	background: var(--pkh-rail-bg);
	color: var(--pkh-white);
	padding: 18px 14px 16px;
	display: flex; flex-direction: column; gap: 14px;
	border-right: 1px solid var(--pkh-rail-border);
	min-width: 0;
}

.pkc-hub__brand {
	display: flex; align-items: center; gap: 10px;
	padding: 4px 6px 12px;
	border-bottom: 1px solid var(--pkh-rail-border);
	color: var(--pkh-white);
	text-decoration: none;
}
.pkc-hub__brand-mark {
	flex: 0 0 auto;
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	background: var(--pkh-rail-surface);
	border-radius: 9px;
	font-size: 18px; line-height: 1;
}
.pkc-hub__brand-text {
	display: flex; flex-direction: column; min-width: 0; line-height: 1.1;
}
.pkc-hub__brand-text strong {
	font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
	color: var(--pkh-white);
}
.pkc-hub__brand-text em {
	font-size: 11px; font-style: normal; font-weight: 600;
	color: rgba(255,255,255,0.6);
	letter-spacing: .04em;
}

/* User row — avatar + name + status pill (the creator-hub version of
   pkm-sidebar__user_tier). */
.pkc-hub__user {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 6px;
	background: var(--pkh-rail-surface);
	border-radius: var(--pkh-radius-sm);
}
.pkc-hub__user-avatar {
	flex: 0 0 auto;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--pkh-primary);
	display: flex; align-items: center; justify-content: center;
	color: var(--pkh-white);
	font-size: 14px; font-weight: 800;
	overflow: hidden;
}
.pkc-hub__user-avatar img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.pkc-hub__user-meta { min-width: 0; }
.pkc-hub__user-name {
	margin: 0; font-size: 13px; font-weight: 800; color: var(--pkh-white);
	line-height: 1.2;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pkc-hub__user-tier {
	margin: 2px 0 0; font-size: 10px; font-weight: 800; letter-spacing: .06em;
	color: var(--pkh-sage);
	display: inline-flex; align-items: center; gap: 6px;
}
.pkc-hub__user-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--pkh-sage);
	box-shadow: 0 0 0 3px rgba(163,213,147,0.18);
}
.pkc-hub__user-tier--paused  { color: #ffd97a; }
.pkc-hub__user-tier--paused  .pkc-hub__user-dot { background: #ffd97a; box-shadow: 0 0 0 3px rgba(255,217,122,0.22); }
.pkc-hub__user-tier--pending { color: rgba(255,255,255,0.6); }
.pkc-hub__user-tier--pending .pkc-hub__user-dot { background: rgba(255,255,255,0.6); box-shadow: none; }
.pkc-hub__user-tier--banned  { color: #ff8b8b; }
.pkc-hub__user-tier--banned  .pkc-hub__user-dot { background: #ff8b8b; box-shadow: 0 0 0 3px rgba(255,139,139,0.22); }

/* Nav — icon box + two-line text + optional badge. */
.pkc-hub__nav {
	display: flex; flex-direction: column; gap: 2px;
	margin-top: 4px;
}
.pkc-hub__nav-item {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 10px;
	background: transparent;
	border: 0;
	border-radius: var(--pkh-radius-sm);
	color: rgba(255,255,255,0.86);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .15s ease;
	min-width: 0;
}
.pkc-hub__nav-item:hover    { background: var(--pkh-rail-hover); }
.pkc-hub__nav-item:focus-visible {
	outline: 2px solid var(--pkh-sage); outline-offset: 2px;
}
.pkc-hub__nav-item.is-active,
.pkc-hub__nav-item[aria-selected="true"] { background: var(--pkh-rail-active); }

.pkc-hub__nav-icon {
	flex: 0 0 auto;
	width: 32px; height: 32px;
	border: 1px solid var(--pkh-rail-border);
	background: var(--pkh-rail-surface);
	border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,0.78);
	transition: color .15s ease, border-color .15s ease;
}
.pkc-hub__nav-icon svg { width: 16px; height: 16px; display: block; }
.pkc-hub__nav-item:hover .pkc-hub__nav-icon { color: var(--pkh-white); }
.pkc-hub__nav-item.is-active .pkc-hub__nav-icon,
.pkc-hub__nav-item[aria-selected="true"] .pkc-hub__nav-icon {
	color: var(--pkh-sage);
	border-color: rgba(163,213,147,0.4);
}

.pkc-hub__nav-text {
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-direction: column; gap: 1px;
}
.pkc-hub__nav-title {
	font-size: 13px; font-weight: 700;
	color: rgba(255,255,255,0.92); line-height: 1.2;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pkc-hub__nav-item.is-active .pkc-hub__nav-title,
.pkc-hub__nav-item[aria-selected="true"] .pkc-hub__nav-title { color: var(--pkh-sage); }
.pkc-hub__nav-desc {
	font-size: 11px; font-weight: 500;
	color: rgba(255,255,255,0.55); line-height: 1.2;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pkc-hub__nav-item:hover .pkc-hub__nav-desc { color: rgba(255,255,255,0.72); }
.pkc-hub__nav-item.is-active .pkc-hub__nav-desc,
.pkc-hub__nav-item[aria-selected="true"] .pkc-hub__nav-desc { color: rgba(163,213,147,0.78); }

.pkc-hub__nav-badge {
	flex: 0 0 auto;
	font-size: 10px; font-weight: 800; letter-spacing: .04em;
	padding: 3px 8px;
	border-radius: var(--pkh-radius-pill);
	background: var(--pkh-rail-surface);
	color: var(--pkh-sage);
	border: 1px solid rgba(163,213,147,0.22);
}

.pkc-hub__rail-foot {
	margin-top: auto;
	padding: 12px 6px 4px;
	border-top: 1px solid var(--pkh-rail-border);
}
.pkc-hub__rail-link {
	display: inline-block;
	font-size: 12px; font-weight: 700;
	color: rgba(255,255,255,0.78);
	text-decoration: none;
}
.pkc-hub__rail-link:hover { color: var(--pkh-white); }

/* =========================================================================
   MAIN — head, sections, generous breathing room
   ========================================================================= */

.pkc-hub__main {
	padding: 28px clamp(16px, 4vw, 48px);
	min-width: 0;
	max-width: 1100px;
}

.pkc-hub__head {
	display: flex; flex-wrap: wrap; gap: 16px;
	align-items: end; justify-content: space-between;
	margin-bottom: 22px;
}
.pkc-hub__head-text { flex: 1 1 auto; min-width: 0; }
.pkc-hub__h1 {
	font-size: 28px; font-weight: 800;
	color: var(--pkh-secondary); letter-spacing: -0.02em;
	margin: 0 0 4px;
}
.pkc-hub__sub {
	font-size: 14px; color: var(--pkh-muted);
	margin: 0; line-height: 1.5;
	max-width: 64ch;
}
.pkc-hub__head-aside {
	display: flex; align-items: center; gap: 8px;
	flex: 0 0 auto;
}

.pkc-hub__section { animation: none; }

/* =========================================================================
   HERO CTA BANNER — orange gradient, state-aware, mirrors pkm-hero-cta
   ========================================================================= */
.pkc-hub-cta {
	display: flex; align-items: center; gap: 18px;
	padding: 20px 22px; margin: 0 0 20px;
	background: linear-gradient(135deg, var(--pkh-primary-dark) 0%, #8B3705 100%);
	border-radius: var(--pkh-radius);
	border: 0;
	color: #FFFFFF;
	text-decoration: none;
	box-shadow: 0 6px 20px -8px rgba(184,74,8,0.55), var(--pkh-shadow);
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	width: 100%;
	transition: transform .15s ease, box-shadow .15s ease;
}
.pkc-hub-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 28px -10px rgba(184,74,8,0.65), var(--pkh-shadow-lg);
	color: #FFFFFF;
}
.pkc-hub-cta:focus-visible {
	outline: 3px solid var(--pkh-accent);
	outline-offset: 3px;
}
.pkc-hub-cta__icon {
	flex: 0 0 auto;
	width: 48px; height: 48px;
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.22);
}
.pkc-hub-cta__icon svg { width: 24px; height: 24px; stroke: #FFFFFF; fill: none; }
.pkc-hub-cta__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pkc-hub-cta__title {
	font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
	color: #FFFFFF;
	text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.pkc-hub-cta__sub {
	font-size: 13.5px; line-height: 1.4;
	color: rgba(255,255,255,0.96);
}
.pkc-hub-cta__arrow {
	flex: 0 0 auto;
	font-size: 22px; line-height: 1; color: #FFFFFF;
	transition: transform .15s ease;
}
.pkc-hub-cta:hover .pkc-hub-cta__arrow { transform: translateX(4px); }

/* =========================================================================
   FOUR OUTCOME CARDS
   Same surface treatment as pkm-hero-card with a left-edge status rail.
   Brand-readiness, public link, audience, collabs.
   ========================================================================= */
.pkc-hub-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-bottom: 24px;
}

.pkc-hub-card {
	position: relative;
	background: var(--pkh-white);
	border: 1px solid var(--pkh-border);
	border-radius: var(--pkh-radius);
	padding: 16px 16px 14px;
	display: flex; flex-direction: column; gap: 8px;
	min-height: 160px;
	overflow: hidden;
}
.pkc-hub-card::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0;
	width: 3px; background: var(--pkh-border);
}
.pkc-hub-card--good::before     { background: var(--pkh-success); }
.pkc-hub-card--progress::before { background: var(--pkh-accent); }
.pkc-hub-card--warn::before     { background: var(--pkh-error); }
.pkc-hub-card--muted::before    { background: var(--pkh-muted); }

.pkc-hub-card__eyebrow {
	font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
	text-transform: uppercase; color: var(--pkh-muted);
	margin: 0;
}
.pkc-hub-card__big-line {
	font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
	color: var(--pkh-secondary); margin: 0;
	line-height: 1.1;
}
.pkc-hub-card__url {
	font-size: 13px; font-weight: 700;
	color: var(--pkh-secondary);
	font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
	background: var(--pkh-surface);
	padding: 6px 10px;
	border-radius: 8px;
	word-break: break-all;
}
.pkc-hub-card__lede {
	font-size: 12.5px; line-height: 1.5;
	color: var(--pkh-text);
	margin: 0;
}

.pkc-hub-card__bar {
	height: 6px; border-radius: 4px;
	background: var(--pkh-surface);
	overflow: hidden;
}
.pkc-hub-card__bar-fill {
	display: block; height: 100%;
	background: linear-gradient(90deg, var(--pkh-primary) 0%, var(--pkh-primary-dark) 100%);
	border-radius: 4px;
	transition: width .4s ease;
}

.pkc-hub-card__link {
	margin-top: auto;
	background: none; border: 0; padding: 0;
	color: var(--pkh-primary); font-weight: 700; font-size: 12.5px;
	text-decoration: none; cursor: pointer;
	font-family: inherit; text-align: left;
}
.pkc-hub-card__link:hover { text-decoration: underline; }

.pkc-hub-card__actions {
	display: flex; gap: 8px;
	margin-top: auto;
	flex-wrap: wrap;
}

/* =========================================================================
   YEAR-SO-FAR PROOF BAND
   ========================================================================= */
.pkc-hub-year {
	background: var(--pkh-surface);
	border: 1px solid var(--pkh-border);
	border-radius: var(--pkh-radius);
	padding: 16px 20px;
	margin: 0 0 24px;
}
.pkc-hub-year__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.pkc-hub-eyebrow {
	font-size: 11px; font-weight: 800; letter-spacing: .08em;
	text-transform: uppercase; color: var(--pkh-muted);
	margin: 0;
}
.pkc-hub-year__day {
	font-size: 11px; font-weight: 800; letter-spacing: .04em;
	padding: 4px 10px; border-radius: var(--pkh-radius-pill);
	background: var(--pkh-secondary); color: var(--pkh-white);
}
.pkc-hub-year__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 14px;
}
.pkc-hub-year__stat {
	display: flex; flex-direction: column; gap: 2px;
}
.pkc-hub-year__stat strong {
	font-size: 24px; font-weight: 800; color: var(--pkh-secondary);
	letter-spacing: -0.02em; line-height: 1;
}
.pkc-hub-year__stat span {
	font-size: 11.5px; color: var(--pkh-muted); font-weight: 600;
}

/* =========================================================================
   FEATURED PETS BLOCK (read view; editing happens in My Pets tab)
   ========================================================================= */
.pkc-hub-block { margin: 0 0 24px; }
.pkc-hub-block__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin-bottom: 12px;
}
.pkc-hub-block__h {
	font-size: 17px; font-weight: 800; color: var(--pkh-secondary);
	margin: 0; letter-spacing: -0.01em;
}
.pkc-hub-block__meta-btn {
	background: none; border: 0; padding: 0;
	font-size: 12px; color: var(--pkh-muted); font-weight: 600;
	font-family: inherit; cursor: pointer;
}
.pkc-hub-block__meta-btn:hover { color: var(--pkh-primary); }

.pkc-hub-pets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}
.pkc-hub-pet {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px;
	background: var(--pkh-white);
	border: 1px solid var(--pkh-border);
	border-radius: var(--pkh-radius);
	transition: border-color .15s ease, transform .15s ease;
}
.pkc-hub-pet:hover { border-color: var(--pkh-primary); transform: translateY(-1px); }
.pkc-hub-pet__avatar {
	flex: 0 0 auto;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--pkh-primary-light);
	color: var(--pkh-primary);
	display: flex; align-items: center; justify-content: center;
	font-size: 16px; font-weight: 800;
	overflow: hidden;
}
.pkc-hub-pet__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkc-hub-pet__body { flex: 1 1 auto; min-width: 0; }
.pkc-hub-pet__name {
	font-size: 14px; font-weight: 800; color: var(--pkh-secondary);
	margin: 0; line-height: 1.2;
}
.pkc-hub-pet__meta {
	font-size: 12px; color: var(--pkh-muted);
	margin: 2px 0 0;
}
.pkc-hub-pet__verified {
	flex: 0 0 auto;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--pkh-success-light);
	color: var(--pkh-success);
	display: flex; align-items: center; justify-content: center;
}
.pkc-hub-pet__verified svg { width: 14px; height: 14px; }

.pkc-hub-empty {
	background: var(--pkh-white);
	border: 1px dashed var(--pkh-border);
	border-radius: var(--pkh-radius);
	padding: 20px;
	text-align: center;
	color: var(--pkh-text);
}
.pkc-hub-empty p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }

/* =========================================================================
   BOTTOM PITCH — adapts: "complete your profile" or "promote your link"
   ========================================================================= */
.pkc-hub-pitch {
	background: var(--pkh-white);
	border: 1px solid var(--pkh-border);
	border-left: 4px solid var(--pkh-primary);
	border-radius: var(--pkh-radius);
	padding: 22px 24px;
	margin-top: 8px;
	box-shadow: var(--pkh-shadow);
}
.pkc-hub-pitch--ready { border-left-color: var(--pkh-success); }
.pkc-hub-pitch__head { margin-bottom: 14px; }
.pkc-hub-pitch__head .pkc-hub-eyebrow { display: block; margin-bottom: 6px; }
.pkc-hub-pitch__h {
	font-size: 20px; font-weight: 800; color: var(--pkh-secondary);
	letter-spacing: -0.01em;
	margin: 0 0 6px;
}
.pkc-hub-pitch__lede {
	font-size: 13.5px; color: var(--pkh-text);
	margin: 0; line-height: 1.5;
}
.pkc-hub-pitch__perks {
	list-style: none; padding: 0; margin: 14px 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
}
.pkc-hub-pitch__perks li {
	display: flex; align-items: center; gap: 10px;
	font-size: 13px; color: var(--pkh-text); font-weight: 600;
}
.pkc-hub-pitch__check {
	flex: 0 0 auto; width: 18px; height: 18px;
	color: var(--pkh-primary);
}
.pkc-hub-pitch--ready .pkc-hub-pitch__check { color: var(--pkh-success); }
.pkc-hub-pitch__cta {
	display: flex; align-items: center; gap: 14px;
	flex-wrap: wrap;
	margin-top: 8px;
}
.pkc-hub-pitch__cta-note {
	font-size: 12.5px; color: var(--pkh-muted);
	text-decoration: none; font-weight: 700;
}
.pkc-hub-pitch__cta-note:hover { color: var(--pkh-primary); text-decoration: underline; }

/* =========================================================================
   Small button modifier (.pkc-btn--sm) — already exists in section 8 for
   the form footers. Re-asserting here so the outcome-card buttons get the
   compact size even if section 8 ever changes.
   ========================================================================= */
.pkc-dash--v2 .pkc-btn--sm {
	padding: 8px 14px;
	font-size: 13px;
}

/* =========================================================================
   Suppress legacy section-5 sidebar/topbar styles inside v2 — they conflict
   with the new layout (cream sidebar would still leak through). Defensive.
   ========================================================================= */
.pkc-dash--v2 .pkc-dash__sidebar,
.pkc-dash--v2 .pkc-dash__topbar { display: none !important; }

/* =========================================================================
   v0.6.0  —  PUBLIC DIRECTORY  (/creators/browse/)
   =========================================================================
   Lives inside theme chrome (get_header/get_footer), so the root element has
   class="pkc pkc-directory" — the .pkc gives us the design-token variables.
   Mobile-first; sidebar collapses above the grid on narrow screens.
   ========================================================================= */
.pkc-directory {
	max-width: 1180px;
	margin: 0 auto;
	padding: 32px 20px 64px;
	color: var(--pkc-color-text);
	font: 16px/1.5 var(--pkc-font);
}
.pkc-directory__hero {
	margin: 0 0 28px;
	text-align: left;
}
.pkc-directory__eyebrow {
	margin: 0 0 6px;
	font: 600 12px/1 var(--pkc-font);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pkc-color-muted);
}
.pkc-directory__h1 {
	margin: 0 0 10px;
	font: 700 30px/1.15 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-directory__lede {
	margin: 0 0 6px;
	font-size: 17px;
	color: var(--pkc-color-text);
}
.pkc-directory__hero-meta {
	margin: 0;
	max-width: 70ch;
	color: var(--pkc-color-muted);
	font-size: 14px;
}

.pkc-directory__layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 32px;
	align-items: start;
}
@media (max-width: 800px) {
	.pkc-directory__layout { grid-template-columns: 1fr; }
}

/* ---------- Filter sidebar ---------- */
.pkc-directory__filters {
	position: sticky;
	top: 24px;
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
	padding: 20px;
	box-shadow: var(--pkc-shadow-sm);
}
.pkc-directory__filter-group {
	margin: 0 0 20px;
}
.pkc-directory__filter-group:last-of-type { margin-bottom: 12px; }
.pkc-directory__filter-h {
	margin: 0 0 10px;
	font: 600 13px/1 var(--pkc-font);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pkc-color-muted);
}
.pkc-directory__select {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--pkc-color-border-strong);
	border-radius: var(--pkc-radius);
	background: #fff;
	font: 15px var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-directory__niche-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.pkc-directory__niche-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border: 1px solid var(--pkc-color-border-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--pkc-color-text);
	font: 500 13px/1.2 var(--pkc-font);
	text-decoration: none;
}
.pkc-directory__niche-chip:hover {
	border-color: var(--pkc-color-primary);
	color: var(--pkc-color-primary);
}
.pkc-directory__niche-chip.is-active {
	background: var(--pkc-color-primary);
	border-color: var(--pkc-color-primary);
	color: #fff;
}
.pkc-directory__niche-x {
	display: inline-block;
	width: 14px; height: 14px;
	line-height: 14px;
	text-align: center;
	font-weight: 700;
}
.pkc-directory__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
	background: #fff;
	cursor: pointer;
	font-size: 14px;
}
.pkc-directory__toggle input { width: 18px; height: 18px; }
.pkc-directory__clear {
	display: inline-block;
	margin-top: 4px;
	color: var(--pkc-color-link);
	font-size: 13px;
	text-decoration: none;
}
.pkc-directory__clear:hover { text-decoration: underline; }

.pkc-directory__signup {
	margin-top: 18px;
	padding: 14px;
	border: 1px dashed var(--pkc-color-border-strong);
	border-radius: var(--pkc-radius);
	background: #fff8ee;
	font-size: 13px;
}
.pkc-directory__signup p { margin: 0 0 8px; }
.pkc-directory__signup p:last-of-type { margin-bottom: 10px; }

/* ---------- Results grid ---------- */
.pkc-directory__results { min-width: 0; /* allow grid items to shrink */ }
.pkc-directory__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
}
.pkc-directory__card {
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
	overflow: hidden;
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pkc-directory__card:hover {
	border-color: var(--pkc-color-primary);
	box-shadow: var(--pkc-shadow-md);
	transform: translateY(-2px);
}
.pkc-directory__card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.pkc-directory__card-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, #f4f2eb 0%, #e8e6df 100%);
	overflow: hidden;
}
.pkc-directory__card-photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.pkc-directory__card-photo--placeholder {
	display: flex; align-items: center; justify-content: center;
	font-size: 48px;
}
.pkc-directory__card-body {
	padding: 14px 16px 16px;
}
.pkc-directory__card-name {
	margin: 0 0 4px;
	font: 700 17px/1.25 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-directory__card-blurb {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--pkc-color-muted);
}
.pkc-directory__card-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
	gap: 8px 12px;
	margin: 0 0 10px;
}
.pkc-directory__card-stats > div { margin: 0; min-width: 0; }
.pkc-directory__card-stats dt {
	margin: 0;
	font-size: 11px;
	color: var(--pkc-color-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.pkc-directory__card-stats dd {
	margin: 1px 0 0;
	font: 700 14px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-directory__card-niches {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.pkc-directory__card-niches li {
	padding: 3px 8px;
	border-radius: 999px;
	background: #f4f2eb;
	color: var(--pkc-color-muted);
	font-size: 11px;
	font-weight: 600;
}
.pkc-directory__card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.pkc-directory__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 999px;
	font: 600 11px/1.2 var(--pkc-font);
}
.pkc-directory__badge--verified {
	background: #e6f4ee;
	color: #1f4a3d;
}
.pkc-directory__badge--collabs {
	background: #fff1d6;
	color: #7a4a05;
}

/* ---------- Empty state + pagination ---------- */
.pkc-directory__empty {
	padding: 48px 24px;
	text-align: center;
	background: var(--pkc-color-card);
	border: 1px dashed var(--pkc-color-border-strong);
	border-radius: var(--pkc-radius-lg);
}
.pkc-directory__empty h2 { margin: 0 0 8px; font-size: 20px; }
.pkc-directory__empty p { margin: 0 0 18px; color: var(--pkc-color-muted); }

.pkc-directory__pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin: 28px 0 0;
	padding: 14px 0;
	border-top: 1px solid var(--pkc-color-border);
}
.pkc-directory__page-link {
	color: var(--pkc-color-link);
	text-decoration: none;
	font-weight: 600;
}
.pkc-directory__page-link:hover { text-decoration: underline; }
.pkc-directory__page-meta {
	color: var(--pkc-color-muted);
	font-size: 14px;
}

/* =========================================================================
   v0.6.0  —  STATS analytics widget  (dashboard Stats section)
   =========================================================================
   Builds on the existing .pkc-stats-grid / .pkc-stat-card primitives. New
   sub-blocks: sparkline, top-links table, referrers list.
   ========================================================================= */
.pkc-stat-card__sub {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--pkc-color-muted);
}

.pkc-stats-spark {
	margin: 24px 0;
	padding: 20px;
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
}
.pkc-stats-spark__h {
	margin: 0 0 12px;
	font: 600 14px/1 var(--pkc-font);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pkc-color-muted);
}
.pkc-stats-spark__svg {
	width: 100%;
	height: 80px;
	display: block;
}
.pkc-stats-spark__line {
	fill: none;
	stroke: var(--pkc-color-primary);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.pkc-stats-spark__area {
	fill: rgba(42, 93, 77, 0.10);
	stroke: none;
}
.pkc-stats-spark__axis {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 11px;
	color: var(--pkc-color-muted);
	font-variant-numeric: tabular-nums;
}
.pkc-stats-spark__empty {
	padding: 18px;
	text-align: center;
	color: var(--pkc-color-muted);
	font-size: 14px;
	background: #f9f8f3;
	border-radius: var(--pkc-radius);
}

.pkc-stats-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 18px 0;
}
@media (max-width: 720px) {
	.pkc-stats-row { grid-template-columns: 1fr; }
}
.pkc-stats-block {
	padding: 18px 20px;
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
}
.pkc-stats-block__h {
	margin: 0 0 12px;
	font: 700 15px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-stats-block__empty {
	margin: 0;
	color: var(--pkc-color-muted);
	font-size: 13px;
	line-height: 1.5;
}

.pkc-stats-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.pkc-stats-table td {
	padding: 8px 0;
	border-bottom: 1px solid var(--pkc-color-border);
	vertical-align: top;
}
.pkc-stats-table tr:last-child td { border-bottom: none; }
.pkc-stats-table__label {
	color: var(--pkc-color-text);
	font-weight: 600;
}
.pkc-stats-table__url {
	display: block;
	margin-top: 2px;
	font: 400 12px/1.2 var(--pkc-font-mono);
	color: var(--pkc-color-muted);
	word-break: break-all;
}
.pkc-stats-table__count {
	width: 60px;
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--pkc-color-primary);
}

.pkc-stats-refs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pkc-stats-refs__row {
	display: grid;
	grid-template-columns: 110px 1fr 50px;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}
.pkc-stats-refs__label { color: var(--pkc-color-text); font-weight: 600; }
.pkc-stats-refs__bar {
	display: block;
	height: 8px;
	background: #f1efe7;
	border-radius: 999px;
	overflow: hidden;
}
.pkc-stats-refs__bar-fill {
	display: block;
	height: 100%;
	background: var(--pkc-color-primary);
	border-radius: 999px;
}
.pkc-stats-refs__count {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--pkc-color-muted);
}

.pkc-stats-note {
	margin: 18px 0 0;
	padding: 12px 14px;
	background: #f9f8f3;
	border-radius: var(--pkc-radius);
	color: var(--pkc-color-muted);
	font-size: 12px;
	line-height: 1.5;
}

/* =========================================================================
   v0.2.0  —  AUTH PAGES (split-screen login / register / forgot / reset)
   =========================================================================
   Layout: dark forest-green left (selling points + testimonial) + cream
   right (form). Stacks on phones (left below right) so the form is the
   first thing seen on mobile.
   ========================================================================= */

/* Auth uses its own design tokens layered on top of the plugin's base. */
body.pkc-auth-body {
	--pka-bg-dark:    #1f4a3d;
	--pka-bg-dark-2:  #163528;
	--pka-bg-cream:   #fff8ee;
	--pka-text:       #1f1e1c;
	--pka-muted:      #6b6862;
	--pka-border:     #e8e6df;
	--pka-yellow:     #f3c34b;
	--pka-orange:     #e0651a;
	--pka-orange-hov: #b9531a;
	--pka-green:      #2a5d4d;

	margin: 0;
	background: var(--pka-bg-cream);
	color: var(--pka-text);
	font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.pkc-auth-body *,
body.pkc-auth-body *::before,
body.pkc-auth-body *::after { box-sizing: border-box; }

.pkc-auth {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
}
@media (max-width: 900px) {
	.pkc-auth { grid-template-columns: 1fr; }
}

/* ---------- LEFT PANEL (dark, marketing) ---------- */
.pkc-auth__left {
	background: linear-gradient(160deg, var(--pka-bg-dark) 0%, var(--pka-bg-dark-2) 100%);
	color: #fff;
	padding: 56px 56px 48px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: relative;
	overflow: hidden;
}
.pkc-auth__left::after {
	/* subtle paw-glow decoration */
	content: '';
	position: absolute;
	top: 15%; right: -120px;
	width: 320px; height: 320px;
	background: radial-gradient(circle, rgba(243,195,75,0.10) 0%, transparent 70%);
	pointer-events: none;
}
@media (max-width: 900px) {
	.pkc-auth__left { padding: 32px 22px 36px; gap: 16px; order: 2; }
}

.pkc-auth__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.16);
	color: rgba(255,255,255,0.92);
	font: 600 11px/1 inherit;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	width: max-content;
	text-decoration: none;
	max-width: 100%;
}
.pkc-auth__eyebrow:hover { background: rgba(255,255,255,0.12); color: #fff; }
.pkc-auth__eyebrow-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--pka-yellow);
}
.pkc-auth__eyebrow--link { padding-left: 10px; }

.pkc-auth__headline {
	margin: 8px 0 0;
	font: 700 44px/1.1 inherit;
	color: #fff;
	letter-spacing: -0.01em;
}
.pkc-auth__headline-em {
	color: var(--pka-yellow);
	font-style: italic;
	font-weight: 700;
}
@media (max-width: 900px) {
	.pkc-auth__headline { font-size: 32px; }
}

.pkc-auth__lede {
	margin: 0;
	max-width: 44ch;
	color: rgba(255,255,255,0.78);
	font-size: 16px;
	line-height: 1.55;
}

/* Feature cards */
.pkc-auth__cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
}
.pkc-auth__card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 14px;
	transition: background .15s ease, border-color .15s ease;
}
.pkc-auth__card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); }
.pkc-auth__card-icon {
	display: inline-flex;
	width: 40px; height: 40px;
	align-items: center; justify-content: center;
	border-radius: 10px;
	background: rgba(243,195,75,0.18);
	color: var(--pka-yellow);
	flex-shrink: 0;
}
.pkc-auth__card-icon svg { width: 22px; height: 22px; }
.pkc-auth__card-icon--search { background: rgba(120,200,240,0.18); color: #88c8f0; }
.pkc-auth__card-icon--chart  { background: rgba(120,230,170,0.18); color: #8cd9ad; }
.pkc-auth__card-icon--pack   { background: rgba(255,160,100,0.18); color: #ffa674; }
.pkc-auth__card-body { flex: 1; min-width: 0; }
.pkc-auth__card-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 2px;
}
.pkc-auth__card-title {
	color: #fff;
	font: 600 15px/1.2 inherit;
}
.pkc-auth__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: 999px;
	font: 700 10px/1 inherit;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.pkc-auth__badge--new  { background: var(--pka-yellow); color: #3a2a00; }
.pkc-auth__badge--live { background: #2a8a5e; color: #fff; }
.pkc-auth__card-lede {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: rgba(255,255,255,0.62);
}

/* Testimonial card */
.pkc-auth__testimonial {
	margin-top: auto;
	padding: 18px;
	background: rgba(0,0,0,0.18);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px;
}
.pkc-auth__testimonial-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.pkc-auth__testimonial-tag {
	font: 700 11px/1 inherit;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pka-yellow);
}
.pkc-auth__testimonial-stars {
	display: inline-flex;
	color: var(--pka-yellow);
	gap: 1px;
}
.pkc-auth__testimonial-quote {
	margin: 0 0 12px;
	font-style: italic;
	color: rgba(255,255,255,0.95);
	font-size: 15px;
	line-height: 1.45;
}
.pkc-auth__testimonial-author {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pkc-auth__testimonial-avatar {
	display: inline-flex;
	width: 32px; height: 32px;
	align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--pka-orange);
	color: #fff;
	font: 700 12px/1 inherit;
}
.pkc-auth__testimonial-author strong { color: #fff; font-size: 14px; display: block; }
.pkc-auth__testimonial-author em     { color: rgba(255,255,255,0.55); font-size: 12px; font-style: normal; }

/* ---------- RIGHT PANEL (cream, form) ---------- */
.pkc-auth__right {
	padding: 56px 56px 48px;
	display: flex;
	flex-direction: column;
	background: var(--pka-bg-cream);
	overflow-y: auto;
}
@media (max-width: 900px) {
	.pkc-auth__right { padding: 32px 22px; order: 1; }
}

.pkc-auth__brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 auto 32px;
	color: var(--pka-text);
	text-decoration: none;
	font-weight: 700;
}
.pkc-auth__brand img { max-height: 44px; width: auto; }
.pkc-auth__brand-mark {
	display: inline-flex;
	width: 36px; height: 36px;
	background: var(--pka-orange);
	color: #fff;
	border-radius: 10px;
	align-items: center; justify-content: center;
	font-size: 18px;
}
.pkc-auth__brand-text { font-size: 18px; }

.pkc-auth__form-wrap {
	max-width: 420px;
	width: 100%;
	margin: 0 auto;
}

/* Tabs */
.pkc-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	background: #ece9e0;
	border-radius: 999px;
	margin-bottom: 28px;
}
.pkc-auth__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border-radius: 999px;
	color: var(--pka-muted);
	font: 600 14px/1 inherit;
	text-decoration: none;
	transition: background .12s ease, color .12s ease;
}
.pkc-auth__tab:hover { color: var(--pka-text); }
.pkc-auth__tab.is-active {
	background: #fff;
	color: var(--pka-text);
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Intro headline (right side) */
.pkc-auth__intro {
	margin-bottom: 20px;
}
.pkc-auth__intro--icon { text-align: center; }
.pkc-auth__h2 {
	margin: 0 0 6px;
	font: 700 32px/1.15 inherit;
	color: var(--pka-green);
	letter-spacing: -0.01em;
}
.pkc-auth__h2 em {
	color: var(--pka-orange);
	font-style: italic;
}
.pkc-auth__sub {
	margin: 0;
	color: var(--pka-muted);
	font-size: 15px;
}
.pkc-auth__sub a { color: var(--pka-orange); text-decoration: none; font-weight: 600; }
.pkc-auth__sub a:hover { text-decoration: underline; }
.pkc-auth__sub--center { text-align: center; margin-top: 14px; }

/* Big icon (check-email / verified) */
.pkc-auth__big-icon {
	display: inline-flex;
	width: 84px; height: 84px;
	align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(224,101,26,0.12);
	color: var(--pka-orange);
	margin-bottom: 12px;
}
.pkc-auth__big-icon--success {
	background: rgba(42,138,94,0.12);
	color: #2a8a5e;
}

/* Chips (register page) */
.pkc-auth__chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 14px 0 18px;
	padding: 0;
}
.pkc-auth__chips li {
	padding: 6px 12px;
	border-radius: 999px;
	background: #f1ede2;
	font-size: 13px;
	font-weight: 600;
	color: var(--pka-text);
}

/* Google button */
.pkc-auth__google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--pka-border);
	border-radius: 10px;
	color: var(--pka-text);
	font: 600 14px/1 inherit;
	text-decoration: none;
	margin-bottom: 18px;
}
.pkc-auth__google:hover { border-color: #999; }

.pkc-auth__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0 18px;
	font: 700 10px/1 inherit;
	letter-spacing: 0.15em;
	color: var(--pka-muted);
}
.pkc-auth__divider::before,
.pkc-auth__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--pka-border);
}

/* Form fields */
.pkc-auth__form { display: flex; flex-direction: column; gap: 16px; }
.pkc-auth__field { display: flex; flex-direction: column; }
.pkc-auth__label {
	margin-bottom: 6px;
	font: 700 11px/1 inherit;
	letter-spacing: 0.08em;
	color: var(--pka-muted);
	text-transform: uppercase;
}
.pkc-auth__input {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--pka-border);
	border-radius: 10px;
	font: 15px/1.3 inherit;
	color: var(--pka-text);
	transition: border-color .12s ease, box-shadow .12s ease;
}
.pkc-auth__input:focus {
	outline: 0;
	border-color: var(--pka-orange);
	box-shadow: 0 0 0 3px rgba(224,101,26,0.12);
}
.pkc-auth__input[disabled], .pkc-auth__input[readonly] {
	background: #f4f1e7;
	color: var(--pka-muted);
}
.pkc-auth__input--select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231f1e1c' stroke-width='1.6' stroke-linecap='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	appearance: none;
	-webkit-appearance: none;
	padding-right: 36px;
}
.pkc-auth__textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.pkc-auth__input-wrap { position: relative; }
.pkc-auth__pw-toggle {
	position: absolute;
	right: 8px; top: 50%;
	transform: translateY(-50%);
	width: 36px; height: 36px;
	border: 0; background: none;
	color: var(--pka-muted);
	cursor: pointer;
	border-radius: 6px;
}
.pkc-auth__pw-toggle:hover { color: var(--pka-text); background: rgba(0,0,0,0.04); }

.pkc-auth__hint {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--pka-muted);
}

/* Handle field with prefix */
.pkc-auth__handle {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--pka-border);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}
.pkc-auth__handle:focus-within { border-color: var(--pka-orange); box-shadow: 0 0 0 3px rgba(224,101,26,0.12); }
.pkc-auth__handle-prefix {
	display: flex;
	align-items: center;
	padding: 0 12px;
	background: #f4f1e7;
	color: var(--pka-muted);
	font: 500 14px/1 ui-monospace, monospace;
	border-right: 1px solid var(--pka-border);
}
.pkc-auth__input--handle { border: 0 !important; box-shadow: none !important; flex: 1; }

/* Inline rows */
.pkc-auth__row { display: flex; align-items: center; gap: 12px; }
.pkc-auth__row--between { justify-content: space-between; }
.pkc-auth__row--actions {
	justify-content: space-between;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--pka-border);
}
.pkc-auth__remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--pka-muted);
	cursor: pointer;
}
.pkc-auth__remember input { width: 16px; height: 16px; cursor: pointer; }
.pkc-auth__link {
	color: var(--pka-orange);
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
}
.pkc-auth__link:hover { text-decoration: underline; }

/* T&C checkbox */
.pkc-auth__tos {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
	color: var(--pka-muted);
	line-height: 1.45;
}
.pkc-auth__tos input { margin-top: 3px; width: 16px; height: 16px; cursor: pointer; }
.pkc-auth__tos a { color: var(--pka-orange); text-decoration: none; font-weight: 600; }
.pkc-auth__tos a:hover { text-decoration: underline; }

/* Submit button */
.pkc-auth__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	padding: 12px 18px;
	background: var(--pka-orange);
	color: #fff;
	border: 0;
	border-radius: 12px;
	font: 700 15px/1 inherit;
	cursor: pointer;
	margin-top: 4px;
	transition: background .12s ease, transform .08s ease;
	text-decoration: none;
}
.pkc-auth__submit:hover { background: var(--pka-orange-hov); }
.pkc-auth__submit:active { transform: translateY(1px); }
.pkc-auth__submit--success { background: #2a8a5e; }
.pkc-auth__submit--success:hover { background: #1f6d49; }

/* Trust footer */
.pkc-auth__trust {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 14px 0 0;
	color: var(--pka-muted);
	font-size: 12px;
}
.pkc-auth__trust svg { opacity: 0.7; }

/* Social proof (register) */
.pkc-auth__social-proof {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--pka-border);
	border-radius: 10px;
	font-size: 13px;
	color: var(--pka-text);
}
.pkc-auth__social-stack { display: inline-flex; }
.pkc-auth__social-stack span {
	display: inline-flex;
	width: 26px; height: 26px;
	margin-right: -8px;
	border: 2px solid #fff;
	border-radius: 50%;
	align-items: center; justify-content: center;
	font: 700 10px/1 inherit;
	color: #fff;
}

/* Alerts */
.pkc-auth__alert {
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 14px;
	margin-bottom: 16px;
}
.pkc-auth__alert--error  { background: #fdecea; color: #a32218; border: 1px solid #f5c6c2; }
.pkc-auth__alert--notice { background: #e9f3ec; color: #1f5733; border: 1px solid #b9dfc4; }

/* Steps list (check-email page) */
.pkc-auth__steps ol { list-style: none; padding: 0; margin: 28px 0 24px; }
.pkc-auth__steps li {
	display: flex;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--pka-border);
}
.pkc-auth__steps li:last-child { border-bottom: none; }
.pkc-auth__steps strong { display: block; font-size: 14px; color: var(--pka-text); }
.pkc-auth__steps p      { margin: 2px 0 0; font-size: 13px; color: var(--pka-muted); line-height: 1.45; }
.pkc-auth__step-num {
	display: inline-flex;
	width: 28px; height: 28px;
	align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(224,101,26,0.12);
	color: var(--pka-orange);
	font: 700 13px/1 inherit;
	flex-shrink: 0;
}

/* =========================================================================
   v0.2.0  —  ONBOARDING (3-step + done)
   ========================================================================= */

body.pkc-onboard-body {
	--pko-bg:        #fff8ee;
	--pko-card:      #fff;
	--pko-text:      #1f1e1c;
	--pko-muted:     #6b6862;
	--pko-border:    #e8e6df;
	--pko-orange:    #e0651a;
	--pko-orange-hov:#b9531a;
	--pko-green:     #2a5d4d;
	--pko-yellow:    #f3c34b;

	margin: 0;
	background: var(--pko-bg);
	color: var(--pko-text);
	font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.pkc-onboard-body *, body.pkc-onboard-body *::before, body.pkc-onboard-body *::after { box-sizing: border-box; }

.pkc-onboard {
	max-width: 760px;
	margin: 0 auto;
	padding: 28px 22px 64px;
	min-height: 100vh;
}

.pkc-onboard__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 36px;
	flex-wrap: wrap;
}
.pkc-onboard__brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--pko-text);
	text-decoration: none;
	font-weight: 700;
	font-size: 17px;
	flex-shrink: 0;
}
.pkc-onboard__brand-mark {
	display: inline-flex;
	width: 32px; height: 32px;
	background: var(--pko-orange);
	color: #fff;
	border-radius: 8px;
	align-items: center; justify-content: center;
	font-size: 17px;
}

.pkc-onboard__steps {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1;
	min-width: 0;
	justify-content: center;
}
.pkc-onboard__steps li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	color: var(--pko-muted);
	font: 600 12px/1 inherit;
	background: transparent;
	border: 1px solid transparent;
}
.pkc-onboard__steps li span {
	display: inline-flex;
	width: 22px; height: 22px;
	align-items: center; justify-content: center;
	border-radius: 50%;
	background: #ece9e0;
	color: var(--pko-muted);
	font-size: 12px;
}
.pkc-onboard__steps li.is-active {
	color: var(--pko-text);
	background: #fff;
	border-color: var(--pko-border);
}
.pkc-onboard__steps li.is-active span {
	background: var(--pko-orange);
	color: #fff;
}
.pkc-onboard__steps li.is-done span {
	background: #2a8a5e;
	color: #fff;
}
.pkc-onboard__skip {
	color: var(--pko-muted);
	font-size: 13px;
	text-decoration: none;
}
.pkc-onboard__skip:hover { color: var(--pko-text); text-decoration: underline; }
@media (max-width: 640px) {
	.pkc-onboard__steps li:not(.is-active) span + * { display: none; }
	.pkc-onboard__skip { width: 100%; text-align: center; order: 99; }
}

.pkc-onboard__step {
	background: var(--pko-card);
	border: 1px solid var(--pko-border);
	border-radius: 18px;
	padding: 40px 36px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
@media (max-width: 640px) {
	.pkc-onboard__step { padding: 28px 22px; }
}

.pkc-onboard__eyebrow {
	margin: 0 0 8px;
	font: 700 11px/1 inherit;
	letter-spacing: 0.12em;
	color: var(--pko-orange);
	text-transform: uppercase;
}
.pkc-onboard__h1 {
	margin: 0 0 8px;
	font: 700 30px/1.15 inherit;
	color: var(--pko-green);
	letter-spacing: -0.01em;
}
.pkc-onboard__h1 em {
	color: var(--pko-orange);
	font-style: italic;
}
.pkc-onboard__sub {
	margin: 0 0 28px;
	color: var(--pko-muted);
	font-size: 15px;
	line-height: 1.55;
	max-width: 60ch;
}

.pkc-onboard__form { display: flex; flex-direction: column; gap: 18px; }
.pkc-onboard__grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 14px;
}
@media (max-width: 480px) {
	.pkc-onboard__grid { grid-template-columns: 1fr; }
}

/* Niche chip grid (multi-select) */
.pkc-onboard__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 2px 0 0;
}
.pkc-onboard__chip {
	display: inline-flex;
	cursor: pointer;
}
.pkc-onboard__chip input { display: none; }
.pkc-onboard__chip span {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border: 1px solid var(--pko-border);
	border-radius: 999px;
	background: #fff;
	color: var(--pko-text);
	font: 500 13px/1.2 inherit;
	transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.pkc-onboard__chip span:hover { border-color: var(--pko-orange); }
.pkc-onboard__chip.is-active span,
.pkc-onboard__chip input:checked + span {
	background: var(--pko-orange);
	border-color: var(--pko-orange);
	color: #fff;
}

/* Platforms grid */
.pkc-onboard__platforms {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pkc-onboard__platform-row {
	display: grid;
	grid-template-columns: 180px 1fr 130px;
	gap: 10px;
}
@media (max-width: 580px) {
	.pkc-onboard__platform-row { grid-template-columns: 1fr; }
}

.pkc-onboard__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 14px;
	padding-top: 18px;
	border-top: 1px solid var(--pko-border);
}
.pkc-onboard__actions .pkc-auth__submit { width: auto; flex: 0 0 auto; min-width: 180px; }
@media (max-width: 480px) {
	.pkc-onboard__actions { flex-direction: column-reverse; align-items: stretch; }
	.pkc-onboard__actions .pkc-auth__submit { width: 100%; }
}

/* ---------- Done page ---------- */
.pkc-onboard__main--done .pkc-onboard__step,
.pkc-onboard__success { text-align: center; }
.pkc-onboard__success-icon {
	display: inline-flex;
	width: 96px; height: 96px;
	align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(42,138,94,0.15);
	color: #2a8a5e;
	margin: 0 auto 16px;
}
.pkc-onboard__url-card {
	display: flex;
	gap: 12px;
	align-items: stretch;
	margin: 28px 0 36px;
	padding: 16px;
	background: #fff8ee;
	border: 1px dashed var(--pko-orange);
	border-radius: 14px;
}
@media (max-width: 580px) {
	.pkc-onboard__url-card { flex-direction: column; align-items: stretch; }
}
.pkc-onboard__url-box {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;
	min-width: 0;
}
.pkc-onboard__url-label {
	font: 700 10px/1 inherit;
	letter-spacing: 0.12em;
	color: var(--pko-muted);
	text-transform: uppercase;
}
.pkc-onboard__url {
	font: 700 17px/1.2 ui-monospace, "SFMono-Regular", monospace;
	color: var(--pko-green);
	word-break: break-all;
}
.pkc-onboard__copy-btn { width: auto !important; min-width: 140px; flex: 0 0 auto; align-self: center; }

.pkc-onboard__next {
	text-align: left;
	margin: 32px 0;
}
.pkc-onboard__next h2 {
	margin: 0 0 14px;
	font: 700 18px/1.2 inherit;
}
.pkc-onboard__next ol {
	counter-reset: step;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.pkc-onboard__next li {
	counter-increment: step;
	padding-left: 44px;
	position: relative;
}
.pkc-onboard__next li::before {
	content: counter(step);
	position: absolute; left: 0; top: 0;
	width: 30px; height: 30px;
	background: var(--pko-orange);
	color: #fff;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font: 700 13px/1 inherit;
}
.pkc-onboard__next strong { display: block; font-size: 14px; }
.pkc-onboard__next p      { margin: 2px 0 0; color: var(--pko-muted); font-size: 13px; line-height: 1.5; }

.pkc-onboard__cta-row {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.pkc-onboard__cta-row .pkc-auth__submit { width: auto; flex: 0 0 auto; }

/* =========================================================================
   v0.2.0  —  DASHBOARD POLISH (sidebar handle line + tier styling + NEW badge)
   ========================================================================= */

/* @handle line below the display name in the sidebar */
.pkc-hub__user-handle {
	margin: 1px 0 6px;
	font: 500 12px/1.2 var(--pkc-font);
	color: rgba(255,255,255,0.55);
	letter-spacing: 0;
}

/* Plan tier pills — replaces the status pills as the primary identifier */
.pkc-hub__user-tier--free .pkc-hub__user-dot    { background: #9aa39b; }
.pkc-hub__user-tier--pro .pkc-hub__user-dot     { background: #f3c34b; }
.pkc-hub__user-tier--pro_max .pkc-hub__user-dot { background: #ffa831; }

.pkc-hub__user-tier--pro,
.pkc-hub__user-tier--pro_max {
	color: #f3c34b;
}

/* NEW / LIVE label badges on nav items (vs numeric count badges) */
.pkc-hub__nav-badge {
	min-width: 22px;
	text-align: center;
}
/* Make text-y badges look like pills, not number counters. */
.pkc-hub__nav-item .pkc-hub__nav-badge:not(:empty) {
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
   v0.4.0  —  MARKETING PAGES (pricing / about / how / contact / faq / terms / privacy)
   =========================================================================
   Build on top of .pkc-landing tokens. The marketing pages wrap in
   get_header/get_footer so they live inside theme chrome.
   ========================================================================= */

.pkc-marketing { color: var(--pkc-color-text); }

.pkc-marketing__hero {
	/* Slimmer hero than the /creators/ landing — no phone preview, just text. */
	display: block;
	max-width: 760px;
	margin: 0 auto;
	padding: 56px 24px 32px;
	text-align: left;
}
@media (max-width: 640px) {
	.pkc-marketing__hero { padding: 36px 18px 24px; }
}

/* ---------- Pricing ---------- */
.pkc-pricing__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	max-width: 920px;
	margin: 0 auto;
	padding: 0 20px;
}
@media (max-width: 760px) {
	.pkc-pricing__grid { grid-template-columns: 1fr; gap: 16px; }
}
.pkc-pricing__card {
	position: relative;
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
	padding: 28px 26px 24px;
	display: flex;
	flex-direction: column;
}
.pkc-pricing__card--featured {
	border: 2px solid var(--pkc-color-primary);
	box-shadow: 0 6px 30px rgba(42, 93, 77, 0.12);
	background: linear-gradient(180deg, #ffffff 0%, #fff8ee 100%);
}
.pkc-pricing__ribbon {
	position: absolute;
	top: 14px; right: 14px;
	padding: 4px 10px;
	background: var(--pkc-color-accent);
	color: #3a2a00;
	font: 700 10px/1 var(--pkc-font);
	letter-spacing: 0.1em;
	border-radius: 999px;
}
.pkc-pricing__tier {
	margin: 0 0 8px;
	font: 700 13px/1 var(--pkc-font);
	letter-spacing: 0.14em;
	color: var(--pkc-color-muted);
	text-transform: uppercase;
}
.pkc-pricing__price {
	margin: 0 0 6px;
	font: 700 42px/1.05 var(--pkc-font);
	letter-spacing: -0.01em;
	color: var(--pkc-color-primary);
}
.pkc-pricing__price span {
	font: 500 14px/1 var(--pkc-font);
	color: var(--pkc-color-muted);
	margin-left: 4px;
}
.pkc-pricing__sub {
	margin: 0 0 20px;
	color: var(--pkc-color-muted);
	font-size: 14px;
}
.pkc-pricing__list {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	font-size: 14px;
	line-height: 1.5;
}
.pkc-pricing__list li::first-letter { color: #2a8a5e; font-weight: 800; }

.pkc-pricing__table {
	max-width: 760px;
	margin: 24px auto 0;
}
.pkc-pricing__table td:first-child { padding-left: 16px; }
.pkc-pricing__table tr td:first-child:has(strong) { background: #f6f4ed; }

/* ---------- About — values grid ---------- */
.pkc-marketing__prose {
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 24px 56px;
}
.pkc-marketing__prose-inner h2 {
	margin: 36px 0 12px;
	font: 700 24px/1.2 var(--pkc-font);
	color: var(--pkc-color-primary);
	letter-spacing: -0.01em;
}
.pkc-marketing__prose-inner h2:first-child { margin-top: 0; }
.pkc-marketing__prose-inner p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.65;
}
.pkc-marketing__values {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 18px 0 0;
}
@media (max-width: 640px) {
	.pkc-marketing__values { grid-template-columns: 1fr; }
}
.pkc-marketing__value {
	padding: 18px;
	background: #fff;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
}
.pkc-marketing__value h3 {
	margin: 0 0 8px;
	font: 700 16px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-marketing__value p {
	margin: 0;
	font-size: 14px;
	color: var(--pkc-color-muted);
	line-height: 1.55;
}

/* ---------- How It Works steps ---------- */
.pkc-how-steps {
	list-style: none;
	padding: 0;
	max-width: 820px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.pkc-how-step {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 22px;
	padding: 24px;
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
}
@media (max-width: 580px) {
	.pkc-how-step { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
}
.pkc-how-step__num {
	display: inline-flex;
	width: 64px; height: 64px;
	background: var(--pkc-color-primary);
	color: #fff;
	border-radius: 18px;
	align-items: center;
	justify-content: center;
	font: 700 28px/1 var(--pkc-font);
	flex-shrink: 0;
}
.pkc-how-step__time {
	margin: 0 0 4px;
	font: 600 12px/1 var(--pkc-font);
	letter-spacing: 0.04em;
	color: var(--pkc-color-accent);
	text-transform: uppercase;
}
.pkc-how-step__h {
	margin: 0 0 8px;
	font: 700 22px/1.2 var(--pkc-font);
	color: var(--pkc-color-text);
	letter-spacing: -0.01em;
}
.pkc-how-step__body > p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--pkc-color-muted);
}
.pkc-how-step__body ul {
	margin: 8px 0 0;
	padding: 0 0 0 4px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--pkc-color-text);
	font-size: 14px;
}

/* ---------- Contact page ---------- */
.pkc-marketing__contact-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 32px;
	max-width: 1020px;
	margin: 0 auto;
	padding: 0 20px;
}
@media (max-width: 800px) {
	.pkc-marketing__contact-grid { grid-template-columns: 1fr; }
}
.pkc-marketing__contact-form-wrap {
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
	padding: 28px;
}
.pkc-marketing__contact-aside {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.pkc-marketing__contact-card {
	background: #fff8ee;
	border: 1px solid #ead7b7;
	border-radius: var(--pkc-radius);
	padding: 16px 18px;
}
.pkc-marketing__contact-card h3 {
	margin: 0 0 6px;
	font: 700 15px/1.2 var(--pkc-font);
}
.pkc-marketing__contact-card p {
	margin: 0;
	font-size: 13px;
	color: var(--pkc-color-muted);
	line-height: 1.5;
}
.pkc-marketing__contact-card a { color: var(--pkc-color-link); text-decoration: none; }
.pkc-marketing__contact-card a:hover { text-decoration: underline; }

/* ---------- Legal pages (Terms / Privacy) ---------- */
.pkc-marketing__legal-hero {
	background: linear-gradient(160deg, #2a5d4d 0%, #1f4a3d 100%);
	color: #fff;
	padding: 48px 24px 40px;
	text-align: left;
}
.pkc-marketing__legal-hero .pkc-landing__eyebrow { color: rgba(255,255,255,0.7); }
.pkc-marketing__legal-hero .pkc-landing__h1 { color: #fff; }
.pkc-marketing__legal-meta {
	margin: 8px 0 0;
	color: rgba(255,255,255,0.6);
	font-size: 14px;
}
.pkc-marketing__legal-inner {
	max-width: 760px;
	margin: 0 auto;
}
.pkc-marketing__legal-body {
	padding: 32px 24px 64px;
}
.pkc-marketing__legal-body .pkc-marketing__legal-inner h2 {
	margin: 32px 0 10px;
	font: 700 20px/1.25 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-marketing__legal-body .pkc-marketing__legal-inner h3 {
	margin: 18px 0 6px;
	font: 700 15px/1.2 var(--pkc-font);
	color: var(--pkc-color-muted);
}
.pkc-marketing__legal-body .pkc-marketing__legal-inner p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.65;
}
.pkc-marketing__legal-body .pkc-marketing__legal-inner ul {
	margin: 0 0 12px;
	padding-left: 22px;
	font-size: 15px;
	line-height: 1.65;
}
.pkc-marketing__legal-body .pkc-marketing__legal-inner li { margin-bottom: 4px; }

/* ---------- FAQ page ---------- */
.pkc-faq--full {
	max-width: 800px;
	margin: 0 auto;
}
.pkc-marketing__faq { padding: 0 20px; }

/* =========================================================================
   v0.5.0  —  BRAND DIRECTORY + BRAND PROFILE
   =========================================================================
   .pkc-brand-card extends .pkc-directory__card (brand-flavoured logo +
   metadata). .pkc-brand-profile is the single brand page.
   ========================================================================= */

/* ---------- Brand card on /brands/ directory ---------- */
.pkc-brand-card .pkc-brand-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #fff;
	border-bottom: 1px solid var(--pkc-color-border);
	padding: 20px;
}
.pkc-brand-card .pkc-brand-card__logo img {
	max-width: 100%;
	max-height: 80px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.pkc-brand-card__logo--placeholder {
	background: linear-gradient(135deg, #f4f2eb 0%, #e8e6df 100%);
}
.pkc-brand-card__logo--placeholder span {
	font: 700 36px/1 var(--pkc-font);
	color: var(--pkc-color-primary);
}
.pkc-brand-card__body { padding: 14px 16px 16px; }
.pkc-brand-card__name {
	margin: 0 0 4px;
	font: 700 17px/1.25 var(--pkc-font);
	color: var(--pkc-color-text);
}
.pkc-brand-card__tagline {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--pkc-color-muted);
}

/* ---------- Single brand profile page ---------- */
body.pkc-brand-profile-body { background: var(--pkc-color-bg); }

.pkc-brand-profile {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 0 64px;
	color: var(--pkc-color-text);
	font: 16px/1.55 var(--pkc-font);
}

.pkc-brand-profile__hero {
	background: linear-gradient(180deg, var(--pkc-color-card) 0%, var(--pkc-color-bg) 100%);
	padding: 40px 24px 32px;
	border-bottom: 1px solid var(--pkc-color-border);
}
.pkc-brand-profile__hero-inner {
	max-width: 880px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 28px;
	align-items: center;
}
@media (max-width: 640px) {
	.pkc-brand-profile__hero-inner { grid-template-columns: 1fr; gap: 16px; text-align: center; justify-items: center; }
}

.pkc-brand-profile__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 180px;
	background: #fff;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
	padding: 22px;
	box-shadow: var(--pkc-shadow-sm);
}
.pkc-brand-profile__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.pkc-brand-profile__logo--placeholder {
	background: linear-gradient(135deg, var(--pkc-color-primary) 0%, var(--pkc-color-primary-hov) 100%);
	color: #fff;
}
.pkc-brand-profile__logo--placeholder span {
	font: 700 48px/1 var(--pkc-font);
}

.pkc-brand-profile__eyebrow {
	margin: 0 0 6px;
	font-size: 13px;
}
.pkc-brand-profile__eyebrow a {
	color: var(--pkc-color-muted);
	text-decoration: none;
}
.pkc-brand-profile__eyebrow a:hover { color: var(--pkc-color-primary); }

.pkc-brand-profile__name {
	margin: 0 0 6px;
	font: 700 36px/1.1 var(--pkc-font);
	letter-spacing: -0.01em;
	color: var(--pkc-color-text);
}
.pkc-brand-profile__tagline {
	margin: 0 0 14px;
	font-size: 17px;
	color: var(--pkc-color-muted);
	line-height: 1.45;
}
.pkc-brand-profile__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
	justify-content: flex-start;
}
@media (max-width: 640px) {
	.pkc-brand-profile__badges { justify-content: center; }
}
.pkc-brand-profile__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
@media (max-width: 640px) {
	.pkc-brand-profile__cta { justify-content: center; }
}

.pkc-brand-profile__inner {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 24px;
}
.pkc-brand-profile__section {
	margin: 36px 0;
	padding: 24px;
	background: var(--pkc-color-card);
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius-lg);
}
.pkc-brand-profile__h2 {
	margin: 0 0 14px;
	font: 700 22px/1.2 var(--pkc-font);
	letter-spacing: -0.01em;
	color: var(--pkc-color-text);
}
.pkc-brand-profile__about {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--pkc-color-text);
}

/* Past creators grid */
.pkc-brand-profile__creators {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}
.pkc-brand-profile__creator a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--pkc-color-border);
	border-radius: var(--pkc-radius);
	background: #fff;
	color: var(--pkc-color-text);
	text-decoration: none;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.pkc-brand-profile__creator a:hover {
	border-color: var(--pkc-color-primary);
	box-shadow: var(--pkc-shadow-sm);
}
.pkc-brand-profile__creator-avatar {
	width: 40px; height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}
.pkc-brand-profile__creator-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkc-brand-profile__creator-avatar--placeholder {
	background: var(--pkc-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pkc-brand-profile__creator-avatar--placeholder span {
	color: #fff;
	font: 700 16px/1 var(--pkc-font);
}
.pkc-brand-profile__creator-meta {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.pkc-brand-profile__creator-meta strong {
	font: 700 14px/1.2 var(--pkc-font);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pkc-brand-profile__creator-meta em {
	font-style: normal;
	font-size: 12px;
	color: var(--pkc-color-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Pitch CTA */
.pkc-brand-profile__pitch {
	margin: 36px 0;
	padding: 32px 24px;
	background: linear-gradient(180deg, #fff8ee 0%, #ffeec7 100%);
	border: 1px dashed var(--pkc-color-accent);
	border-radius: var(--pkc-radius-lg);
	text-align: center;
}
.pkc-brand-profile__pitch h2 { margin-top: 0; }
.pkc-brand-profile__pitch p {
	max-width: 60ch;
	margin: 0 auto 18px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--pkc-color-text);
}
.pkc-brand-profile__pitch-cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Past-brands wall on /me/{handle} — make logos clickable when linked */
.pkc-show-brand__link {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform .12s ease, opacity .12s ease;
}
.pkc-show-brand__link:hover { transform: scale(1.04); opacity: 0.92; }

/* =========================================================================
   v0.5.2 — For Brands marketing page (.pkb-*)
   =========================================================================
   /for-brands/ is the brand-facing equivalent of /creators/. Wrapped in
   theme chrome (header/footer) but the page body owns its own visual
   language — dark green hero, yellow accents, two-column comparison cards,
   tabbed feature mock-ups, ROI table, single-tier pricing, FAQ accordion,
   final dark-green CTA.

   Scoped under .pkb so we never clash with the theme (.pki-*), the other
   marketing pages (.pkc-marketing), or the creator dashboard (.pkc).
   ========================================================================= */

.pkb {
	--pkb-y:    #FFD600;       /* signature yellow */
	--pkb-y-d:  #E0BC00;
	--pkb-g:    #0D2B1E;       /* deep green */
	--pkb-g2:   #163D2C;
	--pkb-g3:   #1F4F38;
	--pkb-t:    #00A884;       /* teal accent */
	--pkb-t-d:  #008066;
	--pkb-o:    #FF6B2B;       /* orange */
	--pkb-r:    #E53535;       /* "old way" red */
	--pkb-r-bg: #FEEDED;
	--pkb-r-bd: #F5C8C8;
	--pkb-gr:   #149A6E;       /* "new way" green */
	--pkb-gr-bg:#E9F8F1;
	--pkb-gr-bd:#BDE5D3;
	--pkb-bg:   #FAFAF7;       /* page background */
	--pkb-card: #FFFFFF;
	--pkb-ink:  #0D2B1E;
	--pkb-mute: #5B6B63;
	--pkb-line: rgba(13,43,30,0.08);
	--pkb-line2:rgba(13,43,30,0.14);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--pkb-ink);
	background: var(--pkb-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
.pkb *,
.pkb *::before,
.pkb *::after { box-sizing: border-box; }
.pkb img { max-width: 100%; height: auto; display: block; }

/* ---- Container ---- */
.pkb-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---- Buttons ---- */
.pkb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 999px;
	font-weight: 700;
	font-family: inherit;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
	white-space: nowrap;
	line-height: 1;
	letter-spacing: -0.005em;
}
.pkb-btn--md { padding: 12px 22px; font-size: 14px; }
.pkb-btn--lg { padding: 15px 28px; font-size: 15px; }
.pkb-btn--xl { padding: 18px 32px; font-size: 16px; }
.pkb-btn--y {
	background: var(--pkb-y);
	color: var(--pkb-g);
	box-shadow: 0 10px 30px -10px rgba(255,214,0,0.55), 0 0 0 0 rgba(255,214,0,0);
}
.pkb-btn--y:hover {
	background: var(--pkb-y-d);
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -10px rgba(255,214,0,0.7), 0 0 0 6px rgba(255,214,0,0.15);
}
.pkb-btn--ghost-w {
	background: rgba(255,255,255,0.06);
	color: #FFFFFF;
	border-color: rgba(255,255,255,0.35);
}
.pkb-btn--ghost-w:hover {
	background: rgba(255,255,255,0.14);
	border-color: rgba(255,255,255,0.6);
}

/* ---- Section heading helpers ---- */
.pkb-sec-hd { max-width: 720px; margin-bottom: 48px; }
.pkb-sec-hd--center { margin-left: auto; margin-right: auto; text-align: center; }
.pkb-eyebrow {
	display: inline-block;
	padding: 6px 14px;
	background: rgba(0,168,132,0.1);
	color: var(--pkb-t-d);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.pkb-eyebrow--w {
	background: rgba(255,214,0,0.14);
	color: var(--pkb-y);
}
.pkb-sh {
	font-size: clamp(32px, 4.5vw, 52px);
	line-height: 1.05;
	margin: 0;
	font-weight: 900;
	letter-spacing: -0.02em;
}
.pkb-sh--w { color: #FFFFFF; }
.pkb-sh__y { color: var(--pkb-y); }
.pkb-sec-sub {
	margin: 16px 0 0;
	font-size: 18px;
	line-height: 1.55;
	color: var(--pkb-mute);
}
.pkb-sec-sub--w { color: rgba(255,255,255,0.78); }

/* In-line accent helpers used inside h1/h2 */
.pkb-yb {
	background: var(--pkb-y);
	color: var(--pkb-g);
	padding: 0 .14em;
	border-radius: 6px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.pkb-tb { color: var(--pkb-t); }

/* =========================================================================
   1. HERO
   ========================================================================= */
.pkb-hero {
	position: relative;
	background: var(--pkb-g);
	color: #FFFFFF;
	padding: 96px 0 80px;
	overflow: hidden;
}
.pkb-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
	opacity: 0.6;
}
.pkb-hero__glow {
	position: absolute;
	top: -180px;
	right: -160px;
	width: 540px;
	height: 540px;
	background: radial-gradient(circle, rgba(255,214,0,0.22) 0%, transparent 70%);
	pointer-events: none;
	border-radius: 50%;
}
.pkb-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
	z-index: 1;
}
.pkb-hero__cols {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 64px;
	align-items: center;
}
.pkb-hero__top-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: rgba(255,214,0,0.16);
	color: var(--pkb-y);
	border: 1px solid rgba(255,214,0,0.32);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 22px;
}
.pkb-hero__pulse {
	width: 8px; height: 8px;
	background: var(--pkb-y);
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(255,214,0,0.7);
	animation: pkb-pulse 1.8s infinite;
}
@keyframes pkb-pulse {
	0%   { box-shadow: 0 0 0 0    rgba(255,214,0,0.7); }
	70%  { box-shadow: 0 0 0 10px rgba(255,214,0,0);   }
	100% { box-shadow: 0 0 0 0    rgba(255,214,0,0);   }
}
.pkb-hero__h1 {
	font-size: clamp(40px, 5.8vw, 76px);
	line-height: 1.02;
	font-weight: 900;
	letter-spacing: -0.025em;
	margin: 0 0 22px;
}
.pkb-hero__sub {
	font-size: 19px;
	line-height: 1.55;
	color: rgba(255,255,255,0.82);
	margin: 0 0 32px;
	max-width: 540px;
}
.pkb-hero__sub strong { color: #FFFFFF; font-weight: 700; }
.pkb-hero__ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}
.pkb-hero__proof {
	display: flex;
	align-items: center;
	gap: 14px;
}
.pkb-avas { display: flex; }
.pkb-av {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 2px solid var(--pkb-g);
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	margin-left: -10px;
}
.pkb-av:first-child { margin-left: 0; }
.pkb-hero__proof-text {
	font-size: 14px;
	color: rgba(255,255,255,0.72);
}
.pkb-hero__proof-text strong { color: #FFFFFF; }

/* ---- Hero entry animations ---- */
.pkb-anim-1, .pkb-anim-2, .pkb-anim-3, .pkb-anim-4, .pkb-anim-5, .pkb-anim-6 {
	opacity: 0;
	transform: translateY(20px);
	animation: pkb-fadein 0.7s ease forwards;
}
.pkb-anim-1 { animation-delay: 0.05s; }
.pkb-anim-2 { animation-delay: 0.15s; }
.pkb-anim-3 { animation-delay: 0.25s; }
.pkb-anim-4 { animation-delay: 0.35s; }
.pkb-anim-5 { animation-delay: 0.45s; }
.pkb-anim-6 { animation-delay: 0.30s; }
@keyframes pkb-fadein {
	to { opacity: 1; transform: translateY(0); }
}

/* ---- Directory preview mock (hero right column + features) ---- */
.pkb-dir-preview {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 16px;
	overflow: hidden;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.pkb-dir-preview__chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: rgba(0,0,0,0.18);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pkb-dots { display: flex; gap: 6px; }
.pkb-dots span {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,0.16);
}
.pkb-dots span:first-child { background: #FF6058; }
.pkb-dots span:nth-child(2) { background: #FEBC2E; }
.pkb-dots span:nth-child(3) { background: #28C840; }
.pkb-dir-preview__url {
	flex: 1;
	font-size: 12px;
	color: rgba(255,255,255,0.52);
	font-family: 'SF Mono', Monaco, Menlo, monospace;
	text-align: center;
}
.pkb-dir-preview__body { padding: 18px; }
.pkb-dir-preview__topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}
.pkb-dir-preview__title {
	font-size: 14px;
	font-weight: 700;
	color: #FFFFFF;
}
.pkb-dir-preview__count {
	font-size: 12px;
	color: rgba(255,255,255,0.55);
	font-weight: 600;
}
.pkb-dir-preview__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}
.pkb-dpf {
	font-size: 11px;
	padding: 5px 10px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.75);
	border-radius: 999px;
	font-weight: 600;
}
.pkb-dpf--a {
	background: rgba(255,214,0,0.18);
	border-color: rgba(255,214,0,0.4);
	color: var(--pkb-y);
}
.pkb-dir-preview__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.pkb-dpc {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
	padding: 10px;
	font-size: 11px;
}
.pkb-dpc__top {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.pkb-dpc__av {
	width: 28px; height: 28px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
}
.pkb-dpc__name {
	font-weight: 700;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 1.2;
}
.pkb-dpc__handle {
	font-size: 10px;
	color: rgba(255,255,255,0.55);
	margin-top: 1px;
}
.pkb-dpc__tag {
	display: inline-block;
	font-size: 9px;
	padding: 2px 6px;
	background: rgba(255,214,0,0.15);
	color: var(--pkb-y);
	border-radius: 4px;
	margin: 0 4px 4px 0;
	font-weight: 600;
}
.pkb-dpc__stats {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 4px;
	margin: 8px 0;
	padding: 6px;
	background: rgba(0,0,0,0.2);
	border-radius: 6px;
}
.pkb-dpc__stat { text-align: center; }
.pkb-dpc__sv {
	font-size: 12px;
	font-weight: 800;
	color: var(--pkb-y);
}
.pkb-dpc__sl {
	font-size: 8px;
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.pkb-dpc__pitch { text-align: center; }
.pkb-pitch-sm {
	width: 100%;
	padding: 6px;
	font-size: 10px;
	font-weight: 700;
	background: var(--pkb-y);
	color: var(--pkb-g);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	font-family: inherit;
}

/* =========================================================================
   2. TRUST BAR
   ========================================================================= */
.pkb-trust-bar {
	background: #FFFFFF;
	border-bottom: 1px solid var(--pkb-line);
	padding: 36px 0;
}
.pkb-trust-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	justify-content: center;
}
.pkb-trust-stat { text-align: center; flex: 1; min-width: 140px; }
.pkb-trust-num {
	font-size: 32px;
	font-weight: 900;
	color: var(--pkb-g);
	letter-spacing: -0.02em;
	line-height: 1;
}
.pkb-trust-lbl {
	margin-top: 6px;
	font-size: 12px;
	color: var(--pkb-mute);
	font-weight: 500;
}
.pkb-trust-div {
	width: 1px;
	height: 36px;
	background: var(--pkb-line);
}

/* =========================================================================
   3. OLD WAY vs NEW WAY (split)
   ========================================================================= */
.pkb-split {
	padding: 96px 0;
	background: #FFFFFF;
}
.pkb-split__grid {
	max-width: 1200px;
	margin: 56px auto 0;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.pkb-split__card {
	border-radius: 20px;
	padding: 40px 32px;
	border: 2px solid;
	position: relative;
}
.pkb-split__card--old {
	background: var(--pkb-r-bg);
	border-color: var(--pkb-r-bd);
}
.pkb-split__card--new {
	background: var(--pkb-gr-bg);
	border-color: var(--pkb-gr-bd);
}
.pkb-split__label {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 800;
	margin-bottom: 18px;
	letter-spacing: 0.04em;
}
.pkb-split__label--old { background: var(--pkb-r); color: #FFFFFF; }
.pkb-split__label--new { background: var(--pkb-gr); color: #FFFFFF; }
.pkb-split__h {
	font-size: 28px;
	font-weight: 900;
	line-height: 1.1;
	margin-bottom: 8px;
	letter-spacing: -0.02em;
	color: var(--pkb-ink);
}
.pkb-split__sub {
	color: var(--pkb-mute);
	margin: 0 0 28px;
	font-size: 15px;
	line-height: 1.55;
}
.pkb-split__items { display: grid; gap: 18px; }
.pkb-si {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 14px;
	align-items: flex-start;
}
.pkb-si__ico {
	width: 44px; height: 44px;
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}
.pkb-si__ico--bad {
	background: rgba(229,53,53,0.14);
}
.pkb-si__ico--good {
	background: rgba(20,154,110,0.16);
}
.pkb-si__t {
	font-weight: 800;
	font-size: 15px;
	line-height: 1.3;
	color: var(--pkb-ink);
	margin-bottom: 4px;
}
.pkb-si__p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--pkb-mute);
}
.pkb-split__time {
	margin-top: 28px;
	padding: 14px 18px;
	border-radius: 12px;
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.pkb-split__time--old {
	background: rgba(229,53,53,0.1);
	color: var(--pkb-r);
}
.pkb-split__time--new {
	background: rgba(20,154,110,0.12);
	color: var(--pkb-gr);
}
.pkb-split__time-ico { font-size: 18px; }

/* =========================================================================
   4. HOW IT WORKS
   ========================================================================= */
.pkb-how { padding: 96px 0; background: var(--pkb-bg); }
.pkb-how__steps {
	margin-top: 56px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	position: relative;
}
/* Dotted connector line between steps */
.pkb-how__steps::before {
	content: "";
	position: absolute;
	top: 30px;
	left: 12%;
	right: 12%;
	height: 2px;
	background-image: linear-gradient(90deg, var(--pkb-line2) 50%, transparent 50%);
	background-size: 10px 2px;
	z-index: 0;
}
.pkb-how__step {
	background: #FFFFFF;
	padding: 28px 22px;
	border-radius: 16px;
	border: 1px solid var(--pkb-line);
	text-align: center;
	position: relative;
	z-index: 1;
	transition: transform .2s ease, box-shadow .2s ease;
}
.pkb-how__step:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -16px rgba(13,43,30,0.18);
	border-color: rgba(0,168,132,0.3);
}
.pkb-how__num {
	width: 60px; height: 60px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--pkb-y);
	color: var(--pkb-g);
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
	font-weight: 900;
	box-shadow: 0 10px 24px -10px rgba(255,214,0,0.6);
}
.pkb-how__icon { font-size: 36px; margin-bottom: 12px; line-height: 1; }
.pkb-how__h {
	font-weight: 800;
	font-size: 17px;
	color: var(--pkb-ink);
	margin-bottom: 8px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.pkb-how__p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--pkb-mute);
}

/* =========================================================================
   5. FEATURES (tabbed)
   ========================================================================= */
.pkb-feat { padding: 96px 0; background: #FFFFFF; }
.pkb-feat__grid {
	margin-top: 48px;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px;
	align-items: flex-start;
}
.pkb-feat__list { display: grid; gap: 14px; }
.pkb-feat__item {
	width: 100%;
	text-align: left;
	background: #FFFFFF;
	border: 2px solid var(--pkb-line);
	border-radius: 14px;
	padding: 20px;
	cursor: pointer;
	font-family: inherit;
	transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pkb-feat__item:hover {
	border-color: rgba(0,168,132,0.4);
	transform: translateX(2px);
}
.pkb-feat__item--active {
	border-color: var(--pkb-t);
	background: linear-gradient(180deg, rgba(0,168,132,0.06), rgba(0,168,132,0.02));
	box-shadow: 0 12px 30px -16px rgba(0,168,132,0.35);
}
.pkb-feat__row {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 14px;
	align-items: flex-start;
}
.pkb-feat__ico {
	width: 48px; height: 48px;
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}
.pkb-feat__ico--t { background: rgba(0,168,132,0.14); color: var(--pkb-t-d); }
.pkb-feat__ico--y { background: rgba(255,214,0,0.18); }
.pkb-feat__ico--o { background: rgba(255,107,43,0.16); color: var(--pkb-o); }
.pkb-feat__ico--g { background: rgba(13,43,30,0.08); color: var(--pkb-g); }
.pkb-feat__h {
	font-weight: 800;
	font-size: 16px;
	color: var(--pkb-ink);
	line-height: 1.3;
	margin-bottom: 6px;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.pkb-feat__p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--pkb-mute);
}
.pkb-feat-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.pkb-feat-badge--pro { background: var(--pkb-o); color: #FFFFFF; }

/* ---- Feature display panel ---- */
.pkb-feat__display {
	position: sticky;
	top: 100px;
	background: var(--pkb-bg);
	border: 1px solid var(--pkb-line);
	border-radius: 18px;
	padding: 14px;
	min-height: 480px;
}
.pkb-feat__panel { display: none; }
.pkb-feat__panel--active {
	display: block;
	animation: pkb-fadein 0.4s ease;
}

/* ---- Browser-window mock used inside feature panels ---- */
.pkb-mock {
	background: #FFFFFF;
	border: 1px solid var(--pkb-line);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 40px -22px rgba(13,43,30,0.25);
}
.pkb-mock__chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #F5F5F0;
	border-bottom: 1px solid var(--pkb-line);
}
.pkb-mock__url {
	flex: 1;
	font-size: 11px;
	color: var(--pkb-mute);
	font-family: 'SF Mono', Monaco, Menlo, monospace;
	text-align: center;
}
.pkb-mock__body { padding: 18px; }
.pkb-mock__body--flush { padding: 0; }
.pkb-dir-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}
.pkb-dir-filters .pkb-dpf {
	background: var(--pkb-line);
	border-color: transparent;
	color: var(--pkb-mute);
}
.pkb-dir-filters .pkb-dpf--a {
	background: rgba(255,214,0,0.22);
	border-color: rgba(255,214,0,0.4);
	color: #5A4500;
}
.pkb-dir-row {
	display: grid;
	grid-template-columns: 44px 1fr auto auto;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-top: 1px solid var(--pkb-line);
}
.pkb-dir-row:first-of-type { border-top: 0; }
.pkb-dir-row__av {
	width: 44px; height: 44px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}
.pkb-dir-row__nm {
	font-weight: 800;
	font-size: 13px;
	color: var(--pkb-ink);
	line-height: 1.25;
}
.pkb-dir-row__mt {
	font-size: 11px;
	color: var(--pkb-mute);
	margin-top: 2px;
}
.pkb-dir-row__rt { text-align: right; }
.pkb-dir-row__fol {
	font-weight: 800;
	font-size: 14px;
	color: var(--pkb-ink);
}
.pkb-dir-row__eng {
	font-size: 11px;
	color: var(--pkb-t-d);
	font-weight: 600;
}
.pkb-p-btn {
	padding: 8px 14px;
	font-size: 12px;
	font-weight: 700;
	background: var(--pkb-y);
	color: var(--pkb-g);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
}

/* ---- Verified-profile mock (panel 1) ---- */
.pkb-prof__verified {
	background: rgba(20,154,110,0.12);
	color: var(--pkb-gr);
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 14px;
	display: inline-block;
}
.pkb-prof__header {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 14px;
	align-items: center;
	margin-bottom: 16px;
}
.pkb-prof__av {
	width: 60px; height: 60px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 26px;
	color: var(--pkb-y);
}
.pkb-prof__name { font-size: 18px; font-weight: 800; color: var(--pkb-ink); line-height: 1.2; }
.pkb-prof__handle { font-size: 12px; color: var(--pkb-mute); margin: 2px 0 6px; }
.pkb-prof__tag {
	display: inline-block;
	font-size: 10px;
	padding: 3px 8px;
	background: var(--pkb-bg);
	border-radius: 999px;
	margin: 0 4px 4px 0;
	color: var(--pkb-ink);
	font-weight: 600;
}
.pkb-prof__stats {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 8px;
	background: var(--pkb-bg);
	padding: 12px;
	border-radius: 10px;
	margin-bottom: 16px;
}
.pkb-pstat { text-align: center; }
.pkb-pstat__v { font-weight: 800; color: var(--pkb-t-d); font-size: 15px; }
.pkb-pstat__l { font-size: 10px; color: var(--pkb-mute); text-transform: uppercase; margin-top: 2px; letter-spacing: 0.04em; }
.pkb-prof__sec {
	font-size: 11px;
	font-weight: 800;
	color: var(--pkb-mute);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 16px 0 8px;
}
.pkb-prof__bars { display: grid; gap: 8px; }
.pkb-bar {
	display: grid;
	grid-template-columns: 64px 1fr 36px;
	gap: 10px;
	align-items: center;
}
.pkb-bar__lbl { font-size: 11px; color: var(--pkb-ink); font-weight: 600; }
.pkb-bar__track { height: 8px; background: var(--pkb-bg); border-radius: 999px; overflow: hidden; }
.pkb-bar__fill { height: 100%; border-radius: 999px; }
.pkb-bar__pct { font-size: 11px; font-weight: 700; color: var(--pkb-ink); text-align: right; }
.pkb-prof__brands { display: flex; flex-wrap: wrap; gap: 6px; }
.pkb-prof__brand {
	padding: 6px 10px;
	background: var(--pkb-bg);
	border-radius: 8px;
	font-size: 11px;
	font-weight: 600;
	color: var(--pkb-ink);
}

/* ---- Competitor-intel mock (panel 2) ---- */
.pkb-comp__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pkb-comp__title { font-weight: 800; color: var(--pkb-ink); font-size: 15px; }
.pkb-comp__tag {
	padding: 3px 9px;
	background: var(--pkb-o);
	color: #FFFFFF;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.pkb-comp__label {
	font-size: 11px;
	color: var(--pkb-mute);
	margin-bottom: 10px;
}
.pkb-comp__item {
	display: grid;
	grid-template-columns: 42px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 12px;
	background: var(--pkb-bg);
	border-radius: 10px;
	margin-bottom: 8px;
}
.pkb-comp__logo {
	width: 42px; height: 42px;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
}
.pkb-comp__nm { font-weight: 800; font-size: 13px; color: var(--pkb-ink); }
.pkb-comp__det { font-size: 11px; color: var(--pkb-mute); margin-top: 2px; }
.pkb-comp__creators { display: flex; margin-bottom: 4px; }
.pkb-cc {
	width: 24px; height: 24px;
	border-radius: 50%;
	border: 2px solid #FFFFFF;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px;
	margin-left: -6px;
}
.pkb-cc:first-child { margin-left: 0; }
.pkb-comp__count {
	font-size: 10px;
	color: var(--pkb-mute);
	text-align: right;
}
.pkb-comp__insight {
	margin-top: 12px;
	padding: 12px 14px;
	background: rgba(255,214,0,0.12);
	border-left: 3px solid var(--pkb-y);
	border-radius: 8px;
}
.pkb-comp__insight-h { font-weight: 800; font-size: 13px; color: var(--pkb-ink); margin-bottom: 4px; }
.pkb-comp__insight-p { font-size: 11px; color: var(--pkb-mute); line-height: 1.45; }

/* ---- Brand-page mock (panel 3) ---- */
.pkb-bp__cover {
	height: 90px;
	background: linear-gradient(135deg, var(--pkb-y) 0%, var(--pkb-o) 100%);
	display: flex; align-items: center; justify-content: center;
	font-size: 36px;
}
.pkb-bp__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0 20px;
	margin-top: -28px;
}
.pkb-bp__logo {
	width: 70px; height: 70px;
	border-radius: 16px;
	background: #FFFFFF;
	border: 3px solid #FFFFFF;
	box-shadow: 0 10px 24px -10px rgba(13,43,30,0.25);
	display: flex; align-items: center; justify-content: center;
	font-size: 28px;
}
.pkb-bp__inbound {
	padding: 6px 12px;
	background: rgba(20,154,110,0.16);
	color: var(--pkb-gr);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	margin-bottom: 6px;
}
.pkb-bp__info { padding: 16px 20px 20px; }
.pkb-bp__name {
	font-size: 22px;
	font-weight: 900;
	color: var(--pkb-ink);
	letter-spacing: -0.02em;
}
.pkb-bp__meta {
	font-size: 12px;
	color: var(--pkb-mute);
	margin: 4px 0 10px;
}
.pkb-bp__desc {
	font-size: 13px;
	line-height: 1.55;
	color: var(--pkb-ink);
	margin: 0 0 14px;
}
.pkb-bp__stats {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 8px;
}
.pkb-bp__stat {
	padding: 10px;
	background: var(--pkb-bg);
	border-radius: 10px;
	text-align: center;
}
.pkb-bp__sv {
	font-weight: 900;
	color: var(--pkb-t-d);
	font-size: 18px;
}
.pkb-bp__sl {
	font-size: 10px;
	color: var(--pkb-mute);
	text-transform: uppercase;
	margin-top: 2px;
	letter-spacing: 0.04em;
}

/* =========================================================================
   6. CREATOR NETWORK
   ========================================================================= */
.pkb-network {
	padding: 96px 0;
	background: var(--pkb-g);
	color: #FFFFFF;
	position: relative;
	overflow: hidden;
}
.pkb-network::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}
.pkb-network > .pkb-container { position: relative; z-index: 1; }
.pkb-network__stats {
	margin: 56px 0 36px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.pkb-ns {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 14px;
	padding: 24px;
	text-align: center;
}
.pkb-ns__num {
	font-size: 38px;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1;
	margin-bottom: 6px;
	color: #FFFFFF;
}
.pkb-ns__y { color: var(--pkb-y); }
.pkb-ns__lbl {
	font-size: 12px;
	color: rgba(255,255,255,0.7);
	line-height: 1.4;
}
.pkb-network__breeds {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	max-width: 900px;
	margin: 0 auto;
}
.pkb-breed {
	padding: 10px 18px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.pkb-breed__count {
	color: var(--pkb-y);
	font-weight: 800;
	font-size: 12px;
}

/* =========================================================================
   7. ROI COMPARISON
   ========================================================================= */
.pkb-roi { padding: 96px 0; background: #FFFFFF; }
.pkb-roi__table {
	max-width: 1200px;
	margin: 56px auto 0;
	border: 1px solid var(--pkb-line);
	border-radius: 18px;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: 0 24px 60px -28px rgba(13,43,30,0.16);
}
.pkb-roi__head {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
	background: var(--pkb-bg);
	border-bottom: 1px solid var(--pkb-line);
}
.pkb-roi__h {
	padding: 22px 18px;
	font-weight: 800;
	font-size: 14px;
	color: var(--pkb-ink);
	text-align: center;
	letter-spacing: -0.005em;
}
.pkb-roi__h:first-child { text-align: left; }
.pkb-roi__h--alt { color: var(--pkb-mute); }
.pkb-roi__h--alt2 { color: var(--pkb-mute); }
.pkb-roi__h--pk {
	background: var(--pkb-g);
	color: #FFFFFF;
	position: relative;
}
.pkb-roi__sub {
	display: block;
	font-size: 10px;
	color: var(--pkb-y);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 4px;
}
.pkb-roi__row {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
	border-bottom: 1px solid var(--pkb-line);
}
.pkb-roi__row:last-child { border-bottom: 0; }
.pkb-roi__row:hover { background: rgba(0,168,132,0.02); }
.pkb-roi__cell {
	padding: 20px 18px;
	font-size: 14px;
	color: var(--pkb-ink);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
}
.pkb-roi__cell--label {
	text-align: left;
	justify-content: flex-start;
	font-weight: 700;
}
.pkb-roi__cell--label small {
	display: block;
	font-size: 12px;
	color: var(--pkb-mute);
	margin-top: 4px;
	font-weight: 500;
}
.pkb-roi__cell--bad { color: var(--pkb-r); }
.pkb-roi__cell--mid { color: var(--pkb-o); }
.pkb-roi__cell--pk {
	background: rgba(0,168,132,0.06);
	color: var(--pkb-gr);
	font-weight: 800;
}

/* =========================================================================
   8. TESTIMONIALS
   ========================================================================= */
.pkb-testi { padding: 96px 0; background: var(--pkb-bg); }
.pkb-testi__grid {
	margin-top: 56px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.pkb-tc {
	background: #FFFFFF;
	padding: 32px 28px;
	border-radius: 18px;
	border: 1px solid var(--pkb-line);
	transition: transform .2s ease, box-shadow .2s ease;
}
.pkb-tc:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -20px rgba(13,43,30,0.2);
	border-color: rgba(0,168,132,0.3);
}
.pkb-tc__pill {
	display: inline-block;
	padding: 5px 11px;
	background: var(--pkb-bg);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	color: var(--pkb-mute);
	margin-bottom: 14px;
	letter-spacing: 0.02em;
}
.pkb-tc__stars { color: var(--pkb-y); font-size: 16px; margin-bottom: 12px; letter-spacing: 2px; }
.pkb-tc__quote {
	font-size: 15px;
	line-height: 1.55;
	color: var(--pkb-ink);
	margin: 0 0 18px;
}
.pkb-tc__result {
	padding: 10px 14px;
	background: rgba(0,168,132,0.1);
	color: var(--pkb-t-d);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 18px;
}
.pkb-tc__author {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 12px;
	align-items: center;
	padding-top: 18px;
	border-top: 1px solid var(--pkb-line);
}
.pkb-tc__av {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--pkb-bg);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
}
.pkb-tc__nm { font-weight: 800; color: var(--pkb-ink); font-size: 14px; }
.pkb-tc__rl { font-size: 12px; color: var(--pkb-mute); margin-top: 2px; }

/* =========================================================================
   9. PRICING (single card)
   ========================================================================= */
.pkb-pricing { padding: 96px 0; background: #FFFFFF; }
.pkb-pricing__inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 24px;
}
.pkb-pcard {
	margin-top: 48px;
	background: var(--pkb-g);
	color: #FFFFFF;
	border-radius: 24px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 32px 80px -30px rgba(13,43,30,0.45);
}
.pkb-pcard::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -120px;
	width: 360px; height: 360px;
	background: radial-gradient(circle, rgba(255,214,0,0.22) 0%, transparent 70%);
	pointer-events: none;
}
.pkb-pcard__top {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	padding: 48px;
	position: relative;
	z-index: 1;
}
.pkb-pcard__badge {
	display: inline-block;
	padding: 6px 12px;
	background: var(--pkb-y);
	color: var(--pkb-g);
	border-radius: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.pkb-pcard__name {
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -0.02em;
	margin-bottom: 14px;
}
.pkb-pcard__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 18px;
}
.pkb-pcard__amt {
	font-size: 64px;
	font-weight: 900;
	color: var(--pkb-y);
	letter-spacing: -0.03em;
	line-height: 1;
}
.pkb-pcard__per {
	font-size: 16px;
	color: rgba(255,255,255,0.7);
	font-weight: 600;
}
.pkb-pcard__desc {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255,255,255,0.78);
	margin: 0 0 24px;
}
.pkb-pcard__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.pkb-pcard__feats { display: grid; gap: 14px; }
.pkb-pcard__feat {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 12px;
	align-items: flex-start;
}
.pkb-pcard__ck {
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--pkb-y);
	color: var(--pkb-g);
	display: flex; align-items: center; justify-content: center;
	font-weight: 900;
	font-size: 13px;
	flex-shrink: 0;
	margin-top: 1px;
}
.pkb-pcard__ft {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.35;
	margin-bottom: 3px;
	color: #FFFFFF;
}
.pkb-pcard__fd {
	font-size: 12px;
	color: rgba(255,255,255,0.65);
	line-height: 1.5;
}
.pkb-pcard__bottom {
	padding: 22px 48px;
	background: rgba(0,0,0,0.18);
	border-top: 1px solid rgba(255,255,255,0.08);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	position: relative;
	z-index: 1;
}
.pkb-pcard__note {
	font-size: 13px;
	color: rgba(255,255,255,0.82);
}
.pkb-pcard__note strong { color: var(--pkb-y); font-weight: 800; }
.pkb-pcard__extras {
	display: flex;
	gap: 16px;
	font-size: 12px;
	color: rgba(255,255,255,0.7);
	flex-wrap: wrap;
}
.pkb-pcard__extras span { white-space: nowrap; }

/* =========================================================================
   10. FAQ
   ========================================================================= */
.pkb-faq { padding: 96px 0; background: var(--pkb-bg); }
.pkb-faq__inner {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 24px;
}
.pkb-faq__list {
	margin-top: 48px;
	display: grid;
	gap: 12px;
}
.pkb-faq__item {
	background: #FFFFFF;
	border: 1px solid var(--pkb-line);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.pkb-faq__item--open {
	border-color: rgba(0,168,132,0.4);
	box-shadow: 0 12px 30px -18px rgba(0,168,132,0.3);
}
.pkb-faq__q {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 22px 24px;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-weight: 800;
	font-size: 16px;
	text-align: left;
	color: var(--pkb-ink);
	letter-spacing: -0.005em;
	line-height: 1.4;
}
.pkb-faq__ico {
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--pkb-bg);
	color: var(--pkb-ink);
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
	font-weight: 700;
	flex-shrink: 0;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}
.pkb-faq__item--open .pkb-faq__ico {
	transform: rotate(45deg);
	background: var(--pkb-t);
	color: #FFFFFF;
}
.pkb-faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s ease;
}
.pkb-faq__item--open .pkb-faq__a { max-height: 600px; }
.pkb-faq__a-inner {
	padding: 0 24px 24px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pkb-mute);
}

/* =========================================================================
   11. FINAL CTA
   ========================================================================= */
.pkb-cta {
	padding: 96px 24px;
	background: var(--pkb-g);
	color: #FFFFFF;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.pkb-cta__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 700px; height: 700px;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(255,214,0,0.16) 0%, transparent 70%);
	pointer-events: none;
}
.pkb-cta__inner {
	max-width: 720px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.pkb-cta__eyebrow {
	display: inline-block;
	padding: 6px 14px;
	background: rgba(255,214,0,0.16);
	color: var(--pkb-y);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.pkb-cta__h {
	font-size: clamp(36px, 5vw, 60px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 18px;
}
.pkb-cta__h-y { color: var(--pkb-y); }
.pkb-cta__sub {
	font-size: 18px;
	line-height: 1.55;
	color: rgba(255,255,255,0.78);
	margin: 0 0 32px;
}
.pkb-cta__btns {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.pkb-cta__note {
	font-size: 13px;
	color: rgba(255,255,255,0.6);
}

/* =========================================================================
   SCROLL REVEAL — page-wide
   ========================================================================= */
.pkb-rv {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .7s ease;
}
.pkb-rv--vis { opacity: 1; transform: translateY(0); }
.pkb-rv--d1 { transition-delay: .08s; }
.pkb-rv--d2 { transition-delay: .16s; }
.pkb-rv--d3 { transition-delay: .24s; }
.pkb-rv--d4 { transition-delay: .32s; }

/* =========================================================================
   RESPONSIVE — tablet/mobile
   ========================================================================= */
@media (max-width: 1024px) {
	.pkb-hero { padding: 72px 0 64px; }
	.pkb-hero__cols { grid-template-columns: 1fr; gap: 56px; }
	.pkb-split__grid { grid-template-columns: 1fr; gap: 24px; }
	.pkb-how__steps { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	.pkb-how__steps::before { display: none; }
	.pkb-feat__grid { grid-template-columns: 1fr; gap: 36px; }
	.pkb-feat__display { position: static; min-height: 0; }
	.pkb-network__stats { grid-template-columns: repeat(2, 1fr); }
	.pkb-testi__grid { grid-template-columns: 1fr; gap: 18px; }
	.pkb-pcard__top { grid-template-columns: 1fr; gap: 36px; padding: 36px 28px; }
	.pkb-pcard__bottom { padding: 22px 28px; }
	.pkb-trust-div { display: none; }
}
@media (max-width: 720px) {
	.pkb-hero { padding: 56px 0 48px; }
	.pkb-hero__h1 { font-size: clamp(34px, 8vw, 48px); }
	.pkb-hero__ctas .pkb-btn { width: 100%; }
	.pkb-split { padding: 64px 0; }
	.pkb-split__card { padding: 28px 22px; }
	.pkb-split__h { font-size: 22px; }
	.pkb-how { padding: 64px 0; }
	.pkb-how__steps { grid-template-columns: 1fr; }
	.pkb-feat { padding: 64px 0; }
	.pkb-network { padding: 64px 0; }
	.pkb-network__stats { grid-template-columns: 1fr; }
	.pkb-roi { padding: 64px 0; }
	/* Collapse the 4-column ROI table into a single readable column */
	.pkb-roi__head { display: none; }
	.pkb-roi__row {
		grid-template-columns: 1fr;
		padding: 16px 18px;
		gap: 4px;
	}
	.pkb-roi__cell { justify-content: flex-start; text-align: left; padding: 6px 0; }
	.pkb-roi__cell--label { font-size: 16px; padding: 4px 0 10px; border-bottom: 1px solid var(--pkb-line); margin-bottom: 6px; }
	.pkb-roi__cell--bad::before { content: "DIY search: "; font-weight: 700; color: var(--pkb-mute); margin-right: 6px; }
	.pkb-roi__cell--mid::before { content: "Agency: "; font-weight: 700; color: var(--pkb-mute); margin-right: 6px; }
	.pkb-roi__cell--pk { background: rgba(0,168,132,0.08); border-radius: 8px; padding: 10px 12px; margin-top: 4px; }
	.pkb-roi__cell--pk::before { content: "PawKeen: "; font-weight: 700; color: var(--pkb-gr); margin-right: 6px; }
	.pkb-testi { padding: 64px 0; }
	.pkb-pricing { padding: 64px 0; }
	.pkb-pcard__amt { font-size: 52px; }
	.pkb-pcard__ctas .pkb-btn { width: 100%; }
	.pkb-faq { padding: 64px 0; }
	.pkb-faq__q { font-size: 15px; padding: 18px 20px; }
	.pkb-faq__a-inner { padding: 0 20px 20px; font-size: 14px; }
	.pkb-cta { padding: 72px 22px; }
}

/* =========================================================================
   v0.5.3 — For Creators marketing page (.pkfc-*)
   =========================================================================
   /for-creators/ is the creator-side counterpart to /for-brands/. Yellow
   hero with media-kit mock + floating "brand viewed" alerts, dark-green
   proof bar, Linktree-vs-PawKeen split, 3-step how, tabbed Creator Studio
   mocks (profile / analytics / brand network / rate card), big "0%"
   commission section, analytics highlight with mockup card, 3 creator
   testimonials, Free vs Pro pricing, FAQ accordion, yellow final CTA
   with floating pet emojis.

   Scoped under .pkfc to avoid clashing with the theme (.pki-*), the
   for-brands page (.pkb-*), the marketing shell (.pkc-marketing), or the
   creator dashboard (.pkc).
   ========================================================================= */

.pkfc {
	--pkfc-y:    #FFD600;
	--pkfc-yd:   #E8C200;
	--pkfc-yb:   rgba(255,214,0,0.12);
	--pkfc-g:    #0D2B1E;
	--pkfc-g2:   #163D2C;
	--pkfc-g3:   #1E5038;
	--pkfc-t:    #00A884;
	--pkfc-t2:   #008F70;
	--pkfc-tb:   rgba(0,168,132,0.1);
	--pkfc-o:    #FF6B2B;
	--pkfc-ob:   rgba(255,107,43,0.1);
	--pkfc-r:    #E53535;
	--pkfc-bg:   #FFFFFF;
	--pkfc-bg2:  #F7F6F3;
	--pkfc-bg3:  #F0EEE9;
	--pkfc-bd:   #E8E6E1;
	--pkfc-bd2:  #D8D5CE;
	--pkfc-tx:   #0A0A0A;
	--pkfc-mu:   #6B6760;
	--pkfc-fa:   #9E9B94;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--pkfc-tx);
	background: var(--pkfc-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
.pkfc *,
.pkfc *::before,
.pkfc *::after { box-sizing: border-box; }
.pkfc img { max-width: 100%; height: auto; display: block; }

/* ---- Container ---- */
.pkfc-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 48px;
}

/* ---- Buttons ---- */
.pkfc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: inherit;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
	white-space: nowrap;
	letter-spacing: -0.01em;
	line-height: 1;
}
.pkfc-btn--md  { padding: 11px 22px; font-size: 14px; border-radius: 10px; }
.pkfc-btn--lg  { padding: 14px 28px; font-size: 15px; border-radius: 12px; }
.pkfc-btn--xl  { padding: 16px 34px; font-size: 16px; border-radius: 12px; }
.pkfc-btn--block { width: 100%; }
.pkfc-btn--y   { background: var(--pkfc-y); color: var(--pkfc-g); }
.pkfc-btn--y:hover   { background: var(--pkfc-yd); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,214,0,.4); }
.pkfc-btn--g   { background: var(--pkfc-g); color: #FFFFFF; }
.pkfc-btn--g:hover   { background: var(--pkfc-g2); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(13,43,30,.25); }
.pkfc-btn--t   { background: var(--pkfc-t); color: #FFFFFF; }
.pkfc-btn--t:hover   { background: var(--pkfc-t2); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,168,132,.35); }
.pkfc-btn--ghost { background: transparent; color: var(--pkfc-tx); border: 1.5px solid var(--pkfc-bd2); }
.pkfc-btn--ghost:hover { border-color: #AAA; background: var(--pkfc-bg2); }
.pkfc-btn--ghost-dk { background: rgba(13,43,30,0.07); color: var(--pkfc-g); border: 1.5px solid rgba(13,43,30,0.2); }
.pkfc-btn--ghost-dk:hover { background: rgba(13,43,30,0.12); }

/* ---- Section heading helpers ---- */
.pkfc-sec-hd { margin-bottom: 56px; }
.pkfc-sec-hd--center { text-align: center; }
.pkfc-sec-hd--center .pkfc-sec-sub { margin-left: auto; margin-right: auto; }
.pkfc-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pkfc-t);
	margin-bottom: 12px;
}
.pkfc-sh {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1.08;
	color: var(--pkfc-tx);
	margin: 0 0 14px;
}
.pkfc-sh.pkfc-sh--w { color: #FFFFFF; }
.pkfc-sec-sub {
	font-size: 16px;
	color: var(--pkfc-mu);
	line-height: 1.65;
	max-width: 560px;
	margin: 0;
}
.pkfc-sec-sub--center { margin: 0 auto; }

/* In-line accent helpers */
.pkfc-yb {
	display: inline-block;
	background: var(--pkfc-y);
	border-radius: 8px;
	padding: 0 8px 2px;
}
.pkfc-tb { color: var(--pkfc-t); }

/* Common chrome dots (reused across mocks) */
.pkfc-dots { display: flex; gap: 5px; }
.pkfc-dots span {
	width: 10px; height: 10px; border-radius: 50%;
	background: rgba(0,0,0,0.16);
}
.pkfc-dots span:first-child   { background: #FF5F57; }
.pkfc-dots span:nth-child(2)  { background: #FEBC2E; }
.pkfc-dots span:nth-child(3)  { background: #28C840; }

/* =========================================================================
   1. HERO
   ========================================================================= */
.pkfc-hero {
	background: var(--pkfc-y);
	padding: 96px 48px 0;
	overflow: hidden;
	position: relative;
}
.pkfc-hero__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(13,43,30,0.08) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
}
.pkfc-hero__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: flex-end;
	position: relative;
	z-index: 1;
}
.pkfc-hero__left { padding-bottom: 80px; }
.pkfc-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px 5px 8px;
	background: rgba(13,43,30,0.1);
	border: 1px solid rgba(13,43,30,0.15);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pkfc-g);
	margin-bottom: 28px;
}
.pkfc-hero__badge-ico { font-size: 14px; }
.pkfc-hero__h1 {
	font-size: clamp(38px, 5.5vw, 62px);
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 1.02;
	color: var(--pkfc-g);
	margin: 0 0 20px;
}
.pkfc-wb {
	display: inline-block;
	background: #FFFFFF;
	border-radius: 10px;
	padding: 0 10px 3px;
}
.pkfc-ul {
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-color: var(--pkfc-t);
	text-underline-offset: 5px;
	text-decoration-thickness: 3px;
}
.pkfc-hero__sub {
	font-size: clamp(15px, 1.8vw, 18px);
	color: rgba(13,43,30,0.65);
	line-height: 1.7;
	max-width: 480px;
	margin: 0 0 36px;
}
.pkfc-hero__sub strong { color: var(--pkfc-g); font-weight: 700; }
.pkfc-hero__ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.pkfc-hero__checks {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.pkfc-hc {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: rgba(13,43,30,0.65);
}
.pkfc-hc__ico {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--pkfc-g);
	display: flex; align-items: center; justify-content: center;
	font-size: 10px;
	color: var(--pkfc-y);
	font-weight: 800;
	flex-shrink: 0;
}

/* ---- Media kit mock ---- */
.pkfc-hero__right { position: relative; }
.pkfc-mk {
	background: #FFFFFF;
	border-radius: 20px 20px 0 0;
	overflow: hidden;
	box-shadow: 0 -24px 80px rgba(0,0,0,0.18);
	position: relative;
}
.pkfc-mk__chrome {
	background: var(--pkfc-bg2);
	border-bottom: 1px solid var(--pkfc-bd);
	padding: 11px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.pkfc-mk__url-bar {
	flex: 1;
	text-align: center;
	font-size: 12px;
	color: var(--pkfc-fa);
	background: #FFFFFF;
	border: 1px solid var(--pkfc-bd);
	border-radius: 6px;
	padding: 3px 0;
}
.pkfc-mk__url-bar--active {
	color: var(--pkfc-t);
	border-color: rgba(0,168,132,0.3);
}
.pkfc-mk__body { padding: 22px 24px; }
.pkfc-mk__profile-row {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-bottom: 16px;
}
.pkfc-mk__av {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pkfc-g), var(--pkfc-t));
	display: flex; align-items: center; justify-content: center;
	font-size: 26px;
	flex-shrink: 0;
}
.pkfc-mk__name {
	font-size: 17px;
	font-weight: 800;
	color: var(--pkfc-tx);
	letter-spacing: -0.03em;
	margin-bottom: 2px;
}
.pkfc-mk__handle {
	font-size: 12px;
	color: var(--pkfc-t);
	margin-bottom: 6px;
}
.pkfc-mk__tag {
	display: inline-block;
	padding: 2px 8px;
	background: var(--pkfc-tb);
	border: 1px solid rgba(0,168,132,0.2);
	border-radius: 100px;
	font-size: 10px;
	font-weight: 600;
	color: var(--pkfc-t);
	margin: 0 3px 3px 0;
}
.pkfc-mk__stats-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	margin-bottom: 16px;
}
.pkfc-mk__stat {
	background: var(--pkfc-bg2);
	border-radius: 10px;
	padding: 12px;
	text-align: center;
}
.pkfc-mk__sv {
	font-size: 18px;
	font-weight: 900;
	color: var(--pkfc-tx);
	letter-spacing: -0.03em;
	line-height: 1;
}
.pkfc-mk__sl {
	font-size: 10px;
	color: var(--pkfc-fa);
	margin-top: 3px;
}
.pkfc-mk__sec-lbl {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pkfc-fa);
	margin-bottom: 8px;
}
.pkfc-mk__sec-lbl--gap { margin-top: 14px; }
.pkfc-mk__rate-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 14px;
}
.pkfc-mk__rate {
	background: var(--pkfc-bg2);
	border-radius: 8px;
	padding: 10px 12px;
}
.pkfc-mk__rt {
	font-size: 11px;
	color: var(--pkfc-mu);
	margin-bottom: 3px;
}
.pkfc-mk__rv {
	font-size: 16px;
	font-weight: 800;
	color: var(--pkfc-tx);
	letter-spacing: -0.02em;
}
.pkfc-mk__brands-row {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.pkfc-mk__brand {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	background: #FFFFFF;
	border: 1px solid var(--pkfc-bd);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 500;
	color: var(--pkfc-tx);
}

/* Floating "brand viewed" badges */
.pkfc-mkf {
	position: absolute;
	background: #FFFFFF;
	border: 1px solid var(--pkfc-bd);
	border-radius: 12px;
	padding: 8px 14px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
	z-index: 2;
}
.pkfc-mkf--1 {
	top: 60px; right: -20px;
	color: var(--pkfc-t);
	animation: pkfc-floatA 4s ease-in-out infinite;
}
.pkfc-mkf--2 {
	bottom: 120px; left: -24px;
	color: var(--pkfc-tx);
	animation: pkfc-floatB 5s ease-in-out infinite .8s;
}
@keyframes pkfc-floatA {
	0%,100% { transform: translateY(0); }
	50%     { transform: translateY(-8px); }
}
@keyframes pkfc-floatB {
	0%,100% { transform: translateY(0); }
	50%     { transform: translateY(-6px); }
}

/* Hero entrance animations */
.pkfc-anim-1, .pkfc-anim-2, .pkfc-anim-3,
.pkfc-anim-4, .pkfc-anim-5, .pkfc-anim-6 {
	opacity: 0;
	transform: translateY(24px);
	animation: pkfc-fadeup .65s cubic-bezier(.22,1,.36,1) forwards;
}
.pkfc-anim-1 { animation-delay: .05s; }
.pkfc-anim-2 { animation-delay: .18s; animation-duration: .7s; }
.pkfc-anim-3 { animation-delay: .32s; }
.pkfc-anim-4 { animation-delay: .45s; animation-duration: .6s; }
.pkfc-anim-5 { animation-delay: .56s; animation-duration: .55s; }
.pkfc-anim-6 { animation-delay: .25s; animation-duration: .9s; }
@keyframes pkfc-fadeup {
	to { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   2. PROOF BAR
   ========================================================================= */
.pkfc-proof-bar { background: var(--pkfc-g); padding: 24px 0; }
.pkfc-proof-bar__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.pkfc-pb-stat { text-align: center; }
.pkfc-pb-num {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -0.04em;
	color: #FFFFFF;
	line-height: 1;
}
.pkfc-pb-num__y { color: var(--pkfc-y); }
.pkfc-pb-num--static { color: var(--pkfc-y); }
.pkfc-pb-lbl {
	font-size: 12px;
	color: rgba(255,255,255,0.4);
	margin-top: 3px;
}
.pkfc-pb-div {
	width: 1px;
	height: 36px;
	background: rgba(255,255,255,0.1);
	flex-shrink: 0;
}

/* =========================================================================
   3. PROBLEM (Linktree vs PawKeen)
   ========================================================================= */
.pkfc-problem { padding: 96px 0; background: var(--pkfc-bg2); }
.pkfc-problem__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 56px;
}
.pkfc-prob {
	border-radius: 20px;
	padding: 36px;
}
.pkfc-prob--old { background: #FFF4F0; border: 1.5px solid #FFD5C0; }
.pkfc-prob--new { background: #F0FAF6; border: 1.5px solid #B0E4D0; }
.pkfc-prob__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 7px;
}
.pkfc-prob__label--old { color: var(--pkfc-o); }
.pkfc-prob__label--new { color: var(--pkfc-t); }
.pkfc-prob__h {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--pkfc-tx);
	margin: 0 0 6px;
}
.pkfc-prob__sub {
	font-size: 14px;
	color: var(--pkfc-mu);
	line-height: 1.55;
	margin: 0 0 24px;
}
.pkfc-prob__items { display: flex; flex-direction: column; gap: 14px; }
.pkfc-pi {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.pkfc-pi__ico {
	width: 30px; height: 30px;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
	margin-top: 1px;
}
.pkfc-pi__ico--bad  { background: rgba(255,107,43,0.12); }
.pkfc-pi__ico--good { background: rgba(0,168,132,0.12); }
.pkfc-pi__t {
	font-size: 14px;
	font-weight: 600;
	color: var(--pkfc-tx);
	margin-bottom: 3px;
}
.pkfc-pi__p {
	font-size: 13px;
	color: var(--pkfc-mu);
	line-height: 1.5;
}

/* Linktree mini-mock */
.pkfc-lt-mock {
	background: #FFFFFF;
	border: 1px solid var(--pkfc-bd);
	border-radius: 14px;
	padding: 20px;
	margin-top: 24px;
}
.pkfc-lt-mock__h {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pkfc-fa);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.pkfc-lt-link {
	border: 1px solid var(--pkfc-bd);
	border-radius: 8px;
	padding: 11px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--pkfc-mu);
	margin-bottom: 7px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.pkfc-lt-missing {
	background: rgba(229,53,53,0.06);
	border: 1px dashed #FFB8B8;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 12px;
	color: var(--pkfc-r);
	margin-top: 10px;
}

/* PawKeen mini-mock */
.pkfc-pk-mini {
	background: #FFFFFF;
	border: 1px solid var(--pkfc-bd);
	border-radius: 14px;
	overflow: hidden;
	margin-top: 24px;
}
.pkfc-pk-mini__top {
	background: linear-gradient(135deg, var(--pkfc-g), var(--pkfc-g2));
	height: 52px;
	display: flex;
	align-items: flex-end;
	padding: 0 16px;
}
.pkfc-pk-mini__av {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pkfc-t), var(--pkfc-y));
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
	border: 2px solid #FFFFFF;
	transform: translateY(20px);
}
.pkfc-pk-mini__body { padding: 28px 16px 16px; }
.pkfc-pk-mini__name {
	font-size: 14px;
	font-weight: 800;
	color: var(--pkfc-tx);
	letter-spacing: -0.02em;
}
.pkfc-pk-mini__handle {
	font-size: 11px;
	color: var(--pkfc-t);
	margin-bottom: 8px;
}
.pkfc-pk-mini__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-bottom: 10px;
}
.pkfc-pk-mini__s {
	background: var(--pkfc-bg2);
	border-radius: 7px;
	padding: 7px;
	text-align: center;
}
.pkfc-pk-mini__sv {
	font-size: 13px;
	font-weight: 800;
	color: var(--pkfc-tx);
}
.pkfc-pk-mini__sl {
	font-size: 9px;
	color: var(--pkfc-fa);
}
.pkfc-pk-mini__good {
	background: rgba(0,168,132,0.08);
	border: 1px solid rgba(0,168,132,0.2);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 12px;
	color: var(--pkfc-t);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 5px;
}

/* =========================================================================
   4. HOW IT WORKS
   ========================================================================= */
.pkfc-how { padding: 96px 0; background: #FFFFFF; }
.pkfc-how__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-top: 64px;
	position: relative;
}
.pkfc-how__steps::before {
	content: "";
	position: absolute;
	top: 32px;
	left: calc(16.67% + 16px);
	right: calc(16.67% + 16px);
	height: 1px;
	background: linear-gradient(90deg, var(--pkfc-y), var(--pkfc-t));
	opacity: 0.4;
}
.pkfc-hs {
	text-align: center;
	padding: 32px 24px;
	background: var(--pkfc-bg2);
	border: 1px solid var(--pkfc-bd);
	border-radius: 20px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.pkfc-hs:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 48px rgba(0,0,0,0.07);
	border-color: transparent;
	background: #FFFFFF;
}
.pkfc-hs__num {
	width: 64px; height: 64px;
	border-radius: 50%;
	margin: 0 auto 18px;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
	font-weight: 900;
	border: 2px solid;
}
.pkfc-hs__num--1 { border-color: var(--pkfc-y); color: var(--pkfc-g); background: var(--pkfc-yb); }
.pkfc-hs__num--2 { border-color: var(--pkfc-t); color: var(--pkfc-t); background: var(--pkfc-tb); }
.pkfc-hs__num--3 { border-color: var(--pkfc-g); color: var(--pkfc-g); background: rgba(13,43,30,0.07); }
.pkfc-hs__icon {
	font-size: 28px;
	margin-bottom: 12px;
}
.pkfc-hs__h {
	font-size: 15px;
	font-weight: 700;
	color: var(--pkfc-tx);
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}
.pkfc-hs__p {
	font-size: 13px;
	color: var(--pkfc-mu);
	line-height: 1.6;
}

/* =========================================================================
   5. FEATURES (tabbed)
   ========================================================================= */
.pkfc-feat { padding: 96px 0; background: var(--pkfc-bg2); }
.pkfc-feat__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}
.pkfc-feat__list { display: flex; flex-direction: column; gap: 6px; }
.pkfc-feat__item {
	width: 100%;
	text-align: left;
	font-family: inherit;
	padding: 20px;
	border-radius: 14px;
	border: 1.5px solid transparent;
	background: transparent;
	cursor: pointer;
	transition: all .2s ease;
}
.pkfc-feat__item:hover,
.pkfc-feat__item--active {
	background: #FFFFFF;
	border-color: var(--pkfc-bd);
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.pkfc-feat__item--active { border-color: var(--pkfc-t); }
.pkfc-feat__row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.pkfc-feat__ico {
	width: 40px; height: 40px;
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}
.pkfc-feat__ico--t { background: var(--pkfc-tb); }
.pkfc-feat__ico--y { background: var(--pkfc-yb); }
.pkfc-feat__ico--g { background: rgba(13,43,30,0.08); }
.pkfc-feat__ico--o { background: var(--pkfc-ob); }
.pkfc-feat__h {
	font-size: 15px;
	font-weight: 700;
	color: var(--pkfc-tx);
	letter-spacing: -0.02em;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.pkfc-feat__p {
	font-size: 13px;
	color: var(--pkfc-mu);
	line-height: 1.6;
}
.pkfc-feat__badge {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}
.pkfc-feat__badge--f { background: var(--pkfc-tb); color: var(--pkfc-t); }
.pkfc-feat__badge--p { background: var(--pkfc-ob); color: var(--pkfc-o); }

/* ---- Feature display panels ---- */
.pkfc-feat__display {
	position: sticky;
	top: 96px;
}
.pkfc-feat__panel { display: none; }
.pkfc-feat__panel--active { display: block; animation: pkfc-fadeup .4s ease; }

.pkfc-fp {
	background: #FFFFFF;
	border: 1.5px solid var(--pkfc-bd);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}
.pkfc-fp__chrome {
	padding: 11px 16px;
	background: var(--pkfc-bg2);
	border-bottom: 1px solid var(--pkfc-bd);
	display: flex;
	align-items: center;
	gap: 8px;
}
.pkfc-fp__url {
	flex: 1;
	text-align: center;
	font-size: 12px;
	color: var(--pkfc-fa);
}
.pkfc-fp__body { padding: 20px; }
.pkfc-fp__body--flush { padding: 0; }

/* Public profile panel */
.pkfc-pp__banner {
	height: 72px;
	background: linear-gradient(135deg, var(--pkfc-g) 0%, var(--pkfc-g3) 100%);
	border-radius: 10px;
	margin: 20px 20px 0;
}
.pkfc-pp__av-wrap {
	padding: 0 16px;
	position: relative;
	z-index: 1;
	margin: -28px 0 8px;
}
.pkfc-pp__av {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pkfc-t), var(--pkfc-y));
	display: flex; align-items: center; justify-content: center;
	font-size: 24px;
	border: 3px solid #FFFFFF;
	margin-left: 20px;
}
.pkfc-pp__info { padding: 0 36px 20px; }
.pkfc-pp__nm {
	font-size: 16px;
	font-weight: 800;
	color: var(--pkfc-tx);
	letter-spacing: -0.03em;
}
.pkfc-pp__hd {
	font-size: 12px;
	color: var(--pkfc-t);
	margin-bottom: 6px;
}
.pkfc-pp__tag {
	display: inline-block;
	padding: 2px 8px;
	background: var(--pkfc-tb);
	border: 1px solid rgba(0,168,132,0.2);
	border-radius: 100px;
	font-size: 10px;
	font-weight: 600;
	color: var(--pkfc-t);
	margin: 0 3px 3px 0;
}
.pkfc-pp__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 7px;
	margin: 12px 0;
}
.pkfc-pp__st {
	background: var(--pkfc-bg2);
	border-radius: 9px;
	padding: 10px;
	text-align: center;
}
.pkfc-pp__sv {
	font-size: 16px;
	font-weight: 900;
	color: var(--pkfc-tx);
	letter-spacing: -0.03em;
}
.pkfc-pp__sl {
	font-size: 10px;
	color: var(--pkfc-fa);
	margin-top: 2px;
}
.pkfc-pp__sec {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pkfc-fa);
	margin-bottom: 8px;
}
.pkfc-pp__rate-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
}
.pkfc-pp__rate {
	background: var(--pkfc-bg2);
	border-radius: 8px;
	padding: 9px 11px;
}
.pkfc-pp__rt {
	font-size: 10px;
	color: var(--pkfc-fa);
}
.pkfc-pp__rv {
	font-size: 14px;
	font-weight: 800;
	color: var(--pkfc-tx);
	letter-spacing: -0.02em;
}
.pkfc-pp__cta-row {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
.pkfc-pp__cta {
	flex: 1;
	padding: 9px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}
.pkfc-pp__cta--g {
	background: var(--pkfc-g);
	color: #FFFFFF;
}
.pkfc-pp__cta--ghost {
	background: var(--pkfc-bg2);
	color: var(--pkfc-mu);
	border: 1px solid var(--pkfc-bd);
}

/* Analytics panel */
.pkfc-an__overview {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	margin-bottom: 16px;
}
.pkfc-an-ov {
	background: var(--pkfc-bg2);
	border-radius: 10px;
	padding: 12px;
	text-align: center;
}
.pkfc-an-ov__v {
	font-size: 20px;
	font-weight: 900;
	color: var(--pkfc-tx);
	letter-spacing: -0.03em;
}
.pkfc-an-ov__l {
	font-size: 10px;
	color: var(--pkfc-fa);
	margin-top: 2px;
}
.pkfc-an-ov__d {
	font-size: 10px;
	font-weight: 700;
	margin-top: 2px;
}
.pkfc-an-ov__d--up { color: var(--pkfc-t); }
.pkfc-an__chart-lbl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pkfc-fa);
	margin-bottom: 10px;
}
.pkfc-an__bars {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: 80px;
	margin-bottom: 8px;
}
.pkfc-an-bar {
	flex: 1;
	border-radius: 4px 4px 0 0;
	background: var(--pkfc-bg2);
	position: relative;
	overflow: hidden;
	min-height: 8px;
}
.pkfc-an-fill {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	border-radius: 4px 4px 0 0;
	background: linear-gradient(to top, var(--pkfc-t), rgba(0,168,132,0.4));
	animation: pkfc-grow 1s ease-out forwards;
}
@keyframes pkfc-grow { from { height: 0; } }
.pkfc-an__days {
	display: flex;
	gap: 5px;
}
.pkfc-an-day {
	flex: 1;
	font-size: 9px;
	color: var(--pkfc-fa);
	text-align: center;
}
.pkfc-an__notice {
	background: rgba(255,214,0,0.12);
	border: 1px solid rgba(255,214,0,0.35);
	border-radius: 10px;
	padding: 10px 12px;
	margin-top: 14px;
	display: flex;
	gap: 8px;
	align-items: center;
}
.pkfc-an__notice-ico {
	font-size: 16px;
	flex-shrink: 0;
}
.pkfc-an__notice-t {
	font-size: 12px;
	font-weight: 700;
	color: var(--pkfc-tx);
}
.pkfc-an__notice-s {
	font-size: 11px;
	color: var(--pkfc-mu);
	margin-top: 1px;
}
.pkfc-an__ref-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 14px;
}
.pkfc-an__ref-lbl {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pkfc-fa);
	margin-bottom: 4px;
}
.pkfc-an__ref-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: var(--pkfc-bg2);
	border-radius: 8px;
}
.pkfc-an__ref-src {
	font-size: 12px;
	font-weight: 600;
	color: var(--pkfc-tx);
	flex: 1;
}
.pkfc-an__ref-bar-wrap {
	width: 80px; height: 5px;
	background: #E0E0E0;
	border-radius: 3px;
	overflow: hidden;
}
.pkfc-an__ref-bar { height: 100%; border-radius: 3px; }
.pkfc-an__ref-bar--t { background: var(--pkfc-t); }
.pkfc-an__ref-bar--y { background: var(--pkfc-y); }
.pkfc-an__ref-bar--g { background: var(--pkfc-g); }
.pkfc-an__ref-pct {
	font-size: 11px;
	font-weight: 700;
	color: var(--pkfc-mu);
	width: 28px;
	text-align: right;
}

/* Brand network panel */
.pkfc-bn__intro {
	font-size: 13px;
	color: var(--pkfc-mu);
	line-height: 1.55;
	margin-bottom: 14px;
	padding: 12px;
	background: rgba(0,168,132,0.07);
	border-radius: 10px;
	border: 1px solid rgba(0,168,132,0.15);
}
.pkfc-bn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	background: var(--pkfc-bg2);
	border-radius: 10px;
	margin-bottom: 8px;
	border: 1px solid var(--pkfc-bd);
}
.pkfc-bn__av {
	width: 36px; height: 36px;
	border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.pkfc-bn__info { flex: 1; }
.pkfc-bn__nm {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkfc-tx);
}
.pkfc-bn__ct {
	font-size: 11px;
	color: var(--pkfc-fa);
}
.pkfc-bn__verify {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	background: var(--pkfc-tb);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 600;
	color: var(--pkfc-t);
}
.pkfc-bn__add {
	border: 1.5px dashed var(--pkfc-bd2);
	border-radius: 10px;
	padding: 11px 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	margin-top: 4px;
}
.pkfc-bn__add:hover {
	border-color: var(--pkfc-t);
	background: var(--pkfc-tb);
}
.pkfc-bn__plus {
	width: 28px; height: 28px;
	border-radius: 7px;
	background: var(--pkfc-bg2);
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	color: var(--pkfc-fa);
}
.pkfc-bn__add-t {
	font-size: 13px;
	color: var(--pkfc-fa);
}

/* Rate card panel */
.pkfc-rc__intro {
	font-size: 13px;
	color: var(--pkfc-mu);
	margin-bottom: 16px;
	line-height: 1.55;
}
.pkfc-rc__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 14px;
}
.pkfc-rc {
	background: var(--pkfc-bg2);
	border-radius: 10px;
	padding: 14px;
}
.pkfc-rc__type {
	font-size: 11px;
	font-weight: 700;
	color: var(--pkfc-mu);
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.pkfc-rc__price-row {
	display: flex;
	align-items: center;
	gap: 3px;
}
.pkfc-rc__cur {
	font-size: 13px;
	color: var(--pkfc-fa);
	font-weight: 600;
}
.pkfc-rc__val {
	font-size: 22px;
	font-weight: 900;
	color: var(--pkfc-tx);
	letter-spacing: -0.04em;
}
.pkfc-rc__note {
	font-size: 12px;
	color: var(--pkfc-fa);
}
.pkfc-rc__negot {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	background: var(--pkfc-yb);
	border: 1px solid rgba(255,214,0,0.3);
	border-radius: 9px;
	margin-top: 4px;
	font-size: 12px;
	color: var(--pkfc-g);
	font-weight: 600;
}
.pkfc-rc__toggle {
	width: 28px; height: 16px;
	background: var(--pkfc-y);
	border-radius: 100px;
	position: relative;
	flex-shrink: 0;
}
.pkfc-rc__toggle::after {
	content: "";
	position: absolute;
	right: 2px;
	top: 2px;
	width: 12px; height: 12px;
	background: var(--pkfc-g);
	border-radius: 50%;
}
.pkfc-rc__tip {
	margin-top: 12px;
	padding: 10px 13px;
	background: var(--pkfc-tb);
	border-radius: 9px;
	font-size: 12px;
	color: var(--pkfc-t);
	font-weight: 600;
}

/* =========================================================================
   6. ZERO COMMISSION
   ========================================================================= */
.pkfc-zero {
	background: var(--pkfc-g);
	padding: 100px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.pkfc-zero__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255,214,0,0.07) 0%, transparent 65%);
	pointer-events: none;
}
.pkfc-zero__inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 48px;
	position: relative;
	z-index: 1;
}
.pkfc-zero__big {
	font-size: clamp(72px, 14vw, 140px);
	font-weight: 900;
	letter-spacing: -0.06em;
	color: var(--pkfc-y);
	line-height: 1;
	margin-bottom: 12px;
}
.pkfc-zero__sub-h {
	font-size: clamp(22px, 3.5vw, 34px);
	font-weight: 900;
	letter-spacing: -0.04em;
	color: #FFFFFF;
	margin-bottom: 16px;
}
.pkfc-zero__p {
	font-size: 17px;
	color: rgba(255,255,255,0.5);
	line-height: 1.65;
	max-width: 540px;
	margin: 0 auto 44px;
}
.pkfc-zero__compare {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.08);
}
.pkfc-zc {
	padding: 20px;
	text-align: center;
}
.pkfc-zc--bad  { background: rgba(229,53,53,0.12); }
.pkfc-zc--meh  { background: rgba(255,107,43,0.1); }
.pkfc-zc--good { background: rgba(255,214,0,0.1); }
.pkfc-zc__plat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.pkfc-zc--bad  .pkfc-zc__plat { color: rgba(229,53,53,0.7); }
.pkfc-zc--meh  .pkfc-zc__plat { color: rgba(255,107,43,0.7); }
.pkfc-zc--good .pkfc-zc__plat { color: var(--pkfc-y); }
.pkfc-zc__pct {
	font-size: 32px;
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
}
.pkfc-zc--bad  .pkfc-zc__pct { color: #FF8080; }
.pkfc-zc--meh  .pkfc-zc__pct { color: #FFB080; }
.pkfc-zc--good .pkfc-zc__pct { color: var(--pkfc-y); }
.pkfc-zc__lbl {
	font-size: 12px;
	color: rgba(255,255,255,0.4);
	margin-top: 4px;
	line-height: 1.4;
}

/* =========================================================================
   7. ANALYTICS HIGHLIGHT
   ========================================================================= */
.pkfc-analytics { padding: 96px 0; background: #FFFFFF; }
.pkfc-analytics__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}
.pkfc-analytics__lede { margin-bottom: 28px; max-width: none; }
.pkfc-analytics__feats {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 32px;
}
.pkfc-analytics__feat {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.pkfc-analytics__feat-ico {
	width: 36px; height: 36px;
	border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.pkfc-analytics__feat-ico--t { background: var(--pkfc-tb); }
.pkfc-analytics__feat-ico--y { background: var(--pkfc-yb); }
.pkfc-analytics__feat-ico--g { background: rgba(13,43,30,0.07); }
.pkfc-analytics__feat-t {
	font-size: 14px;
	font-weight: 700;
	color: var(--pkfc-tx);
	letter-spacing: -0.01em;
	margin-bottom: 3px;
}
.pkfc-analytics__feat-p {
	font-size: 13px;
	color: var(--pkfc-mu);
	line-height: 1.55;
}

.pkfc-an-card {
	background: var(--pkfc-bg2);
	border: 1.5px solid var(--pkfc-bd);
	border-radius: 20px;
	padding: 24px;
}
.pkfc-an-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.pkfc-an-card__title {
	font-size: 15px;
	font-weight: 800;
	color: var(--pkfc-tx);
	letter-spacing: -0.02em;
}
.pkfc-an-card__period {
	padding: 4px 11px;
	background: #FFFFFF;
	border: 1px solid var(--pkfc-bd);
	border-radius: 7px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pkfc-mu);
}
.pkfc-an-card__big-stats {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	margin-bottom: 20px;
}
.pkfc-abs {
	background: #FFFFFF;
	border-radius: 12px;
	padding: 16px;
	text-align: center;
	border: 1px solid var(--pkfc-bd);
}
.pkfc-abs__v {
	font-size: 24px;
	font-weight: 900;
	color: var(--pkfc-tx);
	letter-spacing: -0.04em;
	line-height: 1;
}
.pkfc-abs__l {
	font-size: 11px;
	color: var(--pkfc-fa);
	margin-top: 4px;
}
.pkfc-abs__d {
	font-size: 11px;
	font-weight: 700;
	margin-top: 3px;
}
.pkfc-abs__d--up { color: var(--pkfc-t); }
.pkfc-an-card__chart-wrap {
	background: #FFFFFF;
	border-radius: 12px;
	padding: 16px;
	border: 1px solid var(--pkfc-bd);
}
.pkfc-an-card__chart-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.pkfc-an-card__act-t {
	font-size: 12px;
	font-weight: 700;
	color: var(--pkfc-tx);
}
.pkfc-an-card__act-s {
	font-size: 11px;
	color: var(--pkfc-fa);
}
.pkfc-an-card__bar-chart {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 72px;
}
.pkfc-an-card__bc-bar {
	flex: 1;
	border-radius: 3px 3px 0 0;
	background: var(--pkfc-t);
	opacity: 0.55;
}
.pkfc-an-card__bc-bar:nth-child(1) { background: rgba(0,168,132,0.2); }
.pkfc-an-card__bc-bar:nth-child(2) { background: rgba(0,168,132,0.3); }
.pkfc-an-card__bc-bar:nth-child(3) { background: rgba(0,168,132,0.25); }
.pkfc-an-card__bc-bar:nth-child(4) { background: rgba(0,168,132,0.4); }
.pkfc-an-card__bc-bar:nth-child(5) { background: rgba(0,168,132,0.35); }
.pkfc-an-card__bc-bar:nth-child(6) { background: rgba(0,168,132,0.55); }
.pkfc-an-card__bc-bar:nth-child(7) { background: var(--pkfc-t); opacity: 1; }
.pkfc-an-card__alert {
	background: rgba(255,214,0,0.12);
	border: 1px solid rgba(255,214,0,0.35);
	border-radius: 12px;
	padding: 14px 16px;
	margin-top: 14px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.pkfc-an-card__alert-ico {
	font-size: 20px;
	flex-shrink: 0;
}
.pkfc-an-card__alert-t {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkfc-tx);
	margin-bottom: 2px;
}
.pkfc-an-card__alert-s {
	font-size: 12px;
	color: var(--pkfc-mu);
	line-height: 1.5;
}
.pkfc-an-card__alert-time {
	font-size: 11px;
	color: var(--pkfc-fa);
	margin-top: 4px;
}
.pkfc-an-card__ref-list {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pkfc-an-card__ref-lbl {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pkfc-fa);
	margin-bottom: 2px;
}
.pkfc-an-card__ref-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 11px;
	background: #FFFFFF;
	border: 1px solid var(--pkfc-bd);
	border-radius: 9px;
}
.pkfc-an-card__ref-icon {
	font-size: 15px;
	flex-shrink: 0;
}
.pkfc-an-card__ref-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--pkfc-tx);
	flex: 1;
}
.pkfc-an-card__ref-bar-outer {
	width: 70px; height: 5px;
	background: var(--pkfc-bg2);
	border-radius: 3px;
	overflow: hidden;
}
.pkfc-an-card__ref-bar-inner {
	height: 100%;
	border-radius: 3px;
}
.pkfc-an-card__ref-bar-inner--t { background: var(--pkfc-t); }
.pkfc-an-card__ref-bar-inner--y { background: var(--pkfc-y); }
.pkfc-an-card__ref-bar-inner--g { background: var(--pkfc-g); }
.pkfc-an-card__ref-pct {
	font-size: 11px;
	font-weight: 700;
	color: var(--pkfc-mu);
	width: 28px;
	text-align: right;
}

/* =========================================================================
   8. TESTIMONIALS
   ========================================================================= */
.pkfc-testi { padding: 96px 0; background: var(--pkfc-bg2); }
.pkfc-testi__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 56px;
}
.pkfc-tc {
	background: #FFFFFF;
	border: 1px solid var(--pkfc-bd);
	border-radius: 16px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pkfc-tc:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(0,0,0,0.07);
	border-color: transparent;
}
.pkfc-tc__handle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	background: var(--pkfc-bg2);
	border: 1px solid var(--pkfc-bd);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pkfc-mu);
	margin-bottom: 16px;
	align-self: flex-start;
}
.pkfc-tc__stars {
	color: #E8B800;
	font-size: 13px;
	letter-spacing: 2px;
	margin-bottom: 10px;
}
.pkfc-tc__quote {
	font-size: 14px;
	color: var(--pkfc-tx);
	line-height: 1.65;
	margin: 0 0 20px;
	flex: 1;
}
.pkfc-tc__result {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--pkfc-tb);
	border: 1px solid rgba(0,168,132,0.2);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pkfc-t);
	margin-bottom: 18px;
	align-self: flex-start;
}
.pkfc-tc__author {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--pkfc-bd);
}
.pkfc-tc__av {
	width: 36px; height: 36px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.pkfc-tc__nm {
	font-size: 14px;
	font-weight: 700;
	color: var(--pkfc-tx);
	letter-spacing: -0.01em;
}
.pkfc-tc__rl {
	font-size: 12px;
	color: var(--pkfc-fa);
}

/* =========================================================================
   9. PRICING (Free vs Pro)
   ========================================================================= */
.pkfc-pricing { padding: 96px 0; background: #FFFFFF; }
.pkfc-pricing__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: 860px;
	margin: 56px auto 0;
}
.pkfc-pc {
	border-radius: 20px;
	padding: 36px;
	border: 1.5px solid var(--pkfc-bd);
	background: var(--pkfc-bg2);
	transition: transform .25s ease, box-shadow .25s ease;
	position: relative;
	overflow: hidden;
}
.pkfc-pc:hover { transform: translateY(-4px); }
.pkfc-pc--featured {
	background: var(--pkfc-g);
	border-color: var(--pkfc-g);
}
.pkfc-pc--featured:hover {
	box-shadow: 0 20px 52px rgba(13,43,30,0.3);
}
.pkfc-pc__tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.pkfc-pc__tag--free { background: rgba(0,168,132,0.12); color: var(--pkfc-t); }
.pkfc-pc__tag--pro  { background: rgba(255,214,0,0.2);  color: var(--pkfc-y); }
.pkfc-pc__name {
	font-size: 22px;
	font-weight: 900;
	color: var(--pkfc-tx);
	letter-spacing: -0.04em;
	margin-bottom: 6px;
}
.pkfc-pc--featured .pkfc-pc__name { color: #FFFFFF; }
.pkfc-pc__price-row {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 8px;
}
.pkfc-pc__amt {
	font-size: 52px;
	font-weight: 900;
	letter-spacing: -0.05em;
	color: var(--pkfc-tx);
	line-height: 1;
}
.pkfc-pc--featured .pkfc-pc__amt { color: #FFFFFF; }
.pkfc-pc__per {
	font-size: 15px;
	color: var(--pkfc-fa);
}
.pkfc-pc--featured .pkfc-pc__per { color: rgba(255,255,255,0.45); }
.pkfc-pc__desc {
	font-size: 14px;
	color: var(--pkfc-mu);
	line-height: 1.6;
	margin-bottom: 28px;
	min-height: 44px;
}
.pkfc-pc--featured .pkfc-pc__desc { color: rgba(255,255,255,0.6); }
.pkfc-pc__feats {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 28px;
}
.pkfc-pcf {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--pkfc-mu);
}
.pkfc-pcf__ck {
	font-size: 11px;
	font-weight: 700;
	color: var(--pkfc-t);
	flex-shrink: 0;
}
.pkfc-pc--featured .pkfc-pcf       { color: rgba(255,255,255,0.7); }
.pkfc-pc--featured .pkfc-pcf__ck   { color: var(--pkfc-y); }
.pkfc-pricing__note {
	text-align: center;
	margin-top: 20px;
	font-size: 13px;
	color: var(--pkfc-fa);
}

/* =========================================================================
   10. FAQ
   ========================================================================= */
.pkfc-faq { padding: 96px 0; background: var(--pkfc-bg2); }
.pkfc-faq__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 48px;
}
.pkfc-faq__list {
	margin-top: 48px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.pkfc-faq__item {
	background: #FFFFFF;
	border: 1px solid var(--pkfc-bd);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.pkfc-faq__item--open {
	border-color: rgba(0,168,132,0.35);
}
.pkfc-faq__q {
	width: 100%;
	padding: 18px 20px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--pkfc-tx);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	letter-spacing: -0.01em;
	user-select: none;
	transition: background .15s;
	gap: 16px;
	background: none;
	border: 0;
	text-align: left;
}
.pkfc-faq__q:hover { background: var(--pkfc-bg2); }
.pkfc-faq__ico {
	font-size: 20px;
	color: var(--pkfc-fa);
	transition: transform .25s ease;
	flex-shrink: 0;
	font-weight: 300;
}
.pkfc-faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s cubic-bezier(0.22,1,0.36,1);
}
.pkfc-faq__a-inner {
	padding: 0 20px 18px;
	font-size: 14px;
	color: var(--pkfc-mu);
	line-height: 1.7;
}
.pkfc-faq__item--open .pkfc-faq__ico { transform: rotate(45deg); }
.pkfc-faq__item--open .pkfc-faq__a   { max-height: 600px; }

/* =========================================================================
   11. FINAL CTA
   ========================================================================= */
.pkfc-cta {
	padding: 100px 48px;
	background: var(--pkfc-y);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.pkfc-cta__pet {
	position: absolute;
	font-size: 140px;
	opacity: 0.07;
	user-select: none;
	pointer-events: none;
}
.pkfc-cta__pet--1 {
	top: -20px; left: 60px;
	transform: rotate(-12deg);
}
.pkfc-cta__pet--2 {
	bottom: -30px; right: 60px;
	transform: rotate(14deg);
}
.pkfc-cta__inner {
	max-width: 680px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.pkfc-cta__eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(13,43,30,0.55);
	margin-bottom: 16px;
}
.pkfc-cta__h {
	font-size: clamp(36px, 6vw, 62px);
	font-weight: 900;
	letter-spacing: -0.045em;
	color: var(--pkfc-g);
	line-height: 1.0;
	margin: 0 0 16px;
}
.pkfc-cta__wb {
	display: inline-block;
	background: #FFFFFF;
	border-radius: 10px;
	padding: 0 10px 3px;
}
.pkfc-cta__sub {
	font-size: 17px;
	color: rgba(13,43,30,0.6);
	line-height: 1.65;
	margin: 0 auto 40px;
	max-width: 460px;
}
.pkfc-cta__btns {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.pkfc-cta__note {
	margin-top: 18px;
	font-size: 13px;
	color: rgba(13,43,30,0.45);
	font-weight: 500;
}

/* =========================================================================
   SCROLL REVEAL — page-wide
   ========================================================================= */
.pkfc-rv {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.pkfc-rv--vis { opacity: 1; transform: none; }
.pkfc-rv--d1 { transition-delay: .08s; }
.pkfc-rv--d2 { transition-delay: .16s; }
.pkfc-rv--d3 { transition-delay: .24s; }
.pkfc-rv--d4 { transition-delay: .32s; }

.pkfc-rvl {
	opacity: 0;
	transform: translateX(-24px);
	transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.pkfc-rvl--vis { opacity: 1; transform: none; }
.pkfc-rvr {
	opacity: 0;
	transform: translateX(24px);
	transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.pkfc-rvr--vis { opacity: 1; transform: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
	.pkfc-container { padding: 0 20px; }
	.pkfc-hero { padding: 72px 20px 0; }
	.pkfc-hero__inner { grid-template-columns: 1fr; gap: 40px; }
	.pkfc-hero__left { padding-bottom: 24px; }
	.pkfc-mk { border-radius: 16px; margin-bottom: -1px; }
	.pkfc-mkf--1 { right: 8px; }
	.pkfc-mkf--2 { left: 8px; }
	.pkfc-proof-bar__inner { padding: 0 20px; flex-wrap: wrap; gap: 16px; }
	.pkfc-pb-div { display: none; }
	.pkfc-problem__grid { grid-template-columns: 1fr; }
	.pkfc-how__steps { grid-template-columns: 1fr; gap: 12px; }
	.pkfc-how__steps::before { display: none; }
	.pkfc-feat__grid { grid-template-columns: 1fr; gap: 40px; }
	.pkfc-feat__display { position: static; }
	.pkfc-analytics__grid { grid-template-columns: 1fr; gap: 40px; }
	.pkfc-testi__grid { grid-template-columns: 1fr; }
	.pkfc-pricing__grid { grid-template-columns: 1fr; max-width: 420px; }
	.pkfc-faq__inner { padding: 0 20px; }
	.pkfc-zero__inner { padding: 0 20px; }
	.pkfc-zero__compare { grid-template-columns: 1fr; gap: 0; }
	.pkfc-cta { padding: 80px 20px; }
}
@media (max-width: 720px) {
	.pkfc-hero { padding: 56px 16px 0; }
	.pkfc-hero__h1 { font-size: clamp(32px, 7.5vw, 46px); }
	.pkfc-hero__ctas .pkfc-btn { width: 100%; }
	.pkfc-mkf--1, .pkfc-mkf--2 { font-size: 11px; padding: 6px 10px; }
	.pkfc-problem { padding: 64px 0; }
	.pkfc-prob { padding: 26px 22px; }
	.pkfc-prob__h { font-size: 18px; }
	.pkfc-how { padding: 64px 0; }
	.pkfc-feat { padding: 64px 0; }
	.pkfc-zero { padding: 72px 0; }
	.pkfc-zero__big { font-size: 78px; }
	.pkfc-analytics { padding: 64px 0; }
	.pkfc-an-card { padding: 18px; }
	.pkfc-testi { padding: 64px 0; }
	.pkfc-pricing { padding: 64px 0; }
	.pkfc-pc { padding: 28px 24px; }
	.pkfc-pc__amt { font-size: 44px; }
	.pkfc-faq { padding: 64px 0; }
	.pkfc-faq__q { font-size: 14px; padding: 16px 18px; }
	.pkfc-faq__a-inner { padding: 0 18px 16px; font-size: 13px; }
	.pkfc-cta { padding: 72px 18px; }
	.pkfc-cta__pet { font-size: 90px; }
}

/* =========================================================================
   v0.5.4 — Pricing page (.pkpr-*)
   =========================================================================
   /pricing/ — three-tier pricing with monthly/annual toggle.

   Sections: hero with guarantee bar + toggle, 3 pricing cards
   (Free / Pro featured / Brand), trust notes row, full comparison table
   grouped by feature category, ROI section (creator + brand calculator
   cards) + enterprise bar, 8-item billing FAQ, dual CTA.

   Scoped under .pkpr to avoid clashing with the theme (.pki-*), other
   marketing pages (.pkc-marketing), for-brands (.pkb-*), for-creators
   (.pkfc-*), or the creator dashboard (.pkc).
   ========================================================================= */

.pkpr {
	--pkpr-y:    #FFD600;
	--pkpr-yd:   #E8C200;
	--pkpr-yb:   rgba(255,214,0,0.12);
	--pkpr-g:    #0D2B1E;
	--pkpr-g2:   #163D2C;
	--pkpr-g3:   #1E5038;
	--pkpr-t:    #00A884;
	--pkpr-t2:   #008F70;
	--pkpr-tb:   rgba(0,168,132,0.1);
	--pkpr-o:    #FF6B2B;
	--pkpr-ob:   rgba(255,107,43,0.1);
	--pkpr-r:    #E53535;
	--pkpr-bg:   #FFFFFF;
	--pkpr-bg2:  #F7F6F3;
	--pkpr-bg3:  #F0EEE9;
	--pkpr-bd:   #E8E6E1;
	--pkpr-bd2:  #D8D5CE;
	--pkpr-tx:   #0A0A0A;
	--pkpr-mu:   #6B6760;
	--pkpr-fa:   #9E9B94;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--pkpr-tx);
	background: var(--pkpr-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
.pkpr *,
.pkpr *::before,
.pkpr *::after { box-sizing: border-box; }

/* ---- Buttons ---- */
.pkpr-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	border: none;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
	white-space: nowrap;
	letter-spacing: -0.01em;
	line-height: 1;
}
.pkpr-btn--md { padding: 11px 22px; font-size: 14px; border-radius: 10px; justify-content: center; }
.pkpr-btn--lg { padding: 14px 28px; font-size: 15px; border-radius: 12px; justify-content: center; }
.pkpr-btn--y  { background: var(--pkpr-y); color: var(--pkpr-g); }
.pkpr-btn--y:hover  { background: var(--pkpr-yd); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,214,0,.4); }
.pkpr-btn--g  { background: var(--pkpr-g); color: #FFFFFF; }
.pkpr-btn--g:hover  { background: var(--pkpr-g2); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(13,43,30,.25); }
.pkpr-btn--t  { background: var(--pkpr-t); color: #FFFFFF; }
.pkpr-btn--t:hover  { background: var(--pkpr-t2); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,168,132,.35); }
.pkpr-btn--ghost { background: transparent; color: var(--pkpr-tx); border: 1.5px solid var(--pkpr-bd2); }
.pkpr-btn--ghost:hover { border-color: #999; background: var(--pkpr-bg2); }
.pkpr-btn--ghost-w { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255,255,255,0.22); }
.pkpr-btn--ghost-w:hover { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.07); }
.pkpr-btn--ghost-dk { background: rgba(13,43,30,0.06); color: var(--pkpr-g); border: 1.5px solid rgba(13,43,30,0.18); }
.pkpr-btn--ghost-dk:hover { background: rgba(13,43,30,0.12); border-color: rgba(13,43,30,0.32); }

/* ---- Section heading helpers ---- */
.pkpr-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pkpr-t);
	margin-bottom: 12px;
}
.pkpr-sh {
	font-size: clamp(26px, 3.5vw, 40px);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1.08;
	color: var(--pkpr-tx);
	margin: 0 0 14px;
}
.pkpr-sec-sub {
	font-size: 15px;
	color: var(--pkpr-mu);
	line-height: 1.65;
	margin: 0 auto;
	max-width: 500px;
}
.pkpr-yb {
	display: inline-block;
	background: var(--pkpr-y);
	border-radius: 8px;
	padding: 0 8px 2px;
}

/* =========================================================================
   1. HERO
   ========================================================================= */
.pkpr-hero {
	padding: 88px 48px 72px;
	text-align: center;
	background: var(--pkpr-bg2);
	border-bottom: 1px solid var(--pkpr-bd);
	position: relative;
	overflow: hidden;
}
.pkpr-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(13,43,30,0.05) 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
}
.pkpr-hero__inner {
	max-width: 680px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.pkpr-guarantee {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	padding: 8px 20px;
	background: #FFFFFF;
	border: 1px solid var(--pkpr-bd);
	border-radius: 100px;
	margin-bottom: 28px;
	flex-wrap: wrap;
	justify-content: center;
}
.pkpr-gb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pkpr-mu);
}
.pkpr-gb::before {
	content: "✓";
	width: 16px; height: 16px;
	background: var(--pkpr-t);
	color: #FFFFFF;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 9px;
	font-weight: 800;
	flex-shrink: 0;
}
.pkpr-hero__h1 {
	font-size: clamp(34px, 5vw, 54px);
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 1.05;
	color: var(--pkpr-tx);
	margin: 0 0 14px;
}
.pkpr-hero__sub {
	font-size: 17px;
	color: var(--pkpr-mu);
	line-height: 1.65;
	max-width: 520px;
	margin: 0 auto 36px;
}

/* ---- Billing toggle ---- */
.pkpr-toggle-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}
.pkpr-toggle-lbl {
	font-size: 14px;
	font-weight: 600;
	color: var(--pkpr-mu);
	cursor: pointer;
	transition: color .18s;
	user-select: none;
}
.pkpr-toggle-lbl--active { color: var(--pkpr-tx); }
.pkpr-billing-toggle {
	width: 48px; height: 26px;
	background: var(--pkpr-bd2);
	border-radius: 100px;
	position: relative;
	cursor: pointer;
	transition: background .25s ease;
	border: none;
	flex-shrink: 0;
	padding: 0;
}
.pkpr-billing-toggle--annual { background: var(--pkpr-g); }
.pkpr-billing-toggle__knob {
	width: 20px; height: 20px;
	background: #FFFFFF;
	border-radius: 50%;
	position: absolute;
	top: 3px; left: 3px;
	transition: transform .25s cubic-bezier(.34,1.56,.64,1);
	box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.pkpr-billing-toggle--annual .pkpr-billing-toggle__knob {
	transform: translateX(22px);
}
.pkpr-annual-badge {
	padding: 3px 10px;
	background: rgba(0,168,132,0.12);
	border: 1px solid rgba(0,168,132,0.25);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	color: var(--pkpr-t);
	opacity: 0.4;
	transition: opacity .25s ease;
}
.pkpr-annual-badge--on { opacity: 1; }

/* =========================================================================
   2. PRICING CARDS
   ========================================================================= */
.pkpr-cards {
	padding: 64px 48px 0;
	background: var(--pkpr-bg2);
}
.pkpr-cards__inner {
	max-width: 1060px;
	margin: 0 auto;
}
.pkpr-cards__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
	align-items: start;
}
.pkpr-pc {
	border-radius: 20px;
	padding: 32px;
	border: 1.5px solid var(--pkpr-bd);
	background: #FFFFFF;
	position: relative;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pkpr-pc:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 48px rgba(0,0,0,0.08);
}
.pkpr-pc--featured {
	background: var(--pkpr-g);
	border-color: var(--pkpr-g);
}
.pkpr-pc--featured:hover {
	box-shadow: 0 16px 48px rgba(13,43,30,0.3);
}
.pkpr-pc--brand { border-color: var(--pkpr-t); }
.pkpr-pc--brand:hover { box-shadow: 0 16px 48px rgba(0,168,132,0.12); }

.pkpr-popular-badge {
	position: absolute;
	top: -1px; left: 50%;
	transform: translateX(-50%);
	background: var(--pkpr-y);
	color: var(--pkpr-g);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 16px;
	border-radius: 0 0 10px 10px;
	white-space: nowrap;
}

.pkpr-pc__for {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pkpr-fa);
	margin: 8px 0 14px;
}
.pkpr-pc__for--shifted { margin-top: 24px; }
.pkpr-pc__for--brand   { color: var(--pkpr-t); }
.pkpr-pc--featured .pkpr-pc__for { color: rgba(255,255,255,0.4); }

.pkpr-pc__tier {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.pkpr-pc__tier--free  { background: var(--pkpr-bg2); color: var(--pkpr-fa); }
.pkpr-pc__tier--pro   { background: rgba(255,214,0,0.18); color: var(--pkpr-y); }
.pkpr-pc__tier--brand { background: var(--pkpr-tb); color: var(--pkpr-t); }

.pkpr-pc__name {
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -0.04em;
	color: var(--pkpr-tx);
	margin-bottom: 10px;
}
.pkpr-pc--featured .pkpr-pc__name { color: #FFFFFF; }

.pkpr-pc__price { margin-bottom: 6px; min-height: 56px; }
.pkpr-pc__price-block { display: none; align-items: baseline; gap: 4px; }
.pkpr-pc__price-block--show { display: flex; }
.pkpr-pc__amt {
	font-size: 52px;
	font-weight: 900;
	letter-spacing: -0.05em;
	color: var(--pkpr-tx);
	line-height: 1;
}
.pkpr-pc--featured .pkpr-pc__amt { color: #FFFFFF; }
.pkpr-pc__per-wrap {
	display: flex;
	flex-direction: column;
	padding-bottom: 6px;
	margin-left: 4px;
}
.pkpr-pc__per {
	font-size: 14px;
	color: var(--pkpr-fa);
}
.pkpr-pc--featured .pkpr-pc__per { color: rgba(255,255,255,0.45); }
.pkpr-pc__annual-note {
	font-size: 12px;
	color: var(--pkpr-t);
	font-weight: 600;
	margin-bottom: 10px;
	min-height: 18px;
}
.pkpr-pc--featured .pkpr-pc__annual-note { color: rgba(255,214,0,0.85); }
.pkpr-pc__annual-note strong { font-weight: 800; }
.pkpr-pc__desc {
	font-size: 14px;
	color: var(--pkpr-mu);
	line-height: 1.6;
	margin-bottom: 24px;
	min-height: 64px;
}
.pkpr-pc--featured .pkpr-pc__desc { color: rgba(255,255,255,0.6); }
.pkpr-pc__divider {
	height: 1px;
	background: var(--pkpr-bd);
	margin-bottom: 20px;
}
.pkpr-pc--featured .pkpr-pc__divider { background: rgba(255,255,255,0.12); }

.pkpr-pc__feats {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 28px;
}
.pkpr-pcf {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: var(--pkpr-mu);
	line-height: 1.45;
}
.pkpr-pcf__ck {
	width: 16px; height: 16px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 9px;
	font-weight: 800;
	flex-shrink: 0;
	margin-top: 1px;
}
.pkpr-pcf__ck--t { background: rgba(0,168,132,0.15); color: var(--pkpr-t); }
.pkpr-pcf__ck--y { background: rgba(255,214,0,0.22); color: #8A6800; }
.pkpr-pcf strong { color: var(--pkpr-tx); font-weight: 600; }
.pkpr-pc--featured .pkpr-pcf       { color: rgba(255,255,255,0.7); }
.pkpr-pc--featured .pkpr-pcf__ck--t { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
.pkpr-pc--featured .pkpr-pcf__ck--y { background: rgba(255,214,0,0.2); color: var(--pkpr-y); }
.pkpr-pc--featured .pkpr-pcf strong { color: #FFFFFF; }

.pkpr-pc__cta { width: 100%; }
.pkpr-pc__sub-note {
	text-align: center;
	margin-top: 10px;
	font-size: 12px;
	color: var(--pkpr-fa);
}
.pkpr-pc--featured .pkpr-pc__sub-note { color: rgba(255,255,255,0.35); }

/* ---- Trust notes row ---- */
.pkpr-trust-notes {
	max-width: 1060px;
	margin: 0 auto;
	padding: 20px 0 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	flex-wrap: wrap;
}
.pkpr-tn {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--pkpr-fa);
	font-weight: 500;
}
.pkpr-tn::before {
	content: "✓";
	font-size: 11px;
	font-weight: 800;
	color: var(--pkpr-t);
}

/* =========================================================================
   3. COMPARISON TABLE
   ========================================================================= */
.pkpr-compare { padding: 96px 0; background: #FFFFFF; }
.pkpr-compare__inner {
	max-width: 1060px;
	margin: 0 auto;
	padding: 0 48px;
}
.pkpr-compare__head {
	text-align: center;
	margin-bottom: 56px;
}

.pkpr-ct {
	border: 1.5px solid var(--pkpr-bd);
	border-radius: 16px;
	overflow: hidden;
}
.pkpr-ct__header {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	background: var(--pkpr-bg2);
	border-bottom: 2px solid var(--pkpr-bd);
}
.pkpr-ct__h {
	padding: 16px 20px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pkpr-tx);
	letter-spacing: -0.01em;
}
.pkpr-ct__h--center { text-align: center; border-left: 1px solid var(--pkpr-bd); }
.pkpr-ct__h--featured {
	background: var(--pkpr-g);
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	border-left: 1px solid var(--pkpr-bd);
}
.pkpr-ct__h--brand {
	text-align: center;
	border-left: 1px solid var(--pkpr-bd);
	color: var(--pkpr-t);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
}
.pkpr-ct__sub {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pkpr-y);
}
.pkpr-ct__sub--t { color: var(--pkpr-t); }

.pkpr-ct__group-head {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	background: var(--pkpr-bg2);
	border-top: 1px solid var(--pkpr-bd);
}
.pkpr-ct__group-head:first-of-type { border-top: none; }
.pkpr-ct__gh {
	padding: 10px 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pkpr-fa);
}
.pkpr-ct__gh:not(:first-child) { border-left: 1px solid var(--pkpr-bd); }
.pkpr-ct__gh--t { color: var(--pkpr-t); }

.pkpr-ct__row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	border-top: 1px solid var(--pkpr-bd);
	transition: background .15s;
}
.pkpr-ct__row:hover { background: var(--pkpr-bg2); }
.pkpr-ct__cell {
	padding: 13px 20px;
	font-size: 13px;
	display: flex;
	align-items: center;
}
.pkpr-ct__cell--label { color: var(--pkpr-tx); }
.pkpr-ct__cell--center {
	justify-content: center;
	border-left: 1px solid var(--pkpr-bd);
}
.pkpr-ct__cell--featured {
	background: rgba(13,43,30,0.025);
}
.pkpr-ct__row:hover .pkpr-ct__cell--featured {
	background: rgba(13,43,30,0.04);
}
.pkpr-ct__feat-name {
	color: var(--pkpr-tx);
	font-weight: 500;
}
.pkpr-ct__feat-note {
	color: var(--pkpr-fa);
	font-size: 12px;
	margin-top: 1px;
}
.pkpr-ct__yes { font-size: 15px; }
.pkpr-ct__no  { font-size: 14px; color: var(--pkpr-bd2); }
.pkpr-ct__val {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkpr-tx);
}
.pkpr-ct__val--g { color: var(--pkpr-t); }
.pkpr-ct__val--m { font-size: 12px; color: var(--pkpr-fa); font-weight: 600; }

/* =========================================================================
   4. ROI
   ========================================================================= */
.pkpr-roi {
	padding: 96px 0;
	background: var(--pkpr-bg2);
	border-top: 1px solid var(--pkpr-bd);
}
.pkpr-roi__inner {
	max-width: 1060px;
	margin: 0 auto;
	padding: 0 48px;
}
.pkpr-roi__head {
	text-align: center;
	margin-bottom: 56px;
}
.pkpr-roi__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.pkpr-roi-card {
	background: #FFFFFF;
	border: 1.5px solid var(--pkpr-bd);
	border-radius: 20px;
	padding: 36px;
	overflow: hidden;
	position: relative;
}
.pkpr-roi-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
}
.pkpr-roi-card--creator::before {
	background: linear-gradient(90deg, var(--pkpr-g), var(--pkpr-t));
}
.pkpr-roi-card--brand::before {
	background: linear-gradient(90deg, var(--pkpr-t), var(--pkpr-y));
}
.pkpr-roi-card__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.pkpr-roi-card--creator .pkpr-roi-card__label { color: var(--pkpr-g); }
.pkpr-roi-card--brand   .pkpr-roi-card__label { color: var(--pkpr-t); }
.pkpr-roi-card__h {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--pkpr-tx);
	margin-bottom: 20px;
	line-height: 1.2;
}
.pkpr-roi-calc {
	background: var(--pkpr-bg2);
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 20px;
}
.pkpr-roi-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--pkpr-bd);
	font-size: 14px;
}
.pkpr-roi-row:last-child { border-bottom: none; }
.pkpr-roi-row__lbl {
	color: var(--pkpr-mu);
	font-weight: 500;
}
.pkpr-roi-row__val {
	font-weight: 700;
	color: var(--pkpr-tx);
}
.pkpr-roi-row__val--g { color: var(--pkpr-t); }
.pkpr-roi-row__val--r { color: var(--pkpr-r); }
.pkpr-roi-row--total { padding-top: 14px; }
.pkpr-roi-row--total .pkpr-roi-row__lbl {
	font-weight: 700;
	color: var(--pkpr-tx);
	font-size: 15px;
}
.pkpr-roi-row--total .pkpr-roi-row__val {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--pkpr-t);
}
.pkpr-roi-card__note {
	font-size: 13px;
	color: var(--pkpr-mu);
	line-height: 1.6;
	margin: 0;
}
.pkpr-roi-card__note strong { color: var(--pkpr-tx); }

/* ---- Enterprise bar ---- */
.pkpr-roi__enterprise-wrap { margin-top: 32px; }
.pkpr-enterprise {
	background: var(--pkpr-g);
	padding: 48px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	max-width: 1060px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
.pkpr-enterprise__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(255,214,0,0.06) 0%, transparent 70%);
	pointer-events: none;
}
.pkpr-enterprise__left  { position: relative; z-index: 1; }
.pkpr-enterprise__right {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	flex-wrap: wrap;
}
.pkpr-enterprise__tag {
	display: inline-block;
	padding: 4px 12px;
	background: rgba(255,214,0,0.15);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pkpr-y);
	margin-bottom: 12px;
}
.pkpr-enterprise__h {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.03em;
	color: #FFFFFF;
	margin: 0 0 6px;
}
.pkpr-enterprise__p {
	font-size: 14px;
	color: rgba(255,255,255,0.5);
	line-height: 1.6;
	max-width: 500px;
	margin: 0;
}

/* =========================================================================
   5. FAQ
   ========================================================================= */
.pkpr-faq { padding: 96px 0; background: #FFFFFF; }
.pkpr-faq__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 48px;
}
.pkpr-faq__head {
	text-align: center;
	margin-bottom: 48px;
}
.pkpr-faq__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.pkpr-faq__item {
	background: var(--pkpr-bg2);
	border: 1px solid var(--pkpr-bd);
	border-radius: 12px;
	overflow: hidden;
}
.pkpr-faq__q {
	width: 100%;
	padding: 18px 20px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--pkpr-tx);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	letter-spacing: -0.01em;
	user-select: none;
	transition: background .15s;
	gap: 16px;
	background: none;
	border: 0;
	text-align: left;
}
.pkpr-faq__q:hover { background: var(--pkpr-bg3); }
.pkpr-faq__ico {
	font-size: 20px;
	color: var(--pkpr-fa);
	transition: transform .25s ease;
	flex-shrink: 0;
	font-weight: 300;
}
.pkpr-faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .38s cubic-bezier(0.22,1,0.36,1);
}
.pkpr-faq__a-inner {
	padding: 0 20px 18px;
	font-size: 14px;
	color: var(--pkpr-mu);
	line-height: 1.7;
}
.pkpr-faq__a-inner strong { color: var(--pkpr-tx); font-weight: 600; }
.pkpr-faq__item--open .pkpr-faq__ico { transform: rotate(45deg); }
.pkpr-faq__item--open .pkpr-faq__a   { max-height: 400px; }
.pkpr-faq__item--open .pkpr-faq__q   { background: #FFFFFF; }

/* =========================================================================
   6. DUAL CTA
   ========================================================================= */
.pkpr-cta { padding: 0 48px 96px; }
.pkpr-cta__inner {
	max-width: 1060px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.pkpr-cta-card {
	border-radius: 20px;
	padding: 40px;
	position: relative;
	overflow: hidden;
}
.pkpr-cta-card--creators { background: var(--pkpr-y); }
.pkpr-cta-card--brands   { background: var(--pkpr-g); }
.pkpr-cta-card__deco {
	position: absolute;
	font-size: 110px;
	opacity: 0.08;
	bottom: -20px;
	right: 20px;
	user-select: none;
	pointer-events: none;
}
.pkpr-cta-card--creators .pkpr-cta-card__deco { color: var(--pkpr-g); }
.pkpr-cta-card__content { position: relative; z-index: 1; }
.pkpr-cta-card__for {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.pkpr-cta-card--creators .pkpr-cta-card__for { color: rgba(13,43,30,0.55); }
.pkpr-cta-card--brands   .pkpr-cta-card__for { color: rgba(255,214,0,0.6); }
.pkpr-cta-card__h {
	font-size: clamp(22px, 2.8vw, 30px);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1.15;
	margin: 0 0 10px;
}
.pkpr-cta-card--creators .pkpr-cta-card__h { color: var(--pkpr-g); }
.pkpr-cta-card--brands   .pkpr-cta-card__h { color: #FFFFFF; }
.pkpr-cta-card__p {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 28px;
}
.pkpr-cta-card--creators .pkpr-cta-card__p { color: rgba(13,43,30,0.65); }
.pkpr-cta-card--brands   .pkpr-cta-card__p { color: rgba(255,255,255,0.55); }
.pkpr-cta-card__btns {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.pkpr-cta-card__note {
	font-size: 12px;
	margin-top: 10px;
}
.pkpr-cta-card--creators .pkpr-cta-card__note { color: rgba(13,43,30,0.45); }
.pkpr-cta-card--brands   .pkpr-cta-card__note { color: rgba(255,255,255,0.3); }

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */
.pkpr-rv {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.pkpr-rv--vis { opacity: 1; transform: none; }
.pkpr-rv--d1 { transition-delay: .07s; }
.pkpr-rv--d2 { transition-delay: .14s; }
.pkpr-rv--d3 { transition-delay: .21s; }
.pkpr-rv--d4 { transition-delay: .28s; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
	.pkpr-hero { padding: 64px 20px 56px; }
	.pkpr-cards { padding: 56px 20px 0; }
	.pkpr-cards__grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
	.pkpr-trust-notes { padding: 20px 20px 56px; gap: 16px; }
	.pkpr-compare__inner,
	.pkpr-roi__inner,
	.pkpr-faq__inner { padding: 0 20px; }
	.pkpr-ct__header,
	.pkpr-ct__row,
	.pkpr-ct__group-head { grid-template-columns: 1.5fr 0.7fr 0.7fr 0.7fr; }
	.pkpr-ct__cell { padding: 11px 14px; font-size: 12px; }
	.pkpr-ct__h    { padding: 13px 14px; font-size: 12px; }
	.pkpr-ct__gh   { padding: 9px 14px; }
	.pkpr-roi__grid { grid-template-columns: 1fr; }
	.pkpr-enterprise { padding: 32px 24px; flex-direction: column; align-items: flex-start; }
	.pkpr-enterprise__right { width: 100%; }
	.pkpr-cta { padding: 0 20px 64px; }
	.pkpr-cta__inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.pkpr-hero { padding: 48px 16px 40px; }
	.pkpr-guarantee { padding: 10px 16px; gap: 12px; }
	.pkpr-hero__h1 { font-size: clamp(28px, 7vw, 38px); }
	.pkpr-cards { padding: 40px 16px 0; }
	.pkpr-pc { padding: 28px 22px; }
	.pkpr-pc__amt { font-size: 44px; }
	.pkpr-compare { padding: 64px 0; }
	.pkpr-roi { padding: 64px 0; }
	.pkpr-roi-card { padding: 28px 22px; }
	.pkpr-enterprise__h { font-size: 18px; }
	.pkpr-enterprise__right .pkpr-btn { width: 100%; }
	.pkpr-faq { padding: 64px 0; }
	.pkpr-faq__q { font-size: 14px; padding: 16px 18px; }
	.pkpr-faq__a-inner { padding: 0 18px 16px; font-size: 13px; }
	.pkpr-cta-card { padding: 28px 22px; }
	.pkpr-cta-card__btns .pkpr-btn { width: 100%; }
	/* Collapse comparison table to single-column on phones */
	.pkpr-ct__header { display: none; }
	.pkpr-ct__group-head {
		grid-template-columns: 1fr;
		padding: 4px 0;
	}
	.pkpr-ct__group-head .pkpr-ct__gh:not(:first-child) { display: none; }
	.pkpr-ct__row {
		grid-template-columns: 1fr;
		padding: 14px 16px;
		gap: 6px;
	}
	.pkpr-ct__cell {
		justify-content: flex-start;
		padding: 4px 0;
		border-left: none;
	}
	.pkpr-ct__cell--label {
		font-size: 14px;
		padding: 2px 0 8px;
		border-bottom: 1px solid var(--pkpr-bd);
		margin-bottom: 4px;
	}
	.pkpr-ct__cell--center { background: transparent !important; }
	.pkpr-ct__cell--center::before {
		font-weight: 700;
		color: var(--pkpr-mu);
		margin-right: 8px;
		font-size: 12px;
	}
	.pkpr-ct__cell--center:nth-of-type(2)::before { content: "Free:"; }
	.pkpr-ct__cell--center:nth-of-type(3)::before { content: "Pro:"; color: var(--pkpr-y); }
	.pkpr-ct__cell--center:nth-of-type(4)::before { content: "Brand:"; color: var(--pkpr-t); }
}

/* =========================================================================
   v0.5.5 — Resources hub (.pkrs-*)
   =========================================================================
   /resources/ — guides, industry data, downloadable templates,
   interactive rate calculator, newsletter signup.

   Sections: dark-green hero with search + chips + stats, featured 1+2
   cards, filterable article grid (5 categories × ~16 cards), live rate
   calculator, dark-green data strip, 4 template cards with modal
   previews, newsletter signup with recent issues, yellow PetCare
   Community card.

   Scoped under .pkrs to avoid clashing with the theme (.pki-*), other
   marketing pages (.pkc-marketing), for-brands (.pkb-*), for-creators
   (.pkfc-*), pricing (.pkpr-*), or the creator dashboard (.pkc).
   ========================================================================= */

.pkrs {
	--pkrs-y:    #FFD600;
	--pkrs-yd:   #E8C200;
	--pkrs-yb:   rgba(255,214,0,0.12);
	--pkrs-g:    #0D2B1E;
	--pkrs-g2:   #163D2C;
	--pkrs-g3:   #1E5038;
	--pkrs-t:    #00A884;
	--pkrs-t2:   #008F70;
	--pkrs-tb:   rgba(0,168,132,0.1);
	--pkrs-o:    #FF6B2B;
	--pkrs-ob:   rgba(255,107,43,0.1);
	--pkrs-p:    #7B5CF5;
	--pkrs-pb:   rgba(123,92,245,0.1);
	--pkrs-r:    #E53535;
	--pkrs-bg:   #FFFFFF;
	--pkrs-bg2:  #F7F6F3;
	--pkrs-bg3:  #F0EEE9;
	--pkrs-bd:   #E8E6E1;
	--pkrs-bd2:  #D8D5CE;
	--pkrs-tx:   #0A0A0A;
	--pkrs-mu:   #6B6760;
	--pkrs-fa:   #9E9B94;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--pkrs-tx);
	background: var(--pkrs-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
.pkrs *,
.pkrs *::before,
.pkrs *::after { box-sizing: border-box; }
.pkrs button { font-family: inherit; }

/* ---- Buttons ---- */
.pkrs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
	white-space: nowrap;
	letter-spacing: -0.01em;
	line-height: 1;
}
.pkrs-btn--md { padding: 11px 22px; font-size: 14px; border-radius: 10px; }
.pkrs-btn--lg { padding: 14px 28px; font-size: 15px; border-radius: 12px; }
.pkrs-btn--y  { background: var(--pkrs-y); color: var(--pkrs-g); }
.pkrs-btn--y:hover  { background: var(--pkrs-yd); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,214,0,.4); }
.pkrs-btn--g  { background: var(--pkrs-g); color: #FFFFFF; }
.pkrs-btn--g:hover  { background: var(--pkrs-g2); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(13,43,30,.25); }
.pkrs-btn--ghost-w  { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255,255,255,.22); }
.pkrs-btn--ghost-w:hover  { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.07); }
.pkrs-btn--ghost-dk { background: rgba(13,43,30,.07); color: var(--pkrs-g); border: 1.5px solid rgba(13,43,30,.2); }
.pkrs-btn--ghost-dk:hover { background: rgba(13,43,30,.12); border-color: rgba(13,43,30,.32); }

/* ---- Section heading helpers ---- */
.pkrs-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pkrs-t);
	margin-bottom: 12px;
}
.pkrs-eyebrow--center { text-align: center; }
.pkrs-sh {
	font-size: clamp(26px, 3.5vw, 40px);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1.08;
	color: var(--pkrs-tx);
	margin: 0 0 14px;
}
.pkrs-sh--center { text-align: center; }
.pkrs-sec-sub {
	font-size: 16px;
	color: var(--pkrs-mu);
	line-height: 1.65;
	margin: 0;
}
.pkrs-sec-sub--center { max-width: 480px; margin: 0 auto 56px; }
.pkrs-yb {
	display: inline-block;
	background: var(--pkrs-y);
	border-radius: 8px;
	padding: 0 8px 2px;
}

/* ---- Category badges ---- */
.pkrs-cat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.pkrs-cat--cr { background: var(--pkrs-tb); color: var(--pkrs-t); border: 1px solid rgba(0,168,132,.2); }
.pkrs-cat--br { background: rgba(13,43,30,.08); color: var(--pkrs-g3); border: 1px solid rgba(13,43,30,.15); }
.pkrs-cat--da { background: var(--pkrs-yb); color: #8A6800; border: 1px solid rgba(255,214,0,.25); }
.pkrs-cat--pg { background: var(--pkrs-ob); color: var(--pkrs-o); border: 1px solid rgba(255,107,43,.2); }
.pkrs-cat--co { background: var(--pkrs-pb); color: var(--pkrs-p); border: 1px solid rgba(123,92,245,.2); }

/* =========================================================================
   1. HERO
   ========================================================================= */
.pkrs-hero {
	padding: 88px 48px 72px;
	background: var(--pkrs-g);
	position: relative;
	overflow: hidden;
	text-align: center;
}
.pkrs-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}
.pkrs-hero__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,214,0,.08) 0%, transparent 65%);
	pointer-events: none;
}
.pkrs-hero__inner {
	max-width: 680px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.pkrs-hero__eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pkrs-y);
	margin-bottom: 16px;
}
.pkrs-hero__h1 {
	font-size: clamp(34px, 5vw, 54px);
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 1.05;
	color: #FFFFFF;
	margin: 0 0 16px;
}
.pkrs-yl { color: var(--pkrs-y); }
.pkrs-hero__sub {
	font-size: 17px;
	color: rgba(255,255,255,.5);
	line-height: 1.65;
	margin: 0 auto 36px;
	max-width: 520px;
}

/* ---- Search bar ---- */
.pkrs-search-bar {
	display: flex;
	align-items: center;
	background: #FFFFFF;
	border-radius: 14px;
	padding: 6px 6px 6px 18px;
	gap: 10px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.25);
	max-width: 540px;
	margin: 0 auto 36px;
}
.pkrs-search-bar__icon {
	font-size: 16px;
	color: var(--pkrs-fa);
	flex-shrink: 0;
}
.pkrs-search-bar__input {
	flex: 1;
	border: 0;
	outline: 0;
	font-family: inherit;
	font-size: 15px;
	color: var(--pkrs-tx);
	background: transparent;
	padding: 8px 0;
}
.pkrs-search-bar__input::placeholder { color: var(--pkrs-fa); }
.pkrs-search-bar__btn {
	padding: 10px 20px;
	background: var(--pkrs-g);
	color: #FFFFFF;
	border: 0;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s;
	flex-shrink: 0;
}
.pkrs-search-bar__btn:hover { background: var(--pkrs-g2); }

/* ---- Topic chips ---- */
.pkrs-hero__topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.pkrs-ht {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255,255,255,.6);
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s;
}
.pkrs-ht:hover {
	background: rgba(255,255,255,.12);
	color: rgba(255,255,255,.9);
	border-color: rgba(255,255,255,.22);
}

/* ---- Hero stat row ---- */
.pkrs-hero__stats {
	display: flex;
	gap: 40px;
	justify-content: center;
	margin-top: 52px;
	padding-top: 40px;
	border-top: 1px solid rgba(255,255,255,.08);
	flex-wrap: wrap;
}
.pkrs-hs { text-align: center; }
.pkrs-hs__n {
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -0.04em;
	color: #FFFFFF;
	line-height: 1;
}
.pkrs-hs__l {
	font-size: 12px;
	color: rgba(255,255,255,.4);
	margin-top: 4px;
}

/* =========================================================================
   2. FEATURED
   ========================================================================= */
.pkrs-featured {
	padding: 72px 0 0;
	background: var(--pkrs-bg2);
}
.pkrs-featured__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 48px;
}
.pkrs-featured__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 28px;
}
.pkrs-featured__head h2 {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--pkrs-tx);
	margin: 0;
}
.pkrs-featured__view-all {
	font-size: 14px;
	font-weight: 600;
	color: var(--pkrs-t);
	text-decoration: none;
	transition: color .18s;
}
.pkrs-featured__view-all:hover { color: var(--pkrs-t2); }
.pkrs-featured__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 16px;
}

/* Main feature */
.pkrs-feat-main {
	border-radius: 20px;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid var(--pkrs-bd);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	cursor: pointer;
}
.pkrs-feat-main:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(0,0,0,.08);
	border-color: transparent;
}
.pkrs-feat-main__thumb {
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pkrs-feat-main__emoji {
	font-size: 72px;
	user-select: none;
}
.pkrs-feat-main__body { padding: 24px; }
.pkrs-feat-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.pkrs-feat-read {
	font-size: 12px;
	color: var(--pkrs-fa);
	font-weight: 500;
}
.pkrs-feat-date {
	font-size: 12px;
	color: var(--pkrs-fa);
}
.pkrs-feat-main__title {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--pkrs-tx);
	line-height: 1.3;
	margin: 0 0 8px;
}
.pkrs-feat-main__desc {
	font-size: 14px;
	color: var(--pkrs-mu);
	line-height: 1.6;
	margin: 0;
}
.pkrs-feat-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pkrs-t);
	text-decoration: none;
	margin-top: 14px;
	transition: gap .18s;
}
.pkrs-feat-link:hover { gap: 8px; }
.pkrs-feat-link::after { content: "→"; }

/* Side features */
.pkrs-feat-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pkrs-feat-sm {
	border-radius: 16px;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid var(--pkrs-bd);
	display: flex;
	flex-direction: column;
	flex: 1;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	cursor: pointer;
}
.pkrs-feat-sm:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 36px rgba(0,0,0,.07);
	border-color: transparent;
}
.pkrs-feat-sm__thumb {
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pkrs-feat-sm__emoji {
	font-size: 44px;
	user-select: none;
}
.pkrs-feat-sm__body { padding: 16px; flex: 1; }
.pkrs-feat-sm__title {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--pkrs-tx);
	line-height: 1.35;
	margin: 0 0 5px;
}
.pkrs-feat-link-sm {
	font-size: 12px;
	font-weight: 600;
	color: var(--pkrs-t);
	text-decoration: none;
	transition: color .18s;
}
.pkrs-feat-link-sm:hover { color: var(--pkrs-t2); }

/* =========================================================================
   3. ARTICLE GRID
   ========================================================================= */
.pkrs-articles {
	padding: 72px 0 96px;
	background: var(--pkrs-bg2);
}
.pkrs-articles__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 48px;
}
.pkrs-articles__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 14px;
}
.pkrs-articles__count {
	font-size: 13px;
	color: var(--pkrs-fa);
	font-weight: 500;
}

/* Filter tabs */
.pkrs-filter-tabs {
	display: inline-flex;
	gap: 6px;
	flex-wrap: wrap;
	padding: 4px;
	background: var(--pkrs-bg3);
	border-radius: 12px;
}
.pkrs-ft {
	padding: 8px 18px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: var(--pkrs-mu);
	transition: background .2s, color .2s, box-shadow .2s;
}
.pkrs-ft:hover { color: var(--pkrs-tx); background: rgba(255,255,255,.6); }
.pkrs-ft--active {
	background: #FFFFFF;
	color: var(--pkrs-tx);
	box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* Article cards */
.pkrs-articles__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.pkrs-art-card {
	background: #FFFFFF;
	border: 1px solid var(--pkrs-bd);
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	display: flex;
	flex-direction: column;
	/* Variant: when rendered as <a> for linked articles, kill default styling. */
	text-decoration: none;
	color: inherit;
}
.pkrs-art-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 44px rgba(0,0,0,.08);
	border-color: transparent;
}
.pkrs-art-card--hidden { display: none; }
.pkrs-art-card__thumb {
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-shrink: 0;
}
.pkrs-art-card__emoji {
	font-size: 48px;
	user-select: none;
}
.pkrs-art-card__body {
	padding: 18px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.pkrs-art-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 9px;
	flex-wrap: wrap;
}
.pkrs-art-card__read {
	font-size: 11px;
	color: var(--pkrs-fa);
	font-weight: 500;
}
.pkrs-art-card__title {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--pkrs-tx);
	line-height: 1.35;
	margin: 0 0 7px;
}
.pkrs-art-card__desc {
	font-size: 13px;
	color: var(--pkrs-mu);
	line-height: 1.6;
	flex: 1;
	margin: 0;
}
.pkrs-art-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--pkrs-bd);
}
.pkrs-art-card__date {
	font-size: 11px;
	color: var(--pkrs-fa);
}
.pkrs-art-card__arrow {
	font-size: 12px;
	font-weight: 700;
	color: var(--pkrs-t);
	transition: transform .18s;
}
.pkrs-art-card:hover .pkrs-art-card__arrow {
	transform: translateX(3px);
}

/* No results */
.pkrs-no-results {
	text-align: center;
	padding: 64px 0;
	color: var(--pkrs-fa);
	font-size: 15px;
	display: none;
}
.pkrs-no-results--show { display: block; }

/* =========================================================================
   4. RATE CALCULATOR
   ========================================================================= */
.pkrs-calc { padding: 96px 0; background: #FFFFFF; }
.pkrs-calc__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 48px;
}
.pkrs-calc__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}
.pkrs-calc__why {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 32px;
}
.pkrs-cw {
	display: flex;
	gap: 13px;
	align-items: flex-start;
}
.pkrs-cw__ico {
	width: 36px; height: 36px;
	border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.pkrs-cw__ico--t { background: var(--pkrs-tb); }
.pkrs-cw__ico--y { background: var(--pkrs-yb); }
.pkrs-cw__ico--g { background: rgba(13,43,30,.07); }
.pkrs-cw__h {
	font-size: 14px;
	font-weight: 700;
	color: var(--pkrs-tx);
	letter-spacing: -0.01em;
	margin-bottom: 3px;
}
.pkrs-cw__p {
	font-size: 13px;
	color: var(--pkrs-mu);
	line-height: 1.55;
}

/* Calc card */
.pkrs-calc-card {
	background: var(--pkrs-bg2);
	border: 1.5px solid var(--pkrs-bd);
	border-radius: 20px;
	padding: 28px;
}
.pkrs-calc-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pkrs-fa);
	margin-bottom: 10px;
}
.pkrs-calc-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 20px;
}
.pkrs-calc-opt {
	padding: 8px 16px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 1.5px solid var(--pkrs-bd);
	background: #FFFFFF;
	color: var(--pkrs-mu);
	transition: all .18s ease;
}
.pkrs-calc-opt:hover {
	border-color: #AAA;
	color: var(--pkrs-tx);
}
.pkrs-calc-opt--sel {
	background: var(--pkrs-g);
	border-color: var(--pkrs-g);
	color: #FFFFFF;
}
.pkrs-calc-opt--sel.pkrs-calc-opt--y {
	background: var(--pkrs-y);
	border-color: var(--pkrs-y);
	color: var(--pkrs-g);
}
.pkrs-calc-divider {
	height: 1px;
	background: var(--pkrs-bd);
	margin: 4px 0 20px;
}

/* Result */
.pkrs-calc-result {
	background: #FFFFFF;
	border: 1.5px solid var(--pkrs-bd);
	border-radius: 14px;
	padding: 20px;
	transition: border-color .35s, box-shadow .35s;
}
.pkrs-calc-result--pulse {
	border-color: var(--pkrs-t);
	box-shadow: 0 0 0 3px var(--pkrs-tb);
}
.pkrs-cr-lbl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pkrs-fa);
	margin-bottom: 10px;
}
.pkrs-cr-range {
	font-size: 42px;
	font-weight: 900;
	letter-spacing: -0.04em;
	color: var(--pkrs-tx);
	line-height: 1;
	margin-bottom: 6px;
}
.pkrs-cr-range span { color: var(--pkrs-t); }
.pkrs-cr-per {
	font-size: 14px;
	color: var(--pkrs-mu);
	margin-bottom: 14px;
}
.pkrs-cr-breakdown {
	display: flex;
	flex-direction: column;
	gap: 7px;
	border-top: 1px solid var(--pkrs-bd);
	padding-top: 14px;
}
.pkrs-cr-breakdown__lbl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pkrs-fa);
	margin-bottom: 4px;
}
.pkrs-crb {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.pkrs-crb__type {
	font-size: 13px;
	color: var(--pkrs-mu);
}
.pkrs-crb__val {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkrs-tx);
}
.pkrs-cr-disclaimer {
	font-size: 11px;
	color: var(--pkrs-fa);
	line-height: 1.55;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--pkrs-bd);
}

/* =========================================================================
   5. INDUSTRY DATA STRIP
   ========================================================================= */
.pkrs-data-strip { padding: 72px 0; background: var(--pkrs-g); }
.pkrs-data-strip__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 48px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 1px;
	background: rgba(255,255,255,.08);
	border-radius: 16px;
	overflow: hidden;
}
.pkrs-ds-item {
	background: rgba(255,255,255,.03);
	padding: 32px 28px;
}
.pkrs-ds-eyebrow {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,.35);
	margin-bottom: 10px;
}
.pkrs-ds-num {
	font-size: clamp(28px, 3.5vw, 40px);
	font-weight: 900;
	letter-spacing: -0.04em;
	color: #FFFFFF;
	line-height: 1;
	margin-bottom: 6px;
}
.pkrs-ds-num .pkrs-yl { color: var(--pkrs-y); }
.pkrs-ds-lbl {
	font-size: 13px;
	color: rgba(255,255,255,.45);
	line-height: 1.5;
}
.pkrs-ds-source {
	font-size: 11px;
	color: rgba(255,255,255,.2);
	margin-top: 8px;
}

/* =========================================================================
   6. TEMPLATES
   ========================================================================= */
.pkrs-templates {
	padding: 96px 0;
	background: var(--pkrs-bg2);
	border-top: 1px solid var(--pkrs-bd);
}
.pkrs-templates__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 48px;
}
.pkrs-templates__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 56px;
}
.pkrs-tpl-card {
	background: #FFFFFF;
	border: 1.5px solid var(--pkrs-bd);
	border-radius: 16px;
	padding: 24px;
	transition: transform .25s, box-shadow .25s, border-color .25s;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	outline: none;
}
.pkrs-tpl-card:hover,
.pkrs-tpl-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 14px 44px rgba(0,0,0,.08);
	border-color: transparent;
}
.pkrs-tpl-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
}
.pkrs-tpl-card--c1::before { background: var(--pkrs-t); }
.pkrs-tpl-card--c2::before { background: var(--pkrs-g); }
.pkrs-tpl-card--c3::before { background: var(--pkrs-y); }
.pkrs-tpl-card--c4::before { background: var(--pkrs-p); }
.pkrs-tpl-card__ico {
	width: 52px; height: 52px;
	border-radius: 13px;
	display: flex; align-items: center; justify-content: center;
	font-size: 24px;
	margin-bottom: 16px;
}
.pkrs-tpl-card__ico--t { background: var(--pkrs-tb); }
.pkrs-tpl-card__ico--g { background: rgba(13,43,30,.08); }
.pkrs-tpl-card__ico--y { background: var(--pkrs-yb); }
.pkrs-tpl-card__ico--p { background: var(--pkrs-pb); }
.pkrs-tpl-card__tag {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 600;
	margin-bottom: 14px;
	background: var(--pkrs-tb);
	color: var(--pkrs-t);
}
.pkrs-tpl-card__h {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--pkrs-tx);
	margin: 0 0 8px;
	line-height: 1.3;
}
.pkrs-tpl-card__desc {
	font-size: 13px;
	color: var(--pkrs-mu);
	line-height: 1.6;
	margin: 0 0 16px;
}
.pkrs-tpl-card__dl {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pkrs-t);
	transition: gap .18s;
}
.pkrs-tpl-card:hover .pkrs-tpl-card__dl { gap: 8px; }
.pkrs-tpl-card__dl::after { content: "↓"; }

/* =========================================================================
   7. NEWSLETTER
   ========================================================================= */
.pkrs-nl { padding: 96px 0; background: #FFFFFF; }
.pkrs-nl__inner {
	max-width: 680px;
	margin: 0 auto;
	padding: 0 48px;
	text-align: center;
}
.pkrs-nl__icon {
	font-size: 48px;
	margin-bottom: 20px;
	display: block;
}
.pkrs-nl__h {
	font-size: clamp(24px, 3.5vw, 36px);
	font-weight: 900;
	letter-spacing: -0.04em;
	color: var(--pkrs-tx);
	margin: 0 0 12px;
}
.pkrs-nl__sub {
	font-size: 16px;
	color: var(--pkrs-mu);
	line-height: 1.65;
	margin: 0 0 32px;
}
.pkrs-nl__form {
	display: flex;
	gap: 10px;
	max-width: 480px;
	margin: 0 auto 16px;
	transition: opacity .25s;
}
.pkrs-nl__form--sent {
	opacity: 0.4;
	pointer-events: none;
}
.pkrs-nl__input {
	flex: 1;
	padding: 12px 16px;
	border: 1.5px solid var(--pkrs-bd2);
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	color: var(--pkrs-tx);
	outline: 0;
	transition: border-color .18s, box-shadow .18s;
}
.pkrs-nl__input:focus {
	border-color: var(--pkrs-t);
	box-shadow: 0 0 0 3px var(--pkrs-tb);
}
.pkrs-nl__input::placeholder { color: var(--pkrs-fa); }
.pkrs-nl__note {
	font-size: 12px;
	color: var(--pkrs-fa);
}
.pkrs-nl__success {
	display: none;
	padding: 14px 20px;
	background: var(--pkrs-tb);
	border: 1px solid rgba(0,168,132,.25);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--pkrs-t);
	text-align: center;
	margin-top: 12px;
}
.pkrs-nl__success--on { display: block; }
.pkrs-nl__issues {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 36px;
	padding-top: 32px;
	border-top: 1px solid var(--pkrs-bd);
	text-align: left;
}
.pkrs-nl__issue-lbl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pkrs-fa);
	margin-bottom: 4px;
}
.pkrs-nl-issue {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--pkrs-bg2);
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s;
}
.pkrs-nl-issue:hover { background: var(--pkrs-bg3); }
.pkrs-nl-issue__ico {
	font-size: 18px;
	flex-shrink: 0;
}
.pkrs-nl-issue__t {
	font-size: 13px;
	font-weight: 600;
	color: var(--pkrs-tx);
	flex: 1;
}
.pkrs-nl-issue__d {
	font-size: 11px;
	color: var(--pkrs-fa);
}

/* =========================================================================
   8. COMMUNITY
   ========================================================================= */
.pkrs-community { padding: 0 48px 96px; }
.pkrs-community__inner {
	max-width: 1100px;
	margin: 0 auto;
}
.pkrs-cc {
	background: var(--pkrs-y);
	border-radius: 24px;
	padding: 56px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.pkrs-cc__deco {
	position: absolute;
	right: 180px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 120px;
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
}
.pkrs-cc__left { position: relative; z-index: 1; }
.pkrs-cc__tag {
	display: inline-block;
	padding: 4px 12px;
	background: rgba(13,43,30,.12);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pkrs-g);
	margin-bottom: 12px;
}
.pkrs-cc__h {
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 900;
	letter-spacing: -0.04em;
	color: var(--pkrs-g);
	line-height: 1.15;
	margin: 0 0 10px;
}
.pkrs-cc__p {
	font-size: 15px;
	color: rgba(13,43,30,.6);
	line-height: 1.6;
	max-width: 480px;
	margin: 0;
}
.pkrs-cc__stat-row {
	display: flex;
	gap: 20px;
	margin-top: 16px;
}
.pkrs-cc__sv {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--pkrs-g);
	line-height: 1;
}
.pkrs-cc__sl {
	font-size: 11px;
	color: rgba(13,43,30,.5);
	margin-top: 2px;
}
.pkrs-cc__right {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

/* =========================================================================
   9. TEMPLATE MODAL
   ========================================================================= */
.pkrs-modal {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(0,0,0,.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity .22s ease;
}
.pkrs-modal--open { opacity: 1; }
.pkrs-modal[hidden] { display: none; }
.pkrs-modal__panel {
	background: #FFFFFF;
	border-radius: 20px;
	max-width: 560px;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 40px 100px rgba(0,0,0,.3);
	transform: translateY(8px);
	transition: transform .25s ease;
}
.pkrs-modal--open .pkrs-modal__panel { transform: translateY(0); }
.pkrs-modal__head {
	padding: 24px 28px;
	border-bottom: 1px solid var(--pkrs-bd);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.pkrs-modal__title {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--pkrs-tx);
}
.pkrs-modal__close {
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 1px solid var(--pkrs-bd);
	background: var(--pkrs-bg2);
	cursor: pointer;
	font-size: 14px;
	color: var(--pkrs-mu);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.pkrs-modal__close:hover { background: var(--pkrs-bg3); }
.pkrs-modal__body { padding: 24px 28px; }

/* Hide template sources visually but keep them in DOM. */
.pkrs-tpl-sources { display: none; }

/* ---- Modal body shared styles (used by the cloned content) ---- */
.pkrs-tpl-intro {
	font-size: 14px;
	color: var(--pkrs-mu);
	line-height: 1.65;
	margin: 0 0 20px;
}
.pkrs-tpl-intro strong { color: var(--pkrs-tx); font-weight: 700; }
.pkrs-tpl-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}
.pkrs-tpl-row {
	display: grid;
	grid-template-columns: 24px 1fr 24px;
	gap: 12px;
	padding: 12px 14px;
	background: var(--pkrs-bg2);
	border-radius: 10px;
	align-items: flex-start;
}
.pkrs-tpl-row__ico {
	font-size: 18px;
	margin-top: 1px;
}
.pkrs-tpl-row__h {
	font-size: 14px;
	font-weight: 700;
	color: var(--pkrs-tx);
	margin-bottom: 2px;
}
.pkrs-tpl-row__p {
	font-size: 12px;
	color: var(--pkrs-mu);
	line-height: 1.5;
}
.pkrs-tpl-row__check {
	width: 22px; height: 22px;
	border: 1.5px solid var(--pkrs-bd);
	border-radius: 4px;
	background: #FFFFFF;
	margin-top: 1px;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	color: transparent;
	transition: background .18s, color .18s, border-color .18s;
}
.pkrs-tpl-row__check::before { content: "✓"; }
.pkrs-tpl-row__check--on {
	background: var(--pkrs-t);
	border-color: var(--pkrs-t);
	color: #FFFFFF;
}
.pkrs-tpl-tip {
	padding: 14px;
	background: var(--pkrs-tb);
	border-radius: 10px;
	font-size: 13px;
	color: var(--pkrs-t);
	font-weight: 500;
}

/* Brief modal */
.pkrs-tpl-brief { margin-bottom: 14px; }
.pkrs-tpl-brief__h {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkrs-tx);
	margin-bottom: 4px;
}
.pkrs-tpl-brief__p {
	padding: 10px 14px;
	border: 1px solid var(--pkrs-bd);
	border-radius: 9px;
	font-size: 13px;
	color: var(--pkrs-fa);
	background: var(--pkrs-bg2);
	line-height: 1.55;
	font-style: italic;
}

/* Rate card modal */
.pkrs-tpl-rate {
	background: var(--pkrs-bg2);
	border-radius: 14px;
	padding: 20px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--pkrs-tx);
}
.pkrs-tpl-rate__nm {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.025em;
	margin-bottom: 4px;
}
.pkrs-tpl-rate__url {
	color: var(--pkrs-t);
	font-size: 12px;
	margin-bottom: 16px;
}
.pkrs-tpl-rate__meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 16px;
}
.pkrs-tpl-rate__l {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--pkrs-fa);
	font-weight: 700;
}
.pkrs-tpl-rate__v { font-weight: 600; }
.pkrs-tpl-rate__card-body {
	border-top: 1px solid var(--pkrs-bd);
	padding-top: 14px;
}
.pkrs-tpl-rate__sec {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--pkrs-fa);
	font-weight: 700;
	margin-bottom: 10px;
}
.pkrs-tpl-rate__row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--pkrs-bd);
}
.pkrs-tpl-rate__row:last-child { border-bottom: 0; }
.pkrs-tpl-rate__price { font-weight: 700; }
.pkrs-tpl-rate__tip {
	margin-top: 14px;
	font-size: 12px;
	color: var(--pkrs-mu);
	padding: 10px;
	background: #FFFFFF;
	border-radius: 8px;
}

/* ROI modal */
.pkrs-tpl-roi-lbl {
	font-size: 12px;
	color: var(--pkrs-fa);
	margin-bottom: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.pkrs-tpl-roi-row {
	padding: 12px 14px;
	background: var(--pkrs-bg2);
	border-radius: 10px;
	margin-bottom: 8px;
}
.pkrs-tpl-roi-row__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 4px;
}
.pkrs-tpl-roi-row__h {
	font-size: 14px;
	font-weight: 700;
	color: var(--pkrs-tx);
}
.pkrs-tpl-roi-row__b {
	font-size: 11px;
	font-weight: 600;
	color: var(--pkrs-t);
	background: var(--pkrs-tb);
	padding: 2px 7px;
	border-radius: 100px;
	white-space: nowrap;
	flex-shrink: 0;
}
.pkrs-tpl-roi-row__d {
	font-size: 12px;
	color: var(--pkrs-mu);
	line-height: 1.5;
}

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */
.pkrs-rv {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.pkrs-rv--vis { opacity: 1; transform: none; }
.pkrs-rv--d1 { transition-delay: .07s; }
.pkrs-rv--d2 { transition-delay: .14s; }
.pkrs-rv--d3 { transition-delay: .21s; }
.pkrs-rv--d4 { transition-delay: .28s; }

.pkrs-rvl {
	opacity: 0;
	transform: translateX(-24px);
	transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.pkrs-rvl--vis { opacity: 1; transform: none; }
.pkrs-rvr {
	opacity: 0;
	transform: translateX(24px);
	transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.pkrs-rvr--vis { opacity: 1; transform: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
	.pkrs-hero { padding: 72px 20px 56px; }
	.pkrs-hero__stats { gap: 24px; }
	.pkrs-featured__inner,
	.pkrs-articles__inner,
	.pkrs-calc__inner,
	.pkrs-templates__inner { padding: 0 20px; }
	.pkrs-featured__grid { grid-template-columns: 1fr; }
	.pkrs-feat-side { flex-direction: row; }
	.pkrs-feat-sm { flex: 1; }
	.pkrs-articles__grid { grid-template-columns: 1fr 1fr; }
	.pkrs-filter-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
	.pkrs-calc__grid { grid-template-columns: 1fr; gap: 36px; }
	.pkrs-templates__grid { grid-template-columns: 1fr 1fr; }
	.pkrs-data-strip__inner { grid-template-columns: 1fr 1fr; padding: 0 20px; }
	.pkrs-nl__inner { padding: 0 20px; }
	.pkrs-nl__form { flex-direction: column; }
	.pkrs-community { padding: 0 20px 72px; }
	.pkrs-cc {
		grid-template-columns: 1fr;
		padding: 36px 28px;
	}
	.pkrs-cc__deco { right: 8px; font-size: 90px; }
	.pkrs-cc__right { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 640px) {
	.pkrs-hero__h1 { font-size: clamp(28px, 7vw, 38px); }
	.pkrs-search-bar { padding: 6px 6px 6px 14px; }
	.pkrs-search-bar__btn { padding: 9px 14px; font-size: 13px; }
	.pkrs-articles__grid { grid-template-columns: 1fr; }
	.pkrs-templates__grid { grid-template-columns: 1fr; }
	.pkrs-feat-side { flex-direction: column; }
	.pkrs-cc { padding: 28px 22px; }
	.pkrs-cc__right .pkrs-btn { width: 100%; }
	.pkrs-modal__head { padding: 18px 20px; }
	.pkrs-modal__body { padding: 18px 20px; }
}

/* =========================================================================
   v0.5.6 — Single-article (.pkar-*)
   =========================================================================
   /resources/{slug}/ — long-form blog post template. First article is
   "How to Set Your Rates as an AU Pet Creator" at
   /resources/set-your-rates/. The scope is intentionally generic so any
   future article template can reuse every primitive below.

   Layout: fixed reading-progress bar at top, back-to-top button, dark-
   green hero (breadcrumb + category + title + subtitle + author row +
   TL;DR card), 3-column grid (sticky left TOC + 680px main column +
   sticky right sidebar), related articles row, yellow final CTA.

   Content primitives in the main column: typography (h2, h3, p, ul, ol,
   a, hr), pull quote, 3-up stat callout, info boxes (tip/warn/key/
   important), 5-col rate table (collapses to 3 col on phones), 3-col
   engagement table, inline calculator CTA, inline newsletter box, key
   takeaways box, tags, author bio.
   ========================================================================= */

.pkar {
	--pkar-y:    #FFD600;
	--pkar-yd:   #E8C200;
	--pkar-yb:   rgba(255,214,0,0.12);
	--pkar-g:    #0D2B1E;
	--pkar-g2:   #163D2C;
	--pkar-g3:   #1E5038;
	--pkar-t:    #00A884;
	--pkar-t2:   #008F70;
	--pkar-tb:   rgba(0,168,132,0.1);
	--pkar-o:    #FF6B2B;
	--pkar-ob:   rgba(255,107,43,0.1);
	--pkar-p:    #7B5CF5;
	--pkar-pb:   rgba(123,92,245,0.1);
	--pkar-bg:   #FFFFFF;
	--pkar-bg2:  #F7F6F3;
	--pkar-bg3:  #F0EEE9;
	--pkar-bd:   #E8E6E1;
	--pkar-bd2:  #D8D5CE;
	--pkar-tx:   #0A0A0A;
	--pkar-mu:   #6B6760;
	--pkar-fa:   #9E9B94;
	--pkar-art-w: 680px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--pkar-tx);
	background: var(--pkar-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
.pkar *,
.pkar *::before,
.pkar *::after { box-sizing: border-box; }
.pkar button { font-family: inherit; }

/* ---- Shared buttons ---- */
.pkar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
	white-space: nowrap;
	letter-spacing: -0.01em;
	line-height: 1;
}
.pkar-btn--sm { padding: 8px 16px; font-size: 13px; border-radius: 8px; }
.pkar-btn--md { padding: 11px 22px; font-size: 14px; border-radius: 10px; }
.pkar-btn--lg { padding: 14px 28px; font-size: 15px; border-radius: 12px; }
.pkar-btn--y  { background: var(--pkar-y); color: var(--pkar-g); }
.pkar-btn--y:hover  { background: var(--pkar-yd); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,214,0,.4); }
.pkar-btn--g  { background: var(--pkar-g); color: #FFFFFF; }
.pkar-btn--g:hover  { background: var(--pkar-g2); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(13,43,30,.25); }
.pkar-btn--t  { background: var(--pkar-t); color: #FFFFFF; }
.pkar-btn--t:hover  { background: var(--pkar-t2); transform: translateY(-1px); }
.pkar-btn--ghost { background: transparent; color: var(--pkar-tx); border: 1.5px solid var(--pkar-bd2); }
.pkar-btn--ghost:hover { border-color: #999; background: var(--pkar-bg2); }

/* ---- Reading progress bar (fixed at top of viewport) ---- */
.pkar-progress {
	position: fixed;
	top: 0; left: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--pkar-t), var(--pkar-y));
	width: 0;
	z-index: 600;
	transition: width .1s linear;
	border-radius: 0 3px 3px 0;
}

/* ---- Back-to-top button ---- */
.pkar-back-top {
	position: fixed;
	bottom: 32px; right: 32px;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--pkar-g);
	color: #FFFFFF;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(0,0,0,.2);
	border: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease, background .18s;
	z-index: 400;
}
.pkar-back-top--show { opacity: 1; pointer-events: auto; }
.pkar-back-top:hover { background: var(--pkar-g2); transform: translateY(-2px); }

/* ---- Yellow inline highlight ---- */
.pkar-yl   { color: var(--pkar-y); }
.pkar-yl-t { color: var(--pkar-t); }

/* =========================================================================
   1. HERO
   ========================================================================= */
.pkar-hero {
	background: var(--pkar-g);
	padding: 80px 64px 0;
	position: relative;
	overflow: hidden;
}
.pkar-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}
.pkar-hero__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 65% 55% at 50% 0%, rgba(255,214,0,.07) 0%, transparent 70%);
	pointer-events: none;
}
.pkar-hero__inner {
	max-width: 800px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

/* Breadcrumb */
.pkar-breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: rgba(255,255,255,.38);
	margin-bottom: 24px;
	flex-wrap: wrap;
}
.pkar-breadcrumb a {
	color: rgba(255,255,255,.38);
	text-decoration: none;
	transition: color .18s;
}
.pkar-breadcrumb a:hover { color: rgba(255,255,255,.7); }
.pkar-breadcrumb span { color: rgba(255,255,255,.18); }
.pkar-breadcrumb__here { color: rgba(255,255,255,.55) !important; }

.pkar-cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	background: rgba(0,168,132,.15);
	border: 1px solid rgba(0,168,132,.3);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	color: var(--pkar-t);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.pkar-hero__title {
	font-size: clamp(28px, 4.5vw, 48px);
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 1.08;
	color: #FFFFFF;
	margin: 0 0 16px;
}
.pkar-hero__sub {
	font-size: clamp(15px, 1.8vw, 18px);
	color: rgba(255,255,255,.55);
	line-height: 1.65;
	margin: 0 0 32px;
	max-width: 640px;
}

/* Author row */
.pkar-hero__author-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}
.pkar-author {
	display: flex;
	align-items: center;
	gap: 12px;
}
.pkar-author__av {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pkar-t), var(--pkar-y));
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
	border: 2px solid rgba(255,255,255,.15);
}
.pkar-author__name {
	font-size: 14px;
	font-weight: 700;
	color: #FFFFFF;
	letter-spacing: -0.01em;
}
.pkar-author__role {
	font-size: 12px;
	color: rgba(255,255,255,.4);
	margin-top: 1px;
}
.pkar-hero__pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.pkar-amp {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 500;
	color: rgba(255,255,255,.5);
}

/* TL;DR card */
.pkar-hero__deco {
	display: flex;
	justify-content: center;
	padding: 48px 0 0;
}
.pkar-hero__tldr {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 16px 16px 0 0;
	padding: 20px 24px;
	display: flex;
	gap: 20px;
	align-items: center;
	max-width: 560px;
	width: 100%;
}
.pkar-tldr__ico { font-size: 36px; flex-shrink: 0; }
.pkar-tldr__h {
	font-size: 14px;
	font-weight: 700;
	color: rgba(255,255,255,.8);
	margin-bottom: 3px;
}
.pkar-tldr__p {
	font-size: 12px;
	color: rgba(255,255,255,.4);
	line-height: 1.5;
}
.pkar-tldr__p a {
	color: var(--pkar-t);
	text-decoration: underline;
}

/* =========================================================================
   2. 3-COLUMN LAYOUT
   ========================================================================= */
.pkar-layout {
	display: grid;
	grid-template-columns: 240px 1fr 220px;
	gap: 0;
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 48px;
	align-items: start;
}

/* ---- Left TOC ---- */
.pkar-toc {
	position: sticky;
	top: 32px;
	padding-right: 40px;
}
.pkar-toc__title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pkar-fa);
	margin-bottom: 14px;
}
.pkar-toc__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0;
	margin: 0;
}
.pkar-toc__item a {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--pkar-fa);
	text-decoration: none;
	padding: 5px 10px 5px 12px;
	border-left: 2px solid var(--pkar-bd);
	border-radius: 0 6px 6px 0;
	transition: color .18s, border-left-color .18s, background .18s, font-weight .18s;
	line-height: 1.4;
}
.pkar-toc__item a:hover {
	color: var(--pkar-tx);
	border-left-color: var(--pkar-bd2);
	background: var(--pkar-bg2);
}
.pkar-toc__item--active a {
	color: var(--pkar-t);
	border-left-color: var(--pkar-t);
	background: var(--pkar-tb);
	font-weight: 600;
}
.pkar-toc__divider {
	height: 1px;
	background: var(--pkar-bd);
	margin: 12px 0;
}

/* Share / save actions */
.pkar-actions { margin-top: 8px; }
.pkar-actions__lbl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pkar-fa);
	margin-bottom: 10px;
}
.pkar-actions__btns {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pkar-act {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 12px;
	background: var(--pkar-bg2);
	border: 1px solid var(--pkar-bd);
	border-radius: 9px;
	font-size: 13px;
	font-weight: 500;
	color: var(--pkar-mu);
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s;
	text-decoration: none;
	width: 100%;
	text-align: left;
}
.pkar-act:hover {
	background: var(--pkar-bg3);
	color: var(--pkar-tx);
	border-color: var(--pkar-bd2);
}
.pkar-act__ico { font-size: 15px; flex-shrink: 0; }

/* =========================================================================
   3. MAIN ARTICLE CONTENT
   ========================================================================= */
.pkar-content {
	min-width: 0;
	max-width: var(--pkar-art-w);
}

/* Headings */
.pkar-content h2 {
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -0.035em;
	color: var(--pkar-tx);
	margin: 48px 0 16px;
	line-height: 1.2;
	scroll-margin-top: 32px;
}
.pkar-content h2:first-child { margin-top: 0; }
.pkar-content h3 {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--pkar-tx);
	margin: 32px 0 12px;
	line-height: 1.3;
	scroll-margin-top: 32px;
}

/* Body text */
.pkar-content p {
	font-size: 17px;
	color: #2A2826;
	line-height: 1.78;
	margin: 0 0 20px;
}
.pkar-content a {
	color: var(--pkar-t);
	text-decoration: underline;
	text-decoration-color: rgba(0,168,132,.35);
	text-underline-offset: 3px;
	transition: color .18s, text-decoration-color .18s;
}
.pkar-content a:hover {
	color: var(--pkar-t2);
	text-decoration-color: var(--pkar-t);
}
.pkar-content strong { font-weight: 700; color: var(--pkar-tx); }
.pkar-content em { font-style: italic; color: var(--pkar-mu); }
.pkar-content ul,
.pkar-content ol {
	margin: 0 0 20px;
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pkar-content li {
	font-size: 17px;
	color: #2A2826;
	line-height: 1.7;
	padding-left: 4px;
}
.pkar-content ul li::marker { color: var(--pkar-t); }
.pkar-content hr { border: 0; border-top: 1px solid var(--pkar-bd); margin: 40px 0; }

/* Pull quote */
.pkar-pull-quote {
	border-left: 4px solid var(--pkar-y);
	padding: 16px 24px;
	margin: 32px 0;
	background: var(--pkar-yb);
	border-radius: 0 12px 12px 0;
}
.pkar-pull-quote__text {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--pkar-tx);
	line-height: 1.4;
	font-style: italic;
	margin-bottom: 8px;
}
.pkar-pull-quote__source {
	font-size: 13px;
	color: var(--pkar-mu);
	font-weight: 500;
}

/* Stat callout (3 columns on dark) */
.pkar-stat-callout {
	background: var(--pkar-g);
	border-radius: 16px;
	padding: 24px 28px;
	margin: 32px 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	overflow: hidden;
	position: relative;
}
.pkar-stat-callout::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--pkar-t), var(--pkar-y));
}
.pkar-sc__item {
	padding: 16px;
	text-align: center;
	background: var(--pkar-g);
}
.pkar-sc__item:not(:last-child) {
	border-right: 1px solid rgba(255,255,255,.08);
}
.pkar-sc__num {
	font-size: 32px;
	font-weight: 900;
	letter-spacing: -0.04em;
	color: #FFFFFF;
	line-height: 1;
	margin-bottom: 4px;
}
.pkar-sc__lbl {
	font-size: 12px;
	color: rgba(255,255,255,.45);
	line-height: 1.4;
}

/* Info boxes */
.pkar-info {
	border-radius: 14px;
	padding: 18px 22px;
	margin: 28px 0;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.pkar-info--tip       { background: var(--pkar-tb); border: 1px solid rgba(0,168,132,.2); }
.pkar-info--warn      { background: var(--pkar-yb); border: 1px solid rgba(255,214,0,.25); }
.pkar-info--key       { background: rgba(13,43,30,.06); border: 1px solid rgba(13,43,30,.12); }
.pkar-info--important { background: var(--pkar-ob); border: 1px solid rgba(255,107,43,.2); }
.pkar-info__ico {
	font-size: 20px;
	flex-shrink: 0;
	margin-top: 1px;
}
.pkar-info__h {
	font-size: 14px;
	font-weight: 700;
	color: var(--pkar-tx);
	margin-bottom: 4px;
	letter-spacing: -0.01em;
}
.pkar-info__p {
	font-size: 14px;
	color: var(--pkar-mu);
	line-height: 1.6;
}
.pkar-info__p strong { color: var(--pkar-tx); }

/* Rate table (5 col → 3 col on phones) */
.pkar-rate-table {
	border: 1.5px solid var(--pkar-bd);
	border-radius: 16px;
	overflow: hidden;
	margin: 28px 0;
}
.pkar-rt__head {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
	background: var(--pkar-g);
}
.pkar-rt__h {
	padding: 12px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255,255,255,.55);
}
.pkar-rt__h:first-child { color: var(--pkar-y); }
.pkar-rt__row {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
	border-top: 1px solid var(--pkar-bd);
	transition: background .15s;
}
.pkar-rt__row:hover { background: var(--pkar-bg2); }
.pkar-rt__row--highlight {
	background: rgba(0,168,132,.05);
}
.pkar-rt__row--highlight:hover { background: rgba(0,168,132,.08); }
.pkar-rt__c {
	padding: 12px 14px;
	font-size: 13px;
	color: var(--pkar-mu);
	display: flex;
	align-items: center;
}
.pkar-rt__c--label {
	font-weight: 700;
	color: var(--pkar-tx);
	gap: 8px;
}
.pkar-rt__c--val {
	font-weight: 600;
	color: var(--pkar-tx);
	font-size: 12.5px;
}
.pkar-rt__row--highlight .pkar-rt__c--val {
	color: var(--pkar-t);
}
.pkar-rt__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
	display: inline-block;
}

/* Engagement table */
.pkar-eng-table {
	border: 1.5px solid var(--pkar-bd);
	border-radius: 14px;
	overflow: hidden;
	margin: 20px 0;
}
.pkar-et__row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 12px 16px;
	border-bottom: 1px solid var(--pkar-bd);
	font-size: 13px;
}
.pkar-et__row:last-child { border-bottom: 0; }
.pkar-et__row--head {
	background: var(--pkar-bg2);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pkar-fa);
}
.pkar-et__bad  { color: var(--pkar-o); font-weight: 600; }
.pkar-et__avg  { color: var(--pkar-mu); font-weight: 600; }
.pkar-et__good { color: var(--pkar-t); font-weight: 600; }

/* Inline calculator CTA */
.pkar-inline-cta {
	background: linear-gradient(135deg, var(--pkar-g) 0%, var(--pkar-g3) 100%);
	border-radius: 16px;
	padding: 28px 32px;
	margin: 40px 0;
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
}
.pkar-inline-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(255,214,0,.06) 0%, transparent 70%);
	pointer-events: none;
}
.pkar-inline-cta__left  { position: relative; z-index: 1; flex: 1; min-width: 0; }
.pkar-inline-cta__right { position: relative; z-index: 1; flex-shrink: 0; }
.pkar-inline-cta__deco {
	position: absolute;
	right: 20px; bottom: -10px;
	font-size: 80px;
	opacity: 0.06;
	pointer-events: none;
}
.pkar-inline-cta__tag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pkar-y);
	margin-bottom: 6px;
}
.pkar-inline-cta__h {
	font-size: 18px;
	font-weight: 800;
	color: #FFFFFF;
	letter-spacing: -0.025em;
	margin-bottom: 6px;
}
.pkar-inline-cta__p {
	font-size: 13px;
	color: rgba(255,255,255,.5);
	line-height: 1.55;
}

/* Inline newsletter */
.pkar-nl-inline {
	background: var(--pkar-bg2);
	border: 1.5px solid var(--pkar-bd);
	border-radius: 16px;
	padding: 28px;
	margin: 40px 0;
	transition: opacity .25s;
}
.pkar-nl-inline__h {
	font-size: 17px;
	font-weight: 800;
	color: var(--pkar-tx);
	letter-spacing: -0.025em;
	margin-bottom: 6px;
}
.pkar-nl-inline__p {
	font-size: 14px;
	color: var(--pkar-mu);
	margin-bottom: 18px;
	line-height: 1.6;
}
.pkar-nl-inline__form { display: flex; gap: 8px; }
.pkar-nl-inline__form--done .pkar-nl-inline__input {
	color: var(--pkar-t);
	border-color: var(--pkar-t);
}
.pkar-nl-inline__input {
	flex: 1;
	padding: 10px 14px;
	border: 1.5px solid var(--pkar-bd2);
	border-radius: 9px;
	font-family: inherit;
	font-size: 14px;
	color: var(--pkar-tx);
	outline: 0;
	transition: border-color .18s, box-shadow .18s, color .18s;
}
.pkar-nl-inline__input:focus {
	border-color: var(--pkar-t);
	box-shadow: 0 0 0 3px var(--pkar-tb);
}
.pkar-nl-inline__input::placeholder { color: var(--pkar-fa); }
.pkar-nl-inline__input--done::placeholder { color: var(--pkar-t); }

/* Key takeaways */
.pkar-key-takeaways {
	background: var(--pkar-g);
	border-radius: 16px;
	padding: 28px 32px;
	margin: 40px 0;
	position: relative;
	overflow: hidden;
}
.pkar-key-takeaways::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--pkar-t), var(--pkar-y));
}
.pkar-kt__h {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pkar-y);
	margin-bottom: 16px;
}
.pkar-kt__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.pkar-kt__item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	color: rgba(255,255,255,.8);
	line-height: 1.55;
}
.pkar-kt__ck {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: rgba(255,214,0,.15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 800;
	color: var(--pkar-y);
	flex-shrink: 0;
	margin-top: 2px;
}

/* Tags */
.pkar-tags {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin: 32px 0;
}
.pkar-tag {
	padding: 5px 14px;
	background: var(--pkar-bg2);
	border: 1px solid var(--pkar-bd);
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	color: var(--pkar-mu);
	cursor: pointer;
	transition: border-color .18s, color .18s, background .18s;
	text-decoration: none;
}
.pkar-tag:hover {
	border-color: var(--pkar-t);
	color: var(--pkar-t);
	background: var(--pkar-tb);
}

/* Author bio (end of article) */
.pkar-author-bio {
	border-top: 1px solid var(--pkar-bd);
	padding-top: 40px;
	margin-top: 48px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.pkar-author-bio__av {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pkar-g), var(--pkar-t));
	display: flex; align-items: center; justify-content: center;
	font-size: 28px;
	flex-shrink: 0;
	border: 3px solid var(--pkar-bg2);
}
.pkar-author-bio__name {
	font-size: 17px;
	font-weight: 800;
	color: var(--pkar-tx);
	letter-spacing: -0.025em;
	margin-bottom: 3px;
}
.pkar-author-bio__role {
	font-size: 13px;
	color: var(--pkar-t);
	font-weight: 600;
	margin-bottom: 10px;
}
.pkar-author-bio__bio {
	font-size: 14px;
	color: var(--pkar-mu);
	line-height: 1.65;
	margin-bottom: 14px;
}
.pkar-author-bio__links { display: flex; gap: 8px; flex-wrap: wrap; }
.pkar-author-bio__link {
	padding: 6px 14px;
	background: var(--pkar-bg2);
	border: 1px solid var(--pkar-bd);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pkar-mu);
	text-decoration: none;
	transition: border-color .18s, color .18s, background .18s;
}
.pkar-author-bio__link:hover {
	border-color: var(--pkar-t);
	color: var(--pkar-t);
	background: var(--pkar-tb);
}

/* =========================================================================
   4. RIGHT SIDEBAR
   ========================================================================= */
.pkar-sidebar {
	position: sticky;
	top: 32px;
	padding-left: 40px;
}
.pkar-sidebar__card {
	background: var(--pkar-bg2);
	border: 1px solid var(--pkar-bd);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 16px;
}
.pkar-sidebar__h {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkar-tx);
	letter-spacing: -0.01em;
	margin-bottom: 14px;
}
.pkar-sidebar__stat {
	padding: 10px 0;
	border-bottom: 1px solid var(--pkar-bd);
}
.pkar-sidebar__stat:last-child { border-bottom: 0; }
.pkar-sidebar__v {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.04em;
	color: var(--pkar-tx);
	line-height: 1;
}
.pkar-sidebar__l {
	font-size: 12px;
	color: var(--pkar-fa);
	margin-top: 2px;
}
.pkar-sidebar__summary {
	font-size: 12px;
	color: var(--pkar-fa);
	line-height: 1.6;
}
.pkar-sr {
	display: flex;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--pkar-bd);
	cursor: pointer;
	transition: color .18s;
	text-decoration: none;
	color: inherit;
}
.pkar-sr:last-child { border-bottom: 0; }
.pkar-sr:hover .pkar-sr__t { color: var(--pkar-t); }
.pkar-sr__thumb {
	width: 48px; height: 48px;
	border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}
.pkar-sr__t {
	font-size: 13px;
	font-weight: 600;
	color: var(--pkar-tx);
	line-height: 1.4;
	transition: color .18s;
	letter-spacing: -0.01em;
}
.pkar-sr__meta {
	font-size: 11px;
	color: var(--pkar-fa);
	margin-top: 3px;
}

/* =========================================================================
   5. RELATED ARTICLES
   ========================================================================= */
.pkar-related {
	background: var(--pkar-bg2);
	border-top: 1px solid var(--pkar-bd);
	padding: 72px 64px;
}
.pkar-related__inner { max-width: 1100px; margin: 0 auto; }
.pkar-related__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 32px;
}
.pkar-related__h {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.035em;
	color: var(--pkar-tx);
}
.pkar-related__link {
	font-size: 14px;
	font-weight: 600;
	color: var(--pkar-t);
	text-decoration: none;
	transition: color .18s;
}
.pkar-related__link:hover { color: var(--pkar-t2); }
.pkar-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.pkar-rel-card {
	background: #FFFFFF;
	border: 1px solid var(--pkar-bd);
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	transition: transform .25s, box-shadow .25s, border-color .25s;
	text-decoration: none;
	color: inherit;
	display: block;
}
.pkar-rel-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 44px rgba(0,0,0,.08);
	border-color: transparent;
}
.pkar-rel-card__thumb {
	height: 100px;
	display: flex; align-items: center; justify-content: center;
}
.pkar-rel-card__emoji { font-size: 44px; }
.pkar-rel-card__body { padding: 16px; }
.pkar-rel-card__cat {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 7px;
}
.pkar-rel-card__cat--cr { background: var(--pkar-tb); color: var(--pkar-t); }
.pkar-rel-card__cat--br { background: rgba(13,43,30,.08); color: var(--pkar-g3); }
.pkar-rel-card__cat--da { background: var(--pkar-yb); color: #8A6800; }
.pkar-rel-card__t {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--pkar-tx);
	line-height: 1.35;
	margin-bottom: 6px;
}
.pkar-rel-card__meta {
	font-size: 11px;
	color: var(--pkar-fa);
}

/* =========================================================================
   6. FINAL CTA
   ========================================================================= */
.pkar-cta {
	background: var(--pkar-y);
	padding: 72px 64px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.pkar-cta::before {
	content: "🐾";
	position: absolute;
	font-size: 130px;
	opacity: 0.07;
	top: -20px;
	left: 60px;
	transform: rotate(-12deg);
	pointer-events: none;
}
.pkar-cta::after {
	content: "💰";
	position: absolute;
	font-size: 130px;
	opacity: 0.07;
	bottom: -30px;
	right: 60px;
	transform: rotate(14deg);
	pointer-events: none;
}
.pkar-cta__inner {
	max-width: 620px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.pkar-cta__h {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 900;
	letter-spacing: -0.04em;
	color: var(--pkar-g);
	margin: 0 0 12px;
	line-height: 1.1;
}
.pkar-cta__p {
	font-size: 16px;
	color: rgba(13,43,30,.6);
	line-height: 1.65;
	margin: 0 0 32px;
}
.pkar-cta__btns {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.pkar-cta__note {
	font-size: 12px;
	color: rgba(13,43,30,.4);
	margin-top: 14px;
}

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */
.pkar-rv {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.pkar-rv--vis { opacity: 1; transform: none; }
.pkar-rv--d1 { transition-delay: .07s; }
.pkar-rv--d2 { transition-delay: .14s; }
.pkar-rv--d3 { transition-delay: .21s; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
	.pkar-layout {
		grid-template-columns: 1fr;
		padding: 48px 24px;
	}
	.pkar-toc,
	.pkar-sidebar { display: none; }
	.pkar-related,
	.pkar-cta { padding: 56px 24px; }
}
@media (max-width: 640px) {
	.pkar-hero { padding: 64px 20px 0; }
	.pkar-hero__author-row { flex-direction: column; gap: 12px; align-items: flex-start; }
	.pkar-stat-callout { grid-template-columns: 1fr; }
	.pkar-sc__item:not(:last-child) {
		border-right: 0;
		border-bottom: 1px solid rgba(255,255,255,.08);
	}
	/* Rate table collapses 5 → 3 columns */
	.pkar-rt__head,
	.pkar-rt__row { grid-template-columns: 1fr 1fr 1fr; }
	.pkar-rt__h:nth-child(4),
	.pkar-rt__h:nth-child(5),
	.pkar-rt__c:nth-child(4),
	.pkar-rt__c:nth-child(5) { display: none; }
	.pkar-related__grid { grid-template-columns: 1fr; }
	.pkar-inline-cta { flex-direction: column; gap: 16px; align-items: flex-start; }
	.pkar-nl-inline__form { flex-direction: column; }
	.pkar-author-bio { flex-direction: column; }
	.pkar-back-top { bottom: 20px; right: 20px; }
}

/* =========================================================================
   v0.5.7 — Creator Studio SPA dashboard (.pkdb-*)
   =========================================================================
   Full-viewport SPA. Dark green sidebar (240px) on the left, top bar +
   scrollable content on the right. Six views toggled by JS via data-view.

   Body lock: html, body { height:100%; overflow:hidden } — the dashboard
   owns the entire viewport. Theme chrome (nav, footer) is bypassed by
   the template (wp_head / wp_footer instead of get_header / get_footer).

   Layout breakpoints: full sidebar at ≥1024px, collapsed at <1024px.
   ========================================================================= */

html.pkdb-html,
body.pkdb-body {
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
body.pkdb-body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: #F4F2EE;
	color: #0A0A0A;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.pkdb {
	--pkdb-g:   #0D2B1E;
	--pkdb-g2:  #163D2C;
	--pkdb-g3:  #1E5038;
	--pkdb-ga:  rgba(255,255,255,.06);
	--pkdb-gh:  rgba(255,255,255,.04);
	--pkdb-y:   #FFD600;
	--pkdb-yd:  #E8C200;
	--pkdb-yb:  rgba(255,214,0,.12);
	--pkdb-t:   #00A884;
	--pkdb-t2:  #008F70;
	--pkdb-tb:  rgba(0,168,132,.12);
	--pkdb-o:   #FF6B2B;
	--pkdb-ob:  rgba(255,107,43,.1);
	--pkdb-r:   #E53535;
	--pkdb-rb:  rgba(229,53,53,.1);
	--pkdb-p:   #7B5CF5;
	--pkdb-pb:  rgba(123,92,245,.1);
	--pkdb-bg:  #FFFFFF;
	--pkdb-bg2: #F7F6F3;
	--pkdb-bg3: #F0EEE9;
	--pkdb-bd:  #E8E6E1;
	--pkdb-bd2: #D8D5CE;
	--pkdb-tx:  #0A0A0A;
	--pkdb-mu:  #6B6760;
	--pkdb-fa:  #9E9B94;
	--pkdb-sb:  240px;
	display: flex;
	height: 100vh;
	overflow: hidden;
	width: 100%;
}
.pkdb *,
.pkdb *::before,
.pkdb *::after { box-sizing: border-box; }
.pkdb button { font-family: inherit; }

/* =========================================================================
   SIDEBAR
   ========================================================================= */
.pkdb-sidebar {
	width: var(--pkdb-sb);
	flex-shrink: 0;
	background: var(--pkdb-g);
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	z-index: 10;
}
.pkdb-sidebar::-webkit-scrollbar { width: 0; }

/* Brand block */
.pkdb-sb__brand {
	padding: 18px 16px 14px;
	border-bottom: 1px solid rgba(255,255,255,.07);
}
.pkdb-sb__logo {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	margin-bottom: 12px;
}
.pkdb-sb__logo-mark {
	width: 30px; height: 30px;
	background: var(--pkdb-y);
	border-radius: 7px;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px;
	font-weight: 800;
	color: var(--pkdb-g);
	flex-shrink: 0;
}
.pkdb-sb__logo-name {
	font-size: 15px;
	font-weight: 800;
	color: #FFFFFF;
	letter-spacing: -.02em;
	display: block;
}
.pkdb-sb__logo-sub {
	font-size: 10px;
	font-weight: 500;
	color: rgba(255,255,255,.35);
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-top: 1px;
	display: block;
}
.pkdb-sb__user {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 10px;
	border-radius: 10px;
	text-decoration: none;
	transition: background .18s;
}
.pkdb-sb__user:hover { background: var(--pkdb-ga); }
.pkdb-sb__user-av {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pkdb-t), var(--pkdb-y));
	display: flex; align-items: center; justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}
.pkdb-sb__user-info { min-width: 0; flex: 1; }
.pkdb-sb__user-name {
	font-size: 13px;
	font-weight: 700;
	color: #FFFFFF;
	line-height: 1.2;
	letter-spacing: -.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pkdb-sb__user-handle {
	font-size: 11px;
	color: rgba(255,255,255,.38);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pkdb-sb__user-chev {
	margin-left: auto;
	font-size: 10px;
	color: rgba(255,255,255,.25);
}

/* Nav */
.pkdb-sb__nav {
	padding: 10px 10px 6px;
	flex: 1;
}
.pkdb-sb__section-lbl {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(255,255,255,.25);
	padding: 10px 8px 6px;
}
.pkdb-sb__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 9px;
	cursor: pointer;
	transition: background .18s;
	margin-bottom: 1px;
	text-decoration: none;
	border: 0;
	background: transparent;
	width: 100%;
	position: relative;
	text-align: left;
}
.pkdb-sb__item:hover { background: var(--pkdb-ga); }
.pkdb-sb__item--active { background: rgba(255,255,255,.1); }
.pkdb-sb__item-ico {
	width: 32px; height: 32px;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
	background: rgba(255,255,255,.06);
	transition: background .18s;
}
.pkdb-sb__item--active .pkdb-sb__item-ico { background: var(--pkdb-y); }
.pkdb-sb__item-txt { flex: 1; text-align: left; min-width: 0; }
.pkdb-sb__item-name {
	font-size: 13px;
	font-weight: 500;
	color: rgba(255,255,255,.65);
	letter-spacing: -.01em;
	line-height: 1;
}
.pkdb-sb__item--active .pkdb-sb__item-name { color: #FFFFFF; font-weight: 700; }
.pkdb-sb__item:hover .pkdb-sb__item-name { color: rgba(255,255,255,.85); }
.pkdb-sb__item-sub {
	font-size: 10px;
	color: rgba(255,255,255,.28);
	margin-top: 2px;
}
.pkdb-sb__badge {
	padding: 2px 7px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	flex-shrink: 0;
}
.pkdb-sb__badge--new   { background: rgba(229,53,53,.3); color: #FF8080; }
.pkdb-sb__badge--count { background: rgba(255,255,255,.1); color: rgba(255,255,255,.5); }
.pkdb-sb__badge--pro   { background: rgba(255,214,0,.15); color: var(--pkdb-y); }
.pkdb-sb__divider {
	height: 1px;
	background: rgba(255,255,255,.06);
	margin: 6px 10px;
}

/* Sidebar profile completeness */
.pkdb-sb__complete {
	margin: 12px 0 0;
	padding: 12px 14px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 12px;
}
.pkdb-sbc__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.pkdb-sbc__lbl {
	font-size: 11px;
	font-weight: 600;
	color: rgba(255,255,255,.5);
}
.pkdb-sbc__pct {
	font-size: 13px;
	font-weight: 800;
	color: var(--pkdb-y);
}
.pkdb-sbc__bar {
	height: 5px;
	background: rgba(255,255,255,.1);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 8px;
}
.pkdb-sbc__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--pkdb-t), var(--pkdb-y));
	border-radius: 3px;
	width: 0;
	transition: width 1s cubic-bezier(.22,1,.36,1);
}
.pkdb-sbc__next {
	font-size: 11px;
	color: rgba(255,255,255,.3);
	line-height: 1.45;
}
.pkdb-sbc__next span { color: rgba(255,214,0,.7); font-weight: 600; }

/* Bottom links */
.pkdb-sb__bottom {
	padding: 12px 10px;
	border-top: 1px solid rgba(255,255,255,.06);
}
.pkdb-sb__bottom-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px;
	border-radius: 8px;
	cursor: pointer;
	transition: background .18s, color .18s;
	font-size: 12px;
	color: rgba(255,255,255,.35);
	font-weight: 500;
	text-decoration: none;
	background: transparent;
	border: 0;
	width: 100%;
}
.pkdb-sb__bottom-item:hover { background: var(--pkdb-ga); color: rgba(255,255,255,.65); }
.pkdb-sb__bottom-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .5; }
.pkdb-sb__bottom-item--out { color: rgba(255,100,100,.5); }
.pkdb-sb__bottom-item--out:hover { color: rgba(255,140,140,.85); }

/* =========================================================================
   MAIN
   ========================================================================= */
.pkdb-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
}

/* Top bar */
.pkdb-topbar {
	height: 56px;
	background: var(--pkdb-bg);
	border-bottom: 1px solid var(--pkdb-bd);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28px;
	flex-shrink: 0;
	gap: 16px;
}
.pkdb-topbar__title {
	font-size: 15px;
	font-weight: 800;
	color: var(--pkdb-tx);
	letter-spacing: -.02em;
}
.pkdb-topbar__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pkdb-tb__action {
	width: 34px; height: 34px;
	border-radius: 9px;
	border: 1px solid var(--pkdb-bd);
	background: var(--pkdb-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	cursor: pointer;
	transition: background .18s, border-color .18s;
	position: relative;
	text-decoration: none;
}
.pkdb-tb__action:hover {
	background: var(--pkdb-bg2);
	border-color: var(--pkdb-bd2);
}
.pkdb-tb__dot {
	position: absolute;
	top: 6px; right: 6px;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--pkdb-r);
	border: 1.5px solid var(--pkdb-bg);
}
.pkdb-tb__preview {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	background: var(--pkdb-bg2);
	border: 1px solid var(--pkdb-bd);
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pkdb-mu);
	cursor: pointer;
	transition: border-color .18s, color .18s;
	text-decoration: none;
}
.pkdb-tb__preview:hover { border-color: #AAA; color: var(--pkdb-tx); }
.pkdb-tb__preview svg { width: 12px; height: 12px; opacity: .5; }
.pkdb-tb__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 0;
	transition: background .18s;
}
.pkdb-tb__btn--y {
	background: var(--pkdb-y);
	color: var(--pkdb-g);
}
.pkdb-tb__btn--y:hover { background: var(--pkdb-yd); }

/* Content area */
.pkdb-content {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 28px;
	background: #F4F2EE;
}
.pkdb-content::-webkit-scrollbar { width: 4px; }
.pkdb-content::-webkit-scrollbar-track { background: transparent; }
.pkdb-content::-webkit-scrollbar-thumb { background: var(--pkdb-bd); border-radius: 2px; }

/* Views */
.pkdb-view { display: none; }
.pkdb-view--active { display: block; }

/* =========================================================================
   SHARED PRIMITIVES
   ========================================================================= */

/* Cards */
.pkdb-card {
	background: var(--pkdb-bg);
	border: 1px solid var(--pkdb-bd);
	border-radius: 14px;
	overflow: hidden;
}
.pkdb-card__head {
	padding: 16px 20px;
	border-bottom: 1px solid var(--pkdb-bd);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.pkdb-card__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkdb-tx);
	letter-spacing: -.01em;
}
.pkdb-card__action {
	font-size: 12px;
	font-weight: 600;
	color: var(--pkdb-t);
	cursor: pointer;
	transition: color .18s;
	text-decoration: none;
	border: 0;
	background: transparent;
}
.pkdb-card__action:hover { color: var(--pkdb-t2); }
.pkdb-card__body { padding: 20px; }
.pkdb-card__body--tight { padding: 8px 20px; }
.pkdb-card__body--padless-y { padding: 0 20px; }
.pkdb-card__body--flush { padding: 0; }

/* Buttons */
.pkdb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-weight: 600;
	cursor: pointer;
	border: 0;
	text-decoration: none;
	transition: background .18s, color .18s, border-color .18s, transform .18s;
	letter-spacing: -.01em;
	white-space: nowrap;
}
.pkdb-btn--sm { padding: 7px 14px; font-size: 12px; border-radius: 7px; }
.pkdb-btn--md { padding: 10px 20px; font-size: 13px; border-radius: 9px; }
.pkdb-btn--y  { background: var(--pkdb-y); color: var(--pkdb-g); }
.pkdb-btn--y:hover  { background: var(--pkdb-yd); }
.pkdb-btn--g  { background: var(--pkdb-g); color: #FFFFFF; }
.pkdb-btn--g:hover  { background: var(--pkdb-g2); }
.pkdb-btn--t  { background: var(--pkdb-t); color: #FFFFFF; }
.pkdb-btn--t:hover  { background: var(--pkdb-t2); }
.pkdb-btn--ghost { background: transparent; color: var(--pkdb-tx); border: 1px solid var(--pkdb-bd); }
.pkdb-btn--ghost:hover { background: var(--pkdb-bg2); border-color: var(--pkdb-bd2); }

/* Badges + tags */
.pkdb-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.pkdb-badge--t { background: var(--pkdb-tb); color: var(--pkdb-t); }
.pkdb-tag {
	display: inline-block;
	padding: 2px 8px;
	background: var(--pkdb-tb);
	border: 1px solid rgba(0,168,132,.18);
	border-radius: 100px;
	font-size: 10px;
	font-weight: 600;
	color: var(--pkdb-t);
	margin: 0 3px 3px 0;
}

/* Grids */
.pkdb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pkdb-grid-12-side {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 16px;
}
.pkdb-col-stack { display: flex; flex-direction: column; gap: 16px; }
.pkdb-mb-16 { margin-bottom: 16px; }

/* Page heading (used inside views except overview) */
.pkdb-page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 24px;
	gap: 16px;
	flex-wrap: wrap;
}
.pkdb-page-head__title {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -.035em;
	color: var(--pkdb-tx);
	margin-bottom: 3px;
}
.pkdb-page-head__sub {
	font-size: 13px;
	color: var(--pkdb-fa);
}
.pkdb-page-head__actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
	flex-wrap: wrap;
}

/* =========================================================================
   OVERVIEW VIEW
   ========================================================================= */

/* Alert banner */
.pkdb-alert {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	background: var(--pkdb-y);
	border-radius: 12px;
	margin-bottom: 20px;
}
.pkdb-alert__ico { font-size: 20px; flex-shrink: 0; }
.pkdb-alert__text {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	color: var(--pkdb-g);
}
.pkdb-alert__text span { font-weight: 400; color: rgba(13,43,30,.65); }
.pkdb-alert__cta {
	padding: 6px 14px;
	background: var(--pkdb-g);
	color: #FFFFFF;
	border: 0;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	flex-shrink: 0;
	white-space: nowrap;
}

/* Stat cards */
.pkdb-stat-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}
.pkdb-stat-row--gap { margin-bottom: 20px; }
.pkdb-stat-card {
	background: var(--pkdb-bg);
	border: 1px solid var(--pkdb-bd);
	border-radius: 14px;
	padding: 18px 20px;
	position: relative;
	overflow: hidden;
	transition: box-shadow .2s, border-color .2s;
}
.pkdb-stat-card:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,.07);
	border-color: transparent;
}
.pkdb-sc__label {
	font-size: 11px;
	font-weight: 600;
	color: var(--pkdb-fa);
	letter-spacing: .02em;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.pkdb-sc__ico {
	width: 26px; height: 26px;
	border-radius: 7px;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px;
}
.pkdb-sc__ico--t { background: var(--pkdb-tb); }
.pkdb-sc__ico--y { background: var(--pkdb-yb); }
.pkdb-sc__ico--g { background: rgba(13,43,30,.07); }
.pkdb-sc__ico--o { background: var(--pkdb-ob); }
.pkdb-sc__value {
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -.04em;
	color: var(--pkdb-tx);
	line-height: 1;
	margin-bottom: 5px;
}
.pkdb-sc__change {
	font-size: 11px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 3px;
}
.pkdb-sc__change--up   { color: var(--pkdb-t); }
.pkdb-sc__change--down { color: var(--pkdb-r); }
.pkdb-sc__change--flat { color: var(--pkdb-fa); }
.pkdb-sc__bar {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 3px;
}
.pkdb-sc__bar--t { background: linear-gradient(90deg, var(--pkdb-t), rgba(0,168,132,.3)); }
.pkdb-sc__bar--y { background: linear-gradient(90deg, var(--pkdb-y), rgba(255,214,0,.3)); }
.pkdb-sc__bar--g { background: linear-gradient(90deg, var(--pkdb-g), rgba(13,43,30,.3)); }
.pkdb-sc__bar--o { background: linear-gradient(90deg, var(--pkdb-o), rgba(255,107,43,.3)); }

/* Brand activity row */
.pkdb-brand-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: rgba(255,214,0,.09);
	border: 1px solid rgba(255,214,0,.25);
	border-radius: 12px;
	margin-bottom: 8px;
	cursor: pointer;
	transition: background .2s, transform .2s;
}
.pkdb-brand-alert:hover { background: rgba(255,214,0,.14); transform: translateX(2px); }
.pkdb-brand-alert--new { /* default styling */ }
.pkdb-brand-alert--old { background: var(--pkdb-bg2); border-color: var(--pkdb-bd); }
.pkdb-brand-alert--old:hover { background: var(--pkdb-bg3); }
.pkdb-ba__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--pkdb-y);
	flex-shrink: 0;
	margin-top: 5px;
}
.pkdb-brand-alert--old .pkdb-ba__dot { background: var(--pkdb-bd); }
.pkdb-ba__logo {
	width: 38px; height: 38px;
	border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}
.pkdb-ba__content { flex: 1; min-width: 0; }
.pkdb-ba__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkdb-tx);
	letter-spacing: -.01em;
	margin-bottom: 2px;
}
.pkdb-ba__detail {
	font-size: 12px;
	color: var(--pkdb-mu);
	line-height: 1.5;
}
.pkdb-ba__time {
	font-size: 11px;
	color: var(--pkdb-fa);
	white-space: nowrap;
	flex-shrink: 0;
}

/* Mini chart */
.pkdb-mini-chart-wrap { position: relative; width: 100%; height: 100px; }
.pkdb-mini-chart-x {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 10px;
	color: var(--pkdb-fa);
}

/* Activity feed */
.pkdb-activity {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--pkdb-bd);
}
.pkdb-activity:last-child { border-bottom: 0; }
.pkdb-activity__ico {
	width: 32px; height: 32px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
	margin-top: 1px;
}
.pkdb-activity__ico--t { background: var(--pkdb-tb); }
.pkdb-activity__ico--y { background: var(--pkdb-yb); }
.pkdb-activity__ico--o { background: var(--pkdb-ob); }
.pkdb-activity__ico--g { background: rgba(13,43,30,.07); }
.pkdb-activity__content { flex: 1; min-width: 0; }
.pkdb-activity__text {
	font-size: 13px;
	color: var(--pkdb-tx);
	line-height: 1.45;
}
.pkdb-activity__text strong { font-weight: 700; }
.pkdb-activity__time {
	font-size: 11px;
	color: var(--pkdb-fa);
	margin-top: 2px;
}

/* Quick actions */
.pkdb-qa-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.pkdb-qa {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--pkdb-bg);
	border: 1px solid var(--pkdb-bd);
	border-radius: 12px;
	cursor: pointer;
	transition: transform .2s, box-shadow .2s;
	text-decoration: none;
	border-left: 3px solid transparent;
	text-align: left;
	width: 100%;
}
.pkdb-qa:hover { transform: translateX(2px); box-shadow: 0 3px 12px rgba(0,0,0,.07); }
.pkdb-qa--t { border-left-color: var(--pkdb-t); }
.pkdb-qa--y { border-left-color: var(--pkdb-y); }
.pkdb-qa--o { border-left-color: var(--pkdb-o); }
.pkdb-qa--p { border-left-color: var(--pkdb-p); }
.pkdb-qa__ico { font-size: 20px; flex-shrink: 0; }
.pkdb-qa__lbl {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkdb-tx);
	letter-spacing: -.01em;
}
.pkdb-qa__sub {
	font-size: 11px;
	color: var(--pkdb-fa);
	margin-top: 1px;
}

/* Completeness card */
.pkdb-comp__pct {
	font-size: 13px;
	font-weight: 800;
	color: var(--pkdb-y);
}
.pkdb-comp__bar { height: 5px; background: var(--pkdb-bg2); }
.pkdb-comp__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--pkdb-t), var(--pkdb-y));
	transition: width 1s ease;
}
.pkdb-comp__list {
	padding: 12px 20px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.pkdb-comp__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--pkdb-bd);
	border-top: 0;
	border-left: 0;
	border-right: 0;
	background: transparent;
	text-align: left;
	width: 100%;
	font-family: inherit;
	cursor: default;
}
.pkdb-comp__item--next,
.pkdb-comp__item--todo { cursor: pointer; }
.pkdb-comp__list .pkdb-comp__item:last-child { border-bottom: 0; }
.pkdb-comp__mark {
	font-size: 12px;
	font-weight: 700;
	width: 16px;
	flex-shrink: 0;
}
.pkdb-comp__item--done .pkdb-comp__mark { color: var(--pkdb-t); }
.pkdb-comp__mark--o  { color: var(--pkdb-o); }
.pkdb-comp__mark--mu { color: var(--pkdb-fa); }
.pkdb-comp__item--done span:last-child {
	font-size: 13px;
	color: var(--pkdb-fa);
	text-decoration: line-through;
}
.pkdb-comp__item--next .pkdb-comp__text {
	font-size: 13px;
	font-weight: 600;
	color: var(--pkdb-tx);
}
.pkdb-comp__item--todo span:nth-child(2) {
	font-size: 13px;
	color: var(--pkdb-mu);
}
.pkdb-comp__delta {
	margin-left: auto;
	font-size: 11px;
	color: var(--pkdb-t);
	font-weight: 600;
}

/* Pro nudge */
.pkdb-pro-nudge {
	background: var(--pkdb-g);
	border-radius: 14px;
	padding: 20px;
	position: relative;
	overflow: hidden;
}
.pkdb-pro-nudge__deco {
	position: absolute;
	right: 12px; bottom: -8px;
	font-size: 60px;
	opacity: .06;
	pointer-events: none;
}
.pkdb-pro-nudge__tag {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pkdb-y);
	margin-bottom: 8px;
}
.pkdb-pro-nudge__h {
	font-size: 14px;
	font-weight: 800;
	color: #FFFFFF;
	margin-bottom: 6px;
	letter-spacing: -.02em;
}
.pkdb-pro-nudge__p {
	font-size: 12px;
	color: rgba(255,255,255,.45);
	line-height: 1.55;
	margin-bottom: 14px;
}

/* =========================================================================
   ANALYTICS VIEW
   ========================================================================= */
.pkdb-period-tabs {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var(--pkdb-bg2);
	border: 1px solid var(--pkdb-bd);
	border-radius: 9px;
}
.pkdb-pt {
	padding: 5px 13px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	color: var(--pkdb-fa);
	transition: background .18s, color .18s, box-shadow .18s;
	border: 0;
	background: transparent;
}
.pkdb-pt--active {
	background: var(--pkdb-bg);
	color: var(--pkdb-tx);
	box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.pkdb-pro-pill {
	font-size: 11px;
	padding: 5px 11px;
	background: var(--pkdb-ob);
	color: var(--pkdb-o);
	border-radius: 100px;
	font-weight: 700;
	white-space: nowrap;
}

.pkdb-chart-wrap {
	position: relative;
	width: 100%;
	height: 200px;
	margin-bottom: 6px;
}
#pkdb-views-chart { width: 100%; height: 100%; }
.pkdb-chart-x {
	display: flex;
	justify-content: space-between;
	padding: 0 8px;
	margin-top: 4px;
	font-size: 10px;
	color: var(--pkdb-fa);
}

/* Referrer rows */
.pkdb-ref {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--pkdb-bd);
}
.pkdb-ref:last-child { border-bottom: 0; }
.pkdb-ref__icon { font-size: 16px; width: 28px; text-align: center; flex-shrink: 0; }
.pkdb-ref__name {
	font-size: 13px;
	font-weight: 500;
	color: var(--pkdb-tx);
	flex: 1;
	min-width: 0;
}
.pkdb-ref__bar-wrap {
	width: 100px;
	height: 5px;
	background: var(--pkdb-bg2);
	border-radius: 3px;
	overflow: hidden;
	flex-shrink: 0;
}
.pkdb-ref__bar-fill {
	height: 100%;
	border-radius: 3px;
	width: 0;
	transition: width 1s cubic-bezier(.22,1,.36,1);
}
.pkdb-ref__bar-fill--t { background: var(--pkdb-t); }
.pkdb-ref__bar-fill--o { background: var(--pkdb-o); }
.pkdb-ref__bar-fill--y { background: var(--pkdb-y); }
.pkdb-ref__bar-fill--g { background: var(--pkdb-g); }
.pkdb-ref__bar-fill--p { background: var(--pkdb-p); }
.pkdb-ref__pct {
	font-size: 12px;
	font-weight: 700;
	color: var(--pkdb-mu);
	width: 32px;
	text-align: right;
	flex-shrink: 0;
}
.pkdb-ref__count {
	font-size: 12px;
	color: var(--pkdb-fa);
	width: 40px;
	text-align: right;
	flex-shrink: 0;
}

/* Brand visit log */
.pkdb-bvl {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--pkdb-bd);
}
.pkdb-bvl:last-child { border-bottom: 0; }
.pkdb-bvl__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}
.pkdb-bvl__dot--new { background: var(--pkdb-t); }
.pkdb-bvl__dot--old { background: var(--pkdb-bd); }
.pkdb-bvl__logo {
	width: 34px; height: 34px;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}
.pkdb-bvl__info { flex: 1; min-width: 0; }
.pkdb-bvl__name {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkdb-tx);
	letter-spacing: -.01em;
}
.pkdb-bvl__detail {
	font-size: 11px;
	color: var(--pkdb-fa);
}
.pkdb-bvl__time {
	font-size: 11px;
	color: var(--pkdb-fa);
	text-align: right;
	flex-shrink: 0;
}

/* =========================================================================
   INBOX VIEW
   ========================================================================= */
.pkdb-inbox {
	display: grid;
	grid-template-columns: 300px 1fr;
	height: calc(100vh - 56px - 56px - 80px);
	min-height: 480px;
	gap: 0;
	background: var(--pkdb-bg);
	border: 1px solid var(--pkdb-bd);
	border-radius: 14px;
	overflow: hidden;
}
.pkdb-inbox__list {
	border-right: 1px solid var(--pkdb-bd);
	overflow-y: auto;
	flex-shrink: 0;
}
.pkdb-inbox__list::-webkit-scrollbar { width: 3px; }
.pkdb-inbox__list::-webkit-scrollbar-thumb { background: var(--pkdb-bd); }
.pkdb-inbox__head {
	padding: 14px 16px;
	border-bottom: 1px solid var(--pkdb-bd);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	background: var(--pkdb-bg);
	z-index: 1;
}
.pkdb-il__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkdb-tx);
}
.pkdb-il__count {
	padding: 2px 8px;
	background: var(--pkdb-rb);
	color: var(--pkdb-r);
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
}
.pkdb-thread {
	display: flex;
	gap: 10px;
	padding: 14px 16px;
	cursor: pointer;
	transition: background .15s;
	border-bottom: 1px solid var(--pkdb-bd);
	background: transparent;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	width: 100%;
	text-align: left;
}
.pkdb-thread:hover { background: var(--pkdb-bg2); }
.pkdb-thread.active {
	background: var(--pkdb-bg3);
	border-left: 2px solid var(--pkdb-t);
	padding-left: 14px;
}
.pkdb-thread.unread .pkdb-thread__name {
	font-weight: 700;
	color: var(--pkdb-tx);
}
.pkdb-thread__av {
	width: 36px; height: 36px;
	border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.pkdb-thread__info { flex: 1; min-width: 0; }
.pkdb-thread__name {
	font-size: 13px;
	font-weight: 600;
	color: var(--pkdb-tx);
	letter-spacing: -.01em;
}
.pkdb-thread__preview {
	font-size: 12px;
	color: var(--pkdb-fa);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 2px;
}
.pkdb-thread__meta { text-align: right; flex-shrink: 0; }
.pkdb-thread__time { font-size: 11px; color: var(--pkdb-fa); }
.pkdb-thread__unread {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--pkdb-t);
	margin: 4px 0 0 auto;
}

/* Thread view */
.pkdb-thread-view {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
}
.pkdb-tv__head {
	padding: 14px 20px;
	border-bottom: 1px solid var(--pkdb-bd);
	flex-shrink: 0;
}
.pkdb-tv__brand-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.pkdb-tv__logo {
	width: 40px; height: 40px;
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}
.pkdb-tv__name {
	font-size: 15px;
	font-weight: 800;
	color: var(--pkdb-tx);
	letter-spacing: -.025em;
}
.pkdb-tv__meta {
	font-size: 12px;
	color: var(--pkdb-fa);
}
.pkdb-tv__actions {
	margin-left: auto;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.pkdb-tv__messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pkdb-tv__messages::-webkit-scrollbar { width: 3px; }
.pkdb-tv__messages::-webkit-scrollbar-thumb { background: var(--pkdb-bd); }

.pkdb-msg {
	display: flex;
	gap: 10px;
	align-items: flex-end;
}
.pkdb-msg--mine { flex-direction: row-reverse; }
.pkdb-msg__av {
	width: 28px; height: 28px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
}
.pkdb-msg__av--mine {
	background: linear-gradient(135deg, var(--pkdb-t), var(--pkdb-y));
}
.pkdb-msg__bubble {
	max-width: 420px;
	padding: 11px 15px;
	border-radius: 14px;
	font-size: 13px;
	line-height: 1.6;
	background: var(--pkdb-bg2);
	border: 1px solid var(--pkdb-bd);
	border-radius: 14px 14px 14px 4px;
	color: var(--pkdb-tx);
}
.pkdb-msg--mine .pkdb-msg__bubble {
	background: var(--pkdb-g);
	color: #FFFFFF;
	border: 0;
	border-radius: 14px 14px 4px 14px;
}
.pkdb-msg__time {
	font-size: 10px;
	color: var(--pkdb-fa);
	margin-top: 4px;
}
.pkdb-msg__time--right { text-align: right; }
.pkdb-msg__attachment {
	margin-top: 8px;
	padding: 10px 12px;
	background: rgba(255,255,255,.1);
	border-radius: 9px;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 7px;
	color: rgba(0,0,0,.7);
}
.pkdb-msg--mine .pkdb-msg__attachment { color: rgba(255,255,255,.8); }

.pkdb-tv__compose {
	padding: 16px 20px;
	border-top: 1px solid var(--pkdb-bd);
	flex-shrink: 0;
}
.pkdb-tv__compose-box {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pkdb-tv__input {
	flex: 1;
	padding: 10px 14px;
	border: 1.5px solid var(--pkdb-bd2);
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	color: var(--pkdb-tx);
	outline: 0;
	transition: border-color .18s, box-shadow .18s;
	background: var(--pkdb-bg);
}
.pkdb-tv__input:focus {
	border-color: var(--pkdb-t);
	box-shadow: 0 0 0 3px var(--pkdb-tb);
}
.pkdb-tv__send {
	width: 38px; height: 38px;
	border-radius: 9px;
	background: var(--pkdb-g);
	color: #FFFFFF;
	border: 0;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background .18s;
	flex-shrink: 0;
	font-size: 15px;
}
.pkdb-tv__send:hover { background: var(--pkdb-g2); }
.pkdb-tv__hint {
	font-size: 11px;
	color: var(--pkdb-fa);
	margin-top: 6px;
}

/* =========================================================================
   OPPORTUNITIES VIEW
   ========================================================================= */
.pkdb-opp-filters {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	flex-wrap: wrap;
	align-items: center;
}
.pkdb-of {
	padding: 7px 16px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--pkdb-bd);
	background: var(--pkdb-bg);
	color: var(--pkdb-mu);
	transition: border-color .18s, color .18s, background .18s;
}
.pkdb-of:hover {
	border-color: var(--pkdb-bd2);
	color: var(--pkdb-tx);
}
.pkdb-of--active {
	background: var(--pkdb-g);
	border-color: var(--pkdb-g);
	color: #FFFFFF;
}
.pkdb-opp-sort {
	margin-left: auto;
	font-size: 12px;
	color: var(--pkdb-fa);
	align-self: center;
}
.pkdb-opp-sort strong { color: var(--pkdb-tx); font-weight: 700; }

.pkdb-opp-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.pkdb-opp {
	background: var(--pkdb-bg);
	border: 1px solid var(--pkdb-bd);
	border-radius: 16px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	cursor: pointer;
}
.pkdb-opp:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(0,0,0,.09);
	border-color: transparent;
}
.pkdb-opp__banner {
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	position: relative;
}
.pkdb-opp__brand-badge {
	position: absolute;
	top: 10px; right: 10px;
	padding: 3px 9px;
	background: var(--pkdb-y);
	color: var(--pkdb-g);
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.pkdb-opp__body { padding: 18px; }
.pkdb-opp__brand-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.pkdb-opp__brand-logo {
	width: 28px; height: 28px;
	border-radius: 7px;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px;
	flex-shrink: 0;
}
.pkdb-opp__brand-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkdb-tx);
}
.pkdb-opp__verified {
	font-size: 10px;
	color: var(--pkdb-t);
	background: var(--pkdb-tb);
	padding: 2px 7px;
	border-radius: 100px;
	font-weight: 700;
}
.pkdb-opp__title {
	font-size: 15px;
	font-weight: 800;
	color: var(--pkdb-tx);
	letter-spacing: -.025em;
	margin-bottom: 7px;
	line-height: 1.3;
}
.pkdb-opp__desc {
	font-size: 13px;
	color: var(--pkdb-mu);
	line-height: 1.6;
	margin-bottom: 14px;
}
.pkdb-opp__details {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	margin-bottom: 14px;
}
.pkdb-od {
	background: var(--pkdb-bg2);
	border-radius: 8px;
	padding: 8px 10px;
}
.pkdb-od__v {
	font-size: 13px;
	font-weight: 800;
	color: var(--pkdb-tx);
	letter-spacing: -.02em;
}
.pkdb-od__l {
	font-size: 10px;
	color: var(--pkdb-fa);
	margin-top: 1px;
}
.pkdb-opp__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 14px;
}
.pkdb-opp__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 12px;
	border-top: 1px solid var(--pkdb-bd);
	gap: 8px;
	flex-wrap: wrap;
}
.pkdb-opp__deadline {
	font-size: 12px;
	color: var(--pkdb-o);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 4px;
}
.pkdb-opp__apply {
	padding: 8px 18px;
	background: var(--pkdb-g);
	color: #FFFFFF;
	border: 0;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s;
}
.pkdb-opp__apply:hover { background: var(--pkdb-g2); }
.pkdb-opp__apply--applied {
	background: var(--pkdb-tb);
	color: var(--pkdb-t);
	cursor: default;
}
.pkdb-opp__apply--applied:hover { background: var(--pkdb-tb); }

/* =========================================================================
   MEDIA KIT VIEW
   ========================================================================= */
.pkdb-mk {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 20px;
	align-items: start;
}
.pkdb-mk__editor {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pkdb-mk__group {
	background: var(--pkdb-bg);
	border: 1px solid var(--pkdb-bd);
	border-radius: 14px;
	overflow: hidden;
}
.pkdb-mk__group-head {
	padding: 14px 20px;
	border-bottom: 1px solid var(--pkdb-bd);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.pkdb-mk__group-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pkdb-t);
}
.pkdb-mk__group-sub {
	font-size: 11px;
	color: var(--pkdb-fa);
}
.pkdb-mk__row {
	padding: 16px 20px;
	border-bottom: 1px solid var(--pkdb-bd);
	display: flex;
	gap: 24px;
	align-items: flex-start;
}
.pkdb-mk__row--last,
.pkdb-mk__row:last-child { border-bottom: 0; }
.pkdb-mk__row--alert {
	background: rgba(255,107,43,.02);
}
.pkdb-mk__label {
	width: 140px;
	flex-shrink: 0;
}
.pkdb-mk__lbl-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--pkdb-tx);
	margin-bottom: 2px;
}
.pkdb-mk__lbl-hint {
	font-size: 11px;
	color: var(--pkdb-fa);
	line-height: 1.45;
}
.pkdb-mk__missing {
	font-size: 10px;
	padding: 2px 6px;
	background: var(--pkdb-ob);
	color: var(--pkdb-o);
	border-radius: 4px;
	font-weight: 700;
	letter-spacing: .02em;
}
.pkdb-mk__control { flex: 1; min-width: 0; }
.pkdb-mk__input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--pkdb-bd);
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	color: var(--pkdb-tx);
	background: var(--pkdb-bg);
	outline: 0;
	transition: border-color .18s, box-shadow .18s;
	resize: vertical;
}
.pkdb-mk__input:hover { border-color: var(--pkdb-bd2); }
.pkdb-mk__input:focus {
	border-color: var(--pkdb-t);
	box-shadow: 0 0 0 3px var(--pkdb-tb);
}
.pkdb-mk__input::placeholder { color: var(--pkdb-fa); }
.pkdb-mk__input--alert { border-color: var(--pkdb-o); }
.pkdb-mk__select {
	appearance: none;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="7"><path d="M1 1l5 5 5-5" stroke="%239E9B94" stroke-width="1.5" fill="none"/></svg>');
	background-repeat: no-repeat;
	background-position: right 12px center;
	cursor: pointer;
	padding-right: 32px;
}
.pkdb-mk__prefix-wrap {
	display: flex;
	border: 1px solid var(--pkdb-bd);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color .18s, box-shadow .18s;
	background: var(--pkdb-bg);
}
.pkdb-mk__prefix-wrap:focus-within {
	border-color: var(--pkdb-t);
	box-shadow: 0 0 0 3px var(--pkdb-tb);
}
.pkdb-mk__prefix {
	padding: 8px 10px;
	background: var(--pkdb-bg2);
	border-right: 1px solid var(--pkdb-bd);
	font-size: 12px;
	color: var(--pkdb-fa);
	white-space: nowrap;
}
.pkdb-mk__prefix-input {
	flex: 1;
	padding: 8px 10px;
	border: 0;
	font-family: inherit;
	font-size: 13px;
	color: var(--pkdb-tx);
	background: transparent;
	outline: 0;
}

.pkdb-mk__tag-sel {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.pkdb-mk__ts-tag {
	padding: 5px 12px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid var(--pkdb-bd);
	cursor: pointer;
	transition: background .18s, border-color .18s, color .18s;
	background: var(--pkdb-bg);
	color: var(--pkdb-mu);
}
.pkdb-mk__ts-tag:hover { border-color: var(--pkdb-bd2); }
.pkdb-mk__ts-tag--sel {
	background: var(--pkdb-g);
	border-color: var(--pkdb-g);
	color: #FFFFFF;
}

.pkdb-mk__rate-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.pkdb-mk__rmg {
	background: var(--pkdb-bg2);
	border-radius: 8px;
	padding: 10px 12px;
}
.pkdb-mk__rmg-lbl {
	font-size: 10px;
	font-weight: 600;
	color: var(--pkdb-fa);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 5px;
}
.pkdb-mk__rmg-price {
	display: flex;
	align-items: center;
	gap: 2px;
}
.pkdb-mk__rmg-cur {
	font-size: 13px;
	color: var(--pkdb-fa);
	font-weight: 600;
}
.pkdb-mk__rmg-input {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 16px;
	font-weight: 800;
	color: var(--pkdb-tx);
	outline: 0;
	width: 100%;
	letter-spacing: -.03em;
}

.pkdb-mk__toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	gap: 12px;
}
.pkdb-mk__tr-lbl {
	font-size: 13px;
	font-weight: 600;
	color: var(--pkdb-tx);
}
.pkdb-mk__tr-sub {
	font-size: 11px;
	color: var(--pkdb-fa);
}
.pkdb-mk__sw {
	width: 38px; height: 22px;
	background: var(--pkdb-bd);
	border-radius: 100px;
	position: relative;
	cursor: pointer;
	border: 0;
	transition: background .2s;
	flex-shrink: 0;
}
.pkdb-mk__sw--on { background: var(--pkdb-g); }
.pkdb-mk__sw::after {
	content: "";
	width: 16px; height: 16px;
	background: #FFFFFF;
	border-radius: 50%;
	position: absolute;
	top: 3px; left: 3px;
	transition: transform .2s cubic-bezier(.34,1.56,.64,1);
	box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.pkdb-mk__sw--on::after { transform: translateX(16px); }

.pkdb-mk__negot {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	background: var(--pkdb-yb);
	border-radius: 8px;
	font-size: 12px;
	color: var(--pkdb-tx);
	font-weight: 600;
}

/* Preview column */
.pkdb-mk__preview-col {}
.pkdb-mk__preview-lbl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pkdb-fa);
	margin-bottom: 10px;
	text-align: center;
}
.pkdb-mkp {
	background: var(--pkdb-bg);
	border: 1.5px solid var(--pkdb-bd);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0,0,0,.08);
	position: sticky;
	top: 0;
}
.pkdb-mkp__chrome {
	background: var(--pkdb-bg2);
	border-bottom: 1px solid var(--pkdb-bd);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.pkdb-mkp__dots { display: flex; gap: 4px; }
.pkdb-mkp__dots span {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: rgba(0,0,0,.15);
}
.pkdb-mkp__dots span:first-child { background: #FF5F57; }
.pkdb-mkp__dots span:nth-child(2) { background: #FEBC2E; }
.pkdb-mkp__dots span:nth-child(3) { background: #28C840; }
.pkdb-mkp__url {
	flex: 1;
	text-align: center;
	font-size: 11px;
	color: var(--pkdb-t);
	background: var(--pkdb-bg);
	border: 1px solid var(--pkdb-bd);
	border-radius: 5px;
	padding: 2px 10px;
}
.pkdb-mkp__body {}
.pkdb-mkp__banner {
	height: 60px;
	background: linear-gradient(135deg, var(--pkdb-g), var(--pkdb-g3));
}
.pkdb-mkp__av-wrap {
	padding: 0 16px;
	margin-top: -20px;
	margin-bottom: 6px;
	position: relative;
	z-index: 1;
}
.pkdb-mkp__av {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pkdb-t), var(--pkdb-y));
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
	border: 2.5px solid #FFFFFF;
}
.pkdb-mkp__info { padding: 0 16px 16px; }
.pkdb-mkp__name {
	font-size: 14px;
	font-weight: 800;
	color: var(--pkdb-tx);
	letter-spacing: -.025em;
}
.pkdb-mkp__handle {
	font-size: 11px;
	color: var(--pkdb-t);
	margin-bottom: 5px;
}
.pkdb-mkp__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin-bottom: 10px;
}
.pkdb-mkp__tag {
	padding: 2px 6px;
	background: var(--pkdb-tb);
	border: 1px solid rgba(0,168,132,.15);
	border-radius: 100px;
	font-size: 9px;
	font-weight: 700;
	color: var(--pkdb-t);
}
.pkdb-mkp__stats {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 5px;
	margin-bottom: 10px;
}
.pkdb-mkp__st {
	background: var(--pkdb-bg2);
	border-radius: 7px;
	padding: 8px;
	text-align: center;
}
.pkdb-mkp__sv {
	font-size: 14px;
	font-weight: 900;
	color: var(--pkdb-tx);
	letter-spacing: -.03em;
	line-height: 1;
}
.pkdb-mkp__sl {
	font-size: 9px;
	color: var(--pkdb-fa);
	margin-top: 2px;
}
.pkdb-mkp__sec {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pkdb-fa);
	margin-bottom: 5px;
}
.pkdb-mkp__brands {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 10px;
}
.pkdb-mkp__bi {
	padding: 3px 8px;
	background: var(--pkdb-bg2);
	border: 1px solid var(--pkdb-bd);
	border-radius: 100px;
	font-size: 10px;
	color: var(--pkdb-tx);
	font-weight: 500;
}
.pkdb-mkp__cta-row {
	display: flex;
	gap: 6px;
	margin-top: 10px;
}
.pkdb-mkp__cta {
	flex: 1;
	padding: 8px;
	background: var(--pkdb-g);
	color: #FFFFFF;
	border: 0;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}
.pkdb-mkp__cta--ghost {
	background: var(--pkdb-bg2);
	color: var(--pkdb-mu);
	border: 1px solid var(--pkdb-bd);
	font-weight: 600;
}

.pkdb-mk__tip {
	margin-top: 12px;
	padding: 12px;
	background: var(--pkdb-tb);
	border-radius: 10px;
	font-size: 12px;
	color: var(--pkdb-t);
	font-weight: 600;
	text-align: center;
}

/* =========================================================================
   BRAND NETWORK VIEW
   ========================================================================= */
.pkdb-bn-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: rgba(0,168,132,.06);
	border: 1px solid rgba(0,168,132,.15);
	border-radius: 10px;
	font-size: 12px;
	color: var(--pkdb-t);
	font-weight: 600;
	margin-bottom: 16px;
}
.pkdb-bn-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.pkdb-bn-card {
	background: var(--pkdb-bg);
	border: 1px solid var(--pkdb-bd);
	border-radius: 14px;
	padding: 20px;
	transition: transform .25s, box-shadow .25s, border-color .25s;
	cursor: pointer;
	position: relative;
}
.pkdb-bn-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 32px rgba(0,0,0,.08);
	border-color: transparent;
}
.pkdb-bn-card--linked {
	border-color: rgba(0,168,132,.2);
	background: rgba(0,168,132,.02);
}
.pkdb-bn-card__logo {
	width: 44px; height: 44px;
	border-radius: 11px;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
	margin-bottom: 12px;
}
.pkdb-bn-card__name {
	font-size: 14px;
	font-weight: 800;
	color: var(--pkdb-tx);
	letter-spacing: -.02em;
	margin-bottom: 2px;
}
.pkdb-bn-card__cat {
	font-size: 12px;
	color: var(--pkdb-fa);
	margin-bottom: 10px;
}
.pkdb-bn-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pkdb-bn-card__verify {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	background: var(--pkdb-tb);
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	color: var(--pkdb-t);
}
.pkdb-bn-card__date {
	font-size: 11px;
	color: var(--pkdb-fa);
}
.pkdb-bn-add {
	border: 1.5px dashed var(--pkdb-bd2);
	border-radius: 14px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color .2s, background .2s, color .2s;
	text-align: center;
	min-height: 130px;
	background: transparent;
}
.pkdb-bn-add:hover {
	border-color: var(--pkdb-t);
	background: var(--pkdb-tb);
}
.pkdb-bn-add__ico {
	font-size: 28px;
	margin-bottom: 8px;
	color: var(--pkdb-fa);
}
.pkdb-bn-add:hover .pkdb-bn-add__ico { color: var(--pkdb-t); }
.pkdb-bn-add__txt {
	font-size: 13px;
	font-weight: 600;
	color: var(--pkdb-fa);
}
.pkdb-bn-add:hover .pkdb-bn-add__txt { color: var(--pkdb-t); }

.pkdb-bn-links {
	margin-top: 20px;
	padding: 20px;
	background: var(--pkdb-bg);
	border: 1px solid var(--pkdb-bd);
	border-radius: 14px;
}
.pkdb-bn-links__h {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkdb-tx);
	margin-bottom: 14px;
	letter-spacing: -.01em;
}
.pkdb-bn-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background: var(--pkdb-bg2);
	border-radius: 9px;
	font-size: 13px;
	margin-bottom: 8px;
}
.pkdb-bn-link:last-child { margin-bottom: 0; }
.pkdb-bn-link__name { font-weight: 600; flex: 1; }
.pkdb-bn-link__url {
	font-size: 12px;
	color: var(--pkdb-t);
	font-weight: 600;
	text-decoration: none;
}
.pkdb-bn-link__url:hover { color: var(--pkdb-t2); }

/* =========================================================================
   SAVE BAR + TOAST
   ========================================================================= */
.pkdb-save-bar {
	position: fixed;
	bottom: 0;
	left: var(--pkdb-sb);
	right: 0;
	height: 52px;
	background: var(--pkdb-bg);
	border-top: 1px solid var(--pkdb-bd);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28px;
	z-index: 200;
	transform: translateY(100%);
	transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.pkdb-save-bar--show { transform: translateY(0); }
.pkdb-save-bar__msg {
	font-size: 13px;
	color: var(--pkdb-mu);
	display: flex;
	align-items: center;
	gap: 7px;
}
.pkdb-save-bar__pulse {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--pkdb-o);
	animation: pkdb-pulse 1.5s ease-in-out infinite;
}
@keyframes pkdb-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .3; }
}
.pkdb-save-bar__actions { display: flex; gap: 8px; }

.pkdb-toast {
	position: fixed;
	bottom: 72px;
	left: 50%;
	transform: translateX(-50%) translateY(16px);
	background: var(--pkdb-g);
	color: #FFFFFF;
	padding: 10px 20px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	opacity: 0;
	transition: opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
	z-index: 300;
	pointer-events: none;
	white-space: nowrap;
	box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.pkdb-toast--show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
	.pkdb { --pkdb-sb: 64px; }
	.pkdb-sb__brand { padding: 12px 8px; }
	.pkdb-sb__logo-name,
	.pkdb-sb__logo-sub,
	.pkdb-sb__user-info,
	.pkdb-sb__user-chev,
	.pkdb-sb__section-lbl,
	.pkdb-sb__item-txt,
	.pkdb-sb__badge,
	.pkdb-sb__complete,
	.pkdb-sb__bottom-item { display: none; }
	.pkdb-sb__user { justify-content: center; padding: 8px; }
	.pkdb-sb__item {
		justify-content: center;
		padding: 8px;
	}
	.pkdb-sb__bottom {
		display: flex;
		gap: 4px;
		justify-content: center;
		padding: 12px 6px;
	}
	.pkdb-sb__bottom-item {
		width: auto;
		padding: 7px 8px;
	}
	.pkdb-sb__bottom-item svg { display: block; opacity: 0.75; }
	.pkdb-stat-row { grid-template-columns: 1fr 1fr; }
	.pkdb-grid-12-side { grid-template-columns: 1fr; }
	.pkdb-grid-2 { grid-template-columns: 1fr; }
	.pkdb-opp-grid { grid-template-columns: 1fr; }
	.pkdb-bn-grid { grid-template-columns: 1fr 1fr; }
	.pkdb-mk { grid-template-columns: 1fr; }
	.pkdb-mkp { position: static; }
	.pkdb-inbox { grid-template-columns: 240px 1fr; }
	.pkdb-save-bar { left: var(--pkdb-sb); }
}
@media (max-width: 720px) {
	.pkdb-topbar { padding: 0 16px; }
	.pkdb-content { padding: 16px; }
	.pkdb-stat-row { grid-template-columns: 1fr 1fr; gap: 8px; }
	.pkdb-stat-card { padding: 14px 16px; }
	.pkdb-sc__value { font-size: 24px; }
	.pkdb-bn-grid { grid-template-columns: 1fr; }
	.pkdb-inbox {
		grid-template-columns: 1fr;
		height: auto;
		min-height: 0;
	}
	.pkdb-inbox__list {
		max-height: 220px;
		border-right: 0;
		border-bottom: 1px solid var(--pkdb-bd);
	}
	.pkdb-tb__preview span,
	.pkdb-tb__btn { font-size: 12px; }
	.pkdb-mk__row {
		flex-direction: column;
		gap: 12px;
	}
	.pkdb-mk__label { width: 100%; }
	.pkdb-mk__rate-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   v0.5.8 — Brand Hub SPA dashboard (.pkbh-*)
   =========================================================================
   Brand-side counterpart to /dashboard/. Full-viewport, dark-green
   sidebar (248px) + topbar + scrollable main area + 6 swappable views.

   Same viewport-lock pattern as .pkdb (html, body { overflow: hidden }).
   Theme chrome bypassed by template via wp_head / wp_footer.
   ========================================================================= */

html.pkbh-html,
body.pkbh-body {
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
body.pkbh-body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: #F4F2EE;
	color: #0A0A0A;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.pkbh {
	--pkbh-g:   #0D2B1E;
	--pkbh-g2:  #163D2C;
	--pkbh-g3:  #1E5038;
	--pkbh-ga:  rgba(255,255,255,.06);
	--pkbh-y:   #FFD600;
	--pkbh-yd:  #E8C200;
	--pkbh-yb:  rgba(255,214,0,.12);
	--pkbh-t:   #00A884;
	--pkbh-t2:  #008F70;
	--pkbh-tb:  rgba(0,168,132,.12);
	--pkbh-o:   #FF6B2B;
	--pkbh-ob:  rgba(255,107,43,.1);
	--pkbh-r:   #E53535;
	--pkbh-rb:  rgba(229,53,53,.1);
	--pkbh-p:   #7B5CF5;
	--pkbh-pb:  rgba(123,92,245,.1);
	--pkbh-bg:  #FFFFFF;
	--pkbh-bg2: #F7F6F3;
	--pkbh-bg3: #F0EEE9;
	--pkbh-bd:  #E8E6E1;
	--pkbh-bd2: #D8D5CE;
	--pkbh-tx:  #0A0A0A;
	--pkbh-mu:  #6B6760;
	--pkbh-fa:  #9E9B94;
	--pkbh-sb:  248px;
	display: flex;
	height: 100vh;
	overflow: hidden;
	width: 100%;
}
.pkbh *,
.pkbh *::before,
.pkbh *::after { box-sizing: border-box; }
.pkbh button { font-family: inherit; }

/* =========================================================================
   SIDEBAR
   ========================================================================= */
.pkbh-sidebar {
	width: var(--pkbh-sb);
	flex-shrink: 0;
	background: var(--pkbh-g);
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 10;
}
.pkbh-sidebar::-webkit-scrollbar { width: 0; }

.pkbh-sb__brand {
	padding: 16px 14px 12px;
	border-bottom: 1px solid rgba(255,255,255,.07);
}
.pkbh-sb__logo-row {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 12px;
}
.pkbh-sb__logo-mark {
	width: 30px; height: 30px;
	background: var(--pkbh-y);
	border-radius: 7px;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}
.pkbh-sb__logo-name {
	font-size: 15px;
	font-weight: 800;
	color: #FFFFFF;
	letter-spacing: -.02em;
	display: block;
}
.pkbh-sb__logo-sub {
	color: rgba(255,255,255,.38);
	font-size: 10px;
	font-weight: 500;
	display: block;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-top: 1px;
}
.pkbh-sb__brand-card {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 10px;
	background: rgba(255,255,255,.07);
	border-radius: 10px;
	cursor: pointer;
	transition: background .18s;
	text-decoration: none;
}
.pkbh-sb__brand-card:hover { background: rgba(255,255,255,.1); }
.pkbh-sb__brand-av {
	width: 34px; height: 34px;
	border-radius: 8px;
	background: var(--pkbh-t);
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.pkbh-sb__brand-info { min-width: 0; flex: 1; }
.pkbh-sb__brand-name {
	font-size: 13px;
	font-weight: 700;
	color: rgba(255,255,255,.9);
	letter-spacing: -.01em;
	line-height: 1.2;
}
.pkbh-sb__brand-sub {
	font-size: 11px;
	color: rgba(255,255,255,.35);
}
.pkbh-sb__chev {
	margin-left: auto;
	color: rgba(255,255,255,.25);
	font-size: 10px;
}

.pkbh-sb__nav {
	padding: 10px 10px 0;
	flex: 1;
}
.pkbh-sb__section-lbl {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(255,255,255,.25);
	padding: 10px 8px 5px;
}
.pkbh-sb__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 9px;
	cursor: pointer;
	transition: background .18s;
	margin-bottom: 1px;
	border: 0;
	background: transparent;
	width: 100%;
	text-align: left;
}
.pkbh-sb__item:hover { background: var(--pkbh-ga); }
.pkbh-sb__item--active { background: rgba(255,255,255,.1); }
.pkbh-sb__item-ico {
	width: 32px; height: 32px;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
	background: rgba(255,255,255,.06);
	transition: background .18s;
}
.pkbh-sb__item--active .pkbh-sb__item-ico { background: var(--pkbh-y); }
.pkbh-sb__item-txt { flex: 1; text-align: left; min-width: 0; }
.pkbh-sb__item-name {
	font-size: 13px;
	font-weight: 500;
	color: rgba(255,255,255,.65);
	letter-spacing: -.01em;
	line-height: 1;
}
.pkbh-sb__item--active .pkbh-sb__item-name { color: #FFFFFF; font-weight: 700; }
.pkbh-sb__item:hover .pkbh-sb__item-name { color: rgba(255,255,255,.85); }
.pkbh-sb__item-sub {
	font-size: 10px;
	color: rgba(255,255,255,.28);
	margin-top: 2px;
}
.pkbh-sb__badge {
	padding: 2px 7px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	flex-shrink: 0;
}
.pkbh-sb__badge--new   { background: rgba(229,53,53,.3); color: #FF8080; }
.pkbh-sb__badge--count { background: rgba(255,255,255,.1); color: rgba(255,255,255,.5); }
.pkbh-sb__badge--pro   { background: rgba(255,214,0,.15); color: var(--pkbh-y); }
.pkbh-sb__badge--hot   { background: rgba(0,168,132,.25); color: rgba(0,200,165,.9); }
.pkbh-sb__divider {
	height: 1px;
	background: rgba(255,255,255,.06);
	margin: 6px 10px;
}

/* Spend widget */
.pkbh-sb__spend {
	margin: 12px 0 0;
	padding: 14px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 12px;
}
.pkbh-sb__spend-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
}
.pkbh-sb__spend-lbl {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255,255,255,.3);
}
.pkbh-sb__spend-val {
	font-size: 17px;
	font-weight: 900;
	color: #FFFFFF;
	letter-spacing: -.03em;
}
.pkbh-sb__spend-bar {
	height: 5px;
	background: rgba(255,255,255,.1);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 6px;
}
.pkbh-sb__spend-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--pkbh-t), var(--pkbh-y));
	border-radius: 3px;
	width: 0;
	transition: width 1s ease;
}
.pkbh-sb__spend-note {
	font-size: 11px;
	color: rgba(255,255,255,.28);
}

.pkbh-sb__bottom {
	padding: 12px 10px;
	border-top: 1px solid rgba(255,255,255,.06);
}
.pkbh-sb__bottom-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px;
	border-radius: 8px;
	cursor: pointer;
	transition: background .18s, color .18s;
	font-size: 12px;
	color: rgba(255,255,255,.35);
	font-weight: 500;
	text-decoration: none;
	background: transparent;
	border: 0;
	width: 100%;
}
.pkbh-sb__bottom-item:hover {
	background: var(--pkbh-ga);
	color: rgba(255,255,255,.65);
}
.pkbh-sb__bottom-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .5; }
.pkbh-sb__bottom-item--out { color: rgba(255,100,100,.5); }
.pkbh-sb__bottom-item--out:hover { color: rgba(255,140,140,.85); }

/* =========================================================================
   MAIN
   ========================================================================= */
.pkbh-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
}
.pkbh-topbar {
	height: 56px;
	background: var(--pkbh-bg);
	border-bottom: 1px solid var(--pkbh-bd);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28px;
	flex-shrink: 0;
	gap: 16px;
}
.pkbh-topbar__title {
	font-size: 15px;
	font-weight: 800;
	color: var(--pkbh-tx);
	letter-spacing: -.02em;
}
.pkbh-topbar__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pkbh-tb__action {
	width: 34px; height: 34px;
	border-radius: 9px;
	border: 1px solid var(--pkbh-bd);
	background: var(--pkbh-bg);
	display: flex; align-items: center; justify-content: center;
	font-size: 15px;
	cursor: pointer;
	transition: background .18s, border-color .18s;
	position: relative;
}
.pkbh-tb__action:hover { background: var(--pkbh-bg2); border-color: var(--pkbh-bd2); }
.pkbh-tb__dot {
	position: absolute;
	top: 6px; right: 6px;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--pkbh-r);
	border: 1.5px solid var(--pkbh-bg);
}
.pkbh-tb__pill {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .18s, color .18s;
	text-decoration: none;
	border: 1px solid var(--pkbh-bd);
	background: var(--pkbh-bg2);
	color: var(--pkbh-mu);
}
.pkbh-tb__pill:hover { border-color: #AAA; color: var(--pkbh-tx); }
.pkbh-tb__pill svg { width: 12px; height: 12px; opacity: .5; }
.pkbh-tb__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	border: 0;
	transition: background .18s;
}
.pkbh-tb__btn--t { background: var(--pkbh-t); color: #FFFFFF; }
.pkbh-tb__btn--t:hover { background: var(--pkbh-t2); }

.pkbh-content {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 28px;
	background: #F4F2EE;
}
.pkbh-content::-webkit-scrollbar { width: 4px; }
.pkbh-content::-webkit-scrollbar-track { background: transparent; }
.pkbh-content::-webkit-scrollbar-thumb { background: var(--pkbh-bd); border-radius: 2px; }

.pkbh-view { display: none; }
.pkbh-view--active { display: block; }

/* =========================================================================
   SHARED PRIMITIVES
   ========================================================================= */
.pkbh-card {
	background: var(--pkbh-bg);
	border: 1px solid var(--pkbh-bd);
	border-radius: 14px;
	overflow: hidden;
}
.pkbh-card__head {
	padding: 14px 20px;
	border-bottom: 1px solid var(--pkbh-bd);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.pkbh-card__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkbh-tx);
	letter-spacing: -.01em;
}
.pkbh-card__action {
	font-size: 12px;
	font-weight: 600;
	color: var(--pkbh-t);
	cursor: pointer;
	transition: color .18s;
	text-decoration: none;
	border: 0;
	background: transparent;
}
.pkbh-card__action:hover { color: var(--pkbh-t2); }
.pkbh-card__body { padding: 20px; }
.pkbh-card__body--tight { padding: 14px 20px; }
.pkbh-card__body--padless-y { padding: 0 20px; }

.pkbh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-weight: 600;
	cursor: pointer;
	border: 0;
	text-decoration: none;
	transition: background .18s, color .18s, border-color .18s, transform .18s;
	letter-spacing: -.01em;
	white-space: nowrap;
}
.pkbh-btn--sm { padding: 7px 14px; font-size: 12px; border-radius: 7px; }
.pkbh-btn--md { padding: 10px 20px; font-size: 13px; border-radius: 9px; }
.pkbh-btn--block { width: 100%; }
.pkbh-btn--y  { background: var(--pkbh-y); color: var(--pkbh-g); }
.pkbh-btn--y:hover  { background: var(--pkbh-yd); }
.pkbh-btn--g  { background: var(--pkbh-g); color: #FFFFFF; }
.pkbh-btn--g:hover  { background: var(--pkbh-g2); }
.pkbh-btn--ghost { background: transparent; color: var(--pkbh-tx); border: 1px solid var(--pkbh-bd); }
.pkbh-btn--ghost:hover { background: var(--pkbh-bg2); border-color: var(--pkbh-bd2); }
.pkbh-btn--ghost-t {
	background: var(--pkbh-tb);
	color: var(--pkbh-t);
	border: 1px solid rgba(0,168,132,.2);
}
.pkbh-btn--ghost-t:hover { background: rgba(0,168,132,.18); }

.pkbh-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.pkbh-badge--t { background: var(--pkbh-tb); color: var(--pkbh-t); }
.pkbh-badge--y { background: var(--pkbh-yb); color: #8A6800; }
.pkbh-badge--o { background: var(--pkbh-ob); color: var(--pkbh-o); }

.pkbh-pro-pill {
	padding: 6px 13px;
	background: var(--pkbh-ob);
	color: var(--pkbh-o);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
}

.pkbh-grid-12-side {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 16px;
}
.pkbh-col-stack { display: flex; flex-direction: column; gap: 16px; }
.pkbh-mt-16 { margin-top: 16px; }

.pkbh-page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 24px;
	gap: 16px;
	flex-wrap: wrap;
}
.pkbh-page-head__title {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -.035em;
	color: var(--pkbh-tx);
	margin-bottom: 3px;
}
.pkbh-page-head__sub {
	font-size: 13px;
	color: var(--pkbh-fa);
}
.pkbh-page-head__actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
	flex-wrap: wrap;
}

/* =========================================================================
   OVERVIEW
   ========================================================================= */
.pkbh-stat-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}
.pkbh-stat-card {
	background: var(--pkbh-bg);
	border: 1px solid var(--pkbh-bd);
	border-radius: 14px;
	padding: 18px 20px;
	overflow: hidden;
	position: relative;
	transition: box-shadow .2s, border-color .2s;
}
.pkbh-stat-card:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,.07);
	border-color: transparent;
}
.pkbh-sc__ico-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.pkbh-sc__ico {
	width: 28px; height: 28px;
	border-radius: 7px;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px;
}
.pkbh-sc__ico--t { background: var(--pkbh-tb); }
.pkbh-sc__ico--y { background: var(--pkbh-yb); }
.pkbh-sc__ico--g { background: rgba(13,43,30,.07); }
.pkbh-sc__ico--o { background: var(--pkbh-ob); }
.pkbh-sc__ico--p { background: var(--pkbh-pb); }
.pkbh-sc__lbl { font-size: 11px; font-weight: 600; color: var(--pkbh-fa); }
.pkbh-sc__val {
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -.04em;
	color: var(--pkbh-tx);
	line-height: 1;
	margin-bottom: 5px;
}
.pkbh-sc__chg { font-size: 11px; font-weight: 600; }
.pkbh-sc__chg--up   { color: var(--pkbh-t); }
.pkbh-sc__chg--flat { color: var(--pkbh-fa); }
.pkbh-sc__chg--new  { color: var(--pkbh-o); }
.pkbh-sc__bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }
.pkbh-sc__bar--t { background: linear-gradient(90deg, var(--pkbh-t), rgba(0,168,132,.3)); }
.pkbh-sc__bar--y { background: linear-gradient(90deg, var(--pkbh-y), rgba(255,214,0,.3)); }
.pkbh-sc__bar--o { background: linear-gradient(90deg, var(--pkbh-o), rgba(255,107,43,.3)); }
.pkbh-sc__bar--p { background: linear-gradient(90deg, var(--pkbh-p), rgba(123,92,245,.3)); }

/* Pipeline funnel */
.pkbh-pipeline-wrap { margin-bottom: 6px; }
.pkbh-pipeline__lbl {
	font-size: 12px;
	font-weight: 700;
	color: var(--pkbh-mu);
	letter-spacing: .02em;
	margin-bottom: 8px;
}
.pkbh-pipeline {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: var(--pkbh-bd);
	border: 1px solid var(--pkbh-bd);
	border-radius: 12px;
	overflow: hidden;
}
.pkbh-pl__stage {
	background: var(--pkbh-bg);
	padding: 16px 14px;
	text-align: center;
	position: relative;
	transition: background .18s;
}
.pkbh-pl__stage:hover { background: var(--pkbh-bg2); }
.pkbh-pl__stage::after {
	content: "→";
	position: absolute;
	right: -8px; top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: var(--pkbh-bd2);
	z-index: 1;
}
.pkbh-pl__stage:last-child::after { display: none; }
.pkbh-pl__num {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -.04em;
	color: var(--pkbh-tx);
	line-height: 1;
	margin-bottom: 3px;
}
.pkbh-pl__num--t { color: var(--pkbh-t); }
.pkbh-pl__lbl { font-size: 11px; color: var(--pkbh-fa); font-weight: 500; }
.pkbh-pl__sub { font-size: 10px; color: var(--pkbh-bd2); margin-top: 2px; }
.pkbh-pl__bar { height: 3px; margin-top: 10px; }
.pkbh-pl__bar--bd  { background: var(--pkbh-bd); }
.pkbh-pl__bar--t30 { background: var(--pkbh-t); opacity: .3; }
.pkbh-pl__bar--t55 { background: var(--pkbh-t); opacity: .55; }
.pkbh-pl__bar--t75 { background: var(--pkbh-t); opacity: .75; }
.pkbh-pl__bar--t   { background: var(--pkbh-t); }

/* Activity */
.pkbh-activity {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 11px 0;
	border-bottom: 1px solid var(--pkbh-bd);
}
.pkbh-activity:last-child { border-bottom: 0; }
.pkbh-activity__ico {
	width: 34px; height: 34px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
	margin-top: 1px;
}
.pkbh-activity__ico--t { background: var(--pkbh-tb); }
.pkbh-activity__ico--y { background: var(--pkbh-yb); }
.pkbh-activity__ico--o { background: var(--pkbh-ob); }
.pkbh-activity__ico--p { background: var(--pkbh-pb); }
.pkbh-activity__ico--g { background: rgba(13,43,30,.07); }
.pkbh-activity__content { flex: 1; min-width: 0; }
.pkbh-activity__text {
	font-size: 13px;
	color: var(--pkbh-tx);
	line-height: 1.45;
}
.pkbh-activity__text strong { font-weight: 700; }
.pkbh-activity__time {
	font-size: 11px;
	color: var(--pkbh-fa);
	margin-top: 2px;
}

/* Suggested creators strip */
.pkbh-sug__hint {
	font-size: 12px;
	color: var(--pkbh-fa);
	margin-bottom: 12px;
}
.pkbh-sug-strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
}
.pkbh-sug-strip::-webkit-scrollbar { height: 0; }
.pkbh-sug {
	background: var(--pkbh-bg);
	border: 1px solid var(--pkbh-bd);
	border-radius: 12px;
	padding: 14px;
	flex-shrink: 0;
	width: 180px;
	transition: transform .2s, box-shadow .2s, border-color .2s;
	cursor: pointer;
}
.pkbh-sug:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	border-color: transparent;
}
.pkbh-sug__av {
	width: 40px; height: 40px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
	margin-bottom: 9px;
}
.pkbh-sug__nm {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkbh-tx);
	letter-spacing: -.01em;
	margin-bottom: 2px;
}
.pkbh-sug__meta {
	font-size: 11px;
	color: var(--pkbh-fa);
	margin-bottom: 7px;
}
.pkbh-sug__stats { display: flex; gap: 8px; }
.pkbh-sug__sv {
	font-size: 12px;
	font-weight: 800;
	color: var(--pkbh-tx);
}
.pkbh-sug__sl { font-size: 10px; color: var(--pkbh-fa); }
.pkbh-sug__pitch {
	width: 100%;
	padding: 6px;
	background: var(--pkbh-g);
	color: #FFFFFF;
	border: 0;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 9px;
	transition: background .18s;
}
.pkbh-sug__pitch:hover { background: var(--pkbh-g2); }

/* Inbound pitches sidebar card */
.pkbh-inbound__hint {
	font-size: 12px;
	color: var(--pkbh-fa);
	margin-bottom: 10px;
	line-height: 1.5;
}
.pkbh-inbound__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pkbh-inbound {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 10px;
	background: var(--pkbh-bg2);
	border-radius: 9px;
	cursor: pointer;
	transition: background .15s;
	border: 0;
	width: 100%;
	text-align: left;
}
.pkbh-inbound:hover { background: var(--pkbh-bg3); }
.pkbh-inbound__av {
	width: 30px; height: 30px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px;
	flex-shrink: 0;
}
.pkbh-inbound__info { flex: 1; min-width: 0; }
.pkbh-inbound__nm {
	font-size: 12px;
	font-weight: 700;
	color: var(--pkbh-tx);
}
.pkbh-inbound__meta {
	font-size: 10px;
	color: var(--pkbh-fa);
}
.pkbh-inbound__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--pkbh-t);
	flex-shrink: 0;
}

/* Budget tracker */
.pkbh-budget__amt {
	font-size: 30px;
	font-weight: 900;
	letter-spacing: -.04em;
	color: var(--pkbh-tx);
	line-height: 1;
	margin-bottom: 4px;
}
.pkbh-budget__sub {
	font-size: 12px;
	color: var(--pkbh-fa);
	margin-bottom: 12px;
}
.pkbh-budget__bar {
	height: 8px;
	background: var(--pkbh-bg2);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 10px;
}
.pkbh-budget__fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--pkbh-t), var(--pkbh-y));
	border-radius: 4px;
	transition: width 1s ease;
}
.pkbh-budget__rows {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.pkbh-budget__row {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
}
.pkbh-budget__row span { color: var(--pkbh-mu); }
.pkbh-budget__row strong { font-weight: 700; color: var(--pkbh-tx); }
.pkbh-budget__o { color: var(--pkbh-o); }
.pkbh-budget__t { color: var(--pkbh-t); }

/* =========================================================================
   FIND CREATORS — search + filters + creator cards
   ========================================================================= */
.pkbh-search-row {
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
	align-items: center;
	flex-wrap: wrap;
}
.pkbh-search-input-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--pkbh-bg);
	border: 1.5px solid var(--pkbh-bd2);
	border-radius: 11px;
	padding: 10px 16px;
	min-width: 260px;
	transition: border-color .18s, box-shadow .18s;
}
.pkbh-search-input-wrap:focus-within {
	border-color: var(--pkbh-t);
	box-shadow: 0 0 0 3px var(--pkbh-tb);
}
.pkbh-search__ico {
	font-size: 16px;
	color: var(--pkbh-fa);
	flex-shrink: 0;
}
.pkbh-search__input {
	flex: 1;
	border: 0;
	font-family: inherit;
	font-size: 14px;
	color: var(--pkbh-tx);
	outline: 0;
	background: transparent;
}
.pkbh-search__input::placeholder { color: var(--pkbh-fa); }

/* Filter panel */
.pkbh-filter-panel {
	background: var(--pkbh-bg);
	border: 1px solid var(--pkbh-bd);
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 16px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 14px;
}
.pkbh-filter-panel--hidden { display: none; }
.pkbh-fp__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pkbh-fa);
	margin-bottom: 7px;
}
.pkbh-fp__options {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.pkbh-fp__opt {
	padding: 4px 10px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid var(--pkbh-bd);
	background: var(--pkbh-bg);
	color: var(--pkbh-mu);
	cursor: pointer;
	transition: border-color .18s, color .18s, background .18s;
}
.pkbh-fp__opt:hover {
	border-color: var(--pkbh-bd2);
	color: var(--pkbh-tx);
}
.pkbh-fp__opt--active {
	background: var(--pkbh-g);
	border-color: var(--pkbh-g);
	color: #FFFFFF;
	font-weight: 600;
}
.pkbh-fp__opt--active.pkbh-fp__opt--t {
	background: var(--pkbh-t);
	border-color: var(--pkbh-t);
}

/* Creator cards */
.pkbh-creators-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.pkbh-cr {
	background: var(--pkbh-bg);
	border: 1px solid var(--pkbh-bd);
	border-radius: 14px;
	overflow: hidden;
	transition: transform .25s, box-shadow .25s, border-color .25s;
	cursor: pointer;
}
.pkbh-cr:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(0,0,0,.09);
	border-color: transparent;
}
.pkbh-cr__top {
	height: 64px;
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 0 14px;
}
.pkbh-cr__av {
	width: 48px; height: 48px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
	border: 2.5px solid #FFFFFF;
	position: relative;
	transform: translateY(24px);
	flex-shrink: 0;
}
.pkbh-cr__platform {
	position: absolute;
	bottom: -2px; right: -2px;
	width: 17px; height: 17px;
	border-radius: 50%;
	background: #E1306C;
	border: 1.5px solid #FFFFFF;
	display: flex; align-items: center; justify-content: center;
	font-size: 8px;
}
.pkbh-cr__body { padding: 28px 14px 14px; }
.pkbh-cr__name {
	font-size: 14px;
	font-weight: 800;
	color: var(--pkbh-tx);
	letter-spacing: -.025em;
	margin-bottom: 1px;
}
.pkbh-cr__handle {
	font-size: 11px;
	color: var(--pkbh-t);
	margin-bottom: 6px;
}
.pkbh-cr__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 10px;
}
.pkbh-cr__tag {
	padding: 2px 7px;
	background: var(--pkbh-tb);
	border: 1px solid rgba(0,168,132,.15);
	border-radius: 100px;
	font-size: 10px;
	font-weight: 600;
	color: var(--pkbh-t);
}
.pkbh-cr__tag--y {
	background: var(--pkbh-yb);
	border-color: rgba(255,214,0,.2);
	color: #8A6800;
}
.pkbh-cr__stats {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 6px;
	margin-bottom: 12px;
}
.pkbh-cr__st {
	background: var(--pkbh-bg2);
	border-radius: 7px;
	padding: 7px 8px;
	text-align: center;
}
.pkbh-cr__sv {
	font-size: 13px;
	font-weight: 900;
	color: var(--pkbh-tx);
	letter-spacing: -.025em;
	line-height: 1;
}
.pkbh-cr__sl {
	font-size: 9px;
	color: var(--pkbh-fa);
	margin-top: 2px;
}
.pkbh-cr__brands {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.pkbh-cr__b-lbl {
	font-size: 10px;
	color: var(--pkbh-fa);
}
.pkbh-cr__b-chip {
	padding: 2px 6px;
	background: var(--pkbh-bg2);
	border: 1px solid var(--pkbh-bd);
	border-radius: 100px;
	font-size: 9px;
	font-weight: 600;
	color: var(--pkbh-mu);
}
.pkbh-cr__footer { display: flex; gap: 7px; }
.pkbh-cr__pitch {
	flex: 1;
	padding: 8px;
	background: var(--pkbh-g);
	color: #FFFFFF;
	border: 0;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s;
	text-align: center;
}
.pkbh-cr__pitch:hover { background: var(--pkbh-g2); }
.pkbh-cr__save {
	width: 34px; height: 34px;
	border: 1px solid var(--pkbh-bd);
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px;
	transition: background .18s, border-color .18s;
}
.pkbh-cr__save:hover { background: var(--pkbh-bg2); border-color: var(--pkbh-bd2); }
.pkbh-cr__save--on { background: var(--pkbh-yb); border-color: rgba(255,214,0,.3); }

/* =========================================================================
   CAMPAIGNS
   ========================================================================= */
.pkbh-campaign-tabs {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var(--pkbh-bg2);
	border: 1px solid var(--pkbh-bd);
	border-radius: 9px;
	margin-bottom: 20px;
}
.pkbh-ct {
	padding: 6px 16px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: var(--pkbh-fa);
	transition: background .18s, color .18s, box-shadow .18s;
}
.pkbh-ct--active {
	background: var(--pkbh-bg);
	color: var(--pkbh-tx);
	box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

.pkbh-campaign {
	background: var(--pkbh-bg);
	border: 1px solid var(--pkbh-bd);
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 12px;
	transition: box-shadow .2s, border-color .2s;
}
.pkbh-campaign:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,.07);
	border-color: transparent;
}
.pkbh-campaign--draft {
	border-color: rgba(255,214,0,.3);
	background: rgba(255,214,0,.02);
}
.pkbh-campaign__header {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 14px;
}
.pkbh-campaign__ico {
	width: 44px; height: 44px;
	border-radius: 11px;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}
.pkbh-campaign__meta { flex: 1; min-width: 0; }
.pkbh-campaign__name {
	font-size: 15px;
	font-weight: 800;
	color: var(--pkbh-tx);
	letter-spacing: -.025em;
	margin-bottom: 3px;
}
.pkbh-campaign__sub {
	font-size: 12px;
	color: var(--pkbh-fa);
}
.pkbh-campaign__status {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.pkbh-campaign__body {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 10px;
	margin-bottom: 14px;
}
.pkbh-campaign__stat {
	background: var(--pkbh-bg2);
	border-radius: 9px;
	padding: 10px 12px;
}
.pkbh-campaign__stat-v {
	font-size: 17px;
	font-weight: 900;
	color: var(--pkbh-tx);
	letter-spacing: -.03em;
	line-height: 1;
}
.pkbh-campaign__stat-v--t  { color: var(--pkbh-t); }
.pkbh-campaign__stat-v--o  { color: var(--pkbh-o); }
.pkbh-campaign__stat-v--fa { color: var(--pkbh-fa); }
.pkbh-campaign__stat-l {
	font-size: 10px;
	color: var(--pkbh-fa);
	margin-top: 3px;
}
.pkbh-campaign__creators-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--pkbh-bd);
	flex-wrap: wrap;
}
.pkbh-campaign__avs { display: flex; }
.pkbh-campaign__av {
	width: 26px; height: 26px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px;
	border: 2px solid var(--pkbh-bg);
	margin-left: -7px;
}
.pkbh-campaign__av:first-child { margin-left: 0; }
.pkbh-campaign__creators-lbl {
	font-size: 12px;
	color: var(--pkbh-mu);
	font-weight: 500;
	margin-left: 6px;
}
.pkbh-campaign__creators-lbl--mu { color: var(--pkbh-fa); margin-left: 0; }
.pkbh-campaign__progress { flex: 1; margin: 0 16px; min-width: 160px; }
.pkbh-campaign__prog-lbl {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--pkbh-fa);
	margin-bottom: 4px;
}
.pkbh-campaign__prog-bar {
	height: 5px;
	background: var(--pkbh-bg2);
	border-radius: 3px;
	overflow: hidden;
}
.pkbh-campaign__prog-fill { height: 100%; border-radius: 3px; }
.pkbh-campaign__prog-fill--t  { background: var(--pkbh-t); }
.pkbh-campaign__prog-fill--o  { background: var(--pkbh-o); }
.pkbh-campaign__prog-fill--bd { background: var(--pkbh-bd); }
.pkbh-campaign__actions {
	display: flex;
	gap: 7px;
	margin-left: auto;
	flex-wrap: wrap;
}

/* =========================================================================
   INBOX (brand side)
   ========================================================================= */
.pkbh-inbox {
	display: grid;
	grid-template-columns: 290px 1fr;
	height: calc(100vh - 56px - 56px - 80px);
	min-height: 480px;
	background: var(--pkbh-bg);
	border: 1px solid var(--pkbh-bd);
	border-radius: 14px;
	overflow: hidden;
}
.pkbh-inbox__list {
	border-right: 1px solid var(--pkbh-bd);
	overflow-y: auto;
	flex-shrink: 0;
}
.pkbh-inbox__list::-webkit-scrollbar { width: 3px; }
.pkbh-inbox__list::-webkit-scrollbar-thumb { background: var(--pkbh-bd); }
.pkbh-inbox__head {
	padding: 14px 16px;
	border-bottom: 1px solid var(--pkbh-bd);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	background: var(--pkbh-bg);
	z-index: 1;
}
.pkbh-il__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--pkbh-tx);
}
.pkbh-il__new {
	padding: 5px 12px;
	background: var(--pkbh-g);
	color: #FFFFFF;
	border: 0;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s;
}
.pkbh-il__new:hover { background: var(--pkbh-g2); }
.pkbh-thread {
	display: flex;
	gap: 10px;
	padding: 12px 14px;
	cursor: pointer;
	transition: background .15s;
	border-bottom: 1px solid var(--pkbh-bd);
	border-top: 0;
	border-left: 0;
	border-right: 0;
	background: transparent;
	width: 100%;
	text-align: left;
}
.pkbh-thread:hover { background: var(--pkbh-bg2); }
.pkbh-thread.active {
	background: rgba(0,168,132,.06);
	border-left: 2px solid var(--pkbh-t);
	padding-left: 12px;
}
.pkbh-thread__av {
	width: 36px; height: 36px;
	border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.pkbh-thread__info { flex: 1; min-width: 0; }
.pkbh-thread__name {
	font-size: 13px;
	font-weight: 600;
	color: var(--pkbh-tx);
	letter-spacing: -.01em;
}
.pkbh-thread__preview {
	font-size: 12px;
	color: var(--pkbh-fa);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 2px;
}
.pkbh-thread__meta { text-align: right; flex-shrink: 0; }
.pkbh-thread__time { font-size: 11px; color: var(--pkbh-fa); }
.pkbh-thread__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--pkbh-t);
	margin: 4px 0 0 auto;
}

.pkbh-thread-view {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
}
.pkbh-tv__head {
	padding: 14px 20px;
	border-bottom: 1px solid var(--pkbh-bd);
	flex-shrink: 0;
}
.pkbh-tv__cr-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.pkbh-tv__cr-av {
	width: 40px; height: 40px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}
.pkbh-tv__cr-name {
	font-size: 15px;
	font-weight: 800;
	color: var(--pkbh-tx);
	letter-spacing: -.025em;
}
.pkbh-tv__cr-meta {
	font-size: 12px;
	color: var(--pkbh-fa);
}
.pkbh-tv__actions {
	margin-left: auto;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.pkbh-tv__messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.pkbh-tv__messages::-webkit-scrollbar { width: 3px; }
.pkbh-tv__messages::-webkit-scrollbar-thumb { background: var(--pkbh-bd); }

.pkbh-msg {
	display: flex;
	gap: 10px;
	align-items: flex-end;
}
.pkbh-msg--mine { flex-direction: row-reverse; }
.pkbh-msg__av {
	width: 28px; height: 28px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
}
.pkbh-msg__av--mine { background: var(--pkbh-t); color: #FFFFFF; }
.pkbh-msg__bubble {
	max-width: 420px;
	padding: 10px 14px;
	border-radius: 13px;
	font-size: 13px;
	line-height: 1.6;
	background: var(--pkbh-bg2);
	border: 1px solid var(--pkbh-bd);
	border-radius: 13px 13px 13px 4px;
	color: var(--pkbh-tx);
}
.pkbh-msg--mine .pkbh-msg__bubble {
	background: var(--pkbh-g);
	color: #FFFFFF;
	border: 0;
	border-radius: 13px 13px 4px 13px;
}
.pkbh-msg__time {
	font-size: 10px;
	color: var(--pkbh-fa);
	margin-top: 4px;
}
.pkbh-msg__time--right { text-align: right; }
.pkbh-tv__compose {
	padding: 14px 20px;
	border-top: 1px solid var(--pkbh-bd);
	flex-shrink: 0;
}
.pkbh-tv__compose-box {
	display: flex;
	align-items: center;
	gap: 9px;
}
.pkbh-tv__input {
	flex: 1;
	padding: 10px 14px;
	border: 1.5px solid var(--pkbh-bd2);
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	color: var(--pkbh-tx);
	outline: 0;
	transition: border-color .18s, box-shadow .18s;
}
.pkbh-tv__input:focus {
	border-color: var(--pkbh-t);
	box-shadow: 0 0 0 3px var(--pkbh-tb);
}
.pkbh-tv__input::placeholder { color: var(--pkbh-fa); }
.pkbh-tv__send {
	width: 36px; height: 36px;
	border-radius: 9px;
	background: var(--pkbh-g);
	color: #FFFFFF;
	border: 0;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	font-size: 14px;
	flex-shrink: 0;
	transition: background .18s;
}
.pkbh-tv__send:hover { background: var(--pkbh-g2); }

/* =========================================================================
   BRAND PAGE EDITOR
   ========================================================================= */
.pkbh-bp {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 20px;
	align-items: start;
}
.pkbh-bp__editor {}
.pkbh-bp__section {
	background: var(--pkbh-bg);
	border: 1px solid var(--pkbh-bd);
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 14px;
}
.pkbh-bp__sec-head {
	padding: 14px 20px;
	border-bottom: 1px solid var(--pkbh-bd);
}
.pkbh-bp__sec-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pkbh-t);
}
.pkbh-bp__row {
	padding: 14px 20px;
	border-bottom: 1px solid var(--pkbh-bd);
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.pkbh-bp__row--last,
.pkbh-bp__row:last-child { border-bottom: 0; }
.pkbh-bp__lbl-col {
	width: 150px;
	flex-shrink: 0;
}
.pkbh-bp__lbl {
	font-size: 13px;
	font-weight: 600;
	color: var(--pkbh-tx);
	margin-bottom: 2px;
}
.pkbh-bp__hint {
	font-size: 11px;
	color: var(--pkbh-fa);
	line-height: 1.45;
}
.pkbh-bp__ctrl { flex: 1; min-width: 0; }
.pkbh-bp__input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--pkbh-bd);
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	color: var(--pkbh-tx);
	background: var(--pkbh-bg);
	outline: 0;
	transition: border-color .18s, box-shadow .18s;
}
.pkbh-bp__input:hover { border-color: var(--pkbh-bd2); }
.pkbh-bp__input:focus {
	border-color: var(--pkbh-t);
	box-shadow: 0 0 0 3px var(--pkbh-tb);
}
.pkbh-bp__input::placeholder { color: var(--pkbh-fa); }
.pkbh-bp__textarea {
	resize: vertical;
	min-height: 80px;
	line-height: 1.6;
}
.pkbh-bp__prefix-wrap {
	display: flex;
	border: 1px solid var(--pkbh-bd);
	border-radius: 8px;
	overflow: hidden;
	background: var(--pkbh-bg);
	transition: border-color .18s, box-shadow .18s;
}
.pkbh-bp__prefix-wrap:focus-within {
	border-color: var(--pkbh-t);
	box-shadow: 0 0 0 3px var(--pkbh-tb);
}
.pkbh-bp__prefix {
	padding: 8px 10px;
	background: var(--pkbh-bg2);
	border-right: 1px solid var(--pkbh-bd);
	font-size: 12px;
	color: var(--pkbh-fa);
	white-space: nowrap;
}
.pkbh-bp__prefix-inp {
	flex: 1;
	padding: 8px 10px;
	border: 0;
	font-family: inherit;
	font-size: 13px;
	color: var(--pkbh-tx);
	background: transparent;
	outline: 0;
}
.pkbh-bp__tag-sel {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.pkbh-bp__ts-tag {
	padding: 5px 12px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid var(--pkbh-bd);
	cursor: pointer;
	transition: background .18s, border-color .18s, color .18s;
	background: var(--pkbh-bg);
	color: var(--pkbh-mu);
}
.pkbh-bp__ts-tag:hover { border-color: var(--pkbh-bd2); }
.pkbh-bp__ts-tag--sel {
	background: var(--pkbh-g);
	border-color: var(--pkbh-g);
	color: #FFFFFF;
}
.pkbh-bp__toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 0;
	gap: 12px;
}
.pkbh-bp__tr-lbl {
	font-size: 13px;
	font-weight: 600;
	color: var(--pkbh-tx);
}
.pkbh-bp__tr-sub {
	font-size: 11px;
	color: var(--pkbh-fa);
}
.pkbh-bp__sw {
	width: 38px; height: 22px;
	background: var(--pkbh-bd);
	border-radius: 100px;
	position: relative;
	cursor: pointer;
	border: 0;
	transition: background .2s;
	flex-shrink: 0;
}
.pkbh-bp__sw--on { background: var(--pkbh-g); }
.pkbh-bp__sw::after {
	content: "";
	width: 16px; height: 16px;
	background: #FFFFFF;
	border-radius: 50%;
	position: absolute;
	top: 3px; left: 3px;
	transition: transform .2s cubic-bezier(.34,1.56,.64,1);
	box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.pkbh-bp__sw--on::after { transform: translateX(16px); }

/* Preview */
.pkbh-bp__preview-col {}
.pkbh-bp__preview-lbl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pkbh-fa);
	margin-bottom: 10px;
	text-align: center;
}
.pkbh-bpp {
	background: var(--pkbh-bg);
	border: 1.5px solid var(--pkbh-bd);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0,0,0,.08);
	position: sticky;
	top: 0;
}
.pkbh-bpp__chrome {
	background: var(--pkbh-bg2);
	border-bottom: 1px solid var(--pkbh-bd);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.pkbh-bpp__dots { display: flex; gap: 4px; }
.pkbh-bpp__dots span {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: rgba(0,0,0,.15);
}
.pkbh-bpp__dots span:first-child  { background: #FF5F57; }
.pkbh-bpp__dots span:nth-child(2) { background: #FEBC2E; }
.pkbh-bpp__dots span:nth-child(3) { background: #28C840; }
.pkbh-bpp__url {
	flex: 1;
	text-align: center;
	font-size: 11px;
	color: var(--pkbh-t);
	background: var(--pkbh-bg);
	border: 1px solid var(--pkbh-bd);
	border-radius: 5px;
	padding: 2px 10px;
}
.pkbh-bpp__cover {
	height: 70px;
	background: linear-gradient(135deg, var(--pkbh-g), var(--pkbh-g3));
}
.pkbh-bpp__logo-wrap {
	padding: 0 16px;
	margin-top: -18px;
	margin-bottom: 6px;
	position: relative;
	z-index: 1;
}
.pkbh-bpp__logo {
	width: 44px; height: 44px;
	border-radius: 11px;
	background: var(--pkbh-y);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
	border: 2.5px solid #FFFFFF;
}
.pkbh-bpp__info { padding: 0 16px 16px; }
.pkbh-bpp__name {
	font-size: 14px;
	font-weight: 800;
	color: var(--pkbh-tx);
	letter-spacing: -.025em;
}
.pkbh-bpp__verify {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 7px;
	background: var(--pkbh-tb);
	border-radius: 100px;
	font-size: 9px;
	font-weight: 700;
	color: var(--pkbh-t);
	margin-bottom: 4px;
}
.pkbh-bpp__cat {
	font-size: 11px;
	color: var(--pkbh-fa);
	margin-bottom: 7px;
}
.pkbh-bpp__desc {
	font-size: 12px;
	color: var(--pkbh-mu);
	line-height: 1.5;
	margin-bottom: 10px;
}
.pkbh-bpp__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 10px;
}
.pkbh-bpp__tag {
	padding: 2px 7px;
	background: var(--pkbh-bg2);
	border: 1px solid var(--pkbh-bd);
	border-radius: 100px;
	font-size: 9px;
	font-weight: 600;
	color: var(--pkbh-mu);
}
.pkbh-bpp__stats {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 6px;
	margin-bottom: 10px;
}
.pkbh-bpp__stat {
	background: var(--pkbh-bg2);
	border-radius: 7px;
	padding: 8px;
	text-align: center;
}
.pkbh-bpp__sv {
	font-size: 13px;
	font-weight: 900;
	color: var(--pkbh-tx);
	letter-spacing: -.03em;
	line-height: 1;
}
.pkbh-bpp__sl {
	font-size: 9px;
	color: var(--pkbh-fa);
	margin-top: 2px;
}
.pkbh-bpp__pitch {
	width: 100%;
	padding: 8px;
	background: var(--pkbh-t);
	color: #FFFFFF;
	border: 0;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}
.pkbh-bp__tip {
	margin-top: 12px;
	padding: 12px;
	background: var(--pkbh-tb);
	border-radius: 10px;
	font-size: 12px;
	color: var(--pkbh-t);
	font-weight: 600;
	text-align: center;
}

/* =========================================================================
   COMPETITOR INTEL
   ========================================================================= */
.pkbh-intel-banner {
	background: linear-gradient(135deg, var(--pkbh-g) 0%, #1E5038 100%);
	border-radius: 16px;
	padding: 24px 28px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	position: relative;
	overflow: hidden;
	flex-wrap: wrap;
}
.pkbh-intel-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(255,214,0,.06) 0%, transparent 70%);
	pointer-events: none;
}
.pkbh-intel-banner__left { position: relative; z-index: 1; flex: 1; min-width: 280px; }
.pkbh-intel-banner__right { position: relative; z-index: 1; flex-shrink: 0; }
.pkbh-intel-banner__tag {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pkbh-y);
	margin-bottom: 8px;
}
.pkbh-intel-banner__h {
	font-size: 18px;
	font-weight: 900;
	color: #FFFFFF;
	letter-spacing: -.03em;
	margin-bottom: 4px;
}
.pkbh-intel-banner__p {
	font-size: 13px;
	color: rgba(255,255,255,.5);
	line-height: 1.55;
}

.pkbh-intel-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.pkbh-intel-card {
	background: var(--pkbh-bg);
	border: 1px solid var(--pkbh-bd);
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow .25s, border-color .25s;
}
.pkbh-intel-card:hover {
	box-shadow: 0 8px 32px rgba(0,0,0,.09);
	border-color: transparent;
}
.pkbh-ic__head {
	padding: 16px 20px;
	border-bottom: 1px solid var(--pkbh-bd);
	display: flex;
	align-items: center;
	gap: 12px;
}
.pkbh-ic__logo {
	width: 38px; height: 38px;
	border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	font-size: 17px;
	flex-shrink: 0;
}
.pkbh-ic__name {
	font-size: 14px;
	font-weight: 800;
	color: var(--pkbh-tx);
	letter-spacing: -.02em;
}
.pkbh-ic__cat {
	font-size: 11px;
	color: var(--pkbh-fa);
}
.pkbh-ic__overlap {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 4px 10px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
}
.pkbh-ic__overlap--red    { background: var(--pkbh-rb); color: var(--pkbh-r); }
.pkbh-ic__overlap--orange { background: var(--pkbh-ob); color: var(--pkbh-o); }
.pkbh-ic__overlap--green  { background: var(--pkbh-tb); color: var(--pkbh-t); }
.pkbh-ic__body { padding: 16px 20px; }
.pkbh-ic__sec-lbl {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pkbh-fa);
	margin-bottom: 10px;
}
.pkbh-ic__creators {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 14px;
}
.pkbh-ic-cr {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 9px;
	background: var(--pkbh-bg2);
	transition: background .15s;
}
.pkbh-ic-cr:hover { background: var(--pkbh-bg3); }
.pkbh-ic-cr__av {
	width: 30px; height: 30px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px;
	flex-shrink: 0;
}
.pkbh-ic-cr__info { flex: 1; min-width: 0; }
.pkbh-ic-cr__nm {
	font-size: 12px;
	font-weight: 700;
	color: var(--pkbh-tx);
}
.pkbh-ic-cr__meta {
	font-size: 10px;
	color: var(--pkbh-fa);
}
.pkbh-ic-cr__fol {
	font-size: 12px;
	font-weight: 800;
	color: var(--pkbh-t);
}
.pkbh-ic-cr__steal {
	padding: 4px 10px;
	background: var(--pkbh-g);
	color: #FFFFFF;
	border: 0;
	border-radius: 7px;
	font-size: 10px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background .18s;
}
.pkbh-ic-cr__steal:hover { background: var(--pkbh-g2); }
.pkbh-ic__insight {
	padding: 11px 14px;
	border-radius: 10px;
	font-size: 12px;
	line-height: 1.55;
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.pkbh-ic__insight--green  { background: rgba(0,168,132,.08);  border: 1px solid rgba(0,168,132,.18); }
.pkbh-ic__insight--orange { background: rgba(255,107,43,.08); border: 1px solid rgba(255,107,43,.15); }
.pkbh-ic__insight-ico { font-size: 16px; flex-shrink: 0; }
.pkbh-ic__insight-t {
	font-weight: 700;
	color: var(--pkbh-tx);
	margin-bottom: 2px;
	font-size: 12px;
}
.pkbh-ic__insight-d {
	color: var(--pkbh-mu);
	font-size: 12px;
}

/* Untapped section */
.pkbh-untapped {
	background: var(--pkbh-bg);
	border: 1px solid var(--pkbh-bd);
	border-radius: 16px;
	overflow: hidden;
	margin-top: 16px;
}
.pkbh-untapped__head {
	padding: 16px 20px;
	border-bottom: 1px solid var(--pkbh-bd);
	background: rgba(0,168,132,.04);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.pkbh-untapped__title {
	font-size: 14px;
	font-weight: 800;
	color: var(--pkbh-tx);
	letter-spacing: -.02em;
}
.pkbh-untapped__sub {
	font-size: 12px;
	color: var(--pkbh-mu);
}
.pkbh-untapped__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--pkbh-bd);
}
.pkbh-untapped__cr {
	background: var(--pkbh-bg);
	padding: 16px;
	text-align: center;
	transition: background .15s;
	cursor: pointer;
}
.pkbh-untapped__cr:hover { background: var(--pkbh-bg2); }
.pkbh-untapped__av {
	width: 44px; height: 44px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
	margin: 0 auto 8px;
	border: 2px solid var(--pkbh-bg2);
}
.pkbh-untapped__nm {
	font-size: 12px;
	font-weight: 700;
	color: var(--pkbh-tx);
	letter-spacing: -.01em;
	margin-bottom: 2px;
}
.pkbh-untapped__meta {
	font-size: 10px;
	color: var(--pkbh-fa);
	margin-bottom: 6px;
}
.pkbh-untapped__fol {
	font-size: 14px;
	font-weight: 900;
	color: var(--pkbh-tx);
	letter-spacing: -.03em;
}
.pkbh-untapped__eng {
	font-size: 10px;
	color: var(--pkbh-t);
	font-weight: 600;
	margin-bottom: 8px;
}
.pkbh-untapped__pitch {
	width: 100%;
	padding: 6px;
	background: var(--pkbh-g);
	color: #FFFFFF;
	border: 0;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s;
}
.pkbh-untapped__pitch:hover { background: var(--pkbh-g2); }

/* =========================================================================
   SAVE BAR + TOAST (shared with creator dashboard but scoped)
   ========================================================================= */
.pkbh-save-bar {
	position: fixed;
	bottom: 0;
	left: var(--pkbh-sb);
	right: 0;
	height: 52px;
	background: var(--pkbh-bg);
	border-top: 1px solid var(--pkbh-bd);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28px;
	z-index: 200;
	transform: translateY(100%);
	transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.pkbh-save-bar--show { transform: translateY(0); }
.pkbh-save-bar__msg {
	font-size: 13px;
	color: var(--pkbh-mu);
	display: flex;
	align-items: center;
	gap: 7px;
}
.pkbh-save-bar__pulse {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--pkbh-o);
	animation: pkbh-pulse 1.5s ease-in-out infinite;
}
@keyframes pkbh-pulse {
	0%,100% { opacity: 1; }
	50%     { opacity: .3; }
}
.pkbh-save-bar__actions { display: flex; gap: 8px; }

.pkbh-toast {
	position: fixed;
	bottom: 72px;
	left: 50%;
	transform: translateX(-50%) translateY(16px);
	background: var(--pkbh-g);
	color: #FFFFFF;
	padding: 10px 20px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	opacity: 0;
	transition: opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
	z-index: 300;
	pointer-events: none;
	white-space: nowrap;
	box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.pkbh-toast--show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
	.pkbh { --pkbh-sb: 64px; }
	.pkbh-sb__brand { padding: 12px 8px; }
	.pkbh-sb__logo-name,
	.pkbh-sb__logo-sub,
	.pkbh-sb__brand-info,
	.pkbh-sb__chev,
	.pkbh-sb__section-lbl,
	.pkbh-sb__item-txt,
	.pkbh-sb__badge,
	.pkbh-sb__spend,
	.pkbh-sb__bottom-item { display: none; }
	.pkbh-sb__brand-card {
		padding: 8px;
		justify-content: center;
	}
	.pkbh-sb__item {
		justify-content: center;
		padding: 8px;
	}
	.pkbh-sb__bottom {
		display: flex;
		gap: 4px;
		justify-content: center;
		padding: 12px 6px;
	}
	.pkbh-sb__bottom-item {
		width: auto;
		padding: 7px 8px;
	}
	.pkbh-sb__bottom-item svg { display: block; opacity: .75; }
	.pkbh-stat-row { grid-template-columns: 1fr 1fr; }
	.pkbh-pipeline {
		grid-template-columns: 1fr 1fr;
	}
	.pkbh-pl__stage::after { display: none; }
	.pkbh-grid-12-side { grid-template-columns: 1fr; }
	.pkbh-creators-grid { grid-template-columns: 1fr 1fr; }
	.pkbh-filter-panel { grid-template-columns: 1fr 1fr; }
	.pkbh-intel-grid { grid-template-columns: 1fr; }
	.pkbh-untapped__grid { grid-template-columns: 1fr 1fr; }
	.pkbh-bp { grid-template-columns: 1fr; }
	.pkbh-bpp { position: static; }
	.pkbh-inbox { grid-template-columns: 240px 1fr; }
	.pkbh-campaign__body { grid-template-columns: 1fr 1fr; }
	.pkbh-save-bar { left: var(--pkbh-sb); }
}
@media (max-width: 720px) {
	.pkbh-topbar { padding: 0 16px; }
	.pkbh-content { padding: 16px; }
	.pkbh-stat-row { grid-template-columns: 1fr 1fr; gap: 8px; }
	.pkbh-pipeline { grid-template-columns: 1fr; }
	.pkbh-creators-grid { grid-template-columns: 1fr; }
	.pkbh-filter-panel { grid-template-columns: 1fr; }
	.pkbh-untapped__grid { grid-template-columns: 1fr; }
	.pkbh-inbox {
		grid-template-columns: 1fr;
		height: auto;
		min-height: 0;
	}
	.pkbh-inbox__list {
		max-height: 220px;
		border-right: 0;
		border-bottom: 1px solid var(--pkbh-bd);
	}
	.pkbh-campaign__body { grid-template-columns: 1fr 1fr; }
	.pkbh-tb__pill { font-size: 12px; padding: 6px 10px; }
	.pkbh-tb__btn { font-size: 12px; padding: 7px 12px; }
	.pkbh-bp__row {
		flex-direction: column;
		gap: 12px;
	}
	.pkbh-bp__lbl-col { width: 100%; }
}