/*
 * Shared by the Proof ACF blocks. Tokens, .pf-label and .pf-h2 come from
 * assets/css/base.css. Everything is scoped under :is(.pf-block, .pf-chrome-cta): block styles
 * load on every page (classic theme, see functions.php).
 */

.pf-block {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-inline: var(--pf-gutter);
	overflow: hidden;
	font-family: var(--pf-sans);
	color: var(--pf-ink);
}
:is(.pf-block, .pf-chrome-cta) :where(h1, h2, h3, h4, p, figure, blockquote, ul, ol) {
	margin: 0;
}
:is(.pf-block, .pf-chrome-cta) :where(ul, ol) {
	padding: 0;
	list-style: none;
}
:is(.pf-block, .pf-chrome-cta) img {
	display: block;
	max-width: 100%;
}

/* The About/agency files set H2s at 56 / 1.2 (Home: 1.18). */
:is(.pf-block, .pf-chrome-cta) .pf-h2 {
	line-height: 1.2;
}

/* Centred section head. Figma trims the H2's text box to the cap height
   (13.5 above the line box), so the line box starts 40.5 below the label
   rule for the 86 the design measures. */
:is(.pf-block, .pf-chrome-cta) .pf-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: center;
	width: calc(909 * var(--pf-u));
	max-width: 100%;
	margin-top: calc(40.5 * var(--pf-u));
	text-align: center;
}
:is(.pf-block, .pf-chrome-cta) .pf-sub {
	margin-top: calc(11 * var(--pf-u));
	/* 445 in Figma; Chrome's Geist runs wider and would wrap to 3 lines. */
	width: min(100%, calc(478 * var(--pf-u)));
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	letter-spacing: -0.03em;
	color: rgba(0, 0, 0, 0.6);
}

/* Home file head (proof_section_head( $f, 'home' )): the H2 line box starts
   49.5 below the label rule (95 to its cap line), sets 56 / 1.18, and the
   intro sits 18 below it. The agency videos section uses it too. */
:is(.pf-block, .pf-chrome-cta) .pf-head--home {
	margin-top: calc(49.5 * var(--pf-u));
}
:is(.pf-block, .pf-chrome-cta) .pf-head--home .pf-h2 {
	line-height: 1.18;
}
:is(.pf-block, .pf-chrome-cta) .pf-head--home .pf-sub {
	margin-top: calc(18 * var(--pf-u));
}

/* Agency file head (proof_section_head( $f, 'agency' ): tool, steps,
   pricing, article): the H2 86 below the label as in the About file, but
   56 / 1.18 in the warm near-black (#26100A at 80%), intro 18 below. */
:is(.pf-block, .pf-chrome-cta) .pf-head--agency .pf-h2 {
	line-height: 1.18;
	letter-spacing: -0.03em;
	color: rgba(38, 16, 10, 0.8);
}
:is(.pf-block, .pf-chrome-cta) .pf-head--agency .pf-sub {
	margin-top: calc(18 * var(--pf-u));
}

/* Photos that fill their frame, with the design's blue tint on top. */
:is(.pf-block, .pf-chrome-cta) .pf-photo {
	position: relative;
	overflow: hidden;
	border-radius: calc(6 * var(--pf-u));
}
:is(.pf-block, .pf-chrome-cta) .pf-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
:is(.pf-block, .pf-chrome-cta) .pf-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 85, 212, 0) 0%, rgba(11, 85, 212, 0.32) 100%);
	pointer-events: none;
}

/* Dither texture on blue surfaces (add .pf-dither, content above it).
   Also on block roots (proof/tool, proof/marquee pass it to
   proof_block_attrs()), which the descendant selector alone missed. */
:is(.pf-block, .pf-chrome-cta).pf-dither::before,
:is(.pf-block, .pf-chrome-cta) .pf-dither::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../assets/img/dither.png") center / cover;
	mix-blend-mode: darken;
	opacity: 0.04;
	pointer-events: none;
}

