/*
 * proof/pricing. Figma "SEO Agency Page - V2" pricing 3275:1050, see
 * sites/proof/design/agency-spec.md §7 (and the second pixel pass): cards
 * 581.3 x 694, 32 apart, p 32, radius 8; white or blue (featured). The
 * Leistung file's pricing (leistung-spec.md §8) is the same block plus the
 * footnote.
 */

.pf-block.pf-pricing {
	padding-top: calc(230 * var(--pf-u));
}
/* Spacing "compact" (Leistung file 3174:2481): 92 below a section that
   ends with its own padding and rule (the scatter steps), the sub 64 below
   the H2's cap line (11 below its line box) and the cards 71 below it. */
.pf-block.pf-pricing--compact {
	padding-top: calc(92 * var(--pf-u));
}
.pf-block.pf-pricing--compact .pf-sub {
	margin-top: calc(11 * var(--pf-u));
	/* The file's section sub (-0.64); the shared .pf-sub is -0.03em. */
	letter-spacing: -0.04em;
}
.pf-block.pf-pricing--compact .pf-plans {
	margin-top: calc(71 * var(--pf-u));
}
/* Leistung file: H2 1032 and sub 655 wide (agency 909 / 583; its sub has
   manual line breaks, so the wider box changes nothing there). The H2
   keeps the agency head's -0.03em, which runs ~25 wider than Figma's. */
.pf-block.pf-pricing .pf-head {
	width: calc(1081 * var(--pf-u));
}
.pf-block.pf-pricing .pf-sub {
	width: min(100%, calc(655 * var(--pf-u)));
}
.pf-block.pf-pricing .pf-sub strong {
	font-weight: 700;
}
.pf-plans {
	display: flex;
	gap: calc(32 * var(--pf-u));
	margin-top: calc(89.5 * var(--pf-u));
}
.pf-block .pf-plan {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	min-height: calc(694 * var(--pf-u));
	padding: calc(32 * var(--pf-u));
	border-radius: calc(8 * var(--pf-u));
	background: #fff;
	color: #0e1410;
}

/* Name with icon, badge, key facts pill. */
.pf-plan-top {
	display: flex;
	align-items: center;
	gap: calc(12.32 * var(--pf-u));
	min-height: calc(51.76 * var(--pf-u));
}
.pf-block .pf-plan-name {
	display: flex;
	align-items: center;
	gap: calc(12.32 * var(--pf-u));
	/* Figma's chip: py 9.86, px 14.79. The icon sits 14.79 in from the
	   card's content edge (103 in card 1); the badge follows the name at
	   the row's 12.32, so no right padding. */
	padding: calc(9.86 * var(--pf-u)) 0 calc(9.86 * var(--pf-u)) calc(14.79 * var(--pf-u));
	font-family: var(--pf-sans);
	font-weight: 500;
	font-size: calc(20 * var(--pf-t));
	line-height: 1.1;
	color: #000;
}
.pf-block .pf-plan-name img {
	width: calc(24.65 * var(--pf-u));
	height: calc(24.65 * var(--pf-u));
}
/* 98 x 46 as in Figma. */
.pf-plan-badge {
	padding: calc(12 * var(--pf-u)) calc(10 * var(--pf-u));
	border: 2px solid var(--pf-lime);
	border-radius: 99px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), #fff), var(--pf-lime);
	filter: drop-shadow(3px -3px 4.7px rgba(0, 0, 0, 0.2));
	font-weight: 600;
	font-size: calc(12 * var(--pf-t));
	line-height: 1.5;
	text-transform: uppercase;
	color: #000;
}
/* Figma: item, 19.72, divider, 19.72, item. */
.pf-block .pf-plan-pill {
	display: flex;
	column-gap: calc(39.44 * var(--pf-u));
	margin-left: auto;
	padding: calc(8 * var(--pf-u));
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.05);
	font-size: calc(18 * var(--pf-t));
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--pf-blue);
}
.pf-plan-pill li {
	position: relative;
	white-space: nowrap;
}
.pf-plan-pill li + li::before {
	content: "";
	position: absolute;
	left: calc(-19.72 * var(--pf-u));
	top: 50%;
	width: 1px;
	height: calc(8 * var(--pf-u));
	margin-top: calc(-4 * var(--pf-u));
	background: currentColor;
}
.pf-plan-pill strong {
	font-weight: 600;
	text-transform: none;
}

