/**
 * ImageVault Pro — plans page: hero, the member's current plan, the ad-free spotlight and
 * the plan comparison grid with the recommended card glowing.
 * Mobile first; motion lives in the reduced-motion block.
 */

.ivp-app .ivp-pl {
	display: flex;
	flex-direction: column;
	gap: var(--ivp-sp-8);
}

.ivp-app .ivp-pl__hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ivp-sp-3);
	padding: var(--ivp-sp-10) var(--ivp-sp-5);
	overflow: hidden;
	border-radius: var(--ivp-r-2xl);
	background: var(--ivp-grad-mesh), var(--ivp-surface);
	text-align: center;
	isolation: isolate;
}

.ivp-app .ivp-pl__hero .ivp-page-header__title,
.ivp-app .ivp-pl__hero .ivp-lead {
	max-width: 40rem;
	margin: 0;
}

.ivp-app .ivp-pl__blob {
	position: absolute;
	z-index: -1;
	width: 16rem;
	height: 16rem;
	opacity: 0.32;
	pointer-events: none;
}

.ivp-app .ivp-pl__blob--a {
	top: -6rem;
	left: -5rem;
	background: var(--ivp-grad-candy);
}

.ivp-app .ivp-pl__blob--b {
	right: -6rem;
	bottom: -7rem;
	background: var(--ivp-grad-forest);
}

.ivp-app .ivp-pl__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-2);
	color: var(--ivp-primary);
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-semibold);
	letter-spacing: var(--ivp-ls-wide);
	text-transform: uppercase;
}

.ivp-app .ivp-pl__current {
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-2);
	margin-top: var(--ivp-sp-2);
	padding: var(--ivp-sp-2) var(--ivp-sp-4);
	border-radius: var(--ivp-r-full);
	color: var(--ivp-text);
	background: var(--ivp-success-soft);
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-medium);
}

.ivp-app .ivp-pl__current > .ivp-icon {
	color: var(--ivp-success);
}

/* Ad-free spotlight ------------------------------------------------------ */

.ivp-app .ivp-pl-adfree {
	display: grid;
	gap: var(--ivp-sp-6);
	align-items: center;
	padding: var(--ivp-sp-6);
	border: 2px solid transparent;
	background: linear-gradient(var(--ivp-surface), var(--ivp-surface)) padding-box, var(--ivp-grad-forest) border-box;
}

.ivp-app .ivp-pl-adfree__art {
	max-width: 16rem;
	margin-inline: auto;
}

.ivp-app .ivp-pl-adfree__svg {
	display: block;
	width: 100%;
	height: auto;
}

.ivp-app .ivp-pl-adfree__window { fill: var(--ivp-surface-2); stroke: var(--ivp-border-strong); stroke-width: 1.5; }
.ivp-app .ivp-pl-adfree__bar { fill: var(--ivp-surface-3); }
.ivp-app .ivp-pl-adfree__dot--a { fill: var(--ivp-rose); }
.ivp-app .ivp-pl-adfree__dot--b { fill: var(--ivp-amber); }
.ivp-app .ivp-pl-adfree__dot--c { fill: var(--ivp-lime); }
.ivp-app .ivp-pl-adfree__photo { fill: var(--ivp-ocean-1); }
.ivp-app .ivp-pl-adfree__hill { fill: var(--ivp-violet); }
.ivp-app .ivp-pl-adfree__ad { fill: var(--ivp-surface-3); stroke: var(--ivp-border-strong); stroke-dasharray: 4 3; }
.ivp-app .ivp-pl-adfree__cross { fill: none; stroke: var(--ivp-danger); stroke-width: 4; stroke-linecap: round; }
.ivp-app .ivp-pl-adfree__shield { fill: var(--ivp-success); }
.ivp-app .ivp-pl-adfree__tick { fill: none; stroke: var(--ivp-white); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

.ivp-app .ivp-pl-adfree__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ivp-sp-3);
}

