/*
 * Prices page (template/template-packages.php).
 *
 * Structure follows the approved pricing proposition layout: hero, plan cards
 * with the recommended plan lifted, a comparison table, an honesty statement,
 * questions and a closing call to action. Every value comes from the site
 * tokens (propeka-tokens.css): type, colour, radius, shadow and spacing match
 * the rest of propeka.com; nothing here introduces a new visual motif.
 * Loaded only on this page (inc/pricing.php).
 */

.pk-pricing {
	background: var(--pk-n25);
	color: var(--pk-text);
	font-family: var(--pk-font);
	padding-bottom: var(--pk-s16);
}

.pk-pricing .pk-container {
	max-width: calc(var(--pk-shell, 1200px) + 2 * var(--pk-gutter));
}

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

.pk-pricing__hero {
	padding: var(--pk-s16) 0 var(--pk-s10);
	text-align: center;
}

.pk-pricing__eyebrow {
	display: inline-block;
	margin: 0 0 var(--pk-s4);
	padding: 5px 12px;
	border-radius: var(--pk-radius-pill);
	background: var(--pk-red-soft);
	color: var(--pk-red-dark);
	font-size: var(--pk-fs-xs);
	font-weight: var(--pk-fw-bold);
	letter-spacing: 0.08em;
	line-height: var(--pk-lh-xs);
	text-transform: uppercase;
}

.pk-pricing__title {
	max-width: 760px;
	margin: 0 auto var(--pk-s4);
	color: var(--pk-ink);
	font-size: var(--pk-fs-hero);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: var(--pk-lh-hero);
	text-wrap: balance;
}

.pk-pricing__lead {
	max-width: 640px;
	margin: 0 auto var(--pk-s6);
	color: var(--pk-text-secondary);
	font-size: 1.0625rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.pk-pricing__terms {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pk-s2) var(--pk-s6);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--pk-n600);
	font-size: var(--pk-fs-sm);
	font-weight: var(--pk-fw-semi);
}

.pk-pricing__terms li {
	display: inline-flex;
	align-items: center;
	gap: var(--pk-s2);
}

.pk-pricing__terms li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pk-red);
}

/* ---- Signed-in plan panel -------------------------------------------- */

.pk-pricing__account {
	margin-bottom: var(--pk-s8);
}

.pk-pricing__account-card {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--pk-s6);
	border: 1px solid var(--pk-n100);
	border-radius: var(--pk-radius-lg);
	background: #fff;
	box-shadow: var(--pk-shadow-1);
}

.pk-pricing__account-title {
	margin: 0 0 var(--pk-s3);
	color: var(--pk-ink);
	font-size: var(--pk-fs-lg);
	font-weight: var(--pk-fw-bold);
}

.pk-pricing__account-card p {
	margin: 0 0 var(--pk-s2);
	color: var(--pk-text-secondary);
}

.pk-pricing__account-card .alert {
	margin-bottom: var(--pk-s4);
	border-radius: var(--pk-radius);
}

.pk-pricing__account-card .propeka-cancel-plan {
	margin-top: var(--pk-s4);
}

/* ---- Plan cards ------------------------------------------------------- */

.pk-pricing__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pk-s5);
	align-items: stretch;
}

.pk-pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--pk-s8) var(--pk-s6) var(--pk-s6);
	border: 1px solid var(--pk-n100);
	border-radius: var(--pk-radius-lg);
	background: #fff;
	box-shadow: var(--pk-shadow-1);
}

.pk-pricing-card--recommended {
	border-color: var(--pk-red);
	box-shadow: var(--pk-shadow-3);
}

.pk-pricing-card--current {
	border-color: var(--pk-ink);
}

.pk-pricing-card__flag {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	padding: 4px 12px;
	border-radius: var(--pk-radius-pill);
	background: var(--pk-red);
	color: #fff;
	font-size: var(--pk-fs-xs);
	font-weight: var(--pk-fw-bold);
	letter-spacing: 0.06em;
	line-height: var(--pk-lh-xs);
	text-transform: uppercase;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

.pk-pricing-card--current .pk-pricing-card__flag {
	background: var(--pk-ink);
}

.pk-pricing-card__name {
	margin: 0 0 var(--pk-s2);
	color: var(--pk-ink);
	font-size: var(--pk-fs-lg);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: var(--pk-lh-lg);
}

.pk-pricing-card__summary {
	margin: 0;
	color: var(--pk-text-secondary);
	font-size: var(--pk-fs-sm);
	line-height: var(--pk-lh-sm);
	text-wrap: pretty;
}

.pk-pricing-card__head {
	min-height: 7.5rem;
}

.pk-pricing-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	margin: var(--pk-s5) 0 var(--pk-s5);
	padding: var(--pk-s4);
	border-radius: var(--pk-radius);
	background: var(--pk-n50);
}

