/**
 * Launch offer components: the "Free until…" badge, the after-window price
 * note and the extension note. New file so it never conflicts with the
 * motion review's bb-motion.css / bb-home.css / bb-pages.css / bb-base.css.
 *
 * Rules (offer-plan.md §3.2):
 * - No motion or icon. Never --bb-over (reserved for data).
 * - Not a pill (craft rule 7 limits pills; "Most helpful" is already one).
 * - Reduced-motion is irrelevant here: nothing moves.
 * - Must wrap cleanly at 390px.
 */

.bb-offer-price {
	display: block;
	font-family: var(--bb-font-display, "Fraunces", serif);
	font-weight: 600; /* design-system.md §5 Price display: Fraunces 600, 2.5rem */
	font-size: 2.5rem;
	line-height: 1.1;
	color: var(--bb-olive-900);
	font-variant-numeric: tabular-nums;
}

/* Inline text flow, not flex: at 390 the flex version broke "· then $9.99"
   onto its own line with an orphaned leading dot. */
.bb-offer-note {
	display: block;
	width: fit-content;
	max-width: 100%;
	text-wrap: balance;
	margin: 8px 0 0;
	padding: 4px 12px;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-sm);
	background: var(--bb-sage-100);
	color: var(--bb-olive-900); /* 11.93:1 */
	font: 700 .875rem/1.5 "Nunito Sans", sans-serif;
	font-variant-numeric: tabular-nums;
}

.bb-offer-note__then {
	font-weight: 400;
	color: var(--bb-muted); /* 5.49:1 on sage, 6.18:1 on cream */
}

.bb-offer-extended {
	font-size: .875rem;
	color: var(--bb-muted);
	display: block;
	margin-top: 4px;
}

/* The quiet "Starter Sheet is free, always" entry link (post-window). AA text link, 44px target. */
.bb-offer-starter-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--bb-olive-900);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}
.bb-offer-starter-link:hover { text-decoration-thickness: 2px; }

/* The quiet line under the plan cards: its own breath of space, reading measure. */
.bb-section .e-con > .elementor-widget.bb-offer-quiet-line {
	--bb-mt: var(--bb-space-6);
	max-width: 65ch;
	color: var(--bb-olive-900);
}
.bb-section .e-con > .elementor-widget.bb-offer-quiet-line + .bb-pricing-note { --bb-mt: var(--bb-space-3); }
@media (max-width: 767px) {
	.bb-section .e-con > .elementor-widget.bb-offer-quiet-line { --bb-mt: var(--bb-space-5); }
}

/* Dashboard CTA states ([bb_dashboard_cta]): the quiet "Coming soon" and the cream variant for dark bands.
   Not a link, no hover. AA: olive-900 on white/peach/sage 11+:1, cream on olive-900 13.43:1. */
.bb-btn.bb-btn--oncream:not(.elementor-widget) { background: var(--bb-cream); color: var(--bb-olive-900); }
.bb-btn.bb-btn--oncream:not(.elementor-widget):hover,
.bb-btn.bb-btn--oncream:not(.elementor-widget):focus { background: var(--bb-peach-100); color: var(--bb-olive-900); }
.bb-btn.bb-btn--soon[aria-disabled="true"]:not(.elementor-widget),
.bb-btn.bb-btn--soon[aria-disabled="true"]:not(.elementor-widget):hover {
	opacity: 1;
	cursor: default;
	background: transparent;
	color: var(--bb-olive-900);
	border: 1px solid rgba(38, 49, 28, .4);
	font-weight: 600;
}
.bb-btn.bb-btn--soon.bb-btn--oncream[aria-disabled="true"]:not(.elementor-widget),
.bb-btn.bb-btn--soon.bb-btn--oncream[aria-disabled="true"]:not(.elementor-widget):hover {
	background: transparent;
	color: var(--bb-cream);
	border-color: rgba(255, 253, 248, .5);
}
.bb-soon-note, .bb-pay-note {
	display: block;
	margin-top: var(--bb-space-2);
	font-size: var(--bb-small-size);
	line-height: 1.5;
	color: var(--bb-muted);
	text-wrap: pretty;
}
.bb-soon-note--oncream { color: var(--bb-cream); }
.bb-pay-note { margin: 0 0 var(--bb-space-4); max-width: 65ch; }