/* ---------- hero ---------- */

.uslugi-plan-hero {
	overflow: hidden;
}

.uslugi-plan-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
}

.uslugi-plan-hero__content {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: clamp(140px, 16vw, 200px) var(--gutter) clamp(var(--space-10), 8vw, var(--space-11));
}

.uslugi-plan-hero__panel {
	display: none;
}

.uslugi-plan-hero__title {
	margin: 0 0 var(--space-4);
	color: var(--color-black);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1;
	letter-spacing: -0.01em;
}

.uslugi-plan-hero__price {
	margin: 0 0 var(--space-6);
	color: var(--color-black);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: clamp(30px, 3.4vw, 42px);
}

.uslugi-plan-hero__price span {
	color: var(--color-neutral-500);
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: 15px;
}

.uslugi-plan-hero__tagline {
	max-width: 52ch;
	margin: 0 0 var(--space-7);
	color: var(--color-neutral-500);
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.6;
}

.uslugi-plan-hero__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: var(--space-5) var(--space-9);
	border: 1px solid var(--color-black);
	color: var(--color-black);
	font-weight: 600;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
}

@media (min-width: 700px) {
	.uslugi-plan-hero__cta {
		display: inline-flex;
		width: auto;
		margin: 0 var(--space-5) 0 0;
	}
}

.uslugi-plan-hero__back {
	display: inline-flex;
	align-items: center;
	margin-top: var(--space-5);
	color: var(--color-neutral-500);
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
}

.uslugi-plan-hero__back:hover,
.uslugi-plan-hero__back:focus-visible {
	color: var(--color-black);
}

@media (min-width: 700px) {
	.uslugi-plan-hero__back {
		margin-top: 0;
		margin-left: var(--space-2);
	}
}

@media (min-width: 1024px) {
	.uslugi-plan-hero {
		min-height: 100vh;
	}

	.uslugi-plan-hero__inner {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
		min-height: 100vh;
	}

	.uslugi-plan-hero__back {
		display: block;
		margin-top: var(--space-6);
		margin-left: 0;
	}

	.uslugi-plan-hero__content {
		max-width: none;
		margin: 0;
		padding: clamp(140px, 12vw, 180px) clamp(var(--space-8), 4vw, var(--space-10)) clamp(var(--space-10), 8vw, var(--space-11)) var(--gutter);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.uslugi-plan-hero__panel {
		position: relative;
		display: flex;
		align-items: center;
		background: var(--color-black);
		overflow: hidden;
	}

	.uslugi-plan-hero__grain {
		position: absolute;
		inset: 0;
		opacity: 0.08;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	}

	.uslugi-plan-hero__for {
		position: relative;
		max-width: 85%;
		padding: clamp(var(--space-8), 5vw, var(--space-10));
	}

	.uslugi-plan-hero__for-intro {
		margin: 0 0 var(--space-6);
		color: var(--color-white);
		font-family: var(--ff-heading);
		font-weight: 700;
		font-size: clamp(20px, 1.8vw, 24px);
		line-height: 1.25;
	}

	.uslugi-plan-hero__for-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.uslugi-plan-hero__for-item {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3);
	}

	.uslugi-plan-hero__for-num {
		flex-shrink: 0;
		padding-top: 0.2em;
		color: rgba(255, 255, 255, 0.35);
		font-family: var(--ff-heading);
		font-weight: 700;
		font-size: 12px;
		letter-spacing: 0.04em;
	}

	.uslugi-plan-hero__for-text {
		color: rgba(255, 255, 255, 0.8);
		font-size: clamp(14px, 1.05vw, 15px);
		line-height: 1.6;
	}

	.uslugi-plan-hero__num {
		position: absolute;
		right: clamp(var(--space-6), 3vw, var(--space-8));
		bottom: clamp(var(--space-6), 3vw, var(--space-8));
		color: rgba(255, 255, 255, 0.06);
		font-family: var(--ff-heading);
		font-weight: 700;
		font-size: clamp(200px, 24vw, 420px);
		line-height: 1;
	}
}

/* ---------- co obejmuje ---------- */

.uslugi-plan-includes {
	background: var(--color-black);
	color: var(--color-white);
	padding: clamp(var(--space-11), 8vw, var(--space-12)) var(--gutter);
}

