/*
 * Software Umbrella: style uzupełniające theme.json.
 * Tokeny (kolory, fonty, rozmiary) są w theme.json; tutaj tylko to, czego theme.json nie wyrazi.
 * Źródło wyglądu: makieta offcoursekrakow.com/su (2026-09).
 */

:root {
	--su-radius: 16px;
	--su-radius-sm: 10px;
	--su-nav-h: 74px;
	--su-line: var(--wp--preset--color--line);
	--su-muted: var(--wp--preset--color--muted);
}

html {
	scroll-padding-top: calc(var(--su-nav-h) + 16px);
}

body {
	-webkit-font-smoothing: antialiased;
	/* clip, nie hidden: hidden tworzy kontener przewijania i psuje position: sticky nagłówka. */
	overflow-x: clip;
}

/* Treść zaczyna się tuż pod nagłówkiem (odstępy daje sama treść), bez białego paska. */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group:has(> main) {
	margin-block-start: 0;
}

:where(h1, h2, h3) {
	text-wrap: balance;
}

:where(p) {
	text-wrap: pretty;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 3px;
}

.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	z-index: 1000;
	background: #fff;
	padding: 0.75rem 1rem;
}

/* ---------- Nagłówek (ciemny, jak w makiecie) ---------- */

/* Przykleja się cały <header> (część szablonu): sticky na elemencie w środku nie działa,
   bo rodzic ma tę samą wysokość. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 0);
}

.su-header {
	min-height: var(--su-nav-h);
	/* Bez backdrop-filter: tworzy kontener dla position:fixed i menu mobilne
	   (nakładka core/navigation) zamykało się w wysokości nagłówka. */
	background: #12131a;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: #fff;
}

.su-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}

.su-brand__logo {
	height: 40px;
	width: auto;
}

.su-brand__word {
	font-family: var(--wp--preset--font-family--brand);
	font-size: 20px;
	line-height: 0.9;
	white-space: nowrap;
}

.su-brand__w1 {
	font-weight: 500;
	color: var(--wp--preset--color--brand-blue);
}

.su-brand__w2 {
	font-weight: 800;
	color: #fff;
}

.su-header .wp-block-navigation a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.875rem;
}

.su-header .wp-block-navigation a:hover {
	color: #fff;
}

/* „Kontakt” tylko w menu mobilnym: na desktopie jest przycisk „Porozmawiajmy”. */
.su-header .su-nav-mobile {
	display: none;
}

.su-header .is-menu-open .su-nav-mobile {
	display: flex;
}

.su-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px;
}

.su-header .wp-block-navigation__responsive-container.is-menu-open a {
	font-size: 1.25rem;
	color: #fff;
}

.su-header .wp-block-navigation__responsive-container-open,
.su-header .wp-block-navigation__responsive-container-close {
	color: #fff;
}

.su-header .wp-block-button__link {
	white-space: nowrap;
	font-size: 0.875rem;
	padding: 0.6rem 1.1rem;
}

@media (max-width: 480px) {
	.su-brand__word {
		font-size: 17px;
	}

	.su-brand__logo {
		height: 34px;
	}

	.su-header .wp-block-buttons {
		display: none;
	}
}

/* ---------- Hero: trzy parasole (makieta) ---------- */

.su-hero-hub {
	background: var(--wp--preset--color--night);
	color: #fff;
}

.su-hero-lead {
	padding: 26px 16px 22px;
	text-align: center;
}

.su-hero-eyebrow {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #7f83a0;
}

