/* ==========================================================================
   Pricing page blocks (acf/pricing-*)
   Loaded only on pages that contain pricing blocks (see inc/enqueue_scripts_and_styles.php).
   Typography and colours follow the site: Google Sans, #111 text, #7A7A7A secondary,
   grey <span> accents in headings, primary #4642FF.
   ========================================================================== */

.pr {
	--pr-primary: #4642ff;
	--pr-primary-hover: #3733cc;
	--pr-primary-soft: #efeeff;
	--pr-text: #111111;
	--pr-muted: #7a7a7a;
	--pr-muted-2: #a7a7a7;
	--pr-line: #e6e7e7;
	--pr-bg: #f5f5f5;
	--pr-card: #ffffff;
	font-family: var(--font-google-sans, "Google Sans", sans-serif);
	color: var(--pr-text);
	background: var(--pr-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.pr *,
.pr *::before,
.pr *::after { box-sizing: border-box; }

:where(.pr) p { margin: 0; }

/* ---------- shared: label row (dot + text + line), as in site sections ---------- */
.pr-label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}
.pr-label__dot {
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--pr-primary);
}
.pr-label__text {
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 1px;
	color: #6e6e6e;
	white-space: nowrap;
}
.pr-label__line {
	flex: 1;
	height: 1px;
	background: var(--pr-line);
}

/* ---------- shared: headings ---------- */
.pr-h2 {
	margin: 0;
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.4px;
	text-wrap: balance;
}
.pr-h2 span { color: #959595; }

.pr-lead {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.159px;
	color: var(--pr-muted);
}

.pr-section { padding: 56px 0; }

.pr-head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 32px;
}

/* ---------- shared: buttons (on top of site .button-type) ---------- */
.pr .button-type { text-decoration: none; }
.pr-btn {
	width: 100%;
	min-height: 56px;
	white-space: nowrap;
}
.pr .pr-btn .icon-span {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 22px;
	padding: 0;
	border-radius: 90px;
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
	transition: background 0.5s, color 0.5s;
}
.pr .pr-btn:hover .icon-span { background: #fff; color: var(--pr-primary); }
.pr-btn--dark { background: var(--pr-text); color: #fff; }
.pr-btn--dark:hover { background: var(--pr-primary); color: #fff; }
.pr .button-blue:hover { background: var(--pr-primary-hover); }
.pr .pr-btn.button-white .icon-span { background: var(--pr-primary); color: #fff; }
.pr .pr-btn.button-white:hover .icon-span { background: var(--pr-text); color: #fff; }

/* ==========================================================================
   Hero
   ========================================================================== */
.pr-hero { padding: 0 0 48px; }
.pr-hero__inner { padding-top: 32px; }
.pr-hero__title {
	margin: 0 0 32px;
	font-weight: 400;
	font-size: 43px;
	line-height: 1.12;
	letter-spacing: -0.6px;
	text-wrap: balance;
	max-width: 960px;
}
.pr-hero__title span { color: var(--pr-muted-2); }
.pr-hero__bottom {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.pr-hero__text {
	max-width: 560px;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.159px;
	color: var(--pr-muted);
}
.pr-hero__note {
	align-self: flex-start;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pr-muted);
	padding-top: 14px;
	border-top: 1px solid #dcdcdc;
	max-width: 240px;
}

/* ==========================================================================
   Plans
   ========================================================================== */
.pr-plans { padding: 0 0 64px; }
.pr-plans__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.pr-plan {
	display: flex;
	flex-direction: column;
	padding: 28px 24px 24px;
	border-radius: 24px;
	background: var(--pr-card);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.pr-plan:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(17, 17, 17, 0.25);
}
.pr-plan--featured { background: var(--pr-primary-soft); }
.pr-plan__num {
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pr-muted);
}
.pr-plan__title {
	margin: 20px 0 12px;
	font-weight: 500;
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: -0.5px;
}
.pr-plan__intro {
	margin-bottom: 24px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--pr-muted);
}

/* switcher */
.pr-switch {
	display: flex;
	gap: 4px;
	height: 44px;
	margin-bottom: 24px;
	padding: 4px;
	border-radius: 100px;
	background: var(--pr-bg);
}
.pr-plan--featured .pr-switch { background: #fff; }
.pr-switch__btn {
	flex: 1;
	border: 0;
	border-radius: 100px;
	background: transparent;
	color: var(--pr-text);
	font: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.35s ease, color 0.35s ease;
}
.pr-switch__btn:hover { color: var(--pr-primary); }
.pr-switch__btn[aria-pressed="true"] {
	background: var(--pr-text);
	color: #fff;
}
.pr-switch__btn:focus-visible {
	outline: 2px solid var(--pr-primary);
	outline-offset: 2px;
}
.pr-plan__switch-note {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin-bottom: 24px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--pr-text);
}

/* price */
.pr-option[hidden] { display: none; }
.pr-option.is-entering { animation: pr-fade-in 0.45s ease both; }
@keyframes pr-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}
.pr-plan__pre {
	min-height: 18px;
	margin-bottom: 4px;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pr-muted);
}
.pr-plan__price {
	font-weight: 400;
	font-size: 44px;
	line-height: 1.2;
	letter-spacing: -1.5px;
}
.pr-plan__price small {
	font-size: 14px;
	letter-spacing: 0;
	color: var(--pr-muted);
}
.pr-plan__time {
	margin-top: 8px;
	font-size: 15px;
	font-weight: 500;
}
.pr-plan__scope {
	margin: 10px 0 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pr-muted);
}
.pr-plan__features {
	list-style: none;
	margin: 0 0 20px;
	padding: 20px 0 0;
	border-top: 1px solid #dedede;
}
.pr-plan__features li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.5;
}
.pr-plan__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 14px;
	height: 14px;
	background: var(--pr-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M5 3h6v6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M5 3h6v6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pr-plan__footnote {
	margin-top: auto;
	padding-bottom: 20px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--pr-muted);
}