.uslugi-plan-includes__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.uslugi-plan-includes__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: clamp(var(--space-9), 6vw, var(--space-10));
	padding: var(--space-4) var(--space-7);
	border: 1px solid var(--color-white);
	color: var(--color-white);
	font-weight: 600;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
}

.uslugi-plan-includes__cta::before {
	background: var(--color-white);
}

.uslugi-plan-includes__cta:hover,
.uslugi-plan-includes__cta:focus-visible {
	color: var(--color-black);
}

.uslugi-plan-includes__title {
	margin: 0 0 clamp(var(--space-9), 6vw, var(--space-10));
	color: var(--color-white);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 48px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.uslugi-plan-includes__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.uslugi-plan-includes__item {
	display: flex;
	gap: var(--space-6);
	padding: var(--space-7) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.uslugi-plan-includes__num {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.35);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1;
}

.uslugi-plan-includes__item-title {
	margin: 0 0 var(--space-2);
	color: var(--color-white);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: 19px;
}

.uslugi-plan-includes__item-desc {
	max-width: 60ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 15px;
	line-height: 1.6;
}

.uslugi-plan-includes__more {
	display: inline-flex;
	align-items: center;
	margin-top: var(--space-3);
	padding: 0;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 0.2s var(--ease, ease);
}

.uslugi-plan-includes__more:hover,
.uslugi-plan-includes__more:focus-visible {
	color: var(--color-white);
}

/* ---------- popup techniczny (trigger "Szczegóły techniczne") ---------- */
/* Te same wartości wizualne co dialog widgetu asystenta (assistant.css) — jeden
   spójny wygląd modala w całym motywie. Overlay rgba(0, 0, 0, 0.55) to jedyny
   dopuszczalny wyjątek od zera-nowych-kolorów (przezroczystość istniejącej czerni). */

.uslugi-plan-includes__dialog-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(0, 0, 0, 0.55);
}

.uslugi-plan-includes__dialog {
	position: fixed;
	inset: 0;
	z-index: 101;
	display: flex;
	flex-direction: column;
	width: min(560px, calc(100% - var(--space-5) * 2));
	max-height: min(720px, calc(100% - var(--space-5) * 2));
	margin: auto;
	padding: var(--space-6);
	background: var(--color-white);
	border: 1px solid var(--color-black);
	overflow-y: auto;
}

.uslugi-plan-includes__dialog-overlay[hidden],
.uslugi-plan-includes__dialog[hidden] {
	display: none;
}

.uslugi-plan-includes__dialog:focus-visible {
	outline: none;
}

.uslugi-plan-includes__dialog-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	margin-left: auto;
	border: 1px solid var(--color-neutral-200);
	background: var(--color-white);
	color: var(--color-black);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s var(--ease, ease);
}

.uslugi-plan-includes__dialog-close:hover,
.uslugi-plan-includes__dialog-close:focus-visible {
	border-color: var(--color-black);
}

.uslugi-plan-includes__dialog-title {
	margin: var(--space-5) 0 var(--space-3);
	color: var(--color-black);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.2;
}

.uslugi-plan-includes__dialog-body {
	margin: 0;
	color: var(--color-neutral-500);
	font-size: 15px;
	line-height: 1.6;
}

.uslugi-plan-includes__dialog-intro {
	margin: 0 0 var(--space-4);
}

.uslugi-plan-includes__dialog-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	margin: 0;
	list-style: none;
}

.uslugi-plan-includes__dialog-item {
	position: relative;
	padding-left: var(--space-6);
	line-height: 1.55;
}

.uslugi-plan-includes__dialog-item::before {
	content: '\2013';
	position: absolute;
	left: 0;
	color: var(--color-neutral-300);
	font-weight: 700;
}

/* ---------- PREMIUM (dopełnienie w tej samej sekcji, patrz DESIGN.md — Signature Section Rule) ---------- */

.uslugi-plan-premium {
	margin-top: clamp(var(--space-9), 6vw, var(--space-10));
	padding-top: clamp(var(--space-9), 6vw, var(--space-10));
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	scroll-margin-top: 110px;
}