/* Figma: the description frame is 3 lines tall in every card (so the price
   boxes line up) and its text is cap-trimmed; the rule sits at 189. */
.pf-plan-desc {
	box-sizing: border-box;
	min-height: calc(83.6 * var(--pf-u));
	margin-top: calc(23.1 * var(--pf-u));
	padding-bottom: calc(23.8 * var(--pf-u));
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.pf-block .pf-plan-desc p {
	/* 479 of text + the 2px rule and its 16px gap. */
	max-width: calc(497 * var(--pf-u));
	padding-left: calc(16 * var(--pf-u));
	border-left: 2px solid rgba(0, 0, 0, 0.6);
	font-size: calc(14 * var(--pf-t));
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.6);
}

/* Price box: lime tint with the brand shape, 24 inside (23 + the border). */
.pf-plan-price {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--pf-u));
	margin-top: calc(26.7 * var(--pf-u));
	padding: calc(23 * var(--pf-u)) calc(24 * var(--pf-u));
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: calc(8 * var(--pf-u));
	background: #eefdbf;
}
.pf-plan-price::after {
	content: "";
	position: absolute;
	right: calc(-324.67 * var(--pf-u));
	top: calc(-0.76 * var(--pf-u));
	width: calc(516 * var(--pf-u));
	height: calc(416 * var(--pf-u));
	background: url("../../assets/img/pricing-pricebox-shape-lime.svg") no-repeat center / 100% 100%;
	pointer-events: none;
}
.pf-plan-price > * {
	position: relative;
	z-index: 1;
}
/* The price is cap-trimmed in Figma: 34 tall instead of the 52.8 line box. */
.pf-block .pf-plan-amount {
	display: flex;
	align-items: baseline;
	gap: calc(16 * var(--pf-u));
	margin-top: calc(-9.4 * var(--pf-u));
	font-size: calc(18 * var(--pf-t));
	color: #2e4600;
}
.pf-block .pf-plan-amount + .pf-plan-units {
	margin-top: calc(-9.4 * var(--pf-u));
}
/* Figma bottom-aligns "/ Monat" with the cap-trimmed price, ~2px above the
   shared baseline. */
.pf-plan-amount span {
	position: relative;
	top: calc(-2 * var(--pf-u));
}
.pf-plan-amount strong {
	font-weight: 600;
	font-size: calc(48 * var(--pf-t));
	line-height: 1.1;
	background: linear-gradient(78.13deg, var(--pf-blue) 26.5%, #005dff 118.42%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* Figma: chip, 12.32, divider, 12.32, chip. */
.pf-plan-units {
	display: flex;
	flex-wrap: wrap;
	gap: calc(24.64 * var(--pf-u));
}
.pf-plan-units li {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: calc(8 * var(--pf-u));
	/* 29 tall like Figma's chips (8 + cap-trimmed 13 + 8). */
	padding: calc(1.4 * var(--pf-u)) calc(8 * var(--pf-u));
	font-family: var(--pf-mono);
	font-size: calc(16 * var(--pf-t));
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(11, 11, 11, 0.65);
}
/* The last chip has 16px side padding in Figma. */
.pf-plan-units li:last-child {
	padding-inline: calc(16 * var(--pf-u));
}
.pf-plan-units li + li::before {
	content: "";
	position: absolute;
	left: calc(-12.82 * var(--pf-u));
	top: 50%;
	width: 1px;
	height: calc(12 * var(--pf-u));
	margin-top: calc(-6 * var(--pf-u));
	background: #4d7500;
}
.pf-plan-units strong {
	font-family: var(--pf-sans);
	font-weight: 500;
	font-size: calc(18 * var(--pf-t));
	letter-spacing: -0.03em;
	color: var(--pf-blue);
}

.pf-block .pf-plan-features {
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--pf-u));
	margin-top: calc(28 * var(--pf-u));
}
.pf-plan-features li {
	display: flex;
	align-items: center;
	gap: calc(12.32 * var(--pf-u));
	font-size: calc(16 * var(--pf-t));
	line-height: 1.56;
	color: #0e1410;
}
.pf-plan-features li::before {
	content: "";
	flex: none;
	width: calc(25 * var(--pf-u));
	height: calc(25 * var(--pf-u));
	background: url("../../assets/img/pricing-check-blue.svg") no-repeat center / contain;
}