.su-hero-q {
	margin: 0 auto;
	/* H1 musi być większy niż nazwy parasoli pod nim (43 px): wcześniej 28 px. */
	max-width: 22ch;
	font-size: clamp(2rem, 3.6vw, 3.2rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #fff;
}

.su-muted {
	color: #6f7391;
}

.su-hero-sub {
	margin: 14px 0 0;
	font-size: 16px;
	color: #9a9db4;
}

.su-hero-sub strong {
	color: #fff;
}

.su-pillars {
	display: flex;
	width: 100%;
	min-height: clamp(430px, 58vh, 560px);
}

.su-pillar {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 34px 38px 30px;
	overflow: hidden;
	opacity: 0;
	transform: translateY(24px);
	animation: su-pill-in 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
	transition: flex-grow 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.su-pillar--web {
	flex-grow: 1.3;
	animation-delay: 0.05s;
}

.su-pillar--ai {
	animation-delay: 0.15s;
}

.su-pillar--trust {
	animation-delay: 0.25s;
}

.su-pillar:hover {
	flex-grow: 1.45;
}

.su-pillar :is(p, h2, ul) {
	margin-top: 0;
}

.su-pilltag {
	align-self: flex-start;
	margin-bottom: 18px;
	padding: 6px 12px;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.su-pillmark {
	margin-bottom: 14px;
	line-height: 1;
}

.su-pillmark span {
	display: block;
}

.su-pilldesc {
	max-width: 32ch;
	margin-bottom: 18px;
	font-size: 0.875rem;
	line-height: 1.55;
}

.su-pillfoot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.su-pillcta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: gap 0.2s ease;
}

/* Cała kolumna klikalna: link rozciągnięty na kafel. */
.su-pillcta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
}

.su-pillar:hover .su-pillcta {
	gap: 15px;
}

/* Drugi link w kolumnie (Web: skan strony): nad rozciągniętym linkiem kafla, inaczej klik szedłby w kafel. */
.su-pilllink {
	position: relative;
	z-index: 5;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.su-pilllink:hover {
	color: var(--wp--preset--color--web-accent);
}

.su-pillcta:focus-visible {
	outline: none;
}

.su-pillar:has(.su-pillcta:focus-visible) {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

.su-arr {
	font-size: 1.25rem;
}

/* WEB: fioletowy świat naklejek */
.su-pillar--web {
	background: var(--wp--preset--color--web);
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.4px, transparent 1.4px);
	background-size: 15px 15px;
	color: #fff;
}


.su-pillar--web .su-pillmark {
	font-family: var(--wp--preset--font-family--web);
	font-weight: 800;
	font-size: clamp(30px, 3vw, 44px);
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

/* Web nie ma etykiety nad nagłówkiem (HOME-009): na desktopie wyrównanie do AI i Trusted
   o wysokość etykiety (29 px) i jej odstęp (18 px). */
@media (min-width: 821px) {
	.su-pillar--web .su-pillmark {
		margin-top: 47px;
	}
}

.su-pillar--web .su-bold,
.su-pillar--web .su-pillcta {
	color: var(--wp--preset--color--web-accent);
}

.su-pillar--web .su-pilldesc {
	color: rgba(255, 255, 255, 0.9);
}

.su-webstat {
	margin-bottom: 14px;
	font-family: var(--wp--preset--font-family--web);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--web-accent);
}



/* AI: granatowy świat z robotem */
.su-pillar--ai {
	background: var(--wp--preset--color--ai);
	background-image: radial-gradient(rgba(140, 240, 168, 0.2) 1.4px, transparent 1.4px);
	background-size: 20px 20px;
	color: #fff;
}

.su-pillar--ai .su-pilltag {
	background: var(--wp--preset--color--ai-accent);
	color: #12331d;
}

.su-pillar--ai .su-pillmark {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(28px, 2.7vw, 40px);
	letter-spacing: -0.02em;
}

.su-pillar--ai .su-pillmark span {
	display: inline;
}

.su-pillar--ai .su-light,
.su-pillar--ai .su-pillcta {
	color: var(--wp--preset--color--ai-accent);
}

.su-pillar--ai .su-pilldesc {
	max-width: 26ch;
	color: rgba(255, 255, 255, 0.86);
}

.su-ai-stage {
	position: relative;
	flex: 1;
	min-height: 200px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-bottom: 12px;
}

/* Robot + dymek w jednym kontenerze: dymek nad głową, ogonek wskazuje robota. */
.su-ai-bot {
	position: relative;
	padding-top: 58px;
}

.su-ai-bubble {
	position: absolute;
	top: 0;
	left: 58%;
	z-index: 3;
	width: max-content;
	max-width: 170px;
	padding: 10px 13px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6);
	color: var(--wp--preset--color--web-dark);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	transform: rotate(-3deg);
	animation: su-bubble-in 0.5s ease 0.5s both;
}

/* Ogonek jak w komiksie: od dolnej krawędzi dymka do głowy robota (HOME-017). */
.su-ai-bubble::after {
	content: "";
	position: absolute;
	left: 12px;
	bottom: -30px;
	width: 26px;
	height: 32px;
	background: #fff;
	clip-path: polygon(30% 0, 100% 0, 0 100%);
}

.su-ai-robot {
	width: 150px;
	height: auto;
	/* Naklejka jak pająk: biały kontur z czterech przesunięć + twardy cień. */
	filter:
		drop-shadow(3px 0 0 #fff)
		drop-shadow(-3px 0 0 #fff)
		drop-shadow(0 3px 0 #fff)
		drop-shadow(0 -3px 0 #fff)
		drop-shadow(0 6px 0 rgba(23, 22, 28, 0.35));
	animation: su-float 3.4s ease-in-out infinite;
}

.su-eye {
	animation: su-blink 3.2s steps(1) infinite;
}

.su-aistat {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 14px;
	padding: 6px 12px;
	border: 1px solid rgba(142, 240, 168, 0.3);
	border-radius: 6px;
	background: rgba(142, 240, 168, 0.1);
	color: var(--wp--preset--color--ai-accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.su-dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.su-dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	animation: su-pulse 1.6s ease-out infinite;
}

/* TRUSTED: spokojny, redakcyjny świat z listą testów */
.su-pillar--trust {
	background: var(--wp--preset--color--trust);
	background-image: radial-gradient(rgba(79, 211, 230, 0.2) 1.4px, transparent 1.4px);
	background-size: 18px 18px;
	color: #fff;
}

.su-pillar--trust .su-pilltag {
	padding-left: 0;
	background: transparent;
	color: #7fd4de;
	letter-spacing: 0.1em;
}

.su-pillar--trust .su-pillmark {
	font-family: var(--wp--preset--font-family--trust);
	font-weight: 600;
	font-size: clamp(28px, 2.7vw, 40px);
	letter-spacing: -0.01em;
}

.su-pillar--trust .su-bold,
.su-pillar--trust .su-pillcta {
	color: var(--wp--preset--color--trust-accent);
}

.su-pillar--trust .su-pilldesc {
	max-width: 30ch;
	color: rgba(255, 255, 255, 0.82);
}

.su-checks {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 300px;
	gap: 8px;
	margin-bottom: 18px;
	padding: 0;
	list-style: none;
	/* Zakres audytów zwykłym tekstem (wcześniej pseudo-raport „rodo.audit PASS”). */
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.85);
}

.su-checks li {
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0;
	animation: su-check-in 0.4s ease forwards;
}

.su-checks li:nth-child(1) {
	animation-delay: 0.5s;
}

.su-checks li:nth-child(2) {
	animation-delay: 0.8s;
}

.su-checks li:nth-child(3) {
	animation-delay: 1.1s;
}

.su-check-ico {
	flex: none;
	width: 18px;
	height: 18px;
	display: grid;
	place-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--trust-accent);
	color: #0a2529;
	font-size: 12px;
	font-weight: 700;
}

.su-checks em {
	margin-left: auto;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--trust-accent);
}

.su-trust-note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

/* Maskotka Web: pająk-naklejka (biały kontur w pliku, przesunięty cień jak odznaka), wisi na nici. */
.su-web-stage {
	flex: 1;
	min-height: 160px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	margin-bottom: 8px;
}

.su-web-mascot,
.su-webband__mascot,
.su-scanbox__mascot {
	transform-origin: 50% 0;
	animation: su-dangle 3.2s ease-in-out infinite;
}

.su-web-mascot {
	width: 220px;
	height: auto;
	filter: drop-shadow(0 6px 0 rgba(23, 22, 28, 0.35));
}

@keyframes su-dangle {
	0%,
	100% {
		transform: translateY(0) rotate(-2deg);
	}

	50% {
		transform: translateY(6px) rotate(2deg);
	}
}

/* Maskotka Trusted: sowa-audytorka, spokojnie przechyla głowę. */
.su-trust-stage {
	flex: 1;
	min-height: 150px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	margin-bottom: 8px;
}

.su-owl {
	width: 130px;
	height: auto;
	/* Naklejka jak pająk: biały kontur z czterech przesunięć + twardy cień. */
	filter:
		drop-shadow(3px 0 0 #fff)
		drop-shadow(-3px 0 0 #fff)
		drop-shadow(0 3px 0 #fff)
		drop-shadow(0 -3px 0 #fff)
		drop-shadow(0 6px 0 rgba(23, 22, 28, 0.35));
	transform-origin: 50% 90%;
	animation: su-tilt 5s ease-in-out infinite;
}

@keyframes su-tilt {
	0%,
	60%,
	100% {
		transform: rotate(0);
	}

	70%,
	85% {
		transform: rotate(-6deg);
	}
}

@keyframes su-pill-in {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes su-pulse {
	0% {
		transform: scale(1);
		opacity: 0.5;
	}

	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}


/* Wąski ekran: dymek bliżej środka, żeby nie wychodził poza kolumnę (ogonek nadal nad głową). */
@media (max-width: 480px) {
	.su-ai-bubble {
		left: 33%;
	}
}

/* Powieki robota: mrugnięcie co kilka sekund; ramię z chwytakiem lekko macha. */
.su-lid {
	transform-box: fill-box;
	transform-origin: 50% 0;
	animation: su-lid 4.6s ease-in-out infinite;
}

.su-bot-arm--r {
	transform-box: view-box;
	transform-origin: 102px 106px;
	animation: su-wave 2.8s ease-in-out infinite;
}

@keyframes su-lid {
	0%,
	88%,
	100% {
		transform: scaleY(1);
	}

	93% {
		transform: scaleY(3.2);
	}
}

@keyframes su-wave {
	0%,
	100% {
		transform: rotate(0);
	}

	50% {
		transform: rotate(-8deg);
	}
}

@keyframes su-bubble-in {
	from {
		opacity: 0;
		transform: rotate(-3deg) translateY(8px);
	}

	to {
		opacity: 1;
		transform: rotate(-3deg) translateY(0);
	}
}

@keyframes su-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-9px);
	}
}

@keyframes su-blink {
	0%,
	92%,
	100% {
		opacity: 1;
	}

	94%,
	98% {
		opacity: 0.15;
	}
}

@keyframes su-check-in {
	from {
		opacity: 0;
		transform: translateX(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 820px) {
	.su-pillars {
		flex-direction: column;
		min-height: 0;
	}

	.su-pillar {
		padding: 36px 24px;
	}

	.su-ai-stage {
		min-height: 170px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.su-web-mascot,
	.su-webband__mascot,
	.su-scanbox__mascot,
	.su-lid,
	.su-bot-arm--r,
	.su-pillar,
	.su-checks li {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* Rozdarcie papieru między parasolami: lewa kolumna ma poszarpaną ukośną krawędź
   (maska SVG), jasne włókna wzdłuż rozdarcia i cień na kolumnie pod spodem.
   Trzy SVG mają tę samą ścieżkę rozdarcia; pas o stałej szerokości --su-tear. */
@media (min-width: 821px) {
	.su-pillars {
		--su-tear: 72px;
	}

	.su-pillar--web {
		z-index: 3;
	}

	.su-pillar--ai {
		z-index: 2;
	}

	.su-pillar--trust {
		z-index: 1;
	}

	.su-pillar--web,
	.su-pillar--ai {
		margin-right: calc(-1 * var(--su-tear));
		padding-right: calc(38px + var(--su-tear) - 10px);
		-webkit-mask:
			linear-gradient(#000 0 0) left / calc(100% - var(--su-tear) + 1px) 100% no-repeat,
			var(--su-tear-mask) right / var(--su-tear) 100% no-repeat;
		mask:
			linear-gradient(#000 0 0) left / calc(100% - var(--su-tear) + 1px) 100% no-repeat,
			var(--su-tear-mask) right / var(--su-tear) 100% no-repeat;
	}

	.su-pillar--ai,
	.su-pillar--trust {
		padding-left: calc(38px + var(--su-tear) - 10px);
	}

	.su-pillar--web::after,
	.su-pillar--ai::after,
	.su-pillar--ai::before,
	.su-pillar--trust::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: var(--su-tear);
		pointer-events: none;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}

	.su-pillar--web::after,
	.su-pillar--ai::after {
		right: 0;
		background: #f3eee2;
		-webkit-mask-image: var(--su-tear-fiber);
		mask-image: var(--su-tear-fiber);
	}

	.su-pillar--ai::before,
	.su-pillar--trust::before {
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		-webkit-mask-image: var(--su-tear-shadow);
		mask-image: var(--su-tear-shadow);
	}

}

.su-pillars {
	--su-tear-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 500' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 60.6,0 62.5,7.2 60.9,13.8 56.1,22.7 54.9,32.8 54.2,42.2 56.3,49.0 52.6,61.6 55.8,69.4 54.0,82.9 56.2,92.1 54.6,98.5 48.0,106.8 48.6,113.8 46.3,126.3 48.9,136.9 47.2,145.9 42.6,152.4 46.8,160.1 42.9,169.5 42.9,180.2 44.7,188.6 39.1,200.2 40.3,210.8 40.6,223.8 41.7,232.1 36.5,239.0 33.1,251.1 31.2,261.0 35.8,272.3 35.6,282.9 33.3,291.4 31.2,302.2 32.3,311.8 28.0,325.4 23.5,336.7 27.0,348.3 26.9,362.2 22.6,370.5 18.5,381.9 18.6,391.6 17.0,398.5 16.3,410.6 17.6,418.6 13.8,431.6 16.5,441.2 17.3,454.3 11.6,467.2 11.3,476.5 14.7,489.6 7.7,496.8 10,500 0,500'/%3E%3C/svg%3E");
	--su-tear-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 500' preserveAspectRatio='none'%3E%3Cpolygon points='60.6,0 62.5,7.2 60.9,13.8 56.1,22.7 54.9,32.8 54.2,42.2 56.3,49.0 52.6,61.6 55.8,69.4 54.0,82.9 56.2,92.1 54.6,98.5 48.0,106.8 48.6,113.8 46.3,126.3 48.9,136.9 47.2,145.9 42.6,152.4 46.8,160.1 42.9,169.5 42.9,180.2 44.7,188.6 39.1,200.2 40.3,210.8 40.6,223.8 41.7,232.1 36.5,239.0 33.1,251.1 31.2,261.0 35.8,272.3 35.6,282.9 33.3,291.4 31.2,302.2 32.3,311.8 28.0,325.4 23.5,336.7 27.0,348.3 26.9,362.2 22.6,370.5 18.5,381.9 18.6,391.6 17.0,398.5 16.3,410.6 17.6,418.6 13.8,431.6 16.5,441.2 17.3,454.3 11.6,467.2 11.3,476.5 14.7,489.6 7.7,496.8 10,500 4.1715504949385425,500 5.119164976341631,496.8 11.634964863157489,489.6 5.899006176574539,476.5 8.173350878989869,467.2 13.600774566149495,454.3 13.64234334138141,441.2 10.999403684553421,431.6 13.406578702543058,418.6 12.169036892940232,410.6 11.024140474033501,398.5 13.12872075730385,391.6 15.570052192332318,381.9 18.825427961651013,370.5 23.184136588812045,362.2 23.61709785205023,348.3 20.48007330134188,336.7 23.350758542740323,325.4 26.73983667919163,311.8 28.610746896668488,302.2 29.527365272879,291.4 32.744874711920914,282.9 32.770572737022,272.3 28.69918351334525,261.0 30.415985386384065,251.1 32.809812217186796,239.0 38.63193884279766,232.1 37.36932885093842,223.8 37.56428334454941,210.8 36.382132624334595,200.2 39.97998652010002,188.6 40.03762017201387,180.2 39.00357408687904,169.5 42.926673825880556,160.1 37.30744407581202,152.4 41.63920385552933,145.9 43.67010678252874,136.9 40.65163446479716,126.3 45.911024873716734,113.8 43.133299711426744,106.8 49.93842537706806,98.5 51.89577998425228,92.1 49.083272200024076,82.9 49.96415726066216,69.4 48.11780571702763,61.6 52.50761249486846,49.0 50.23368724606136,42.2 52.38567238815227,32.8 52.68038683245512,22.7 56.338067736937106,13.8 58.30263044380525,7.2 57.283323707116985,0'/%3E%3C/svg%3E");
	--su-tear-shadow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 500' preserveAspectRatio='none'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3C/filter%3E%3Cpolygon filter='url(%23b)' points='60.6,0 62.5,7.2 60.9,13.8 56.1,22.7 54.9,32.8 54.2,42.2 56.3,49.0 52.6,61.6 55.8,69.4 54.0,82.9 56.2,92.1 54.6,98.5 48.0,106.8 48.6,113.8 46.3,126.3 48.9,136.9 47.2,145.9 42.6,152.4 46.8,160.1 42.9,169.5 42.9,180.2 44.7,188.6 39.1,200.2 40.3,210.8 40.6,223.8 41.7,232.1 36.5,239.0 33.1,251.1 31.2,261.0 35.8,272.3 35.6,282.9 33.3,291.4 31.2,302.2 32.3,311.8 28.0,325.4 23.5,336.7 27.0,348.3 26.9,362.2 22.6,370.5 18.5,381.9 18.6,391.6 17.0,398.5 16.3,410.6 17.6,418.6 13.8,431.6 16.5,441.2 17.3,454.3 11.6,467.2 11.3,476.5 14.7,489.6 7.7,496.8 10,500 17.912130978376002,500 16.700561839321832,496.8 23.829211536392357,489.6 20.939108550206893,476.5 20.242342600819576,467.2 23.63911394580152,454.3 25.698574979398643,441.2 22.411912171364037,431.6 25.517893705046156,418.6 25.66174210911716,410.6 26.601233351536457,398.5 27.096265589751276,391.6 25.31749345310489,381.9 29.38682465367727,370.5 33.80738330692291,362.2 33.88184929198495,348.3 30.958543541447465,336.7 37.82000252528533,325.4 42.25215223281144,311.8 40.94808480510497,302.2 41.08891071106689,291.4 45.426060305365354,282.9 44.57008776680049,272.3 38.236697453071024,261.0 40.21767415619612,251.1 42.61174830168826,239.0 47.81592060296546,232.1 48.022250173419835,223.8 48.37055489697402,210.8 46.00695796012634,200.2 53.65949208150286,188.6 52.17333177330149,180.2 52.12431433914267,169.5 56.21051519498664,160.1 52.539704202363566,152.4 56.44604498709438,145.9 55.792166692412735,136.9 53.61865998019105,126.3 57.71621956535271,113.8 56.130369589971515,106.8 63.68775163360813,98.5 62.86816813813735,92.1 61.46679916704471,82.9 62.844460788917445,69.4 61.38478714363121,61.6 65.75330012115867,49.0 64.1140049708759,42.2 63.012437763753226,32.8 62.208169965688676,22.7 69.07268970352845,13.8 69.08641015559637,7.2 68.7130295801685,0'/%3E%3C/svg%3E");
	--su-tear-mask-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 56' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 500,0 500,10 492.9,9.6 482.1,9.5 471.5,9.2 464.9,11.1 456.2,15.1 448.2,11.7 434.3,11.9 423.1,18.0 414.0,14.2 400.9,15.8 388.5,21.3 380.3,16.6 370.9,16.6 359.8,17.5 347.9,18.8 338.4,22.1 330.9,24.3 324.5,19.8 316.5,20.5 304.4,27.3 295.8,21.8 287.6,27.2 276.6,23.1 267.4,30.1 257.6,30.3 250.0,24.5 237.2,32.1 228.1,32.0 218.9,32.1 212.3,29.2 204.5,30.0 192.8,34.5 178.9,36.6 170.6,33.4 159.3,34.5 148.2,35.5 135.5,35.8 125.8,33.7 117.8,35.3 111.3,38.2 105.2,36.0 94.3,40.3 80.6,43.6 74.2,42.0 61.8,38.7 53.3,39.3 41.0,44.0 30.9,41.6 20.2,44.6 10.5,48.2 0,45.7'/%3E%3C/svg%3E");
	--su-tear-fiber-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 56' preserveAspectRatio='none'%3E%3Cpolygon points='0,45.7 10.5,48.2 20.2,44.6 30.9,41.6 41.0,44.0 53.3,39.3 61.8,38.7 74.2,42.0 80.6,43.6 94.3,40.3 105.2,36.0 111.3,38.2 117.8,35.3 125.8,33.7 135.5,35.8 148.2,35.5 159.3,34.5 170.6,33.4 178.9,36.6 192.8,34.5 204.5,30.0 212.3,29.2 218.9,32.1 228.1,32.0 237.2,32.1 250.0,24.5 257.6,30.3 267.4,30.1 276.6,23.1 287.6,27.2 295.8,21.8 304.4,27.3 316.5,20.5 324.5,19.8 330.9,24.3 338.4,22.1 347.9,18.8 359.8,17.5 370.9,16.6 380.3,16.6 388.5,21.3 400.9,15.8 414.0,14.2 423.1,18.0 434.3,11.9 448.2,11.7 456.2,15.1 464.9,11.1 471.5,9.2 482.1,9.5 492.9,9.6 500,10 500,7.377218121792705 492.9,6.608784844990337 482.1,4.9544590613693735 471.5,4.280724430629712 464.9,6.300737837216498 456.2,9.168273025316168 448.2,6.081709195105656 434.3,8.132491951551817 423.1,15.039475177804587 414.0,9.697407019840718 400.9,12.009251203697081 388.5,18.18311178619514 380.3,13.888405484236081 370.9,12.540030680062443 359.8,14.057821251899057 347.9,16.241988224222958 338.4,18.886073922206105 330.9,18.589239375275987 324.5,16.319232126002007 316.5,15.849939444962962 304.4,21.816600436303418 295.8,17.342217800115968 287.6,23.90061281936206 276.6,20.35928356541395 267.4,25.07876335367468 257.6,27.185983111319494 250.0,20.97297628730342 237.2,27.512367927145227 228.1,26.616987536349264 218.9,28.70056510587891 212.3,24.23397188804568 204.5,26.66557482563406 192.8,28.630614709905345 178.9,33.96456234907176 170.6,30.536561115222682 159.3,30.524899716184247 148.2,30.88763024825795 135.5,30.212335860067554 125.8,27.874524516919745 117.8,32.11193571608953 111.3,32.40858286366792 105.2,30.91201463564172 94.3,37.13569766912859 80.6,40.22675501749763 74.2,36.63769317689123 61.8,33.02051694170131 53.3,36.26052638375879 41.0,40.8601029947746 30.9,36.067160162692225 20.2,40.08900064099518 10.5,44.00696413358109 0,39.84302864629441'/%3E%3C/svg%3E");
	--su-tear-shadow-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 56' preserveAspectRatio='none'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3C/filter%3E%3Cpolygon filter='url(%23b)' points='0,45.7 10.5,48.2 20.2,44.6 30.9,41.6 41.0,44.0 53.3,39.3 61.8,38.7 74.2,42.0 80.6,43.6 94.3,40.3 105.2,36.0 111.3,38.2 117.8,35.3 125.8,33.7 135.5,35.8 148.2,35.5 159.3,34.5 170.6,33.4 178.9,36.6 192.8,34.5 204.5,30.0 212.3,29.2 218.9,32.1 228.1,32.0 237.2,32.1 250.0,24.5 257.6,30.3 267.4,30.1 276.6,23.1 287.6,27.2 295.8,21.8 304.4,27.3 316.5,20.5 324.5,19.8 330.9,24.3 338.4,22.1 347.9,18.8 359.8,17.5 370.9,16.6 380.3,16.6 388.5,21.3 400.9,15.8 414.0,14.2 423.1,18.0 434.3,11.9 448.2,11.7 456.2,15.1 464.9,11.1 471.5,9.2 482.1,9.5 492.9,9.6 500,10 500,16.045228820084077 492.9,16.623320880425524 482.1,19.181857093760293 471.5,17.65801304757987 464.9,19.089002310632054 456.2,23.893338719394354 448.2,18.620886574905985 434.3,19.823827261396964 423.1,26.40514105819858 414.0,20.319159320301857 400.9,24.80084070904646 388.5,27.635128889045035 380.3,25.95348011676228 370.9,24.362089981514877 359.8,25.823811514906758 347.9,27.740152606193917 338.4,29.65374532742058 330.9,33.212828306262196 324.5,29.31916731644411 316.5,30.47328875235329 304.4,35.85761725054921 295.8,28.12080811532284 287.6,35.63546760297564 276.6,31.430715567244505 267.4,37.629334109401 257.6,38.799842186637676 250.0,32.79122999353804 237.2,41.55389069616573 228.1,41.1621280023536 218.9,39.76861256790875 212.3,38.684405036488045 204.5,39.60334375732151 192.8,43.240583821334795 178.9,44.00733638658902 170.6,43.06001031820816 159.3,43.67306670437394 148.2,44.31476247696711 135.5,44.748352537666236 125.8,43.30078352499752 117.8,44.24802197946504 111.3,46.384381436341286 105.2,42.30105160036953 94.3,50.29743050552702 80.6,50.87561796118634 74.2,50.92199192378113 61.8,46.628942890979964 53.3,47.84473808630805 41.0,50.085036712836406 30.9,51.451084054516016 20.2,53.40388007497206 10.5,57.84084980957127 0,51.771576788270266'/%3E%3C/svg%3E");
}

/* To samo rozdarcie w układzie pionowym: ukośne, ale biegnie w poprzek, między kolumnami jedna pod drugą. */
@media (max-width: 820px) {
	.su-pillars {
		--su-tear: 56px;
	}

	.su-pillar--web {
		z-index: 3;
	}

	.su-pillar--ai {
		z-index: 2;
	}

	.su-pillar--trust {
		z-index: 1;
	}

	.su-pillar--web,
	.su-pillar--ai {
		margin-bottom: calc(-1 * var(--su-tear));
		padding-bottom: calc(36px + var(--su-tear));
		-webkit-mask:
			linear-gradient(#000 0 0) top / 100% calc(100% - var(--su-tear) + 1px) no-repeat,
			var(--su-tear-mask-h) bottom / 100% var(--su-tear) no-repeat;
		mask:
			linear-gradient(#000 0 0) top / 100% calc(100% - var(--su-tear) + 1px) no-repeat,
			var(--su-tear-mask-h) bottom / 100% var(--su-tear) no-repeat;
	}

	.su-pillar--ai,
	.su-pillar--trust {
		padding-top: calc(36px + var(--su-tear) - 10px);
	}

	.su-pillar--web::after,
	.su-pillar--ai::after,
	.su-pillar--ai::before,
	.su-pillar--trust::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		height: var(--su-tear);
		pointer-events: none;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}

	.su-pillar--web::after,
	.su-pillar--ai::after {
		bottom: 0;
		background: #f3eee2;
		-webkit-mask-image: var(--su-tear-fiber-h);
		mask-image: var(--su-tear-fiber-h);
	}

	.su-pillar--ai::before,
	.su-pillar--trust::before {
		top: 0;
		background: rgba(0, 0, 0, 0.5);
		-webkit-mask-image: var(--su-tear-shadow-h);
		mask-image: var(--su-tear-shadow-h);
	}
}

/* ---------- Etykieta sekcji ---------- */

.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--su-muted);
}

/* ---------- Karty i tła ---------- */

.is-style-card {
	background: #fff;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.is-style-tinted {
	background: var(--wp--preset--color--bg-2);
}

/* Trzy parasole: każdy ma własny kolor, akcent i font znaku (jak w makiecie). */
.is-style-web,
.is-style-ai,
.is-style-trust {
	border-radius: var(--su-radius);
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	color: #fff;
}

.is-style-web {
	background-color: var(--wp--preset--color--web);
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.4px, transparent 1.4px);
	background-size: 15px 15px;
	--su-accent: var(--wp--preset--color--web-accent);
	--su-mark-font: var(--wp--preset--font-family--web);
}

.is-style-ai {
	background-color: var(--wp--preset--color--ai);
	background-image: radial-gradient(rgba(140, 240, 168, 0.2) 1.4px, transparent 1.4px);
	background-size: 20px 20px;
	--su-accent: var(--wp--preset--color--ai-accent);
	--su-mark-font: var(--wp--preset--font-family--heading);
}

.is-style-trust {
	background-color: var(--wp--preset--color--trust);
	--su-accent: var(--wp--preset--color--trust-accent);
	--su-mark-font: var(--wp--preset--font-family--trust);
}

:is(.is-style-web, .is-style-ai, .is-style-trust) :is(h2, h3, p, li) {
	color: inherit;
}

:is(.is-style-web, .is-style-ai, .is-style-trust) a {
	color: var(--su-accent);
}

/* Znak parasola: „Web” + „Umbrella” w dwóch kolorach. */
.su-mark {
	font-family: var(--su-mark-font, var(--wp--preset--font-family--heading));
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
}

.is-style-web .su-mark {
	text-transform: uppercase;
}

.su-mark strong {
	display: block;
	font-weight: inherit;
	color: var(--su-accent);
}

/* ---------- Listy i przyciski ---------- */

.is-style-checks {
	list-style: none;
	padding-left: 0;
}

.is-style-checks li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: 0.4em;
}

.is-style-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.9em;
	height: 0.5em;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	color: var(--su-accent, var(--wp--preset--color--blue));
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: none;
	color: var(--wp--preset--color--ink);
	padding: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--su-muted);
}

:is(.is-style-web, .is-style-ai, .is-style-trust) .wp-block-button:not(.is-style-ghost) .wp-block-button__link {
	background: var(--su-accent);
	color: var(--wp--preset--color--ink);
}

:is(.is-style-web, .is-style-ai, .is-style-trust) .wp-block-button.is-style-ghost .wp-block-button__link {
	color: var(--su-accent);
	text-decoration-color: currentColor;
}

/* ---------- Menu: nazwy parasoli w kolorach jak w hero ---------- */

.su-nav-web .su-mk-a,
.su-nav-ai .su-mk-b,
.su-nav-trust .su-mk-a {
	color: #fff;
}

.su-nav-web .su-mk-b {
	color: var(--wp--preset--color--web-accent);
}

.su-nav-ai .su-mk-a {
	color: var(--wp--preset--color--ai-accent);
}

.su-nav-trust .su-mk-b {
	color: var(--wp--preset--color--trust-accent);
}

/* Spany mają własny kolor, więc najechanie pokazuje podkreślenie. */
:is(.su-nav-web, .su-nav-ai, .su-nav-trust) .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* ---------- Stopka ---------- */

/* Ciemny pas na całą szerokość (kolor night), białe logo w pionie, kolumny w siatce. */
.su-footer {
	--su-footer-text: rgba(255, 255, 255, 0.68);
	--su-footer-link: rgba(255, 255, 255, 0.9);
	--su-footer-line: rgba(255, 255, 255, 0.12);
	background: var(--wp--preset--color--night);
	font-size: var(--wp--preset--font-size--small);
	color: var(--su-footer-text);
}

.su-footer a {
	color: var(--su-footer-link);
	text-decoration: none;
}

.su-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.su-footer .is-style-eyebrow {
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 0.9em;
}

/* Etykieta kolumny parasola jest linkiem do huba: wygląda jak etykieta, nie jak link. */
.su-footer .is-style-eyebrow a {
	color: inherit;
}

.su-footer__cols {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr 1fr 0.8fr 1.3fr;
	gap: 2.5rem 1.75rem;
}

.su-footer__cols > * {
	margin-block: 0;
}

.su-footer__cols > * > :first-child {
	margin-top: 0;
}

/* Kolumna marki ma szerokość opisu, więc logo wyśrodkowane nad tekstem, nie nad całą kolumną. */
.su-footer__brand {
	max-width: 32ch;
}

.su-footer__logo {
	display: block;
	width: fit-content;
	margin: 0 auto 0.5rem;
}

.su-footer__logo img {
	display: block;
	width: 96px;
	height: auto;
}

.su-footer__contact p {
	margin-block: 0 0.6em;
}

.su-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.su-social a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.45em 0.9em;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--su-radius-sm);
	color: #fff;
}

.su-social a:hover {
	border-color: var(--wp--preset--color--blue);
	text-decoration: none;
}

.su-footer-links {
	list-style: none;
}

.su-footer-links li + li {
	margin-top: 0.55em;
}

/* Adres e-mail w całości w jednej linii (wąska kolumna łamała „.com”). */
.su-footer a[href^="mailto:"] {
	white-space: nowrap;
}

.su-footer__bottom {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--su-footer-line);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
}

.su-footer__bottom p {
	margin: 0;
}

@media (max-width: 1100px) {
	.su-footer__cols {
		grid-template-columns: repeat(3, 1fr);
	}

	.su-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.su-footer__cols {
		grid-template-columns: 1fr 1fr;
	}

	.su-footer__contact {
		grid-column: 1 / -1;
	}
}

/* ---------- Pakiety usług ---------- */

.su-packages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	align-items: stretch;
	margin-block: 1.5rem;
}

.su-package {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 24px;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	background: #fff;
}

.su-package.is-featured {
	border: 2px solid var(--wp--preset--color--web);
	box-shadow: 0 6px 0 var(--wp--preset--color--web-dark);
}

.su-package :is(h3, p, ul) {
	margin: 0;
}

.su-package__flag {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--wp--preset--color--web-accent);
	color: var(--wp--preset--color--web-dark);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.su-package__name {
	font-size: 1.5rem;
}

.su-package__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
}

.su-package__from,
.su-package__unit,
.su-package__term,
.su-package__without {
	color: var(--su-muted);
	font-size: 0.875rem;
}

.su-package__amount {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.su-package__amount--quote {
	font-size: 1.25rem;
}

.su-package__list {
	font-size: 1.0625rem;
}

.su-package__cta {
	margin-top: auto;
	align-self: flex-start;
	text-decoration: none;
}

/* ---------- Konfigurator pakietu (su/konfigurator) ---------- */

.su-config {
	margin-block: 1.5rem;
}

/* Fokus po przycisku z karty pakietu: kontener kreatora dostaje go programowo, bez ramki. */
.su-config:focus {
	outline: none;
}

.su-config__presets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.su-config__presets-label {
	color: var(--su-muted);
	font-size: 0.875rem;
}

.su-config__preset {
	padding: 8px 14px;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.su-config__preset[aria-pressed="true"] {
	background: var(--wp--preset--color--ink);
	color: #fff;
}

.su-config__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
	gap: 24px;
	align-items: start;
}

.su-config__items {
	display: grid;
	gap: 20px;
}

.su-config__group {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.su-config__legend {
	margin-bottom: 4px;
	padding: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--su-muted);
}

.su-config__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 4px 12px;
	align-items: start;
	padding: 14px 16px;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius-sm);
	background: #fff;
	cursor: pointer;
}