.pk-pricing-card--recommended .pk-pricing-card__price {
	background: var(--pk-red-soft);
}

.pk-pricing-card__amount {
	color: var(--pk-ink);
	font-size: 2.25rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.pk-pricing-card__period {
	color: var(--pk-text-secondary);
	font-size: var(--pk-fs-sm);
	font-weight: var(--pk-fw-semi);
}

.pk-pricing-card__features {
	flex: 1;
	margin: 0 0 var(--pk-s6);
	padding: 0;
	list-style: none;
}

.pk-pricing-card__features li {
	position: relative;
	padding: 7px 0 7px 26px;
	border-top: 1px solid var(--pk-n100);
	color: var(--pk-text);
	font-size: var(--pk-fs-sm);
	line-height: var(--pk-lh-sm);
}

.pk-pricing-card__features li:first-child {
	border-top: 0;
}

.pk-pricing-card__features li::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 2px;
	width: 12px;
	height: 7px;
	border-bottom: 2px solid var(--pk-red);
	border-left: 2px solid var(--pk-red);
	transform: rotate(-45deg);
}

/* A limitation, drawn as a dash so it never reads as something included. */
.pk-pricing-card__features li.is-excluded {
	color: var(--pk-text-tertiary);
}

.pk-pricing-card__features li.is-excluded::before {
	top: 17px;
	width: 10px;
	height: 0;
	border-bottom: 2px solid var(--pk-n400);
	border-left: 0;
	transform: none;
}

.pk-pricing-card__features strong {
	color: var(--pk-ink);
	font-weight: var(--pk-fw-bold);
}

.pk-pricing-card__action {
	display: flex;
	flex-direction: column;
	gap: var(--pk-s2);
}

.pk-pricing-card__button {
	width: 100%;
	text-align: center;
}

.pk-pricing-card__state {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 0 22px;
	border: 1px dashed var(--pk-n300);
	border-radius: 10px;
	background: var(--pk-n50);
	color: var(--pk-n600);
	font-size: 15px;
	font-weight: var(--pk-fw-bold);
	cursor: default;
}

.pk-pricing-card__state--current {
	border: 1px solid var(--pk-ink);
	background: #fff;
	color: var(--pk-ink);
}

.pk-pricing-card__note {
	margin: 0;
	color: var(--pk-text-tertiary);
	font-size: var(--pk-fs-xs);
	line-height: 1.45;
	text-align: center;
}

.pk-pricing-card__note a {
	color: var(--pk-red-dark);
	font-weight: var(--pk-fw-semi);
}

.pk-pricing-card__admin {
	margin: var(--pk-s2) 0 0;
	padding: var(--pk-s3);
	border-radius: var(--pk-radius-sm);
	background: var(--pk-warning-soft);
	color: var(--pk-warning);
	font-size: var(--pk-fs-xs);
	line-height: 1.45;
	text-align: center;
}

.pk-pricing-card__admin a {
	display: block;
	color: var(--pk-ink);
	font-weight: var(--pk-fw-bold);
}

/* ---- Section headings shared below the cards ------------------------- */

.pk-pricing__section-title {
	margin: 0 0 var(--pk-s6);
	color: var(--pk-ink);
	font-size: var(--pk-fs-xl);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: var(--pk-lh-xl);
}

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

.pk-pricing__compare {
	padding-top: var(--pk-s16);
}

.pk-pricing__scroll-hint {
	display: none;
}

.pk-pricing__table-wrap {
	overflow-x: auto;
	border: 1px solid var(--pk-n100);
	border-radius: var(--pk-radius-lg);
	background: #fff;
	box-shadow: var(--pk-shadow-1);
}

.pk-pricing__table-wrap:focus-visible {
	outline: none;
	box-shadow: var(--pk-focus-ring);
}

.pk-pricing__table {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--pk-fs-sm);
}