/* Yearly price pinned to the bottom, above the button. */
.pf-block .pf-plan-yearly {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: auto;
	padding-top: calc(27 * var(--pf-u));
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.pf-plan-yearly strong {
	font-weight: 600;
	font-size: calc(22 * var(--pf-t));
	line-height: 1.1;
}
.pf-plan-yearly span {
	font-size: calc(18 * var(--pf-t));
	line-height: 1.1;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.5);
}
.pf-block .pf-plan-btn {
	display: block;
	margin-top: calc(9.86 * var(--pf-u));
	padding: calc(18.9 * var(--pf-u));
	border: 1px solid var(--pf-blue);
	border-radius: calc(8 * var(--pf-u));
	background: #fff;
	font-family: var(--pf-sans);
	font-weight: 600;
	font-size: calc(20 * var(--pf-t));
	line-height: 1.48;
	text-align: center;
	text-decoration: none;
	color: var(--pf-blue);
	transition: background-color 0.2s, color 0.2s;
}
.pf-block .pf-plan-btn:hover,
.pf-block .pf-plan-btn:focus-visible {
	background: var(--pf-blue);
	color: #fff;
}

/* Featured (blue) card. */
.pf-block .pf-plan--featured {
	background: var(--pf-blue);
	color: #fff;
}
.pf-block .pf-plan--featured :is(.pf-plan-name, .pf-plan-pill, .pf-plan-features li) {
	color: #fff;
}
.pf-block .pf-plan--featured .pf-plan-pill {
	background: rgba(255, 255, 255, 0.15);
}
.pf-plan--featured .pf-plan-pill strong {
	font-weight: 500;
}
.pf-block .pf-plan--featured :is(.pf-plan-desc, .pf-plan-yearly) {
	border-color: rgba(239, 227, 227, 0.24);
}
.pf-block .pf-plan--featured .pf-plan-desc p {
	border-left-color: rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.6);
}
.pf-block .pf-plan--featured .pf-plan-price {
	padding-block: calc(22 * var(--pf-u));
	border: 2px solid #2b78ff;
	background: #0f5de4;
}
.pf-plan--featured .pf-plan-price::after {
	right: calc(-296.17 * var(--pf-u));
	top: calc(-21.76 * var(--pf-u));
	background-image: url("../../assets/img/pricing-pricebox-shape-blue.svg");
}
.pf-block .pf-plan--featured :is(.pf-plan-amount, .pf-plan-units li, .pf-plan-yearly span) {
	color: rgba(255, 255, 255, 0.6);
}
.pf-plan--featured .pf-plan-amount strong {
	background: none;
	color: #fff;
}
.pf-plan--featured :is(.pf-plan-units, .pf-plan-yearly) strong {
	color: #fff;
}
.pf-plan--featured .pf-plan-units li + li::before {
	background: #4287ff;
}
.pf-plan--featured .pf-plan-features li::before {
	background-image: url("../../assets/img/pricing-check-lime.svg");
}
/* Only the featured button has the inner glow. */
.pf-block .pf-plan--featured .pf-plan-btn {
	padding-block: calc(17.9 * var(--pf-u));
	border: 2px solid var(--pf-blue);
	box-shadow: inset 0 -1.23px 9.86px rgba(11, 85, 212, 0.35);
	background: var(--pf-lime);
}
.pf-block .pf-plan--featured .pf-plan-btn:hover,
.pf-block .pf-plan--featured .pf-plan-btn:focus-visible {
	background: #c4ff4a;
	color: var(--pf-blue);
}

/* Footnote (Leistung file 3174:2674: 1107 wide, 45 below the cards,
   cap-trimmed). */