.su-config__item:has(input:checked):not(.is-required, .su-config__item--none) {
	border-color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}

.su-config__item--none {
	padding-block: 10px;
	border-style: dashed;
}

.su-config__item.is-required {
	cursor: default;
	background: var(--wp--preset--color--bg-2);
}

.su-config__item input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--wp--preset--color--ink);
}

.su-config__text {
	display: grid;
	gap: 2px;
}

.su-config__name {
	font-weight: 600;
}

.su-config__tag {
	justify-self: start;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--su-muted);
}

.su-config__desc {
	color: var(--su-muted);
	font-size: 0.875rem;
}

.su-config__price {
	color: var(--su-muted);
	font-size: 0.875rem;
	text-align: right;
	white-space: nowrap;
}

.su-config__summary {
	position: sticky;
	top: calc(var(--su-nav-h) + 16px);
	display: grid;
	gap: 12px;
	padding: 22px 20px;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	background: #fff;
}

.su-config__summary :is(h3, p) {
	margin: 0;
}

.su-config__sum-title {
	font-size: 1.25rem;
}

.su-config__match {
	font-weight: 600;
}

.su-config__total {
	display: grid;
	gap: 4px;
}

.su-config__amount strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	letter-spacing: -0.02em;
}

.su-config__amount--quote {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 700;
}