:is(.pf-block, .pf-chrome-cta)-placeholder {
	padding: 32px;
	border: 1px dashed rgba(0, 0, 0, 0.3);
	font: 14px/1.4 var(--pf-sans);
	text-align: center;
	color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 1024px) {
	:is(.pf-block, .pf-chrome-cta) .pf-head {
		margin-top: 40px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-sub,
	:is(.pf-block, .pf-chrome-cta) .pf-head--home .pf-sub,
	:is(.pf-block, .pf-chrome-cta) .pf-head--agency .pf-sub {
		margin-top: 14px;
		width: min(100%, 520px);
		font-size: 16px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-photo {
		border-radius: 6px;
	}
}

/* ---------------------------------------------------------------- *
 * UI primitives (PHP: proof_button(), proof_label(), proof_dash(),
 * proof_checklist(), proof_logo_row() in inc/blocks.php). Ported from
 * the first build's section CSS (the old proof.css) with the same
 * geometry; the classes there wrapped the button, these style the element
 * itself.
 * ---------------------------------------------------------------- */

/* Buttons are inline-flex and keep their own width in a flex column. */
:is(.pf-block, .pf-chrome-cta) :is(.pf-btn, .pf-btn-ghost, .pf-btn-mail, .pf-link) {
	flex: none;
	align-self: flex-start;
	align-items: center;
	border-radius: 0;
	font-family: var(--pf-sans);
	font-weight: 500;
	font-size: calc(20 * var(--pf-t));
	line-height: 1.2;
	letter-spacing: -0.03em;
	text-decoration: none;
}
:is(.pf-block, .pf-chrome-cta) .pf-btn--center {
	align-self: center;
}

/* Primary CTA (Figma component 2078:1593): blue block, label at 28, the
   lime arrow mark (151 x 102 at 199 / -19) cut off by the right end. */
:is(.pf-block, .pf-chrome-cta) .pf-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	/* Fixed like the type (--pf-t), not fluid: the arrow mark below runs
	   on --pf-btn-s = --pf-t, so a fluid box would push it out of the
	   button below 1920 (2026-10-14). */
	width: calc(338 * var(--pf-t));
	height: calc(64 * var(--pf-t));
	padding: 0 0 0 calc(28 * var(--pf-t));
	background: var(--pf-blue);
	color: #fcfcf9;
	transition: background-color 0.2s;
}
:is(.pf-block, .pf-chrome-cta) .pf-btn::after {
	content: "";
	position: absolute;
	top: calc(-19 * var(--pf-u));
	left: calc(199 * var(--pf-u));
	width: calc(151 * var(--pf-u));
	height: calc(102 * var(--pf-u));
	background: url("../assets/img/btn-arrow-block.svg") no-repeat center / 100% 100%;
	transition: transform 0.25s ease;
}
:is(.pf-block, .pf-chrome-cta) .pf-btn:hover,
:is(.pf-block, .pf-chrome-cta) .pf-btn:focus-visible {
	background: #0844aa;
	color: #fff;
}
:is(.pf-block, .pf-chrome-cta) .pf-btn:hover::after {
	transform: translateX(calc(6 * var(--pf-t)));
}

/* Hover (Figma Button 2078:1591 -> 2078:1594, smart animate). Both
   variants hold the same layer "simbol01", so this is one shape tweened
   between two transforms: 82 x 102 pointing right, centred at 309 / 32,
   to 153 x 192 pointing left, centred at 275.5 / 32 - a half turn
   counter-clockwise while it grows 1.88x and slides 33.5 left. The mark is
   drawn in its hover pose (btn-arrow-block-hover.svg, Figma export) and
   transformed back for the resting pose. The label rises 2 px and its
   underline grows to the label's width (104 under Figma's 100 px "Learn
   More"). The component's rest variant has a 3 px tick there, but none of
   the page frames show it, so it starts at 0.
   Easing is Figma's "Slow" spring (mass 1, stiffness 80, damping 20),
   which settles in the 1.25 s Figma reports; linear() samples it.
   --pf-btn-s is the length unit, px-based on the mobile button.
   The lime variant keeps the nudge above. The form submit button
   (contact/style.css) reuses the timing variables. */
:is(.pf-block, .pf-chrome-cta) {
	--pf-btn-time: 1.25s;
	--pf-btn-ease: linear(0, 0.105 5%, 0.291 10%, 0.467 15%, 0.61 20%, 0.719 25%, 0.799 30%, 0.857 35%, 0.898 40%, 0.928 45%, 0.949 50%, 0.964 55%, 0.974 60%, 0.982 65%, 0.987 70%, 0.991 75%, 0.994 80%, 0.995 85%, 0.997 90%, 0.998 95%, 1);
}
:is(.pf-block, .pf-chrome-cta) .pf-btn:not(.pf-btn--lime) {
	--pf-btn-s: var(--pf-t);
	box-sizing: border-box;
	padding-bottom: 0;
	transition: padding-bottom var(--pf-btn-time) var(--pf-btn-ease);
}
/* The underline sits on the label (proof_button() wraps it), so it ends
   with the text: 2 thick, its top 1 below the 24 line box (45 / 64). The
   padding grows by the 2 the label rises, so the line itself stays put;
   the negative margin keeps both out of the centring. */
:is(.pf-block, .pf-chrome-cta) .pf-btn:not(.pf-btn--lime) .pf-btn-label {
	padding-bottom: calc(3 * var(--pf-btn-s));
	margin-bottom: calc(-3 * var(--pf-btn-s));
	background: linear-gradient(#fcfcf9, #fcfcf9) no-repeat 0 100% / 0 calc(2 * var(--pf-btn-s));
	transition:
		background-size var(--pf-btn-time) var(--pf-btn-ease),
		padding-bottom var(--pf-btn-time) var(--pf-btn-ease),
		margin-bottom var(--pf-btn-time) var(--pf-btn-ease);
}
:is(.pf-block, .pf-chrome-cta) .pf-btn:not(.pf-btn--lime)::after {
	top: calc(-64 * var(--pf-btn-s));
	left: calc(199 * var(--pf-btn-s));
	width: calc(153 * var(--pf-btn-s));
	height: calc(192 * var(--pf-btn-s));
	background-image: url("../assets/img/btn-arrow-block-hover.svg");
	transform: translateX(calc(33.5 * var(--pf-btn-s))) rotate(180deg) scale(0.536, 0.531);
	transition: transform var(--pf-btn-time) var(--pf-btn-ease);
}
:is(.pf-block, .pf-chrome-cta) .pf-btn:not(.pf-btn--lime):hover,
:is(.pf-block, .pf-chrome-cta) .pf-btn:not(.pf-btn--lime):focus-visible {
	background: var(--pf-blue);
	padding-bottom: calc(4 * var(--pf-btn-s));
}
:is(.pf-block, .pf-chrome-cta) .pf-btn:not(.pf-btn--lime):is(:hover, :focus-visible) .pf-btn-label {
	padding-bottom: calc(5 * var(--pf-btn-s));
	margin-bottom: calc(-5 * var(--pf-btn-s));
	background-size: 100% calc(2 * var(--pf-btn-s));
}
:is(.pf-block, .pf-chrome-cta) .pf-btn:not(.pf-btn--lime):hover::after,
:is(.pf-block, .pf-chrome-cta) .pf-btn:not(.pf-btn--lime):focus-visible::after {
	transform: translateX(0) rotate(0deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
	:is(.pf-block, .pf-chrome-cta) {
		--pf-btn-time: 0.01s;
	}
}

/* Lime CTA with the blue-on-lime arrow mark (agency Tool, CTA band). */
:is(.pf-block, .pf-chrome-cta) .pf-btn--lime {
	background: var(--pf-lime);
	color: #000;
}
:is(.pf-block, .pf-chrome-cta) .pf-btn--lime::after {
	background-image: url("../assets/img/btn-arrow-block-on-lime.svg");
}
:is(.pf-block, .pf-chrome-cta) .pf-btn--lime:hover,
:is(.pf-block, .pf-chrome-cta) .pf-btn--lime:focus-visible {
	background: #c4ff4a;
	color: #000;
}

/* Light glass button with arrow ("Tool ansehen"). */
:is(.pf-block, .pf-chrome-cta) .pf-btn-ghost {
	display: inline-flex;
	justify-content: space-between;
	width: calc(338 * var(--pf-t));
	height: calc(64 * var(--pf-t));
	padding: 0 calc(28 * var(--pf-t));
	background: rgba(255, 255, 255, 0.24);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	color: var(--pf-blue);
	transition: background-color 0.2s;
}
:is(.pf-block, .pf-chrome-cta) .pf-btn-ghost:hover,
:is(.pf-block, .pf-chrome-cta) .pf-btn-ghost:focus-visible {
	background: rgba(255, 255, 255, 0.48);
	color: var(--pf-blue);
}

/* Outline button with arrow (FAQ mail). Figma: 56 tall with the border
   inside, px 24 / py 16; CSS draws the border outside, so py 15. */
:is(.pf-block, .pf-chrome-cta) .pf-btn-mail {
	display: inline-flex;
	gap: calc(8 * var(--pf-u));
	padding: calc(15 * var(--pf-u)) calc(24 * var(--pf-u));
	border: 1px solid var(--pf-blue);
	background: transparent;
	color: var(--pf-blue);
}
:is(.pf-block, .pf-chrome-cta) .pf-btn-mail:hover,
:is(.pf-block, .pf-chrome-cta) .pf-btn-mail:focus-visible {
	background: rgba(11, 80, 200, 0.06);
	color: var(--pf-blue);
}
/* On blue (CTA band): filled, 64 tall, white arrow. */
:is(.pf-block, .pf-chrome-cta) .pf-btn-mail--dark {
	gap: calc(10 * var(--pf-u));
	height: calc(64 * var(--pf-u));
	padding: calc(20 * var(--pf-u)) calc(24 * var(--pf-u));
	border: 0;
	background: rgba(0, 51, 140, 0.6);
	color: #fff;
}
:is(.pf-block, .pf-chrome-cta) .pf-btn-mail--dark:hover,
:is(.pf-block, .pf-chrome-cta) .pf-btn-mail--dark:focus-visible {
	background: rgba(0, 51, 140, 0.85);
	color: #fff;
}

/* "Learn More": text, arrow at the right end, blue underline. 169 wide as
   drawn; longer texts widen it. */
:is(.pf-block, .pf-chrome-cta) .pf-link {
	display: inline-flex;
	justify-content: space-between;
	gap: calc(16 * var(--pf-u));
	min-width: calc(169 * var(--pf-u));
	height: calc(64 * var(--pf-u));
	border-bottom: 1px solid var(--pf-blue-2);
	color: var(--pf-blue);
}
:is(.pf-block, .pf-chrome-cta) .pf-link:hover,
:is(.pf-block, .pf-chrome-cta) .pf-link:focus-visible {
	color: var(--pf-blue);
}

/* Arrows of ghost, mail and link. */
:is(.pf-block, .pf-chrome-cta) :is(.pf-btn-ghost, .pf-btn-mail, .pf-link)::after {
	content: "";
	flex: none;
	width: calc(24 * var(--pf-u));
	height: calc(24 * var(--pf-u));
	background: url("../assets/img/arrow-up-right-blue-bold.svg") no-repeat center / contain;
	transition: transform 0.2s;
}
:is(.pf-block, .pf-chrome-cta) .pf-link::after {
	background-image: url("../assets/img/arrow-up-right-blue.svg");
}
:is(.pf-block, .pf-chrome-cta) .pf-btn-mail--dark::after {
	background-image: url("../assets/img/arrow-up-right-white.svg");
}
:is(.pf-block, .pf-chrome-cta) :is(.pf-btn-ghost, .pf-btn-mail, .pf-link):hover::after {
	transform: translate(3px, -3px);
}

/* Row of buttons, centred. */
:is(.pf-block, .pf-chrome-cta) .pf-ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-self: center;
	gap: calc(32 * var(--pf-u));
}

/* Label variants (base.css has .pf-label and .pf-label--light). */
:is(.pf-block, .pf-chrome-cta) .pf-label--bottom {
	padding: calc(32 * var(--pf-u)) 0 0;
	border-bottom: 0;
	border-top: 1px solid var(--pf-rule);
	text-align: left;
}
:is(.pf-block, .pf-chrome-cta) .pf-label--light.pf-label--bottom {
	border-top-color: rgba(255, 255, 255, 0.12);
}
/* Eyebrow: no rule, as wide as the text. */
:is(.pf-block, .pf-chrome-cta) .pf-label--norule {
	align-self: center;
	width: auto;
	padding-bottom: 0;
	border-bottom: 0;
}

/* H2 variants: left-aligned (compare, FAQ split, team) and the warm
   near-black of the agency steps / pricing / article heads. */
:is(.pf-block, .pf-chrome-cta) .pf-h2--left {
	text-align: left;
}
:is(.pf-block, .pf-chrome-cta) .pf-h2--warm {
	color: rgba(38, 16, 10, 0.8);
	letter-spacing: -0.03em;
}

/* Dashed rule: 1px, black 22%, dashes 4/4 as in Figma, drawn as a
   gradient (a dashed border renders 3px dashes). The first build's divider
   box was 31 tall with the rule at 15: add 15 to margins ported from
   the old proof.css (.pf-copy .pf-dash 43 → 58). */
:is(.pf-block, .pf-chrome-cta) .pf-dash {
	flex: none;
	width: min(100%, calc(478 * var(--pf-u)));
	height: 1px;
	background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 4px, transparent 4px 8px);
}
:is(.pf-block, .pf-chrome-cta) .pf-dash--full {
	width: 100%;
}

/* Checklist with lime squares (Home). Weight 500 as in Figma (the first
   build showed 400 because its icon-list weight won). */
:is(.pf-block, .pf-chrome-cta) .pf-check {
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--pf-u));
}
:is(.pf-block, .pf-chrome-cta) .pf-check li {
	display: flex;
	align-items: center;
	gap: calc(16 * var(--pf-u));
	font-weight: 500;
	font-size: calc(24 * var(--pf-t));
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--pf-muted);
}
:is(.pf-block, .pf-chrome-cta) .pf-check li::before {
	content: "";
	flex: none;
	width: calc(16 * var(--pf-u));
	height: calc(16 * var(--pf-u));
	background: var(--pf-lime-soft);
}