.pf-block .pf-pricing-note {
	align-self: center;
	width: min(100%, calc(1107 * var(--pf-u)));
	margin-top: calc(40 * var(--pf-u));
	font-size: calc(14 * var(--pf-t));
	line-height: 1.4;
	text-align: center;
	color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 1024px) {
	.pf-block.pf-pricing {
		padding-top: 96px;
	}
	.pf-block.pf-pricing--compact {
		padding-top: 64px;
	}
	.pf-block.pf-pricing--compact .pf-sub {
		margin-top: 14px;
	}
	.pf-block.pf-pricing--compact .pf-plans {
		margin-top: 40px;
	}
	.pf-block.pf-pricing .pf-head {
		width: 100%;
	}
	.pf-block.pf-pricing .pf-sub {
		width: min(100%, 560px);
		text-wrap: pretty;
	}
	/* The intro's manual line breaks match the desktop lines only. */
	.pf-block.pf-pricing .pf-sub br {
		display: none;
	}
	.pf-plans {
		flex-direction: column;
		gap: 16px;
		margin-top: 40px;
	}
	.pf-block .pf-plan {
		min-height: 0;
		padding: 24px;
	}
	.pf-plan-top {
		flex-wrap: wrap;
		gap: 10px;
	}
	.pf-block .pf-plan-name {
		gap: 10px;
		font-size: 20px;
	}
	.pf-block .pf-plan-name img {
		width: 24px;
		height: 24px;
	}
	.pf-plan-badge {
		padding: 8px 12px;
		font-size: 11px;
	}
	.pf-block .pf-plan-pill {
		column-gap: 18px;
		padding: 7px 8px;
		font-size: 15px;
	}
	.pf-plan-desc {
		margin-top: 20px;
		padding-bottom: 20px;
	}
	.pf-block .pf-plan-desc p {
		max-width: none;
		padding-left: 12px;
		font-size: 14px;
	}
	/* The featured box keeps its 22 block padding, as before. */
	.pf-plan-price {
		gap: 16px;
		margin-top: 20px;
		padding: 20px;
	}
	.pf-block .pf-plan-amount,
	.pf-plan-yearly span {
		font-size: 16px;
	}
	.pf-plan-amount strong {
		font-size: 40px;
	}
	/* A wrapped chip starts its line without the divider: each chip carries
	   its 24.64 gap as a left margin and the list is shifted left by it,
	   with that strip (where a line's first divider sits) clipped. Lines
	   8 apart. */
	.pf-plan-units {
		gap: 8px 0;
		margin-left: -24.64px;
		clip-path: inset(-8px -8px -8px 24.64px);
	}
	.pf-plan-units li {
		margin-left: 24.64px;
		font-size: 13px;
	}
	.pf-plan-units strong {
		font-size: 16px;
	}
	.pf-block .pf-plan-features {
		margin-top: 20px;
	}
	.pf-plan-features li {
		font-size: 16px;
	}
	.pf-plan-features li::before {
		width: 22px;
		height: 22px;
	}
	.pf-block .pf-plan-yearly {
		margin-top: 24px;
		padding-top: 20px;
	}
	.pf-plan-yearly strong {
		font-size: 20px;
	}
	.pf-block .pf-plan-btn {
		padding: 16px;
		font-size: 18px;
	}
	.pf-block .pf-pricing-note {
		margin-top: 32px;
	}
}

/* ------------------------------------------------------------------ *
 * Calm cards (2026-10-13). The Figma look above (lime price box with
 * the brand shape, gradient price, uppercase mono chips, the solid blue
 * featured card, icons and drop shadows) competed with the content.
 * Here everything is reduced to one hierarchy: name, one line who it is
 * for, the price, the plain list, the button. The recommended plan is
 * marked by a blue border, a small badge and the one filled button.
 * ------------------------------------------------------------------ */