.ivp-app .ivp-pl-adfree__title {
	font-size: var(--ivp-fs-2xl);
}

.ivp-app .ivp-pl-adfree__text .ivp-lead {
	margin: 0;
}

/* Plan grid -------------------------------------------------------------- */

.ivp-app .ivp-pl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--ivp-sp-5);
	align-items: start;
}

.ivp-app .ivp-pl-plan {
	display: flex;
	flex-direction: column;
	gap: var(--ivp-sp-4);
	padding: var(--ivp-sp-6) var(--ivp-sp-5);
}

.ivp-app .ivp-pl-plan.is-current {
	border-color: var(--ivp-success);
	box-shadow: 0 0 0 3px var(--ivp-success-soft), var(--ivp-shadow-md);
}

.ivp-app .ivp-pl-plan__badges {
	display: flex;
	min-height: 1.5rem;
}

.ivp-app .ivp-pl-plan__badges .ivp-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-1);
}

.ivp-app .ivp-pl-plan__name {
	font-size: var(--ivp-fs-xl);
}

.ivp-app .ivp-pl-plan__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--ivp-sp-1);
}

.ivp-app .ivp-pl-plan__currency {
	font-size: var(--ivp-fs-xl);
	font-weight: var(--ivp-fw-bold);
}

.ivp-app .ivp-pl-plan__amount {
	font-size: var(--ivp-fs-4xl);
	font-weight: var(--ivp-fw-black);
	line-height: var(--ivp-lh-tight);
	font-variant-numeric: tabular-nums;
}

.ivp-app .ivp-pl-plan__period {
	color: var(--ivp-text-muted);
	font-size: var(--ivp-fs-sm);
}

.ivp-app .ivp-pl-plan__cta.is-current {
	cursor: default;
	opacity: 0.8;
}

.ivp-app .ivp-pl-plan__features {
	display: grid;
	gap: var(--ivp-sp-3);
	padding-top: var(--ivp-sp-4);
	border-top: 1px solid var(--ivp-border);
}

.ivp-app .ivp-pl-plan__feature {
	display: flex;
	align-items: flex-start;
	gap: var(--ivp-sp-2);
	font-size: var(--ivp-fs-sm);
}

.ivp-app .ivp-pl-plan__feature > .ivp-icon {
	flex-shrink: 0;
	margin-top: 0.1em;
	--ivp-icon-size: 1.125rem;
}

.ivp-app .ivp-pl-plan__feature.is-included > .ivp-icon {
	color: var(--ivp-success);
}

.ivp-app .ivp-pl-plan__feature.is-excluded {
	color: var(--ivp-text-subtle);
}

.ivp-app .ivp-pl-plan__feature.is-highlight {
	margin-inline: calc(-1 * var(--ivp-sp-2));
	padding: var(--ivp-sp-2);
	border-radius: var(--ivp-r-md);
	color: var(--ivp-text);
	background: var(--ivp-success-soft);
	font-weight: var(--ivp-fw-semibold);
}

.ivp-app .ivp-pl-plan--recommended {
	border: 2px solid transparent;
	background: linear-gradient(var(--ivp-surface), var(--ivp-surface)) padding-box, var(--ivp-grad-primary) border-box;
	box-shadow: var(--ivp-shadow-glow);
}

.ivp-app .ivp-pl-plan__quote {
	display: grid;
	gap: var(--ivp-sp-2);
	padding: var(--ivp-sp-3);
	border-radius: var(--ivp-r-md);
	background: var(--ivp-surface-2);
}

.ivp-app .ivp-pl-plan__quote--up {
	background: var(--ivp-primary-soft);
}

.ivp-app .ivp-pl-plan__today {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ivp-sp-2);
}

.ivp-app .ivp-pl-plan__today-label {
	color: var(--ivp-text-muted);
	font-size: var(--ivp-fs-xs);
	font-weight: var(--ivp-fw-semibold);
	letter-spacing: var(--ivp-ls-wide);
	text-transform: uppercase;
}