.uslugi-plan-premium__title {
	margin: 0 0 clamp(var(--space-7), 5vw, var(--space-8));
	color: var(--color-white);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.uslugi-plan-premium__list {
	margin-bottom: clamp(var(--space-7), 5vw, var(--space-8));
}

.uslugi-plan-premium__price {
	margin: 0 0 var(--space-6);
	color: rgba(255, 255, 255, 0.85);
	font-size: 16px;
	line-height: 1.6;
}

/* ---------- czego nie obejmuje ---------- */

.uslugi-plan-excludes {
	padding: clamp(var(--space-10), 8vw, var(--space-11)) var(--gutter);
}

.uslugi-plan-excludes__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.uslugi-plan-excludes__inner--split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(var(--space-9), 6vw, var(--space-10));
}

@media (min-width: 1024px) {
	.uslugi-plan-excludes__inner--split {
		grid-template-columns: 1.6fr 1fr;
		align-items: start;
	}
}

.uslugi-plan-upsell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.uslugi-plan-upsell__frame {
	width: 100%;
	padding: clamp(var(--space-7), 4vw, var(--space-8));
	background: var(--color-black);
}

.uslugi-plan-upsell__title {
	margin: 0 0 var(--space-3);
	color: var(--color-white);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: clamp(20px, 2vw, 24px);
}

.uslugi-plan-upsell__text {
	margin: 0;
	color: var(--color-neutral-300);
	font-size: 15px;
	line-height: 1.55;
}

.uslugi-plan-upsell__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--space-6);
	padding: var(--space-4) var(--space-7);
	border: 1px solid var(--color-black);
	color: var(--color-black);
	font-weight: 600;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
}

.uslugi-plan-excludes__title {
	max-width: 24ch;
	margin: 0 0 var(--space-6);
	color: var(--color-black);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.uslugi-plan-excludes__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	list-style: none;
}

.uslugi-plan-excludes__item {
	position: relative;
	max-width: 70ch;
	padding-left: var(--space-6);
	color: var(--color-neutral-500);
	font-size: 16px;
	line-height: 1.55;
}

.uslugi-plan-excludes__item::before {
	content: '\2013';
	position: absolute;
	left: 0;
	color: var(--color-neutral-300);
	font-weight: 700;
}

/* ---------- timeline ---------- */

.uslugi-plan-timeline {
	padding: clamp(var(--space-10), 8vw, var(--space-11)) var(--gutter);
	background: var(--color-neutral-50);
}

.uslugi-plan-timeline__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.uslugi-plan-timeline__title {
	margin: 0 0 clamp(var(--space-8), 5vw, var(--space-9));
	color: var(--color-black);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.uslugi-plan-timeline__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	margin: 0 0 clamp(var(--space-9), 6vw, var(--space-10));
	list-style: none;
}

.uslugi-plan-timeline__item {
	padding: var(--space-6);
	background: var(--color-white);
	border: 1px solid var(--color-neutral-200);
}