.su-config__from,
.su-config__unit,
.su-config__note,
.su-config__quote {
	color: var(--su-muted);
	font-size: 0.875rem;
}

.su-config__total :is(.su-config__hint, .su-config__quote) {
	margin: 4px 0 0;
}

/* Podpowiedź „pakiet za tę cenę ma też…” z przyciskiem wyboru pakietu. */
.su-config__hint {
	padding: 8px 10px;
	border-radius: var(--su-radius-sm);
	background: var(--wp--preset--color--bg-2);
	font-size: 0.875rem;
}

.su-config__hint-btn {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.su-config__cta {
	justify-self: start;
	text-decoration: none;
}

.su-config__cta[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}

@media (max-width: 781px) {
	.su-config__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Na telefonie podsumowanie przykleja się do dołu ekranu: cena widoczna przy przewijaniu listy. */
	.su-config__summary {
		position: sticky;
		top: auto;
		bottom: 0;
		gap: 8px;
		padding: 14px 16px;
		box-shadow: 0 -6px 18px rgba(18, 19, 26, 0.12);
	}

	.su-config__note,
	.su-config__sum-title {
		display: none;
	}

	.su-config__item {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.su-config__price {
		grid-column: 2;
		text-align: left;
	}
}

.su-world-web .su-config__summary {
	border: 3px solid var(--wp--preset--color--web-dark);
	border-radius: 14px;
	box-shadow: 6px 6px 0 var(--wp--preset--color--web-dark);
}

.su-world-web .su-config__item:has(input:checked):not(.is-required, .su-config__item--none) {
	--su-muted: #3f3d4d; /* jak w wyróżnionym pakiecie: kontrast na żółtym */
	border-color: var(--wp--preset--color--web-dark);
	box-shadow: 3px 3px 0 var(--wp--preset--color--web-dark);
	background: var(--wp--preset--color--web-accent);
}

/* ---------- Karty usług (hub /web/) ---------- */

.su-services {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
	margin-block: 1.5rem;
}

.su-service {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	background: #fff;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.su-service:hover {
	border-color: var(--wp--preset--color--web);
	transform: translateY(-2px);
}

.su-service :is(h3, p) {
	margin: 0;
}

.su-service__name {
	font-size: 1.25rem;
}

.su-service__name a {
	color: inherit;
	text-decoration: none;
}

/* Cała karta klikalna. */
.su-service__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.su-service__desc {
	color: var(--su-muted);
	font-size: 1.0625rem;
}

.su-service__price {
	margin-top: auto;
}

.su-service__price strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
}

.su-service__more {
	color: var(--wp--preset--color--web);
	font-weight: 600;
	font-size: 1rem;
}

/* ---------- Formularze (brief, skan GhostSite) ---------- */

.su-form {
	display: grid;
	gap: 14px;
	max-width: 640px;
}

.su-form label {
	display: grid;
	gap: 6px;
	font-size: 1rem;
	font-weight: 500;
}

.su-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 600px) {
	.su-form__row {
		grid-template-columns: 1fr;
	}
}