.pf-block.pf-pricing .pf-plan {
	padding: calc(32 * var(--pf-u));
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	background: #fff;
	color: var(--pf-ink);
}
.pf-block.pf-pricing .pf-plan-top {
	flex-wrap: wrap;
	gap: 10px 12px;
	min-height: 0;
}
.pf-block.pf-pricing .pf-plan-name {
	padding: 0;
	font-size: calc(22 * var(--pf-t));
	letter-spacing: -0.02em;
	color: var(--pf-ink);
}
.pf-block.pf-pricing .pf-plan-name img {
	display: none;
}
.pf-block.pf-pricing .pf-plan-badge {
	padding: 5px 10px;
	border: 0;
	border-radius: 999px;
	background: var(--pf-lime);
	filter: none;
	font-family: var(--pf-mono);
	font-weight: 400;
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.06em;
	color: var(--pf-ink);
}
.pf-block.pf-pricing .pf-plan-pill {
	margin-left: auto;
	padding: 0;
	background: transparent;
	font-family: var(--pf-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(16, 17, 20, 0.55);
}
.pf-block.pf-pricing .pf-plan-pill strong {
	font-weight: 400;
	color: var(--pf-ink);
}
.pf-block.pf-pricing .pf-plan-desc {
	min-height: calc(72 * var(--pf-u));
	margin-top: 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.pf-block.pf-pricing .pf-plan-desc p {
	max-width: none;
	padding-left: 0;
	border-left: 0;
	font-size: calc(15 * var(--pf-t));
	line-height: 1.5;
	color: rgba(16, 17, 20, 0.6);
}
/* Price: plain, no tint, no shape. */
.pf-block.pf-pricing .pf-plan-price {
	gap: 12px;
	margin-top: 22px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}
.pf-block.pf-pricing .pf-plan-price::after {
	display: none;
}
.pf-block.pf-pricing .pf-plan-amount {
	gap: 10px;
	margin-top: 0;
	font-size: calc(15 * var(--pf-t));
	color: rgba(16, 17, 20, 0.6);
}
.pf-block.pf-pricing .pf-plan-amount strong {
	font-weight: 500;
	font-size: calc(44 * var(--pf-t));
	letter-spacing: -0.03em;
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	color: var(--pf-ink);
}
.pf-block.pf-pricing .pf-plan-amount + .pf-plan-units {
	margin-top: 0;
}
.pf-block.pf-pricing .pf-plan-units {
	flex-direction: column;
	gap: 4px;
}
.pf-block.pf-pricing .pf-plan-units li,
.pf-block.pf-pricing .pf-plan-units li:last-child {
	padding: 0;
	font-family: var(--pf-sans);
	font-size: calc(15 * var(--pf-t));
	line-height: 1.5;
	letter-spacing: -0.01em;
	text-transform: none;
	color: rgba(16, 17, 20, 0.7);
}
.pf-block.pf-pricing .pf-plan-units li + li::before {
	display: none;
}
.pf-block.pf-pricing .pf-plan-units strong {
	font-size: calc(15 * var(--pf-t));
	font-weight: 500;
	letter-spacing: 0;
	color: var(--pf-ink);
}
.pf-block.pf-pricing .pf-plan-features {
	gap: 10px;
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.pf-block.pf-pricing .pf-plan-features li {
	align-items: flex-start;
	gap: 10px;
	font-size: calc(15 * var(--pf-t));
	line-height: 1.5;
	color: var(--pf-ink);
}
.pf-block.pf-pricing .pf-plan-features li::before {
	width: 20px;
	height: 20px;
	margin-top: 1px;
}
.pf-block.pf-pricing .pf-plan-yearly {
	padding-top: 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.pf-block.pf-pricing .pf-plan-yearly strong {
	font-weight: 500;
	font-size: calc(16 * var(--pf-t));
	color: rgba(16, 17, 20, 0.7);
}
.pf-block.pf-pricing .pf-plan-yearly span {
	font-family: var(--pf-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: rgba(16, 17, 20, 0.5);
}
.pf-block.pf-pricing .pf-plan-btn,
.pf-block.pf-pricing .pf-plan-btn:hover,
.pf-block.pf-pricing .pf-plan-btn:focus-visible {
	margin-top: 14px;
	padding: 16px;
	border: 1px solid var(--pf-blue);
	border-radius: 8px;
	background: #fff;
	font-weight: 500;
	font-size: calc(17 * var(--pf-t));
	color: var(--pf-blue);
}
.pf-block.pf-pricing .pf-plan-btn:hover,
.pf-block.pf-pricing .pf-plan-btn:focus-visible {
	background: rgba(11, 80, 200, 0.06);
}
/* Recommended: white card, blue frame, the one filled button. */
.pf-block.pf-pricing .pf-plan--featured {
	border: 1px solid var(--pf-blue);
	box-shadow: inset 0 0 0 1px var(--pf-blue), 0 24px 48px -32px rgba(11, 80, 200, 0.35);
	background: #fff;
	color: var(--pf-ink);
}
.pf-block.pf-pricing .pf-plan--featured :is(.pf-plan-name, .pf-plan-features li) {
	color: var(--pf-ink);
}
.pf-block.pf-pricing .pf-plan--featured .pf-plan-pill {
	background: transparent;
	color: rgba(16, 17, 20, 0.55);
}
.pf-block.pf-pricing .pf-plan--featured :is(.pf-plan-desc, .pf-plan-yearly, .pf-plan-features) {
	border-color: rgba(0, 0, 0, 0.08);
}
.pf-block.pf-pricing .pf-plan--featured .pf-plan-desc p {
	color: rgba(16, 17, 20, 0.6);
}
.pf-block.pf-pricing .pf-plan--featured .pf-plan-price {
	padding: 0;
	border: 0;
	background: transparent;
}
.pf-block.pf-pricing .pf-plan--featured :is(.pf-plan-amount, .pf-plan-amount strong, .pf-plan-units li, .pf-plan-units strong, .pf-plan-yearly strong, .pf-plan-yearly span) {
	color: var(--pf-ink);
}
.pf-block.pf-pricing .pf-plan--featured .pf-plan-amount,
.pf-block.pf-pricing .pf-plan--featured .pf-plan-units li {
	color: rgba(16, 17, 20, 0.65);
}
.pf-block.pf-pricing .pf-plan--featured .pf-plan-features li::before {
	background-image: url("../../assets/img/pricing-check-blue.svg");
}
.pf-block.pf-pricing .pf-plan--featured .pf-plan-btn,
.pf-block.pf-pricing .pf-plan--featured .pf-plan-btn:hover,
.pf-block.pf-pricing .pf-plan--featured .pf-plan-btn:focus-visible {
	background: var(--pf-blue);
	color: #fff;
}
.pf-block.pf-pricing .pf-plan--featured .pf-plan-btn:hover,
.pf-block.pf-pricing .pf-plan--featured .pf-plan-btn:focus-visible {
	background: #0945ad;
}
@media (max-width: 1024px) {
	.pf-block.pf-pricing .pf-plan {
		padding: 24px;
	}
}

/* Decision line, yearly as a saving, assurance under the button (2026-10-13). */
.pf-block.pf-pricing .pf-plan-fit {
	margin-top: 22px;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--pf-bg);
	font-size: calc(14 * var(--pf-t));
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--pf-ink);
}
.pf-block.pf-pricing .pf-plan-fit span {
	font-family: var(--pf-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(16, 17, 20, 0.55);
	margin-right: 6px;
}
.pf-block.pf-pricing .pf-plan-fit + .pf-plan-features {
	margin-top: 18px;
	padding-top: 18px;
}
.pf-block.pf-pricing .pf-plan-yearly {
	flex-wrap: wrap;
	gap: 4px 12px;
}
.pf-block.pf-pricing .pf-plan-yearly strong small {
	font-size: 13px;
	font-weight: 400;
	color: rgba(16, 17, 20, 0.55);
}
.pf-block.pf-pricing .pf-plan-saving {
	font-family: var(--pf-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(173, 247, 30, 0.45);
	color: var(--pf-ink);
}
.pf-block.pf-pricing .pf-plan-assurance {
	margin-top: 10px;
	font-family: var(--pf-mono);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	color: rgba(16, 17, 20, 0.55);
}

/* ------------------------------------------------------------------ *
 * 2026-10-14: VAT line, "Ein typischer Monat" in the decision box, the
 * trust row under the cards (facts + one quote), the recommended plan
 * first on phones, anchor offset for the fixed header.
 * ------------------------------------------------------------------ */
.pf-block.pf-pricing {
	scroll-margin-top: calc(92 * var(--pf-u) + 2px);
}
.pf-block.pf-pricing .pf-plan-vat {
	margin-top: -6px;
	font-family: var(--pf-mono);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(16, 17, 20, 0.5);
}
.pf-block.pf-pricing .pf-plan-fit {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pf-block.pf-pricing .pf-plan-fit p {
	font-size: calc(14 * var(--pf-t));
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--pf-ink);
}
.pf-block.pf-pricing .pf-plan-fit p + p {
	padding-top: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.pf-block.pf-pricing .pf-plan-fit p span {
	display: block;
	margin: 0 0 2px;
}

/* Trust row: facts left, the quote right, one light card. */
.pf-block .pf-pricing-trust {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 32px;
	align-items: center;
	margin-top: calc(40 * var(--pf-u));
	padding: 24px 32px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	background: #fff;
}
.pf-block .pf-pricing-facts {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pf-block .pf-pricing-facts li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: calc(15 * var(--pf-t));
	line-height: 1.4;
	color: rgba(16, 17, 20, 0.65);
}
.pf-block .pf-pricing-facts strong {
	font-weight: 500;
	font-size: calc(26 * var(--pf-t));
	letter-spacing: -0.03em;
	color: var(--pf-ink);
	white-space: nowrap;
}
.pf-block .pf-pricing-quote {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 18px;
	row-gap: 4px;
	margin: 0;
	padding-left: 32px;
	border-left: 1px solid rgba(0, 0, 0, 0.08);
}
.pf-block .pf-pricing-quote-photo {
	grid-row: 1 / span 2;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}
.pf-block .pf-pricing-quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}
.pf-block .pf-pricing-quote blockquote p {
	font-weight: 500;
	font-size: calc(20 * var(--pf-t));
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--pf-ink);
}
.pf-block .pf-pricing-quote blockquote p::before {
	content: "„";
}
.pf-block .pf-pricing-quote blockquote p::after {
	content: "“";
}
.pf-block .pf-pricing-quote figcaption {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	font-size: calc(14 * var(--pf-t));
	line-height: 1.4;
	color: rgba(16, 17, 20, 0.6);
}
.pf-block .pf-pricing-quote figcaption strong {
	font-weight: 500;
	color: var(--pf-ink);
}
.pf-block .pf-pricing-trust + .pf-pricing-note {
	margin-top: 24px;
}

@media (max-width: 1024px) {
	.pf-block.pf-pricing {
		scroll-margin-top: 72px;
	}
	.pf-block .pf-pricing-trust {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		margin-top: 24px;
		padding: 20px;
	}
	.pf-block .pf-pricing-facts {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 24px;
	}
	.pf-block .pf-pricing-quote {
		padding-left: 0;
		padding-top: 20px;
		border-left: 0;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
	}
	.pf-block .pf-pricing-quote blockquote p {
		font-size: 18px;
	}
}
/* Phones: the recommended plan first. */
@media (max-width: 767px) {
	.pf-block.pf-pricing .pf-plan--featured {
		order: -1;
	}
}
/* Directly after the lime page head (Preise): the cards within the first
   scroll instead of 230 below. */
.pf-block.pf-hfeat + .pf-block.pf-pricing {
	padding-top: calc(96 * var(--pf-u));
}
.pf-block .pf-pricing-quote figcaption,
.pf-block .pf-pricing-quote figcaption * {
	font-style: normal;
}
@media (max-width: 1024px) {
	.pf-block.pf-hfeat + .pf-block.pf-pricing {
		padding-top: 56px;
	}
}

/* Room below the footnote before the next (white) section (2026-10-14). */
.pf-block.pf-pricing {
	padding-bottom: calc(120 * var(--pf-u));
}
@media (max-width: 1024px) {
	.pf-block.pf-pricing {
		padding-bottom: 80px;
	}
}