/* Pricing page */
.djs-pricing { background: var(--djs-canvas); }
.djs-pricing__hero { padding-block: 72px 36px; text-align: center; }
.djs-eyebrow { margin: 0 0 28px; font-size: var(--djs-fs-label); font-weight: 500; letter-spacing: .01em; text-transform: uppercase; color: var(--djs-action-blue); }
.djs-pricing__hero h1 { margin: 0 0 24px; line-height: 1; }
.djs-pricing__sub { margin: 0; color: var(--djs-muted); }
.djs-pricing__plans { padding-block: 36px 72px; }

.djs-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.djs-plan { display: flex; flex-direction: column; padding: 32px; border-radius: var(--djs-radius-card); }
.djs-plan__eyebrow { margin: 0 0 24px; font-size: var(--djs-fs-small); font-weight: 600; text-transform: uppercase; }
.djs-plan__price { margin: 0 0 24px; font-family: var(--djs-font-heading); font-weight: 700; font-size: var(--djs-fs-display); line-height: 1; letter-spacing: -0.03em; }
.djs-plan__name { margin: 0 0 20px; font-size: var(--djs-fs-card); line-height: var(--djs-lh-card); }
.djs-plan__desc { margin: 0 0 28px; flex: 1; }
.djs-plan__cta { display: block; padding: 14px 20px; border-radius: 10px; text-align: center; font-size: var(--djs-fs-label); font-weight: 700; text-decoration: none; text-transform: lowercase; transition: filter .15s; }
.djs-plan__cta:hover { filter: brightness(.95); }

.djs-plan--dark { background: var(--djs-action-blue); color: var(--djs-white); }
.djs-plan--dark .djs-plan__eyebrow { color: var(--djs-soft-lavender); }
.djs-plan--dark .djs-plan__price, .djs-plan--dark .djs-plan__name { color: var(--djs-white); }
.djs-plan--dark .djs-plan__cta { background: var(--djs-sunshine); color: var(--djs-action-blue); }
.djs-plan--dark .djs-plan__cta:hover { color: var(--djs-action-blue); }

.djs-plan--light { background: var(--djs-soft-lavender); color: var(--djs-action-blue); }
.djs-plan--light .djs-plan__eyebrow, .djs-plan--light .djs-plan__price, .djs-plan--light .djs-plan__name { color: var(--djs-action-blue); }
.djs-plan--light .djs-plan__desc { color: var(--djs-link-hover); }
.djs-plan--light .djs-plan__cta { background: var(--djs-action-blue); color: var(--djs-white); }
.djs-plan--light .djs-plan__cta:hover { color: var(--djs-white); }

@media (max-width: 900px) {
	.djs-pricing__hero { padding-block: 48px 24px; }
	.djs-plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}