.su-form :is(input[type="text"], input[type="email"], input[type="url"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius-sm);
	background: #fff;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-weight: 400;
}

.su-form :is(input, select, textarea):focus {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 1px;
	border-color: transparent;
}

.su-form [aria-invalid="true"] {
	border-color: #c0392b;
}

.su-form__opt,
.su-scan__note {
	color: var(--su-muted);
	font-weight: 400;
	font-size: 0.875rem;
}

.su-form__info {
	margin: 0;
	color: var(--su-muted);
	font-size: 0.875rem;
}

.su-form__err {
	color: #c0392b;
	font-size: 12px;
	font-weight: 500;
}

.su-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.su-form button {
	justify-self: start;
	min-height: 48px;
	padding-inline: 1.5rem;
	cursor: pointer;
}

@media (max-width: 600px) {
	.su-form button {
		justify-self: stretch;
	}
}

.su-form button:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* Pusty status zostaje w drzewie dostępności (role="status"), inaczej czytnik nie odczyta komunikatu. */
.su-form__status:empty {
	position: absolute; /* poza siatką .su-form (bez odstępu gap), ale w drzewie dostępności */
	margin: 0;
	padding: 0;
	border: 0;
}

.su-form__status.is-ok {
	color: #1e7a45;
	font-weight: 500;
}

.su-form__status.is-error {
	color: #c0392b;
	font-weight: 500;
}

.su-scan__row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.su-scan__row input[type="text"] {
	flex: 1 1 240px;
	width: auto;
}

.su-scan__label {
	font-weight: 600;
}

/* ---------- Świat WebUmbrella (strony /web/): pop-art jak kolumna Web w hero ---------- */

.su-webband {
	background-color: var(--wp--preset--color--web);
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.4px, transparent 1.4px);
	background-size: 15px 15px;
	color: #fff;
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.su-webband__inner {
	gap: 24px;
}

.su-webband__tag {
	margin: 0 0 10px;
	align-self: flex-start;
	padding: 6px 12px;
	border-radius: 4px;
	background: var(--wp--preset--color--web-dark);
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.su-webband__tag a {
	/* Niebieski linków (#3b63d8) na ciemnym tle dawał 3,39:1; ten 5,14:1 do tła i 3,5:1 do białego tekstu obok. */
	color: #5b84f0;
	text-decoration: none;
}

/* Znak WebUmbrella jak w kolumnie Web w hero: „Web” biały, „Umbrella” żółty. */
.su-webband .su-mk-a {
	color: #fff;
}

.su-webband .su-mk-b {
	color: var(--wp--preset--color--web-accent);
}

.su-webband__title {
	margin: 0;
	max-width: 22ch;
	font-family: var(--wp--preset--font-family--web);
	font-weight: 800;
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #fff;
}

.su-webband__mascot {
	flex: none;
	width: clamp(120px, 15vw, 190px);
	height: auto;
	filter: drop-shadow(0 6px 0 rgba(23, 22, 28, 0.35));
}

@media (max-width: 600px) {
	.su-webband__mascot {
		display: none;
	}
}

/* Nagłówki treści w świecie Web: Archivo, wersaliki, żółte podkreślenie. */
.su-world-web main .wp-block-post-content > h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--web);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--web-accent);
	text-decoration-thickness: 0.18em;
	text-underline-offset: 0.12em;
}

/* Naklejki: czarny kontur i przesunięty cień jak odznaka „Ceny od razu”. */
.su-world-web :is(.su-service, .su-package) {
	border: 3px solid var(--wp--preset--color--web-dark);
	border-radius: 14px;
	box-shadow: 6px 6px 0 var(--wp--preset--color--web-dark);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.su-world-web :is(.su-service, .su-package):hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--wp--preset--color--web-dark);
	border-color: var(--wp--preset--color--web-dark);
}

.su-world-web .su-package.is-featured {
	/* Szary na żółtym: #5d5b6e dawał 4,34:1, #3f3d4d daje 6,97:1. */
	--su-muted: #3f3d4d;
	background: var(--wp--preset--color--web-accent);
}

.su-world-web .su-package.is-featured .su-package__flag {
	background: var(--wp--preset--color--web-dark);
	color: #fff;
}