/* Client logo row (proof_logo_row()): 295.32 x 166 tiles, 3.75 apart,
   full bleed. Figma starts the row at x -84; proof.js wraps the tiles in
   .pf-logos-track (twice or more) and scrolls it by -50% in 45s. */
:is(.pf-block, .pf-chrome-cta) .pf-logos {
	display: flex;
	flex: none;
	gap: calc(3.75 * var(--pf-u));
	width: calc(100% + 2 * var(--pf-gutter));
	margin: calc(52 * var(--pf-u)) calc(-1 * var(--pf-gutter)) 0;
	overflow: hidden;
}
:is(.pf-block, .pf-chrome-cta) .pf-logos > :first-child {
	margin-left: calc(-84 * var(--pf-u));
}
:is(.pf-block, .pf-chrome-cta) .pf-logos-track {
	display: flex;
	flex: none;
	gap: calc(3.75 * var(--pf-u));
	padding-right: calc(3.75 * var(--pf-u));
	animation: pf-marquee 45s linear infinite;
}
:is(.pf-block, .pf-chrome-cta) .pf-logos:hover .pf-logos-track {
	animation-play-state: paused;
}
:is(.pf-block, .pf-chrome-cta) .pf-logo {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: calc(295.32 * var(--pf-u));
	height: calc(166 * var(--pf-u));
	border-radius: calc(6 * var(--pf-u));
	background: rgba(0, 0, 0, 0.04);
}
:is(.pf-block, .pf-chrome-cta) .pf-logo img {
	width: auto;
	height: calc(46.5 * var(--pf-u));
	max-width: calc(210 * var(--pf-u));
	object-fit: contain;
}
:is(.pf-block, .pf-chrome-cta) .pf-logos--light .pf-logo {
	background: #eeedeb;
}
:is(.pf-block, .pf-chrome-cta) .pf-logos--white .pf-logo {
	background: #fff;
}