.pk-pricing__table th,
.pk-pricing__table td {
	padding: var(--pk-s4) var(--pk-s5);
	border-bottom: 1px solid var(--pk-n100);
	text-align: center;
	vertical-align: middle;
}

.pk-pricing__table tbody tr:last-child th,
.pk-pricing__table tbody tr:last-child td {
	border-bottom: 0;
}

.pk-pricing__table thead th {
	background: var(--pk-n50);
	color: var(--pk-ink);
	font-weight: var(--pk-fw-bold);
}

.pk-pricing__table tbody th {
	color: var(--pk-text);
	font-weight: var(--pk-fw-semi);
	text-align: left;
}

.pk-pricing__table td {
	color: var(--pk-text-secondary);
}

.pk-pricing__table .is-recommended {
	background: var(--pk-red-soft);
	color: var(--pk-ink);
	font-weight: var(--pk-fw-semi);
}

.pk-pricing__table thead .is-recommended {
	color: var(--pk-red-dark);
}

/* ---- Honesty ---------------------------------------------------------- */

.pk-pricing__honesty {
	padding-top: var(--pk-s16);
}

.pk-pricing__honesty-card {
	padding: var(--pk-s8);
	border-left: 4px solid var(--pk-ink);
	border-radius: var(--pk-radius-lg);
	background: #fff;
	box-shadow: var(--pk-shadow-1);
}

.pk-pricing__honesty-card .pk-pricing__section-title {
	margin-bottom: var(--pk-s4);
	font-size: var(--pk-fs-lg);
	line-height: var(--pk-lh-lg);
}

.pk-pricing__honesty-list {
	display: grid;
	gap: var(--pk-s3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pk-pricing__honesty-list li {
	position: relative;
	padding-left: var(--pk-s5);
	color: var(--pk-text-secondary);
	line-height: 1.6;
}

.pk-pricing__honesty-list li::before {
	content: "";
	position: absolute;
	top: 0.7em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pk-ink);
}

/* ---- Questions -------------------------------------------------------- */

.pk-pricing__faq {
	padding-top: var(--pk-s16);
}

.pk-pricing__faq-inner {
	max-width: calc(820px + 2 * var(--pk-gutter));
}

.pk-pricing__qa {
	border-bottom: 1px solid var(--pk-n200);
}

.pk-pricing__qa:first-of-type {
	border-top: 1px solid var(--pk-n200);
}

.pk-pricing__qa summary {
	position: relative;
	display: block;
	padding: var(--pk-s5) var(--pk-s10) var(--pk-s5) 0;
	color: var(--pk-ink);
	font-size: var(--pk-fs-base);
	font-weight: var(--pk-fw-bold);
	line-height: var(--pk-lh-base);
	list-style: none;
	cursor: pointer;
}

.pk-pricing__qa summary::-webkit-details-marker {
	display: none;
}

.pk-pricing__qa summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 6px;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--pk-n500);
	border-bottom: 2px solid var(--pk-n500);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--pk-transition);
}

.pk-pricing__qa[open] summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.pk-pricing__qa summary:focus-visible {
	outline: none;
	box-shadow: var(--pk-focus-ring);
	border-radius: var(--pk-radius-sm);
}

.pk-pricing__terms-link {
	margin: var(--pk-s6) 0 0;
	color: var(--pk-text-secondary);
	font-size: var(--pk-fs-sm);
}

.pk-pricing__terms-link a {
	color: var(--pk-red-dark);
	font-weight: var(--pk-fw-semi);
}

.pk-pricing__qa p {
	margin: 0 0 var(--pk-s5);
	color: var(--pk-text-secondary);
	line-height: 1.65;
}

/* ---- Closing call to action ------------------------------------------ */

.pk-pricing__close {
	padding-top: var(--pk-s16);
}

.pk-pricing__close-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pk-s8);
	padding: var(--pk-s10) var(--pk-s10);
	border-radius: var(--pk-radius-xl);
	background: var(--pk-ink);
	color: #fff;
}

.pk-pricing__close-title {
	margin: 0 0 var(--pk-s2);
	color: #fff;
	font-size: var(--pk-fs-xl);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: var(--pk-lh-xl);
}

.pk-pricing__close-lead {
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
}

.pk-pricing__close-card .pk-btn {
	flex: none;
}

/* ---- Keyboard focus --------------------------------------------------- */