/* ==========================================================================
   Projects (budgets)
   ========================================================================== */
.pr-projects { background: #fff; }
.pr-projects__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

/* Card = 7 rows (visual, top, need, case, description, budget, details).
   With subgrid the rows line up across cards in one grid row, so budgets stay aligned
   and expanding "Scope & deliverables" only grows the last row: neighbours don't jump. */
.pr-project {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 20px;
	background: var(--pr-bg);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
@supports (grid-template-rows: subgrid) {
	.pr-project {
		display: grid;
		grid-row: span 7;
		grid-template-rows: subgrid;
		row-gap: 0;
	}
}
.pr-project > :not(.pr-project__visual) { padding-inline: 24px; }
.pr-project:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(17, 17, 17, 0.25);
}
.pr-project__visual {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #ecebf5;
}
.pr-project__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pr-project:hover .pr-project__visual img { transform: scale(1.04); }

/* placeholder when there is no image yet */
.pr-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	color: var(--pr-muted);
	text-align: center;
}
.pr-placeholder__window {
	width: 190px;
	height: 90px;
	padding: 12px;
	border: 1px dashed #b8b5d0;
	border-radius: 8px;
}
.pr-placeholder__window span {
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 4px;
	border-radius: 50%;
	background: #aaa4c3;
}
.pr-placeholder__window div {
	margin-top: 8px;
	border-top: 1px solid #d3d0e1;
}
.pr-placeholder strong { font-size: 13px; font-weight: 500; }
.pr-placeholder small { font-size: 11px; }

.pr-project__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 24px;
}
.pr-project__tag {
	font-size: 12px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--pr-primary);
}
.pr-project__index { font-size: 13px; color: var(--pr-muted-2); }
.pr-project__need {
	margin: 0;
	padding-top: 18px;
	padding-bottom: 14px;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.3px;
}
.pr-project__case {
	padding-bottom: 12px;
	font-size: 14px;
	color: var(--pr-muted);
}
.pr-project__case strong,
.pr-project__case a {
	font-weight: 500;
	color: var(--pr-text);
}
.pr-project__case a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: underline;
	text-decoration-color: rgba(17, 17, 17, 0.25);
	text-underline-offset: 3px;
	transition: color 0.3s, text-decoration-color 0.3s;
}
.pr-project__case a:hover {
	color: var(--pr-primary);
	text-decoration-color: var(--pr-primary);
}
.pr-project__desc {
	padding-bottom: 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pr-muted);
}
.pr-project__budget {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 18px;
}
.pr-project__budget::before {
	content: "";
	display: block;
	height: 1px;
	margin-bottom: 12px;
	background: #e3e3e3;
}
.pr-project__budget-label {
	font-size: 12px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--pr-muted);
}
.pr-project__budget strong {
	font-weight: 500;
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: -0.8px;
}
.pr-project__budget small { font-size: 14px; color: var(--pr-muted); }

/* Scope & deliverables */
.pr-project__more { padding-bottom: 24px; }
.pr-project__toggle {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 16px 0 0;
	border: 0;
	background: none;
	color: var(--pr-text);
	font: inherit;
	text-align: left;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid #e3e3e3;
	font-size: 15px;
	cursor: pointer;
	transition: color 0.3s;
}
.pr-project__toggle:hover { color: var(--pr-primary); }
.pr-project__toggle:focus-visible {
	outline: 2px solid var(--pr-primary);
	outline-offset: 4px;
	border-radius: 4px;
}
.pr-plus {
	position: relative;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pr-plus::before,
.pr-plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.pr-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.pr-project__more.is-open .pr-plus { transform: rotate(45deg); }
.pr-project__details {
	overflow: hidden;
}
.pr-project__details[hidden] { display: none; }
.pr-project__details-inner {
	display: grid;
	gap: 10px;
	padding-top: 14px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pr-muted);
}