/* Shared by the logo row and proof/marquee (was in proof.css). */
@keyframes pf-marquee {
	to {
		transform: translateX(-50%);
	}
}
@media (prefers-reduced-motion: reduce) {
	:is(.pf-block, .pf-chrome-cta) .pf-logos-track {
		animation: none;
	}
}

@media (max-width: 1024px) {
	:is(.pf-block, .pf-chrome-cta) :is(.pf-btn, .pf-btn-ghost, .pf-btn-mail, .pf-link) {
		font-size: 18px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-btn {
		width: 300px;
		height: 58px;
		padding-left: 24px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-btn::after {
		left: 178px;
		top: -17px;
		width: 136px;
		height: 92px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-btn:not(.pf-btn--lime) {
		--pf-btn-s: 0.9px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-btn-ghost {
		width: 300px;
		height: 58px;
		padding: 0 24px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-btn-mail {
		gap: 8px;
		padding: 15px 20px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-btn-mail--dark {
		height: 58px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-link {
		min-width: 160px;
		height: 52px;
	}
	:is(.pf-block, .pf-chrome-cta) :is(.pf-btn-ghost, .pf-btn-mail, .pf-link)::after {
		width: 20px;
		height: 20px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-ctas {
		gap: 16px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-label--bottom {
		padding-top: 20px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-check {
		gap: 14px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-check li {
		font-size: 18px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-check li::before {
		width: 12px;
		height: 12px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-logos {
		margin-top: 28px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-logos > :first-child {
		margin-left: -57px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-logo {
		width: 200px;
		height: 112px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-logo img {
		height: 39px;
		max-width: 180px;
	}
}
@media (max-width: 767px) {
	:is(.pf-block, .pf-chrome-cta) .pf-btn,
	:is(.pf-block, .pf-chrome-cta) .pf-btn-ghost {
		width: 280px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-btn::after {
		left: 158px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-logos > :first-child {
		margin-left: -43px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-logo {
		width: 150px;
		height: 88px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-logo img {
		height: 33px;
		max-width: 144px;
	}
}

/* Small buttons (.pf-btn--sm, e.g. proof_button( $link, 'primary', 'cta',
   'pf-btn--sm' )): the standard CTA and glass button scaled to 72.46 % as
   in the Ratgeber hero (245 x 46, label 14.5). After the rules above, so
   it wins at every width. */
:is(.pf-block, .pf-chrome-cta) .pf-btn--sm {
	width: calc(244.9 * var(--pf-u));
	height: calc(46.4 * var(--pf-u));
	font-size: calc(14.5 * var(--pf-t));
}
:is(.pf-block, .pf-chrome-cta) .pf-btn.pf-btn--sm {
	padding-left: calc(20.3 * var(--pf-u));
}
/* The blue CTA's mark, underline and hover geometry all run on --pf-btn-s. */
:is(.pf-block, .pf-chrome-cta) .pf-btn.pf-btn--sm:not(.pf-btn--lime) {
	--pf-btn-s: calc(0.7246 * var(--pf-t));
}
:is(.pf-block, .pf-chrome-cta) .pf-btn--lime.pf-btn--sm::after {
	top: calc(-13.8 * var(--pf-u));
	left: calc(144.2 * var(--pf-u));
	width: calc(109.4 * var(--pf-u));
	height: calc(73.9 * var(--pf-u));
}
:is(.pf-block, .pf-chrome-cta) .pf-btn-ghost.pf-btn--sm {
	padding: 0 calc(20.3 * var(--pf-u));
}
:is(.pf-block, .pf-chrome-cta) .pf-btn-ghost.pf-btn--sm::after {
	width: calc(17.4 * var(--pf-u));
	height: calc(17.4 * var(--pf-u));
}
@media (max-width: 1024px) {
	:is(.pf-block, .pf-chrome-cta) .pf-btn--sm {
		width: 245px;
		height: 46px;
		font-size: 15px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-btn.pf-btn--sm {
		padding-left: 20px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-btn.pf-btn--sm:not(.pf-btn--lime) {
		--pf-btn-s: 0.7246px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-btn--lime.pf-btn--sm::after {
		top: -14px;
		left: 144px;
		width: 109px;
		height: 74px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-btn-ghost.pf-btn--sm {
		padding: 0 20px;
	}
	:is(.pf-block, .pf-chrome-cta) .pf-btn-ghost.pf-btn--sm::after {
		width: 17px;
		height: 17px;
	}
}