.ivp-app .ivp-pl-plan__today-amount {
	color: var(--ivp-primary);
	font-size: var(--ivp-fs-xl);
	font-weight: var(--ivp-fw-bold);
	font-variant-numeric: tabular-nums;
}

.ivp-app .ivp-pl-plan__note {
	margin: 0;
	color: var(--ivp-text-muted);
	font-size: var(--ivp-fs-xs);
}

.ivp-app .ivp-pl-plan__diff {
	display: grid;
	gap: var(--ivp-sp-2);
}

.ivp-app .ivp-pl-plan__diff-title {
	margin: 0;
	color: var(--ivp-text-muted);
	font-size: var(--ivp-fs-xs);
	font-weight: var(--ivp-fw-semibold);
	letter-spacing: var(--ivp-ls-wide);
	text-transform: uppercase;
}

.ivp-app .ivp-pl-plan__gains,
.ivp-app .ivp-pl-plan__losses {
	display: grid;
	gap: var(--ivp-sp-1);
	font-size: var(--ivp-fs-sm);
}

.ivp-app .ivp-pl-plan__gains > li,
.ivp-app .ivp-pl-plan__losses > li {
	display: flex;
	align-items: flex-start;
	gap: var(--ivp-sp-2);
}

.ivp-app .ivp-pl-plan__gains .ivp-icon,
.ivp-app .ivp-pl-plan__losses .ivp-icon {
	flex-shrink: 0;
	margin-top: 0.15em;
	--ivp-icon-size: 1rem;
}

.ivp-app .ivp-pl-plan__gains .ivp-icon {
	color: var(--ivp-success);
}

.ivp-app .ivp-pl-plan__losses {
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-pl-plan__losses .ivp-icon {
	color: var(--ivp-danger);
}

.ivp-app .ivp-pl-plan__actions {
	display: grid;
	gap: var(--ivp-sp-2);
}

.ivp-app .ivp-pl__flash {
	display: flex;
	align-items: flex-start;
	gap: var(--ivp-sp-3);
}

.ivp-app .ivp-pl__flash p {
	margin: 0;
}

.ivp-app .ivp-pl__fineprint {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--ivp-sp-2);
	max-width: 44rem;
	margin: 0 auto;
	font-size: var(--ivp-fs-sm);
	text-align: center;
}

.ivp-app .ivp-pl__fineprint > .ivp-icon {
	flex-shrink: 0;
	margin-top: 0.15em;
	color: var(--ivp-success);
}

/* Current plan panel ------------------------------------------------------ */

.ivp-app .ivp-pl-me {
	display: grid;
	gap: var(--ivp-sp-6);
	padding: var(--ivp-sp-6) var(--ivp-sp-5);
}

.ivp-app .ivp-pl-me__plan {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ivp-sp-3);
	min-width: 0;
}

.ivp-app .ivp-pl-me__eyebrow {
	margin: 0;
	color: var(--ivp-primary);
	font-size: var(--ivp-fs-xs);
	font-weight: var(--ivp-fw-semibold);
	letter-spacing: var(--ivp-ls-wide);
	text-transform: uppercase;
}

.ivp-app .ivp-pl-me__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ivp-sp-2) var(--ivp-sp-3);
	margin: 0;
	font-size: var(--ivp-fs-2xl);
}

.ivp-app .ivp-pl-me__text {
	margin: 0;
}

.ivp-app .ivp-pl-me__notice {
	display: flex;
	align-items: flex-start;
	gap: var(--ivp-sp-2);
	margin: 0;
}

.ivp-app .ivp-pl-me__notice > .ivp-icon {
	flex-shrink: 0;
	margin-top: 0.15em;
}

.ivp-app .ivp-pl-me__usage {
	min-width: 0;
}