.su-world-web :is(.su-service__name, .su-package__name) {
	font-family: var(--wp--preset--font-family--web);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.su-world-web .su-service__price,
.su-world-web .su-package__price {
	align-self: flex-start;
}

.su-world-web .su-service__price {
	padding: 4px 10px;
	border: 2px solid var(--wp--preset--color--web-dark);
	border-radius: 6px;
	background: var(--wp--preset--color--web-accent);
	font-weight: 700;
	transform: rotate(-2deg);
}

.su-world-web .su-service__more {
	color: var(--wp--preset--color--web);
}

.su-world-web main .wp-element-button,
.su-world-web .su-package__cta,
.su-scan__btn {
	border: 3px solid var(--wp--preset--color--web-dark);
	border-radius: 10px;
	background: var(--wp--preset--color--web-accent);
	box-shadow: 4px 4px 0 var(--wp--preset--color--web-dark);
	color: var(--wp--preset--color--web-dark);
	font-weight: 800;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.su-world-web main .wp-element-button:hover,
.su-world-web .su-package__cta:hover,
.su-scan__btn:hover {
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 var(--wp--preset--color--web-dark);
	background: var(--wp--preset--color--web-accent);
	color: var(--wp--preset--color--web-dark);
}

.su-world-web .su-package.is-featured .su-package__cta {
	background: #fff;
}

/* ---------- Realizacje ---------- */

.su-caseband__title {
	max-width: 24ch;
}

.su-caseband__lead {
	margin: 14px 0 0;
	max-width: 60ch;
	font-family: var(--wp--preset--font-family--web);
	font-weight: 800;
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	text-transform: uppercase;
	color: var(--wp--preset--color--web-accent);
}

.su-caseband__services {
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.su-caseband__services a {
	color: #fff;
	text-decoration: none;
}

/* Zrzut strony w ramce przeglądarki (naklejka). */
.su-browser {
	margin-top: 2rem;
	position: relative;
	z-index: 2;
	border: 3px solid var(--wp--preset--color--web-dark);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 8px 8px 0 var(--wp--preset--color--web-dark);
	padding-top: 30px;
}

.su-browser::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 30px;
	border-bottom: 3px solid var(--wp--preset--color--web-dark);
	background:
		radial-gradient(circle at 18px 50%, #17161c 5px, transparent 6px),
		radial-gradient(circle at 36px 50%, #17161c 5px, transparent 6px),
		radial-gradient(circle at 54px 50%, #17161c 5px, transparent 6px),
		var(--wp--preset--color--web-accent);
}

.su-browser img {
	display: block;
	width: 100%;
	height: auto;
}

/* Wyniki „przed → po”. */
.su-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-block: 1.5rem 2.5rem;
}

.su-stat {
	padding: 20px 22px;
	border: 3px solid var(--wp--preset--color--web-dark);
	border-radius: 14px;
	background: #fff;
	box-shadow: 6px 6px 0 var(--wp--preset--color--web-dark);
}

.su-stat:nth-child(3n + 1) {
	background: var(--wp--preset--color--web-accent);
}

.su-stat :is(p) {
	margin: 0;
}

.su-stat__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.su-stat__value {
	margin-top: 8px !important;
	font-family: var(--wp--preset--font-family--web);
	font-weight: 800;
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.su-stat__period {
	margin-top: 6px !important;
	color: var(--su-muted);
	font-size: 12px;
}

.su-stat:nth-child(3n + 1) .su-stat__period {
	color: var(--wp--preset--color--web-dark);
}

.su-casebrief {
	gap: 18px;
	margin-block: 2.5rem 1rem;
}

.su-casebrief > .wp-block-column {
	padding: 22px;
	border: 2px solid var(--wp--preset--color--web-dark);
	border-radius: 14px;
}

.su-casebrief :is(h2, h3) {
	margin-top: 0;
	font-size: 1rem;
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.su-case-cta {
	margin-block: 3rem 1rem;
	padding: clamp(24px, 4vw, 40px);
	border: 3px solid var(--wp--preset--color--web-dark);
	border-radius: 18px;
	background-color: var(--wp--preset--color--web);
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.4px, transparent 1.4px);
	background-size: 15px 15px;
	box-shadow: 8px 8px 0 var(--wp--preset--color--web-dark);
	color: #fff;
}

.su-case-cta h2 {
	margin-top: 0;
	color: var(--wp--preset--color--web-accent);
}

/* Lista realizacji. */
.su-casecard {
	height: 100%;
	gap: 10px;
	padding: 16px 16px 22px;
	border: 3px solid var(--wp--preset--color--web-dark);
	border-radius: 14px;
	background: #fff;
	box-shadow: 6px 6px 0 var(--wp--preset--color--web-dark);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.su-casecard:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--wp--preset--color--web-dark);
}

.su-casecard__img img {
	border: 2px solid var(--wp--preset--color--web-dark);
	border-radius: 8px;
}

.su-casecard__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--web);
	font-weight: 800;
	font-size: 1.5rem;
	text-transform: uppercase;
}

.su-casecard__title a {
	color: inherit;
	text-decoration: none;
}

.su-casecard__stat {
	margin: 0;
	padding: 6px 10px;
	align-self: flex-start;
	border: 2px solid var(--wp--preset--color--web-dark);
	border-radius: 6px;
	background: var(--wp--preset--color--web-accent);
	font-weight: 700;
	font-size: 1rem;
}

/* Strona główna: karty realizacji ze zrzutem w karuzeli (site.js), na każdej szerokości. */
.su-cases--home .su-casecard__title {
	font-size: 1.25rem;
}

/* Cień o ok. 30% cieńszy niż w archiwum realizacji. Cała karta klikalna przez link tytułu
   (jeden przystanek Tab na kartę, obrazek bez osobnego linku). */
.su-cases--home .su-casecard {
	position: relative;
	box-shadow: 4px 4px 0 var(--wp--preset--color--web-dark);
}

.su-cases--home .su-casecard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.su-cases--home .su-casecard:hover {
	box-shadow: 6px 6px 0 var(--wp--preset--color--web-dark);
}

/* Karuzela na wszystkich szerokościach: jedna linia przewijana w bok, od lewej krawędzi ekranu
   (margines jak treść). Na telefonie karta na ok. 82% szerokości, widać fragment następnej. */
.wp-block-query .su-cases--home {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 6px 16px 22px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 16px;
	scrollbar-width: none;
}

/* Bez paska przewijania (Marek, 2026-10-20): nawigacja kropkami, palcem i trackpadem. */
.wp-block-query .su-cases--home::-webkit-scrollbar {
	display: none;
}

.su-cases--home > li {
	flex: 0 0 clamp(300px, 26vw, 360px);
	scroll-snap-align: start;
}

.su-carousel__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2px;
	margin-top: 4px;
}

.su-carousel__dot,
.su-carousel__pause {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--web-dark);
	cursor: pointer;
}

.su-carousel__dot::before {
	content: "";
	width: 10px;
	height: 10px;
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--web-dark);
	border-radius: 50%;
	background: #fff;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.su-carousel__dot:hover::before {
	background: var(--wp--preset--color--line);
}

.su-carousel__dot.is-active::before {
	transform: scale(1.4);
	background: var(--wp--preset--color--web-dark);
}

/* Ujemny margines po prawej równa szerokość przycisku, więc same kropki zostają na środku. */
.su-carousel__pause {
	margin-left: 8px;
	margin-right: -32px;
	font-size: 11px;
	line-height: 1;
}

.su-carousel__pause:hover {
	background: var(--wp--preset--color--line);
}

.su-carousel__dot:focus-visible,
.su-carousel__pause:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 1px;
}

@media (max-width: 820px) {
	.su-cases--home > li {
		flex-basis: 82vw;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-query .su-cases--home {
		scroll-behavior: smooth;
	}
}

/* Realizacja z własną galerią: obrazek wyróżniający (zrzut) nie powtarza się nad treścią. */
.wp-block-post-featured-image.su-browser:has(~ .wp-block-post-content :is(.su-przedpo, .su-zrzuty__wide)) {
	display: none;
}

/* Realizacja: notka o stanie projektu (np. przed startem). */
.su-case-note {
	display: inline-block;
	margin-block: 2rem 0;
	padding: 8px 14px;
	border: 2px dashed var(--wp--preset--color--web-dark);
	border-radius: 10px;
	background: var(--wp--preset--color--bg-2);
	font-size: 1.0625rem;
}

/* Przed i po: dwa zrzuty obok siebie, na telefonie jeden pod drugim. */
.su-przedpo {
	gap: 28px;
	margin-block: 1rem 2.5rem;
}

.su-przedpo__label {
	display: inline-block;
	margin: 0 0 -1rem;
	padding: 4px 12px;
	border: 2px solid var(--wp--preset--color--web-dark);
	border-radius: 6px;
	background: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.su-przedpo__col--po .su-przedpo__label {
	background: var(--wp--preset--color--web-accent);
}

.su-przedpo .su-browser {
	margin-top: 1.5rem;
}

/* Zrzuty: szerokie z komputera w ramce przeglądarki, obok węższy z telefonu. */
.su-zrzuty {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	gap: 32px;
	align-items: start;
	margin-block: 1rem 2.5rem;
}

.su-zrzuty__wide {
	display: grid;
	gap: 28px;
}

.su-zrzuty__wide > .su-browser {
	margin-top: 0;
}

/* Sam zrzut z telefonu (bez szerokich): jedna wąska kolumna. */
.su-zrzuty--telefon {
	grid-template-columns: 240px;
}

.su-browser figcaption,
.su-phone figcaption {
	margin: 0;
	padding: 10px 14px;
	border-top: 3px solid var(--wp--preset--color--web-dark);
	background: #fff;
	color: var(--su-muted);
	font-size: 12px;
}

.su-phone {
	margin: 0;
	padding: 10px;
	border: 3px solid var(--wp--preset--color--web-dark);
	border-radius: 28px;
	background: var(--wp--preset--color--web-dark);
	box-shadow: 8px 8px 0 var(--wp--preset--color--web-accent);
}

.su-phone img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
}

.su-phone figcaption {
	margin-top: 10px;
	border: 0;
	border-radius: 0 0 16px 16px;
	text-align: center;
}

@media (max-width: 780px) {
	.su-zrzuty {
		grid-template-columns: 1fr;
	}

	.su-zrzuty .su-phone {
		max-width: 240px;
		justify-self: center;
	}
}

/* ---------- Skan GhostSite (naklejka w stylu Web) ---------- */

.su-scanbox {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 24px;
	margin-block: 2.5rem;
	padding: clamp(24px, 4vw, 40px);
	border: 3px solid var(--wp--preset--color--web-dark);
	border-radius: 18px;
	background-color: var(--wp--preset--color--web);
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.4px, transparent 1.4px);
	background-size: 15px 15px;
	box-shadow: 8px 8px 0 var(--wp--preset--color--web-dark);
	color: #fff;
}

.su-scanbox__card {
	display: grid;
	gap: 16px;
	max-width: 640px;
}

.su-scanbox :is(p, h2, ul, ol) {
	margin: 0;
}

.su-scanbox__tag {
	justify-self: start;
	padding: 6px 12px;
	border-radius: 4px;
	background: var(--wp--preset--color--web-dark);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.su-scanbox__title {
	font-family: var(--wp--preset--font-family--web);
	font-weight: 800;
	font-size: clamp(1.8rem, 3.4vw, 2.8rem);
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--web-accent);
}

.su-scanbox__lead {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.92);
}

.su-scanbox__checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 20px;
	padding: 0;
	list-style: none;
	font-size: 1.0625rem;
}

.su-scanbox__checks li {
	position: relative;
	padding-left: 26px;
}

.su-scanbox__checks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 1px;
	width: 18px;
	height: 18px;
	display: grid;
	place-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--web-accent);
	color: var(--wp--preset--color--web-dark);
	font-size: 12px;
	font-weight: 800;
}

.su-scanbox .su-scan__row input[type="text"] {
	border: 3px solid var(--wp--preset--color--web-dark);
	border-radius: 10px;
	padding: 0.8rem 1rem;
	font-size: 1.0625rem;
}