.uslugi-plan-timeline__item-title {
	margin: 0 0 var(--space-2);
	color: var(--color-black);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.uslugi-plan-timeline__item-desc {
	margin: 0;
	color: var(--color-neutral-500);
	font-size: 15px;
	line-height: 1.55;
}

.uslugi-plan-timeline__pricing {
	max-width: 65ch;
	margin: 0;
	padding-top: clamp(var(--space-7), 5vw, var(--space-8));
	color: var(--color-black);
	font-size: 16px;
	line-height: 1.6;
	border-top: 1px solid var(--color-neutral-200);
}

@media (min-width: 700px) {
	.uslugi-plan-timeline__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- rezerwacja ---------- */

.uslugi-plan-book {
	padding: clamp(var(--space-11), 8vw, var(--space-12)) var(--gutter);
}

.uslugi-plan-book__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(var(--space-9), 6vw, var(--space-10));
	max-width: var(--container-max);
	margin: 0 auto;
}

.uslugi-plan-book__title {
	max-width: 18ch;
	margin: 0 0 var(--space-5);
	color: var(--color-black);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.uslugi-plan-book__text {
	max-width: 42ch;
	margin: 0;
	color: var(--color-neutral-500);
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.6;
}

.uslugi-plan-book__photo {
	--cut: clamp(24px, 3vw, 32px);
	display: none;
	position: relative;
	max-width: 320px;
	aspect-ratio: 3 / 4;
	margin: var(--space-6) 0 0;
}

.uslugi-plan-book__photo::before {
	content: '';
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	right: calc(-1 * var(--space-3));
	bottom: calc(-1 * var(--space-3));
	z-index: -1;
	border: 1px solid var(--color-black);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}

.uslugi-plan-book__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* przycięcie lustrzane względem ramki (lewy dolny róg), bo scaleX(-1) niżej odwraca je z powrotem na prawy dolny */
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
	transform: scaleX(-1);
}

@media (min-width: 900px) {
	.uslugi-plan-book__inner {
		grid-template-columns: 1fr 1.2fr;
		align-items: center;
	}

	.uslugi-plan-book__photo {
		display: block;
	}
}

/* ---------- dlaczego ja (mobile/tablet — od 1024px żyje w panelu hero) ---------- */

.uslugi-plan-why-mobile {
	padding: clamp(var(--space-9), 6vw, var(--space-10)) var(--gutter);
	background: var(--color-black);
}

.uslugi-plan-why-mobile__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.uslugi-plan-why-mobile__text {
	max-width: 65ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--ff-heading);
	font-weight: 500;
	font-size: clamp(19px, 1.8vw, 23px);
	line-height: 1.45;
}

.uslugi-plan-why-mobile__for {
	margin-top: clamp(var(--space-8), 6vw, var(--space-9));
	padding-top: clamp(var(--space-8), 6vw, var(--space-9));
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.uslugi-plan-why-mobile__for-intro {
	max-width: 65ch;
	margin: 0 0 var(--space-5);
	color: var(--color-white);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: clamp(18px, 2.4vw, 22px);
}

.uslugi-plan-why-mobile__for-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	max-width: 65ch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.uslugi-plan-why-mobile__for-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.uslugi-plan-why-mobile__for-num {
	flex-shrink: 0;
	padding-top: 0.2em;
	color: rgba(255, 255, 255, 0.35);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
}

.uslugi-plan-why-mobile__for-text {
	color: rgba(255, 255, 255, 0.7);
	font-size: 15px;
	line-height: 1.6;
}

@media (min-width: 1024px) {
	.uslugi-plan-why-mobile {
		display: none;
	}
}

/* ---------- FAQ planu ---------- */

.uslugi-plan-faq {
	padding: clamp(var(--space-10), 8vw, var(--space-11)) var(--gutter);
	background: var(--color-neutral-50);
}

.uslugi-plan-faq__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.uslugi-plan-faq__title {
	margin: 0 0 clamp(var(--space-8), 5vw, var(--space-9));
	color: var(--color-black);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.uslugi-plan-faq__list {
	border-top: 1px solid var(--color-neutral-200);
}

.uslugi-plan-faq__item {
	border-bottom: 1px solid var(--color-neutral-200);
}

.uslugi-plan-faq__q {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	width: 100%;
	padding: var(--space-5) 0;
	background: none;
	border: none;
	color: var(--color-black);
	text-align: left;
	cursor: pointer;
}

.uslugi-plan-faq__q-num {
	flex-shrink: 0;
	color: var(--color-neutral-300);
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: 14px;
}

.uslugi-plan-faq__q-text {
	flex: 1;
	font-family: var(--ff-heading);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
}

.uslugi-plan-faq__q-icon {
	position: relative;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.uslugi-plan-faq__q-icon::before,
.uslugi-plan-faq__q-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--color-black);
	transform: translate(-50%, -50%);
	transition: transform 0.3s var(--ease, ease);
}

.uslugi-plan-faq__q-icon::before {
	width: 16px;
	height: 1px;
}

.uslugi-plan-faq__q-icon::after {
	width: 1px;
	height: 16px;
}

.uslugi-plan-faq__q[aria-expanded="true"] .uslugi-plan-faq__q-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.uslugi-plan-faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s var(--ease, ease);
}

.uslugi-plan-faq__a p {
	margin: 0;
	padding-bottom: var(--space-5);
	color: var(--color-neutral-500);
	font-size: 15px;
	line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
	.uslugi-plan-faq__a {
		transition-duration: 0.01ms;
	}
}