@media (min-width: 48rem) {
	.ivp-app .ivp-pl__hero {
		padding: var(--ivp-sp-14) var(--ivp-sp-8);
	}

	.ivp-app .ivp-pl-me {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		align-items: start;
		padding: var(--ivp-sp-8);
	}

	.ivp-app .ivp-pl-adfree {
		grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
		padding: var(--ivp-sp-8);
	}

	.ivp-app .ivp-pl-plan--featured {
		transform: translateY(calc(-1 * var(--ivp-sp-3)));
	}
}

@media (prefers-reduced-motion: no-preference) {

	.ivp-app .ivp-pl__blob--a {
		animation: ivp-blobMorph 15s var(--ivp-ease-in-out) infinite, ivp-floatSlow 12s var(--ivp-ease-in-out) infinite;
	}

	.ivp-app .ivp-pl__blob--b {
		animation: ivp-blobMorph 18s var(--ivp-ease-in-out) infinite reverse, ivp-floatSlow 14s var(--ivp-ease-in-out) infinite;
	}

	.ivp-app .ivp-pl-plan {
		transition: transform var(--ivp-dur) var(--ivp-ease), translate var(--ivp-dur) var(--ivp-ease-spring), box-shadow var(--ivp-dur) var(--ivp-ease);
	}

	/* translate, not transform: the stagger reveal animation holds transform on each card. */
	.ivp-app .ivp-pl-plan:hover,
	.ivp-app .ivp-pl-plan:focus-within {
		translate: 0 calc(-1 * var(--ivp-sp-2));
		box-shadow: var(--ivp-shadow-xl);
	}

	@keyframes ivp-plGlow {
		0%,
		100% { box-shadow: var(--ivp-shadow-glow); }
		50% { box-shadow: 0 16px 44px -4px var(--ivp-glow-color), 0 0 0 4px var(--ivp-primary-ring); }
	}

	.ivp-app .ivp-pl-plan--recommended {
		animation: ivp-plGlow 3.2s var(--ivp-ease-in-out) infinite;
	}

	.ivp-app [data-ivp-reveal="stagger"].ivp-in > .ivp-pl-plan--recommended {
		animation: ivp-fadeUp var(--ivp-dur-slow) var(--ivp-ease) both, ivp-plGlow 3.2s var(--ivp-ease-in-out) var(--ivp-dur-slow) infinite;
		animation-delay: calc(var(--i, 0) * var(--ivp-stagger-step)), calc(var(--i, 0) * var(--ivp-stagger-step) + var(--ivp-dur-slow));
	}

	.ivp-app .ivp-pl-plan--recommended .ivp-pl-plan__badges .ivp-icon {
		animation: ivp-bounceSoft 2.4s var(--ivp-ease-spring) infinite;
	}

	.ivp-app .ivp-pl__flash > .ivp-icon {
		animation: ivp-checkPop 0.6s var(--ivp-ease-spring) both;
	}

	.ivp-app .ivp-pl-adfree.ivp-in .ivp-pl-adfree__shield {
		transform-box: fill-box;
		transform-origin: center;
		animation: ivp-checkPop 0.6s var(--ivp-ease-spring) 0.4s both;
	}

	.ivp-app .ivp-pl-adfree.ivp-in .ivp-pl-adfree__tick {
		stroke-dasharray: 100;
		--ivp-dash: 100;
		animation: ivp-drawLine 0.7s var(--ivp-ease) 0.8s both;
	}

	.ivp-app .ivp-pl-adfree.ivp-in .ivp-pl-adfree__cross {
		stroke-dasharray: 100;
		--ivp-dash: 100;
		animation: ivp-drawLine 0.6s var(--ivp-ease) 0.2s both;
	}

	.ivp-app .ivp-pl-adfree__ad {
		animation: ivp-pulse 2.6s var(--ivp-ease-in-out) infinite;
	}

	.ivp-app .ivp-pl-plan__feature.is-highlight > .ivp-icon {
		animation: ivp-bounceSoft 2.4s var(--ivp-ease-spring) 1s infinite;
	}
}