.su-scan__btn {
	padding: 0.8rem 1.3rem;
	font-size: 1rem;
	cursor: pointer;
}

.su-scanbox__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	padding: 0;
	list-style: none;
	counter-reset: su-step;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.85);
}

.su-scanbox__steps li {
	counter-increment: su-step;
	padding: 12px 14px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 10px;
}

.su-scanbox__steps li::before {
	content: counter(su-step);
	display: block;
	margin-bottom: 4px;
	font-family: var(--wp--preset--font-family--web);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--wp--preset--color--web-accent);
}

.su-scanbox__steps strong {
	color: #fff;
}

.su-scanbox__steps a {
	color: var(--wp--preset--color--web-accent);
}

.su-scanbox__mascot {
	align-self: start;
	width: 200px;
	height: auto;
	filter: drop-shadow(0 6px 0 rgba(23, 22, 28, 0.35));
}

@media (max-width: 760px) {
	.su-scanbox {
		grid-template-columns: 1fr;
	}

	.su-scanbox__mascot {
		display: none;
	}

	.su-scanbox__checks,
	.su-scanbox__steps {
		grid-template-columns: 1fr;
	}
}

/* ---------- CookieYes ---------- */

/* Kategorii Funkcjonalne, Wydajnościowe i Reklamowe nie używamy (scripts/cookieyes.php).
   Wersja wtyczki bez konta w chmurze pokazuje je mimo visibility=0, więc chowamy je tu. */
.cky-accordion:has(#ckyDetailCategoryfunctional),
.cky-accordion:has(#ckyDetailCategoryperformance),
.cky-accordion:has(#ckyDetailCategoryadvertisement) {
	display: none;
}

/* ---------- Ruch ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Światy AIUmbrella i TrustedUmbrella (strony /ai/, /trust/): pas jak kolumna w hero ---------- */

.su-band {
	color: #fff;
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.su-band--ai {
	background-color: var(--wp--preset--color--ai);
	background-image: radial-gradient(rgba(140, 240, 168, 0.2) 1.4px, transparent 1.4px);
	background-size: 20px 20px;
}

.su-band--trust {
	background-color: var(--wp--preset--color--trust);
	background-image: radial-gradient(rgba(79, 211, 230, 0.2) 1.4px, transparent 1.4px);
	background-size: 18px 18px;
}

.su-band__inner {
	gap: 24px;
}

.su-band__tag {
	margin: 0 0 10px;
	align-self: flex-start;
	padding: 6px 12px;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.su-band__tag a {
	color: inherit;
	text-decoration: none;
}

/* Etykieta jak w hero: AI na zielonej plakietce, Trusted bez tła, cyjanem. */
.su-band--ai .su-band__tag {
	background: var(--wp--preset--color--ai-accent);
	color: #12331d;
}

.su-band--trust .su-band__tag {
	padding-left: 0;
	color: #7fd4de;
	letter-spacing: 0.1em;
}

.su-band__tag .su-mk-a,
.su-band__tag .su-mk-b {
	color: inherit;
}

.su-band__title {
	margin: 0;
	max-width: 26ch;
	font-size: clamp(2rem, 4.2vw, 3.2rem);
	line-height: 1.04;
	color: #fff;
}

.su-band--ai .su-band__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.su-band--trust .su-band__title {
	font-family: var(--wp--preset--font-family--trust);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.su-band__mascot {
	flex: none;
}

.su-band__mascot :is(.su-ai-robot, .su-owl) {
	display: block;
	width: clamp(120px, 14vw, 170px);
}

@media (max-width: 600px) {
	.su-band__mascot {
		display: none;
	}
}

/* Nagłówki treści: font znaku parasola, podkreślenie w kolorze akcentu. */
:is(.su-world-ai, .su-world-trust) main .wp-block-post-content > h2.wp-block-heading {
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	text-decoration: underline;
	/* Ciągła kreska pod całym nagłówkiem (bez przerw przy literach y, j, p). */
	text-decoration-skip-ink: none;
	text-decoration-thickness: 0.14em;
	text-underline-offset: 0.14em;
}

.su-world-ai main .wp-block-post-content > h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--heading);
	text-decoration-color: var(--wp--preset--color--ai-accent);
}

.su-world-trust main .wp-block-post-content > h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--trust);
	font-weight: 600;
	text-decoration-color: var(--wp--preset--color--trust-accent);
}

/* Karty zakresu (siatka is-style-card): pasek akcentu u góry. */
.su-zakres {
	gap: 20px;
}

/* Pięć kart: na szerokim ekranie 3 + 2 (dwie ostatnie szersze), bez pustej komórki. */
@media (min-width: 1000px) {
	.su-zakres {
		grid-template-columns: repeat(6, 1fr) !important;
	}

	.su-zakres > * {
		grid-column: span 2;
	}

	.su-zakres > :nth-child(4):nth-last-child(2),
	.su-zakres > :nth-child(5):last-child {
		grid-column: span 3;
	}
}

.su-zakres h3 {
	/* Kotwice ze stopki (/ai/#..., /trust/#...): nagłówek strony jest przyklejony, więc zapas na górze. */
	scroll-margin-top: 96px;
	margin-top: 0;
	font-size: 1.25rem;
}

.su-world-ai {
	--su-accent: #2f9e56;
}

.su-world-trust {
	--su-accent: #1f9fb0;
}

.su-world-trust .su-zakres h3 {
	font-family: var(--wp--preset--font-family--trust);
	font-weight: 600;
}

.su-world-ai main .wp-element-button,
.su-world-trust main .wp-element-button {
	border-radius: 10px;
	color: #fff;
	font-weight: 700;
}

.su-world-ai main .wp-element-button {
	background: var(--wp--preset--color--ai);
}

.su-world-trust main .wp-element-button {
	background: var(--wp--preset--color--trust);
}

.su-world-ai main .wp-element-button:hover {
	background: var(--wp--preset--color--ai-accent);
	color: #12331d;
}

.su-world-trust main .wp-element-button:hover {
	background: var(--wp--preset--color--trust-accent);
	color: #0a2529;
}

/* Skala typografii (przegląd 2026-10-20): 12 etykiety, 14 drobny tekst i nawigacja, 16 etykiety
   formularzy i dopiski, 17 tekst (preset medium), 20, 24, 32, nagłówki w clamp(). */

/* ---------- Strony wspólne firmy (szablon page.html, body .su-world-su) ----------
   Kontakt, O nas, polityki: ciemny pas jak nagłówek i stopka (kolor night), treść na białym. */

.su-band--su {
	background-color: var(--wp--preset--color--night);
	background-image: radial-gradient(rgba(111, 155, 255, 0.14) 1.4px, transparent 1.4px);
	background-size: 18px 18px;
}

.su-band--su .su-band__tag {
	padding-left: 0;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0.1em;
}

.su-band--su .su-band__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.su-world-su .su-page {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

/* Tekst w szerokości do czytania (72 znaki), wyrównany do lewej krawędzi pasa z tytułem.
   Układy (kontakt, kafelki) idą na pełne 1200 px jako alignwide. */
.su-world-su .su-page > :where(p, h2, h3, h4, ul, ol, .wp-block-group:not(.alignwide):not(.alignfull)) {
	max-width: 72ch !important;
	margin-left: max(0px, calc((100% - 1200px) / 2)) !important;
}

.su-world-su .su-page > h2.wp-block-heading {
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	letter-spacing: -0.01em;
}

.su-world-su .su-page > :first-child {
	margin-top: 0;
}

/* Linki w treści: kolor tekstu, akcent w podkreśleniu (jeden niebieski: blue). */
.su-world-su .su-page :where(p, li) a:not([class]) {
	color: var(--wp--preset--color--ink);
	text-decoration-color: var(--wp--preset--color--blue);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.su-world-su .su-page :where(p, li) a:not([class]):hover {
	color: var(--wp--preset--color--blue);
}

/* Kontakt: kafelki sposobów kontaktu i formularz w karcie. Jedna ramka (line), bez cieni. */
.su-kontakt {
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.su-kafle {
	display: grid;
	gap: 12px;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.su-kafel {
	display: grid;
	grid-template-columns: 44px 1fr;
	column-gap: 14px;
	align-items: center;
	padding: 16px 18px;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius-sm);
	background: #fff;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

a.su-kafel:hover {
	border-color: var(--wp--preset--color--blue);
	background: var(--wp--preset--color--bg-2);
}

.su-kafel__ico {
	grid-row: span 3;
	align-self: center;
	box-sizing: content-box;
	width: 22px;
	height: 22px;
	padding: 11px;
	border-radius: 50%;
	background: var(--wp--preset--color--bg-2);
	color: var(--wp--preset--color--blue);
}

.su-kafel__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--su-muted);
}

.su-kafel__value {
	font-weight: 600;
	font-size: 1.0625rem;
	overflow-wrap: break-word;
}

.su-kafel__note {
	font-size: 0.875rem;
	color: var(--su-muted);
}

.su-kontakt__formularz {
	padding: clamp(20px, 3vw, 36px);
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	background: var(--wp--preset--color--bg-2);
}

.su-kontakt__formularz .su-form {
	max-width: none;
}

/* O nas: założyciele (karty z ramką, bez cieni) i trzy obszary w kolorach światów parasoli. */
.su-world-su .su-page > :where(.su-osoby, .su-obszary, .su-zalozyciele) {
	max-width: 1200px !important;
}

.su-osoby,
.su-obszary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin-block: 1rem 0;
	padding: 0;
	list-style: none;
}

.su-osoba {
	display: grid;
	gap: 4px;
	padding: 24px;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
}

.su-osoba__imie {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
}

.su-osoba__rola {
	margin-bottom: 8px;
	color: var(--su-muted);
	font-size: 0.875rem;
}

.su-obszar {
	display: grid;
	gap: 6px;
	min-height: 150px;
	align-content: end;
	padding: 24px;
	border-radius: var(--su-radius);
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	background-size: 16px 16px;
	transition: transform 0.2s ease;
}

.su-obszar:hover {
	transform: translateY(-2px);
}

.su-obszar__znak {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
}

.su-obszar__strz {
	margin-top: 8px;
	font-size: 1.25rem;
}

.su-obszar--web {
	color: #fff; /* kontrast na fiolecie: 0.82 bieli dawało 4,34:1 */
	background-color: var(--wp--preset--color--web);
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.4px, transparent 1.4px);
}

.su-obszar--web .su-obszar__znak {
	font-family: var(--wp--preset--font-family--web);
	text-transform: uppercase;
}

.su-obszar--web .su-mk-a {
	color: #fff;
}

.su-obszar--web :is(.su-mk-b, .su-obszar__strz) {
	color: var(--wp--preset--color--web-accent);
}

.su-obszar--ai {
	background-color: var(--wp--preset--color--ai);
	background-image: radial-gradient(rgba(140, 240, 168, 0.2) 1.4px, transparent 1.4px);
}

.su-obszar--ai .su-obszar__znak {
	font-family: var(--wp--preset--font-family--heading);
}

.su-obszar--ai :is(.su-mk-a, .su-obszar__strz) {
	color: var(--wp--preset--color--ai-accent);
}

.su-obszar--ai .su-mk-b {
	color: #fff;
}

.su-obszar--trust {
	background-color: var(--wp--preset--color--trust);
	background-image: radial-gradient(rgba(79, 211, 230, 0.2) 1.4px, transparent 1.4px);
}

.su-obszar--trust .su-obszar__znak {
	font-family: var(--wp--preset--font-family--trust);
	font-weight: 600;
}

.su-obszar--trust .su-mk-a {
	color: #fff;
}

.su-obszar--trust :is(.su-mk-b, .su-obszar__strz) {
	color: var(--wp--preset--color--trust-accent);
}

@media (max-width: 600px) {
	.su-obszar {
		min-height: 0;
	}
}

/* ---------- Kroki, pytania i pas wezwania (huby i podstrony usług) ---------- */

.su-kroki {
	counter-reset: su-krok;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	padding: 0;
	list-style: none;
}

/* Sześć kroków (np. opieka): 3 + 3 zamiast 5 + 1 z wąskimi kolumnami. */
@media (min-width: 900px) {
	.su-kroki:has(> li:nth-child(6):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.su-kroki > li {
	counter-increment: su-krok;
	position: relative;
	padding: 56px 20px 20px;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	background: #fff;
	line-height: 1.5;
}

.su-kroki > li::before {
	content: counter(su-krok);
	position: absolute;
	top: 18px;
	left: 20px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--su-accent, var(--wp--preset--color--blue));
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 600;
}

.su-kroki > li strong {
	display: block;
	margin-bottom: 4px;
	font-size: 1.0625rem;
}

.su-world-web .su-kroki > li::before {
	background: var(--wp--preset--color--web);
}

.su-faq {
	margin-block: 0 !important;
	border-bottom: 1px solid var(--su-line);
}

.wp-block-post-content > .su-faq:first-of-type,
h2 + .su-faq {
	border-top: 1px solid var(--su-line);
}

.su-faq > summary {
	position: relative;
	padding: 18px 40px 18px 0;
	font-weight: 600;
	font-size: 1.0625rem;
	cursor: pointer;
	list-style: none;
}

.su-faq > summary::-webkit-details-marker {
	display: none;
}

.su-faq > summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--su-accent, var(--wp--preset--color--blue));
	transition: transform 0.2s ease;
}