.pk-pricing a:focus-visible,
.pk-pricing .pk-btn:focus-visible {
	outline: none;
	box-shadow: var(--pk-focus-ring);
	border-radius: var(--pk-radius-sm);
}

.pk-pricing .pk-btn:focus-visible {
	border-radius: 10px;
}

/* ---- Responsive -------------------------------------------------------- */

/* Two plans per row: four narrow cards stop being readable below ~1200. */
@media (max-width: 1199.98px) {
	.pk-pricing__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--pk-s8);
	}

	.pk-pricing-card__head {
		min-height: 0;
	}
}

@media (max-width: 767.98px) {
	.pk-pricing__hero {
		padding: var(--pk-s10) 0 var(--pk-s8);
	}

	.pk-pricing__lead {
		font-size: var(--pk-fs-base);
	}

	.pk-pricing__close-card {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--pk-s8) var(--pk-s6);
	}

	.pk-pricing__close-card .pk-btn {
		width: 100%;
	}

	.pk-pricing__honesty-card {
		padding: var(--pk-s6);
	}
}

/* One plan per row on phones; the recommended plan keeps its lift. */
@media (max-width: 639.98px) {
	.pk-pricing__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.pk-pricing__compare,
	.pk-pricing__honesty,
	.pk-pricing__faq,
	.pk-pricing__close {
		padding-top: var(--pk-s12);
	}

	.pk-pricing__section-title {
		font-size: var(--pk-fs-lg);
		line-height: var(--pk-lh-lg);
	}

	/* The table scrolls sideways on phones; its row labels stay in view, and a
	   line under the title says the other plans are to the side. */
	.pk-pricing__scroll-hint {
		display: block;
		margin: 0 0 var(--pk-s3);
		text-align: left; /* follows the heading and the table, not the centred card note */
	}

	.pk-pricing__table {
		min-width: 560px;
		font-size: var(--pk-fs-xs);
	}

	.pk-pricing__table th,
	.pk-pricing__table td {
		padding: var(--pk-s3);
	}

	.pk-pricing__table th:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		width: 128px;
		min-width: 128px;
		background: #fff;
		box-shadow: 1px 0 0 var(--pk-n100);
	}

	.pk-pricing__table thead th:first-child {
		background: var(--pk-n50);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pk-pricing__qa summary::after {
		transition: none;
	}
}

/* ---- The frame follows the plan being considered (owner, 2026-09-30) ----
 * The red frame, lift and tinted price start on the recommended plan. Hover or
 * keyboard focus moves them to that plan; a click or tap selects a plan and
 * keeps them there; with nothing hovered or selected they return to the
 * recommended plan. The "Recommended" and "Your plan" flags stay on their cards. */
.pk-pricing-card {
	transition: border-color var(--pk-transition), box-shadow var(--pk-transition);
}

.pk-pricing-card .pk-pricing-card__price {
	transition: background-color var(--pk-transition);
}

.pk-pricing__grid:has(.pk-pricing-card:focus-within, .pk-pricing-card.is-selected) .pk-pricing-card--recommended:not(:focus-within):not(.is-selected) {
	border-color: var(--pk-n100);
	box-shadow: var(--pk-shadow-1);
}

.pk-pricing__grid:has(.pk-pricing-card:focus-within, .pk-pricing-card.is-selected) .pk-pricing-card--recommended:not(:focus-within):not(.is-selected) .pk-pricing-card__price {
	background: var(--pk-n50);
}

.pk-pricing__grid:has(.pk-pricing-card:focus-within) .pk-pricing-card.is-selected:not(:focus-within) {
	border-color: var(--pk-n100);
	box-shadow: var(--pk-shadow-1);
}

.pk-pricing__grid:has(.pk-pricing-card:focus-within) .pk-pricing-card.is-selected:not(:focus-within) .pk-pricing-card__price {
	background: var(--pk-n50);
}

.pk-pricing-card:focus-within,
.pk-pricing__grid:not(:has(.pk-pricing-card:focus-within)) .pk-pricing-card.is-selected {
	border-color: var(--pk-red);
	box-shadow: var(--pk-shadow-3);
}

.pk-pricing-card:focus-within .pk-pricing-card__price,
.pk-pricing__grid:not(:has(.pk-pricing-card:focus-within)) .pk-pricing-card.is-selected .pk-pricing-card__price {
	background: var(--pk-red-soft);
}

