/* Pricing block — loaded on the front end AND in the editor (block.json "style"),
   and the edit component renders the same DOM, so the two match by construction.
   Card design: left-aligned, rounded, one slate "highlight" card; the rest white. */
.ol-pricing {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 24px;
	margin: 40px 0 0;
	text-align: left;
	line-height: 1.5;
}
.ol-pricing-col {
	--ol-card-bg: #fff;
	--ol-card-fg: #333;
	--ol-card-muted: #5f676d;
	--ol-card-eyebrow: #7d2727;
	--ol-card-btn-bg: var(--wp--preset--color--slate, #2f495e);
	--ol-card-btn-fg: #fff;
	position: relative;
	flex: 1 1 280px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 40px;
	box-sizing: border-box;
	color: var(--ol-card-fg);
	background: var(--ol-card-bg);
	border: 1px solid #dde2e6;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.ol-pricing-col.is-highlight {
	--ol-card-bg: var(--wp--preset--color--slate, #2f495e);
	--ol-card-fg: #fff;
	--ol-card-muted: #c9d3dc;
	--ol-card-eyebrow: #c9d3dc;
	--ol-card-btn-bg: #fff;
	--ol-card-btn-fg: var(--wp--preset--color--slate, #2f495e);
	border-color: transparent;
	box-shadow: 0 16px 40px rgba(31, 50, 66, .28);
	overflow: hidden;
}
/* A soft light sweep across the highlighted card, once, when it rises in. */
.ol-pricing-col.is-highlight::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 50%, transparent 70%);
	transform: translateX(-120%);
}
/* Repeats rather than running once: a 12s cycle in which the sweep itself
   occupies about 1.5s and the rest is rest. The card is overflow:hidden, so
   the jump back to the start happens out of sight. */
.ol-pricing.is-visible .ol-pricing-col.is-highlight::after {
	animation: ol-price-sheen 12s ease-in-out 1s infinite;
}
@keyframes ol-price-sheen {
	0%        { transform: translateX(-120%); }
	12%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
	.ol-pricing.is-visible .ol-pricing-col.is-highlight::after { animation: none; }
}
.ol-pricing-col:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0, 0, 0, .14); }
.ol-pricing-col.is-highlight:hover { box-shadow: 0 26px 56px rgba(31, 50, 66, .36); }