.su-faq[open] > summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.su-faq > p {
	margin: 0 0 18px;
	max-width: 72ch;
	color: var(--su-muted);
}

.su-cta {
	margin-block: 3rem 1rem;
	padding: clamp(24px, 4vw, 44px);
	border-radius: var(--su-radius);
	background-color: var(--wp--preset--color--night);
	background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.4px, transparent 1.4px);
	background-size: 18px 18px;
	color: rgba(255, 255, 255, 0.78);
}

.su-cta h2.wp-block-heading {
	margin-top: 0;
	color: #fff;
	text-decoration: none !important;
}

.su-world-web .su-cta {
	background-color: var(--wp--preset--color--web);
	color: #fff; /* kontrast na fiolecie: 0.78 bieli dawało 4,07:1 */
}

.su-world-web .su-cta h2.wp-block-heading {
	color: var(--wp--preset--color--web-accent);
}

.su-world-ai .su-cta {
	background-color: var(--wp--preset--color--ai);
}

.su-world-trust .su-cta {
	background-color: var(--wp--preset--color--trust);
}

/* Pas wezwania w światach Trust i AI: tło rysowane zamiast kropek i siatki. Na /trust/ giloszowanie
   (niżej), na /ai/ linie EEG z canvasu (ai.js, ai.css). */
.su-world-trust .su-cta,
.su-world-ai .su-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-image: none;
}

/* Trust: „Co już robimy” zaraz pod wstępem, trzy dowody z akcentem świata. */
.su-world-trust .su-dowody {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
	padding: 0;
	list-style: none;
}

.su-world-trust .su-dowody li {
	padding: 1rem 1.1rem 1rem 1.25rem;
	border-left: 4px solid var(--wp--preset--color--trust-accent);
	border-radius: 0 var(--su-radius) var(--su-radius) 0;
	background: #eef8f9;
}

.su-world-trust .su-dowody strong {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--trust);
}

/* Trust: giloszowanie jak na banknotach i certyfikatach. ::before to wstęgi fal przy krawędziach
   (assets/img/gilosz.svg), ::after rozeta po prawej (gilosz-rozeta.svg), która obraca się bardzo wolno
   (pełny obrót w 4 min, samo transform); przy prefers-reduced-motion stoi. Kolor z maski, krycie 16%:
   tekst ma kontrast AA nawet tam, gdzie wzór jest najgęstszy. */
.su-world-trust .su-cta::before,
.su-world-trust .su-cta::after {
	content: "";
	position: absolute;
	z-index: -1;
	background-color: var(--wp--preset--color--trust-accent);
	opacity: 0.16;
	pointer-events: none;
}

.su-world-trust .su-cta::before {
	inset: 0;
	-webkit-mask: url("../img/gilosz.svg") no-repeat right center / 1200px 260px;
	mask: url("../img/gilosz.svg") no-repeat right center / 1200px 260px;
}

.su-world-trust .su-cta::after {
	top: calc(50% - 150px);
	right: 20px;
	width: 300px;
	height: 300px;
	-webkit-mask: url("../img/gilosz-rozeta.svg") no-repeat center / contain;
	mask: url("../img/gilosz-rozeta.svg") no-repeat center / contain;
	animation: su-gilosz 240s linear infinite;
}

@keyframes su-gilosz {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.su-world-trust .su-cta::after {
		animation: none;
	}
}

.su-world-ai .su-cta .wp-element-button {
	background: var(--wp--preset--color--ai-accent);
	color: #12331d;
}

.su-world-trust .su-cta .wp-element-button {
	background: var(--wp--preset--color--trust-accent);
	color: #0a2529;
}

/* Założyciele: portret jako rysunek ze zdjęcia (pop-art świata Web), zdjęcie po najechaniu
   myszą albo po tapnięciu (przycisk, aria-pressed, site.js). Strona główna: karty z konturem
   i cieniem; /o-nas/: karty z cienką ramką jak reszta stron wspólnych. */
.su-zalozyciele {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 20px;
	margin: 1.5rem 0 1.25rem;
	padding: 0;
	list-style: none;
}

.su-zalozyciel {
	display: grid;
	grid-template-columns: minmax(120px, 34%) 1fr;
	gap: 20px;
	align-items: start;
	padding: 20px;
	border: 3px solid var(--wp--preset--color--web-dark);
	border-radius: 14px;
	background: #fff;
	box-shadow: 4px 4px 0 var(--wp--preset--color--web-dark);
}

.su-zalozyciele--pelny .su-zalozyciel {
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	box-shadow: none;
}

.su-zalozyciel__opis p {
	margin: 0 0 0.5rem;
}

.su-zalozyciel__imie {
	margin: 0 0 2px;
	font-size: 1.25rem;
}

.su-zalozyciel__rola {
	color: var(--su-muted);
	font-size: 0.875rem;
}

.su-portret {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	padding: 0;
	overflow: hidden;
	border: 3px solid var(--wp--preset--color--web-dark);
	border-radius: 10px;
	background: var(--wp--preset--color--web-accent);
	cursor: pointer;
}

.su-portret:focus-visible {
	outline: 3px solid var(--wp--preset--color--blue);
	outline-offset: 3px;
}

.su-portret__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.su-portret__img--foto {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.su-portret[aria-pressed="true"] .su-portret__img--foto {
	opacity: 1;
}

@media (hover: hover) {
	.su-portret:hover .su-portret__img--foto {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.su-portret__img--foto {
		transition: none;
	}
}

/* Telefon: portret nad opisem, nie szerszy niż 240 px. */
@media (max-width: 519px) {
	.su-zalozyciel {
		grid-template-columns: 1fr;
	}

	.su-portret {
		max-width: 240px;
	}
}

/* Polityka cookies: tabele cookies (core/table). Nazwy cookies bez łamania. */
.su-cookies table {
	font-size: var(--wp--preset--font-size--small);
}

.su-cookies th,
.su-cookies td {
	border-color: var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}

.su-cookies td:first-child code {
	white-space: nowrap;
}

/* Telefon: każdy wiersz to karta, etykieta kolumny z data-label (scripts/strony.php). */
@media (max-width: 599px) {
	.su-cookies thead {
		display: none;
	}

	.su-cookies table,
	.su-cookies tbody,
	.su-cookies tr,
	.su-cookies td {
		display: block;
	}

	.su-cookies tr {
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 8px;
		margin-bottom: 0.75rem;
		padding: 0.5rem 0.75rem;
	}

	.su-cookies td {
		border: 0;
		padding: 0.25rem 0;
	}

	.su-cookies td::before {
		color: var(--wp--preset--color--muted);
		content: attr(data-label);
		display: block;
		font-size: 0.75rem;
	}
}