.pr-projects__note {
	max-width: 930px;
	margin-top: 28px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pr-muted);
}

/* ==========================================================================
   Steps
   ========================================================================== */
.pr-steps__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 8px;
}
.pr-step {
	padding-top: 24px;
	border-top: 1px solid #dcdcdc;
	transition: border-color 0.4s ease;
}
.pr-step:hover { border-color: var(--pr-primary); }
.pr-step__num { font-size: 14px; color: var(--pr-primary); }
.pr-step__title {
	margin: 20px 0 12px;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.3px;
}
.pr-step__text {
	font-size: 16px;
	line-height: 1.55;
	color: var(--pr-muted);
}

/* ==========================================================================
   CTA (brand purple with a soft glow on the right)
   ========================================================================== */
.pr-cta { padding: 32px 0 64px; }
.pr-cta__box {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	overflow: hidden;
	padding: 32px 24px;
	border-radius: 24px;
	color: #fff;
	background:
		radial-gradient(60% 90% at 100% 100%, rgba(140, 220, 255, 0.55) 0%, rgba(140, 220, 255, 0) 60%),
		radial-gradient(50% 80% at 85% 0%, rgba(205, 160, 255, 0.6) 0%, rgba(205, 160, 255, 0) 65%),
		var(--pr-primary);
}
.pr-cta__box > * { position: relative; z-index: 1; }
.pr-cta .pr-label__dot { background: #fff; }
.pr-cta .pr-label__text { color: rgba(255, 255, 255, 0.85); }
.pr-cta .pr-label__line { background: rgba(255, 255, 255, 0.25); }
.pr-cta__title {
	margin: 0 0 16px;
	font-weight: 500;
	font-size: 34px;
	line-height: 1.2;
	letter-spacing: -0.5px;
}
.pr-cta__title span { color: rgba(255, 255, 255, 0.6); }
.pr-cta__text {
	max-width: 440px;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}
.pr-cta__right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.pr-cta__list-title {
	margin: 0 0 14px;
	font-weight: 500;
	font-size: 20px;
}
.pr-cta__list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}
.pr-cta__list li {
	position: relative;
	padding-left: 22px;
	font-size: 15px;
	line-height: 2;
	color: rgba(255, 255, 255, 0.85);
}
.pr-cta__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	transform: translateY(-50%);
}
.pr-cta .pr-btn { width: auto; }
.pr-cta .pr-btn.button-white { background: #fff; color: var(--pr-text); }
.pr-cta .pr-btn.button-white:hover { background: var(--pr-text); color: #fff; }
.pr-cta .pr-btn.button-white:hover .icon-span { background: #fff; color: var(--pr-text); }
.pr-cta__note {
	margin-top: 16px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 720px) {
	.pr-section { padding: 72px 0; }
	.pr-h2 { font-size: 40px; }
	.pr-hero__title { font-size: 56px; }
	.pr-hero__bottom {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
	.pr-hero__text { font-size: 18px; }
	.pr-hero__note { align-self: auto; }
	.pr-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pr-steps__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
	.pr-cta__box { padding: 48px; }
	.pr-cta__title { font-size: 44px; }
}

@media (min-width: 1000px) {
	.pr-section { padding: 96px 0; }
	.pr-h2 {
		font-size: 48px;
		line-height: 1.3;
		letter-spacing: -0.677px;
	}
	.pr-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 40px;
		margin-bottom: 48px;
	}
	.pr-head .pr-lead { max-width: 420px; }
	.pr-hero { padding-bottom: 64px; }
	.pr-hero__inner { padding-top: 40px; }
	.pr-hero__title {
		font-size: 72px;
		letter-spacing: -1.5px;
	}
	.pr-plans { padding-bottom: 96px; }
	.pr-plans__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
	.pr-plan { padding: 32px 28px 28px; }
	.pr-plan__title { min-height: 68px; }
	.pr-plan__intro { min-height: 96px; }
	.pr-plan__scope { min-height: 42px; }
	.pr-plan__footnote { min-height: 60px; }
	.pr-projects__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pr-cta { padding-bottom: 96px; }
	.pr-cta__box {
		grid-template-columns: 1.2fr 1fr;
		gap: 64px;
		padding: 64px;
		border-radius: 30px;
	}
	.pr-cta__title { font-size: 54px; }
	.pr-cta__right {
		padding-top: 0;
		padding-left: 56px;
		border-top: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.25);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pr-plan,
	.pr-project,
	.pr-project__visual img,
	.pr-option.is-entering,
	.pr-plus { transition: none; animation: none; }
	.pr-plan:hover,
	.pr-project:hover { transform: none; }
}