.ol-pricing-col .ol-price__title {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ol-card-eyebrow);
	background: none;
}
.ol-pricing-col .ol-price__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
	margin: 0;
	padding: 0;
	color: var(--ol-card-fg);
	background: none;
	font-size: 54px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.01em;
	text-align: left;
}
.ol-pricing-col .ol-price__period { display: inline; margin: 0; font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ol-card-muted); }
.ol-pricing-col .ol-price__desc { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ol-card-muted); text-align: left; }
.ol-pricing-col .ol-price__features { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; font-size: 16px; color: var(--ol-card-fg); text-align: left; }
.ol-pricing-col .ol-price__feature { position: relative; margin: 0; padding: 0 0 0 26px; background: none; border: 0; line-height: 1.35; }
.ol-pricing-col .ol-price__feature::before {
	content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; border-radius: 50%;
	background: var(--ol-green, #2f7d4f);
	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.ol-pricing-col .ol-price__feature:hover::before { transform: scale(1.25); }
/* On the slate card the dots read white, not red. */
.ol-pricing-col.is-highlight .ol-price__feature::before { background: #fff; }
.ol-pricing-col .ol-price__button { padding: 4px 0 0; }
.ol-pricing-col .ol-price__button a,
.ol-pricing-col .ol-price__button .ol-price__button-text {
	position: relative;
	display: inline-block;
	padding: 15px 26px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ol-card-btn-fg);
	background: var(--ol-card-btn-bg);
	border-radius: 4px;
	transition: transform .2s ease, box-shadow .2s ease, padding-right .25s cubic-bezier(.2, .7, .2, 1);
}
.ol-pricing-col .ol-price__button a::after {
	content: "→"; position: absolute; right: 14px; top: 50%; transform: translate(-6px, -50%); opacity: 0;
	transition: transform .25s cubic-bezier(.2, .7, .2, 1), opacity .2s ease;
}
.ol-pricing-col .ol-price__button a:hover { color: var(--ol-card-btn-fg); padding-right: 42px; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.ol-pricing-col .ol-price__button a:hover::after { transform: translate(0, -50%); opacity: 1; }

/* Load animation: armed by view.js, so no-JS and reduced-motion visitors see the columns immediately. */
.ol-pricing.is-armed .ol-pricing-col { opacity: 0; transform: translateY(24px); }
.ol-pricing.is-armed.is-visible .ol-pricing-col { animation: ol-price-rise .6s cubic-bezier(.2, .7, .2, 1) forwards; }
.ol-pricing.is-armed.is-visible .ol-pricing-col:nth-child(2) { animation-delay: .12s; }
.ol-pricing.is-armed.is-visible .ol-pricing-col:nth-child(3) { animation-delay: .24s; }
.ol-pricing.is-armed.is-visible .ol-pricing-col:nth-child(4) { animation-delay: .36s; }
.ol-pricing.is-armed.is-visible .ol-pricing-col:nth-child(n+5) { animation-delay: .48s; }
@keyframes ol-price-rise { to { opacity: 1; transform: none; } }
/* …then the price pops and the features tick in one after another. */
.ol-pricing.is-armed .ol-price__value { display: inline-block; opacity: 0; transform: translateY(.3em); }
.ol-pricing.is-armed.is-visible .ol-price__value { animation: ol-price-pop .5s cubic-bezier(.2, .7, .2, 1) .35s forwards; }
@keyframes ol-price-pop { to { opacity: 1; transform: none; } }
.ol-pricing.is-armed .ol-price__feature { opacity: 0; transform: translateX(-8px); }
.ol-pricing.is-armed.is-visible .ol-price__feature { animation: ol-price-feature .4s ease forwards; animation-delay: calc(.45s + var(--i, 0) * 70ms); }
@keyframes ol-price-feature { to { opacity: 1; transform: none; } }
.ol-pricing.is-armed .ol-price__feature:nth-child(1) { --i: 0; } .ol-pricing.is-armed .ol-price__feature:nth-child(2) { --i: 1; } .ol-pricing.is-armed .ol-price__feature:nth-child(3) { --i: 2; } .ol-pricing.is-armed .ol-price__feature:nth-child(4) { --i: 3; } .ol-pricing.is-armed .ol-price__feature:nth-child(5) { --i: 4; } .ol-pricing.is-armed .ol-price__feature:nth-child(6) { --i: 5; } .ol-pricing.is-armed .ol-price__feature:nth-child(n+7) { --i: 6; }

@media (max-width: 640px) { .ol-pricing-col { padding: 28px 24px; } .ol-pricing-col .ol-price__amount { font-size: 44px; } }

/* ---- Editor only: keep the exact layout, show the block tools sensibly ---- */
.editor-styles-wrapper .ol-pricing { text-align: left; }
.editor-styles-wrapper .ol-pricing-col { min-width: 260px; }
.editor-styles-wrapper .ol-pricing-col:hover { transform: none; }
.editor-styles-wrapper .ol-pricing-col .ol-price__features > .block-editor-inner-blocks,
.editor-styles-wrapper .ol-pricing-col .ol-price__features > .block-editor-inner-blocks > .block-editor-block-list__layout { display: flex; flex-direction: column; gap: 10px; }
.editor-styles-wrapper .ol-pricing-col .ol-price__feature.block-editor-block-list__block { margin: 0; }
.editor-styles-wrapper .ol-pricing-col .ol-price__feature [data-rich-text-placeholder]::after { color: var(--ol-card-muted); }
.editor-styles-wrapper .ol-pricing-col .ol-price__features .block-list-appender { position: static; display: block; width: auto; margin: 4px 0 0; padding: 0; background: none; }
.editor-styles-wrapper .ol-pricing-col .ol-price__features .block-list-appender .block-editor-button-block-appender { width: 100%; justify-content: flex-start; color: var(--ol-card-muted); box-shadow: none; background: rgba(152, 48, 48, .12); border-radius: 4px; }
.editor-styles-wrapper .ol-pricing > .block-editor-inner-blocks,
.editor-styles-wrapper .ol-pricing > .block-editor-inner-blocks > .block-editor-block-list__layout { display: contents; }
.editor-styles-wrapper .ol-pricing .ol-pricing__add { flex: 0 0 auto; align-self: center; }
.editor-styles-wrapper .ol-pricing-col .ol-price__button-text[data-rich-text-placeholder]::after { color: var(--ol-card-btn-fg); opacity: .6; }
.editor-styles-wrapper .ol-pricing-col .ol-price__title[data-rich-text-placeholder]::after,
.editor-styles-wrapper .ol-pricing-col .ol-price__amount [data-rich-text-placeholder]::after,
.editor-styles-wrapper .ol-pricing-col .ol-price__desc[data-rich-text-placeholder]::after { color: var(--ol-card-muted); }