.pk-pricing-card.is-selectable {
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.pk-pricing-card,
	.pk-pricing-card .pk-pricing-card__price {
		transition: none;
	}
}

/* The framed plan's button is the red primary action, and the other plans'
 * buttons are outlined, so the button follows the frame (owner, 2026-09-30). */
.pk-pricing-card:focus-within .pk-pricing-card__button.pk-btn--secondary,
.pk-pricing__grid:not(:has(.pk-pricing-card:focus-within)) .pk-pricing-card.is-selected .pk-pricing-card__button.pk-btn--secondary {
	background: var(--pk-action);
	border-color: var(--pk-action);
	color: #fff;
}

.pk-pricing-card .pk-pricing-card__button.pk-btn--secondary:focus-visible {
	background: var(--pk-action-hover);
	border-color: var(--pk-action-hover);
	color: #fff;
}

.pk-pricing__grid:has(.pk-pricing-card:focus-within, .pk-pricing-card.is-selected) .pk-pricing-card--recommended:not(:focus-within):not(.is-selected) .pk-pricing-card__button.pk-btn--primary,
.pk-pricing__grid:has(.pk-pricing-card:focus-within) .pk-pricing-card.is-selected:not(:focus-within) .pk-pricing-card__button.pk-btn--primary {
	background: #fff;
	border-color: var(--pk-n200);
	color: var(--pk-ink);
	box-shadow: none;
	transform: none;
}

/* Hover is a mouse affordance. Touch scrolling must not replace the clicked
 * selection with a sticky/emulated :hover on another card (PKUSW-27). */
@media (hover: hover) and (pointer: fine) {
	.pk-pricing__grid:has(.pk-pricing-card:hover) .pk-pricing-card--recommended:not(:hover):not(:focus-within):not(.is-selected),
	.pk-pricing__grid:has(.pk-pricing-card:hover) .pk-pricing-card.is-selected:not(:hover):not(:focus-within) {
		border-color: var(--pk-n100);
		box-shadow: var(--pk-shadow-1);
	}

	.pk-pricing__grid:has(.pk-pricing-card:hover) .pk-pricing-card--recommended:not(:hover):not(:focus-within):not(.is-selected) .pk-pricing-card__price,
	.pk-pricing__grid:has(.pk-pricing-card:hover) .pk-pricing-card.is-selected:not(:hover):not(:focus-within) .pk-pricing-card__price {
		background: var(--pk-n50);
	}

	.pk-pricing .pk-pricing__grid:has(.pk-pricing-card:hover) .pk-pricing-card:hover {
		border-color: var(--pk-red);
		box-shadow: var(--pk-shadow-3);
	}

	.pk-pricing .pk-pricing__grid:has(.pk-pricing-card:hover) .pk-pricing-card:hover .pk-pricing-card__price {
		background: var(--pk-red-soft);
	}

	.pk-pricing .pk-pricing__grid:has(.pk-pricing-card:hover) .pk-pricing-card:hover .pk-pricing-card__button:is(.pk-btn--primary, .pk-btn--secondary) {
		background: var(--pk-action);
		border-color: var(--pk-action);
		color: #fff;
	}

	.pk-pricing .pk-pricing__grid:has(.pk-pricing-card:hover) .pk-pricing-card:hover .pk-pricing-card__button:is(.pk-btn--primary, .pk-btn--secondary):hover {
		background: var(--pk-action-hover);
		border-color: var(--pk-action-hover);
		color: #fff;
	}

	.pk-pricing .pk-pricing__grid:has(.pk-pricing-card:hover) .pk-pricing-card:not(:hover):not(:focus-within) .pk-pricing-card__button:is(.pk-btn--primary, .pk-btn--secondary) {
		background: #fff;
		border-color: var(--pk-n200);
		color: var(--pk-ink);
		box-shadow: none;
		transform: none;
	}
}

/* Design pass (owner, 2026-10-29): About and Questions read in an 820 px column
   (the earlier max-width lost to .pk-pricing .pk-container), and a flat info card. */
.pk-pricing .pk-pricing__faq-inner,
.pk-pricing .pk-pricing__honesty .pk-container {
	max-width: calc(820px + 2 * var(--pk-gutter));
}

.pk-pricing .pk-pricing__honesty-card {
	padding: var(--pk-s8);
	border: 1px solid var(--pk-n100);
	border-radius: var(--pk-radius-lg);
	background: var(--pk-n50);
	box-shadow: none;
}