/* ==========================================================================
   Ludych Pricing Page Styles
   Strictly aligned to Ludych Design System tokens, typography, and palette
   Referenced from: /software-development-services/ & /software-development-technology/
   ========================================================================== */

/* Color & Text Helpers */
.text-primary-blue {
	color: var(--color-primary, #343bed) !important;
}

.text-cyan-bright {
	color: #22d3ee !important;
}

.text-white-80 {
	color: hsla(0, 0%, 100%, 0.8) !important;
}

.pricing-page-wrapper {
	background-color: var(--body-bg, #e5edf5);
	position: relative;
	overflow-x: hidden;
}

/* Badge styling matching Ludych standard */
.section-badge-wrap {
	margin-bottom: 1.6rem;
}

.custom-badge {
	display: inline-flex;
	align-items: center;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.12rem;
	text-transform: uppercase;
	color: var(--color-primary, #343bed);
	background: var(--color-surface-tag, #e5f4ff);
	border: 1px solid #bfdbfe;
	padding: 0.6rem 1.6rem;
	border-radius: 999.9rem;
}

.custom-badge-dark {
	display: inline-flex;
	align-items: center;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.12rem;
	text-transform: uppercase;
	color: #38bdf8;
	background: rgba(56, 189, 248, 0.15);
	border: 1px solid rgba(56, 189, 248, 0.35);
	padding: 0.6rem 1.6rem;
	border-radius: 999.9rem;
}

.section-subtitle {
	font-size: var(--fs-20, 1.8rem);
	color: var(--color-grey, #5c5c5c);
	max-width: 68rem;
	margin-inline: auto;
	margin-top: 1rem;
	line-height: 1.5;
}

/* ==========================================================================
   Hero Trust & Commitment Bar (Directly below inner-hero-section)
   ========================================================================== */
.pricing-hero-subbar {
	margin-top: -1rem;
	position: relative;
	z-index: 5;
}

.pricing-trust-bar {
	padding: 2.2rem 2.8rem;
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	justify-content: space-between;
	align-items: center;
	background-color: hsla(0, 0%, 100%, 0.7);
	border: 1px solid var(--color-white, #ffffff);
	border-radius: 1.6rem;
	box-shadow: 0 10px 30px rgba(0, 15, 69, 0.05);
}

@media (min-width: 992px) {
	.pricing-trust-bar {
		flex-direction: row;
		gap: 3rem;
	}
}

.trust-checks-col {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.6rem;
}

.trust-bar-label {
	font-size: 1.35rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
	color: var(--color-navy, #000f45);
}

.trust-checks-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.8rem;
}

.trust-check-item {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.45rem;
	font-weight: 500;
	color: var(--color-black, #000000);
}

.trust-commitment-col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}

@media (min-width: 992px) {
	.trust-commitment-col {
		align-items: flex-end;
	}
}

.commit-pill-title {
	font-size: 1.15rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
	color: var(--color-subtitle, #162869);
}

.commit-pills-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.commit-chip {
	font-size: 1.35rem;
	padding: 0.6rem 1.4rem;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid var(--color-border, #d3def9);
	color: var(--color-navy, #000f45);
	border-radius: 999.9rem;
}

.commit-num {
	color: var(--color-primary, #343bed);
}

/* ==========================================================================
   Service Switcher & Pricing Cards
   ========================================================================== */
.service-pills-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.4rem;
	margin-bottom: 4.5rem;
}

.service-tab-btn {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 1.2rem 2.4rem;
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--color-navy, #000f45);
	cursor: pointer;
	border-radius: 999.9rem;
	border: 1px solid var(--color-border, #d3def9);
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 4px 12px rgba(0, 15, 69, 0.04);
	transition: all 0.25s ease;
}

.service-tab-btn:hover {
	border-color: var(--color-primary, #343bed);
	color: var(--color-primary, #343bed);
	transform: translateY(-2px);
}

.service-tab-btn.active {
	background: var(--color-primary, #343bed) !important;
	border-color: var(--color-primary, #343bed) !important;
	color: #ffffff !important;
	box-shadow: 0 8px 24px -4px rgba(52, 59, 237, 0.4);
}

.service-tab-btn.active .tab-icon svg {
	stroke: #ffffff;
}

/* Service Panels */
.service-pricing-panel {
	display: none;
	animation: panelFadeIn 0.35s ease forwards;
}

.service-pricing-panel.active {
	display: block;
}

@keyframes panelFadeIn {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 4-Tier Pricing Grid */
.pricing-cards-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.4rem;
	align-items: stretch;
}

@media (min-width: 640px) {
	.pricing-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.pricing-cards-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Auto center-align 1, 2, or 3 items in 4-column grid */
	.pricing-cards-grid[data-count="1"],
	.pricing-cards-grid:has(> .pricing-card:only-child) {
		display: flex;
		justify-content: center;
	}
	.pricing-cards-grid[data-count="1"] > .pricing-card,
	.pricing-cards-grid:has(> .pricing-card:only-child) > .pricing-card {
		width: 100%;
		max-width: 38rem;
	}

	.pricing-cards-grid[data-count="2"],
	.pricing-cards-grid:has(> .pricing-card:nth-child(2):last-child) {
		display: flex;
		justify-content: center;
		gap: 2.4rem;
	}
	.pricing-cards-grid[data-count="2"] > .pricing-card,
	.pricing-cards-grid:has(> .pricing-card:nth-child(2):last-child) > .pricing-card {
		width: calc(50% - 1.2rem);
		max-width: 38rem;
	}

	.pricing-cards-grid[data-count="3"],
	.pricing-cards-grid:has(> .pricing-card:nth-child(3):last-child) {
		display: flex;
		justify-content: center;
		gap: 2.4rem;
	}
	.pricing-cards-grid[data-count="3"] > .pricing-card,
	.pricing-cards-grid:has(> .pricing-card:nth-child(3):last-child) > .pricing-card {
		width: calc(33.333% - 1.6rem);
		max-width: 36rem;
	}

	.pricing-cards-grid[data-count="5"] {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2.4rem;
	}
	.pricing-cards-grid[data-count="5"] > .pricing-card {
		width: calc(33.333% - 1.6rem);
		max-width: 36rem;
	}
}

/* Pricing Card */
.pricing-card {
	position: relative;
	border-radius: 2.2rem;
	padding: 3.6rem 2.6rem 3rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	background: rgba(255, 255, 255, 0.65);
	border: 1.5px solid rgba(255, 255, 255, 0.95);
	box-shadow: 0 10px 30px -5px rgba(0, 15, 69, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.9);
	overflow: visible;
}

.pricing-card:after {
	background: linear-gradient(148.3deg, #fff, hsla(0, 0%, 100%, .7) 40%, hsla(0, 0%, 100%, .7) 46%, hsla(0, 0%, 100%, .7) 68%, #fff);
	border-radius: inherit;
	content: "";
	height: 100%;
	inset: 0;
	opacity: 0.25;
	position: absolute;
	width: 100%;
	z-index: -1;
	pointer-events: none;
}

.pricing-card:before {
	background: linear-gradient(148.3deg, #fff, hsla(0, 0%, 100%, .4) 25%, hsla(0, 0%, 100%, .2) 50%, hsla(0, 0%, 100%, .4) 75%, #fff);
	border-radius: inherit;
	content: "";
	inset: 0;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	padding: 0.1rem;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.pricing-card:hover {
	transform: translateY(-8px);
	background: rgba(255, 255, 255, 0.85);
	border-color: rgba(52, 59, 237, 0.4);
	box-shadow: 0 22px 45px -10px rgba(52, 59, 237, 0.14), inset 0 1px 1px #ffffff;
}

/* Featured / Most Popular Highlighted Card */
.pricing-card.featured-card {
	background: rgba(255, 255, 255, 0.85);
	border: 2px solid var(--color-primary, #343bed);
	box-shadow: 0 20px 48px -8px rgba(52, 59, 237, 0.22), inset 0 1px 2px #ffffff;
	z-index: 2;
}

.pricing-card.featured-card:hover {
	transform: translateY(-8px) scale(1.01);
	box-shadow: 0 26px 54px -8px rgba(52, 59, 237, 0.32), inset 0 1px 2px #ffffff;
}

.featured-top-badge {
	position: absolute;
	top: -1.4rem;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #343bed 0%, #1e26b8 100%);
	color: #ffffff;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.08rem;
	padding: 0.5rem 1.8rem;
	border-radius: 999.9rem;
	box-shadow: 0 6px 18px rgba(52, 59, 237, 0.4);
	text-transform: uppercase;
	white-space: nowrap;
	z-index: 3;
}

/* Audience Badge (Refined Pill) */
.plan-audience-badge {
	display: flex;
	align-items: center;
	margin-bottom: 1.8rem;
}

.plan-audience-badge span {
	display: inline-flex;
	align-items: center;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.04rem;
	text-transform: uppercase;
	color: var(--color-primary, #343bed);
	background: rgba(52, 59, 237, 0.08);
	border: 1px solid rgba(52, 59, 237, 0.22);
	padding: 0.5rem 1.4rem;
	border-radius: 999.9rem;
	line-height: 1.35;
	box-shadow: 0 2px 6px rgba(52, 59, 237, 0.04);
}

.featured-card .plan-audience-badge span {
	background: rgba(52, 59, 237, 0.12);
	border-color: rgba(52, 59, 237, 0.35);
	color: #1e26b8;
}

.plan-header {
	margin-bottom: 1.6rem;
}

.plan-title {
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--color-navy, #000f45);
	line-height: 1.25;
	margin-bottom: 0.8rem;
}

.plan-description {
	font-size: 1.35rem;
	color: var(--color-grey, #5c5c5c);
	line-height: 1.5;
	min-height: 4.2rem;
}

.plan-price-block {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	padding-bottom: 1.2rem;
	margin-top: 0.5rem;
}

.price-val {
	font-size: clamp(3.2rem, 1.5vw + 2.4rem, 4rem);
	font-weight: 800;
	color: var(--color-navy, #000f45);
	line-height: 1;
	letter-spacing: -0.02em;
}

.price-suffix {
	font-size: 1.4rem;
	color: var(--color-grey, #5c5c5c);
	font-weight: 500;
}

/* Subtle Card Divider (matching tech cards reference) */
.plan-card-divider {
	background: linear-gradient(148.3deg, hsla(0,0%,100%,.9) 10.2%, hsla(0,0%,100%,.56) 42.99%, hsla(0,0%,100%,.56) 48.09%, hsla(0,0%,100%,.56) 66.33%, hsla(0,0%,100%,.9) 92.19%);
	height: 0.15rem;
	margin: 1.8rem 0 2.2rem;
	opacity: 0.85;
	width: 100%;
	border-bottom: 1px solid rgba(0, 15, 69, 0.06);
}

/* Features List */
.plan-features-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2.4rem;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	flex-grow: 1;
}

.plan-features-list li {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	font-size: 1.45rem;
	color: #1e293b;
	line-height: 1.45;
	font-weight: 400;
}

.feat-check-circle {
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: rgba(14, 135, 14, 0.12);
	color: #0e870e;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.featured-card .feat-check-circle {
	background: rgba(52, 59, 237, 0.12);
	color: var(--color-primary, #343bed);
}

.feat-check-circle svg {
	width: 1.2rem;
	height: 1.2rem;
}

/* Turnaround Note */
.plan-turnaround-box {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(211, 222, 249, 0.8);
	border-radius: 1.2rem;
	padding: 1.1rem 1.4rem;
	margin-bottom: 2.4rem;
	font-size: 1.3rem;
	color: var(--color-subtitle, #162869);
	font-weight: 500;
	line-height: 1.4;
	backdrop-filter: blur(8px);
}

.plan-turnaround-box .turnaround-icon {
	flex-shrink: 0;
	color: var(--color-primary, #343bed);
}

/* Buttons */
.plan-cta-wrapper {
	margin-top: auto;
}

.plan-action-btn {
	width: 100%;
	height: 5rem;
	border-radius: 999.9rem;
	font-size: 1.55rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.plan-action-btn .btn-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.plan-action-btn:hover .btn-arrow {
	transform: translateX(5px);
}

/* Outline button for standard plans */
.plan-btn-outline {
	background: rgba(255, 255, 255, 0.9);
	border: 1.5px solid rgba(52, 59, 237, 0.35);
	color: var(--color-primary, #343bed);
	box-shadow: 0 4px 14px rgba(52, 59, 237, 0.06);
}

.plan-btn-outline:hover {
	background: linear-gradient(135deg, #343bed 0%, #1e26b8 100%);
	border-color: transparent;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(52, 59, 237, 0.28);
}

/* Featured button for popular plans */
.plan-btn-featured {
	background: linear-gradient(135deg, #343bed 0%, #1c23a8 100%);
	border: 1.5px solid transparent;
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(52, 59, 237, 0.32);
}

.plan-btn-featured:hover {
	background: linear-gradient(135deg, #242bc9 0%, #101673 100%);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(52, 59, 237, 0.45);
	color: #ffffff;
}

.pricing-bottom-notice {
	text-align: center;
	margin-top: 3.5rem;
	font-size: 1.45rem;
	color: var(--color-grey, #5c5c5c);
	font-weight: 500;
}

/* ==========================================================================
   Focused Add-ons
   ========================================================================== */
.addons-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.4rem;
	max-width: 96rem;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.addons-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.addon-card {
	background: #ffffff;
	border: 1px solid var(--color-border, #d3def9);
	border-radius: 1.4rem;
	padding: 2.4rem;
	box-shadow: 0 4px 14px rgba(0, 15, 69, 0.04);
	transition: all 0.25s ease;
}

.addon-card:hover {
	border-color: var(--color-primary, #343bed);
	transform: translateY(-3px);
	box-shadow: 0 12px 25px -5px rgba(0, 15, 69, 0.08);
}

.addon-card-left {
	display: flex;
	align-items: flex-start;
	gap: 1.8rem;
}

.addon-icon-box {
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 1rem;
	background: var(--color-surface-tag, #e5f4ff);
	border: 1px solid #bfdbfe;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.addon-title {
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--color-navy, #000f45);
	margin-bottom: 0.6rem;
}

.addon-desc {
	font-size: 1.4rem;
	color: var(--color-grey, #5c5c5c);
	line-height: 1.5;
	margin-bottom: 1.2rem;
}

.addon-price-tag span {
	display: inline-block;
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--color-primary, #343bed);
}

/* ==========================================================================
   Monthly Retainers (Atmospheric Dark Section)
   ========================================================================== */
.pricing-retainers-section {
	position: relative;
	background: radial-gradient(ellipse 90% 60% at 50% -10%, #0d1e5c 0%, #020617 75%, #01030e 100%);
	padding: 10rem 0 11rem;
	overflow: hidden;
	color: #ffffff;
}

.pricing-retainers-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 120rem;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.4) 50%, transparent 100%);
}

.pricing-retainers-section .pricing-glow-orb-1 {
	position: absolute;
	top: 15%;
	left: 5%;
	width: 40rem;
	height: 40rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(52, 59, 237, 0.22) 0%, transparent 70%);
	pointer-events: none;
	filter: blur(40px);
}

.pricing-retainers-section .pricing-glow-orb-2 {
	position: absolute;
	bottom: 10%;
	right: 5%;
	width: 45rem;
	height: 45rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(34, 211, 238, 0.15) 0%, transparent 70%);
	pointer-events: none;
	filter: blur(40px);
}

.pricing-retainers-section .section-title-block h2.h2,
.pricing-retainers-section h2.h2,
.pricing-retainers-section .h2 {
	color: #ffffff !important;
	font-size: clamp(3rem, 2.5vw + 1.5rem, 4.4rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin-top: 1.4rem;
	margin-bottom: 1.4rem;
}

.text-cyan-bright {
	color: #38bdf8 !important;
	background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.custom-badge-dark {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	color: #38bdf8;
	background: rgba(56, 189, 248, 0.1);
	border: 1px solid rgba(56, 189, 248, 0.3);
	padding: 0.55rem 1.8rem;
	border-radius: 999.9rem;
	backdrop-filter: blur(10px);
	box-shadow: 0 0 15px rgba(56, 189, 248, 0.15);
}

.section-subtitle.text-white-80 {
	color: rgba(226, 232, 240, 0.85);
	font-size: 1.65rem;
	max-width: 68rem;
	margin-inline: auto;
	line-height: 1.6;
}

/* Retainers Service Tabs (Screenshot 2) */
.retainer-pills-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.2rem;
	margin-top: 3.5rem;
	margin-bottom: 3rem;
	position: relative;
	z-index: 2;
}

.retainer-tab-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(241, 245, 249, 0.88);
	padding: 1.1rem 2.4rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 1.45rem;
	cursor: pointer;
	transition: all 0.25s ease;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.retainer-tab-chip:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(56, 189, 248, 0.5);
	color: #ffffff;
	transform: translateY(-2px);
}

.retainer-tab-chip.active {
	background: linear-gradient(135deg, rgba(56, 189, 248, 0.22) 0%, rgba(52, 59, 237, 0.35) 100%);
	border-color: #38bdf8;
	color: #ffffff;
	box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}

.retainer-pricing-panel {
	display: none;
	animation: fadeInRetainer 0.35s ease;
}

.retainer-pricing-panel.active {
	display: block;
}

@keyframes fadeInRetainer {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.retainers-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: 100%;
	margin-inline: auto;
	margin-top: 4rem;
	position: relative;
	z-index: 1;
	align-items: stretch;
}

@media (min-width: 992px) {
	.retainers-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Auto center-align 1, 2, or 3 items in 4-column retainers grid */
	.retainers-grid[data-count="1"],
	.retainers-grid:has(> .retainer-card:only-child) {
		display: flex;
		justify-content: center;
	}
	.retainers-grid[data-count="1"] > .retainer-card,
	.retainers-grid:has(> .retainer-card:only-child) > .retainer-card {
		width: 100%;
		max-width: 38rem;
	}

	.retainers-grid[data-count="2"],
	.retainers-grid:has(> .retainer-card:nth-child(2):last-child) {
		display: flex;
		justify-content: center;
		gap: 2rem;
	}
	.retainers-grid[data-count="2"] > .retainer-card,
	.retainers-grid:has(> .retainer-card:nth-child(2):last-child) > .retainer-card {
		width: calc(50% - 1rem);
		max-width: 38rem;
	}

	.retainers-grid[data-count="3"],
	.retainers-grid:has(> .retainer-card:nth-child(3):last-child) {
		display: flex;
		justify-content: center;
		gap: 2rem;
	}
	.retainers-grid[data-count="3"] > .retainer-card,
	.retainers-grid:has(> .retainer-card:nth-child(3):last-child) > .retainer-card {
		width: calc(33.333% - 1.4rem);
		max-width: 36rem;
	}

	.retainers-grid[data-count="5"] {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2rem;
	}
	.retainers-grid[data-count="5"] > .retainer-card {
		width: calc(33.333% - 1.4rem);
		max-width: 36rem;
	}
}

.retainer-card {
	position: relative;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 2rem;
	padding: 3.8rem 2.8rem 3.2rem;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.retainer-card:hover {
	transform: translateY(-8px);
	border-color: rgba(56, 189, 248, 0.5);
	box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.2);
}

/* Featured / Most Popular Highlight */
.retainer-card.featured-retainer {
	background: linear-gradient(180deg, rgba(26, 38, 86, 0.85) 0%, rgba(10, 16, 45, 0.95) 100%);
	border: 1.5px solid #38bdf8;
	box-shadow: 0 25px 65px -10px rgba(52, 59, 237, 0.5), 0 0 35px rgba(56, 189, 248, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.4);
	position: relative;
	z-index: 2;
}

@media (min-width: 992px) {
	.retainer-card.featured-retainer {
		transform: scale(1.04);
	}
	.retainer-card.featured-retainer:hover {
		transform: scale(1.04) translateY(-8px);
	}
}

.retainer-pop-ribbon {
	position: absolute;
	top: -1.4rem;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #343bed 0%, #2563eb 50%, #38bdf8 100%);
	color: #ffffff;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.1rem;
	padding: 0.5rem 1.8rem;
	border-radius: 999.9rem;
	white-space: nowrap;
	box-shadow: 0 6px 20px rgba(52, 59, 237, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.retainer-header {
	margin-bottom: 2rem;
}

.retainer-subtag {
	display: inline-flex;
	align-items: center;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.08rem;
	text-transform: uppercase;
	color: #38bdf8;
	background: rgba(56, 189, 248, 0.12);
	border: 1px solid rgba(56, 189, 248, 0.25);
	padding: 0.4rem 1rem;
	border-radius: 0.6rem;
	margin-bottom: 1.4rem;
}

.retainer-name {
	font-size: 2.3rem;
	font-weight: 700;
	color: #ffffff !important;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.retainer-price-wrap {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	padding: 1.8rem 0;
	margin: 1.6rem 0 2.4rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ret-price-amount {
	font-size: clamp(3.4rem, 2vw + 2rem, 4.4rem);
	font-weight: 800;
	color: #ffffff;
	line-height: 1;
	letter-spacing: -0.03em;
}

.ret-price-period {
	font-size: 1.5rem;
	color: #94a3b8;
	font-weight: 500;
}

.retainer-features-list {
	list-style: none;
	padding: 0;
	margin: 0 0 3.2rem;
	display: flex;
	flex-direction: column;
	gap: 1.3rem;
	flex-grow: 1;
}

.retainer-features-list li {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	font-size: 1.45rem;
	color: #e2e8f0;
	line-height: 1.5;
}

.ret-check-circle {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(56, 189, 248, 0.15);
	border: 1px solid rgba(56, 189, 248, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 0.2rem;
	color: #38bdf8;
	transition: all 0.2s ease;
}

.featured-retainer .ret-check-circle {
	background: rgba(52, 59, 237, 0.35);
	border-color: #38bdf8;
	color: #38bdf8;
	box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.retainer-btn-wrap {
	margin-top: auto;
}

.retainer-btn-solid {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1.4rem 2.4rem;
	background: linear-gradient(135deg, #343bed 0%, #2563eb 100%);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999.9rem;
	color: #ffffff !important;
	font-size: 1.45rem;
	font-weight: 600;
	box-shadow: 0 8px 25px rgba(52, 59, 237, 0.55);
	transition: all 0.25s ease;
	text-decoration: none;
}

.retainer-btn-solid:hover {
	background: linear-gradient(135deg, #2a30d1 0%, #1d4ed8 100%);
	box-shadow: 0 12px 30px rgba(52, 59, 237, 0.75);
	transform: translateY(-2px);
	color: #ffffff !important;
}

.retainer-btn-glass {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1.4rem 2.4rem;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999.9rem;
	color: #ffffff !important;
	font-size: 1.45rem;
	font-weight: 600;
	transition: all 0.25s ease;
	text-decoration: none;
}

.retainer-btn-glass:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: #38bdf8;
	color: #38bdf8 !important;
	transform: translateY(-2px);
}

.retainers-bottom-note {
	text-align: center;
	margin-top: 5rem;
	font-size: 1.45rem;
	color: #94a3b8;
}

/* ==========================================================================
   Deliverables & Scope Matrix (Modern High-Conversion Table)
   ========================================================================== */
.pricing-matrix-section {
	padding-top: 8rem;
	padding-bottom: 9rem;
}

.scope-matrix-wrapper {
	max-width: 116rem;
	margin-inline: auto;
	background: #ffffff;
	border: 1px solid #dbe6fe;
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 20px 50px -15px rgba(0, 15, 69, 0.08), 0 0 0 1px rgba(52, 59, 237, 0.04);
}

.scope-matrix-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.scope-matrix-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 84rem;
	text-align: left;
}

/* Table Header */
.scope-matrix-table thead tr {
	background: linear-gradient(135deg, #000f45 0%, #0b1a56 50%, #15246a 100%);
	color: #ffffff;
}

.scope-matrix-table th {
	padding: 2.2rem 2.6rem;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.12rem;
	text-transform: uppercase;
	color: #ffffff;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	vertical-align: middle;
}

.scope-matrix-table th:last-child {
	border-right: none;
}

.th-header-cell {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.th-status-dot {
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	display: inline-block;
}

.dot-green {
	background: #22c55e;
	box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.dot-blue {
	background: #38bdf8;
	box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.dot-cyan {
	background: #a855f7;
	box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}

/* Table Body Rows */
.scope-matrix-table tbody tr {
	border-bottom: 1px solid #eef2f9;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.scope-matrix-table tbody tr:last-child {
	border-bottom: none;
}

.scope-matrix-table tbody tr:hover {
	background-color: #f7faff;
}

.scope-matrix-table td {
	padding: 2.6rem 2.4rem;
	font-size: 1.4rem;
	line-height: 1.6;
	color: #1e293b;
	vertical-align: top;
	border-right: 1px solid #f1f5f9;
}

.scope-matrix-table td:last-child {
	border-right: none;
}

/* Service Column */
.col-service {
	width: 22%;
	border-left: 4px solid transparent;
	transition: border-color 0.25s ease;
}

.scope-matrix-table tbody tr:hover .col-service {
	border-left-color: var(--color-primary, #343bed);
	background: #f0f5ff;
}

.matrix-service-box {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.matrix-service-title {
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--color-navy, #000f45);
	line-height: 1.25;
}

.matrix-service-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.06rem;
	text-transform: uppercase;
	color: var(--color-primary, #343bed);
	background: #eef4ff;
	border: 1px solid #bfdbfe;
	padding: 0.25rem 0.8rem;
	border-radius: 0.5rem;
}

/* Included Scope List */
.col-included {
	width: 28%;
}

.matrix-check-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.matrix-check-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	font-size: 1.38rem;
	color: #1e293b;
	line-height: 1.45;
}

.m-check-icon {
	flex-shrink: 0;
	margin-top: 0.2rem;
	color: #16a34a;
}

/* What's Extra List */
.col-extra {
	width: 26%;
}

.matrix-extra-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.matrix-extra-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	font-size: 1.35rem;
	color: #475569;
	line-height: 1.45;
}

.m-plus-icon {
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 0.4rem;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #2563eb;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 0.15rem;
}

/* Client Commitment List */
.col-commitment {
	width: 24%;
}

.matrix-commit-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.matrix-commit-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	font-size: 1.35rem;
	color: #334155;
	line-height: 1.45;
}

.m-dot-icon {
	flex-shrink: 0;
	margin-top: 0.35rem;
	color: #343bed;
}

/* Matrix Table Footer Trust Bar */
.scope-matrix-footer {
	background: #f8fafc;
	border-top: 1px solid #eef2f9;
	padding: 1.8rem 2.6rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.matrix-footer-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.3rem;
	color: #475569;
}

.matrix-footer-item svg {
	flex-shrink: 0;
}

.matrix-footer-item strong {
	color: var(--color-navy, #000f45);
	font-weight: 600;
}

/* ==========================================================================
   Pricing FAQs
   ========================================================================== */
.pricing-accordion-wrap {
	max-width: 86rem;
	margin-inline: auto;
}