/* Bump and Beyond motion layer, "ink on ruled paper" (motion-plan.md). Loads
   sitewide; bb-motion.js (Home/Pricing/FAQ/HIW only) adds .bb-motion-ready, so
   elsewhere only the micro-interactions apply. Start states live only under
   .bb-motion-ready .bb-rv:not(.is-in); keyframes hold only a `from`, so every
   end state is the element's own style (no JS / reduced motion = finished page). */

@property --bb-pct { syntax: '<number>'; inherits: true; initial-value: 0; }
/* bb-base already cuts durations to ~0 under reduced motion; delays would
   still hold `from` states (stroke, flags, bars) for up to 750ms. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-delay: 0s !important; transition-delay: 0s !important; }
}
@keyframes bb-pct-in { from { --bb-pct: 0; } }
@keyframes bb-scale-x { from { transform: scaleX(0); } }
@keyframes bb-wipe { from { clip-path: inset(0 100% 0 0); } }

.bb-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 0. Sitewide: nav/footer underline, menu, cards (#14, #17) ---------- */
.bb-nav-primary a,
.bb-footer-grid li a,
.bb-footer-email {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size var(--bb-duration-fast) var(--bb-ease-in), color var(--bb-duration-fast) var(--bb-ease);
}
.bb-nav-primary a:hover, .bb-nav-primary a:focus-visible, .bb-nav-primary .current-menu-item > a,
.bb-footer-grid li a:hover, .bb-footer-grid li a:focus-visible,
.bb-footer-email:hover, .bb-footer-email:focus-visible {
	background-size: 100% 1px;
	transition-duration: var(--bb-duration-ui);
	transition-timing-function: var(--bb-ease);
}

/* Close icon arrives with a quarter turn; the hamburger returns instantly. */
.bb-menu-toggle .bb-icon-close { transition: transform var(--bb-duration-fast) var(--bb-ease), opacity var(--bb-duration-fast) var(--bb-ease); }
@starting-style { .bb-menu-toggle .bb-icon-close { opacity: 0; transform: rotate(-90deg); } }

/* Mobile panel unfold: a closed panel opening, so starting at opacity 0 is correct. */
@supports (transition-behavior: allow-discrete) {
	.bb-mobile-panel {
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity var(--bb-duration-fast) var(--bb-ease-in), transform var(--bb-duration-fast) var(--bb-ease-in), display var(--bb-duration-fast) allow-discrete;
	}
	.bb-mobile-panel.bb-open {
		opacity: 1;
		transform: none;
		transition: opacity var(--bb-duration-ui) var(--bb-ease-out-expo), transform var(--bb-duration-ui) var(--bb-ease-out-expo), display var(--bb-duration-ui) allow-discrete;
	}
	.bb-mobile-panel.bb-open li, .bb-mobile-panel.bb-open > .bb-btn { transition: transform var(--bb-duration-ui) var(--bb-ease-out-expo); }
	.bb-mobile-panel.bb-open li:nth-child(2) { transition-delay: 30ms; }
	.bb-mobile-panel.bb-open li:nth-child(3) { transition-delay: 60ms; }
	.bb-mobile-panel.bb-open li:nth-child(n+4) { transition-delay: 90ms; }
	.bb-mobile-panel.bb-open > .bb-btn { transition-delay: 120ms; }
	@starting-style {
		.bb-mobile-panel.bb-open { opacity: 0; transform: translateY(-8px); }
		.bb-mobile-panel.bb-open li, .bb-mobile-panel.bb-open > .bb-btn { transform: translateY(6px); }
	}
}

.e-con.bb-plan-card { transition: transform var(--bb-duration-fast) var(--bb-ease), box-shadow var(--bb-duration-fast) var(--bb-ease); }
.e-con.bb-plan-card:hover, .e-con.bb-plan-card:focus-within { transform: translateY(-3px); box-shadow: var(--bb-shadow-md); }

/* #16 soft light follows the pointer on the paid card (fine pointers only). */
@media (hover: hover) and (pointer: fine) {
	.e-con.bb-plan-dash { isolation: isolate; }
	.e-con.bb-plan-dash::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .35), transparent 70%);
		opacity: 0;
		transition: opacity var(--bb-duration-fast) var(--bb-ease);
		pointer-events: none;
	}
	.e-con.bb-plan-dash:hover::after { opacity: 1; }
}

/* #21 calm page-to-page crossfade; the header stays put. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-group(*) { animation-duration: 200ms; animation-timing-function: var(--bb-ease); }
	.bb-header { view-transition-name: bb-header; }
}

/* ---------- 1. Home hero: the one authored load sequence (#1-#4, #15) ---------- */
.bb-hero-h1 .bb-w {
	display: inline-block;
	animation: bb-word var(--bb-duration-reveal) var(--bb-ease-out-expo) calc(var(--i, 0) * 45ms) backwards;
}
@keyframes bb-word { from { transform: translateY(.12em); filter: blur(2px); } }
.bb-hero-h1 .bb-visually-hidden { user-select: none; } /* copy = the visible words, once */

.bb-hero-h1 .bb-mark { position: relative; isolation: isolate; } /* keeps the stroke under the word, not under the section */
.bb-hero-h1 .bb-mark::after {
	content: "";
	position: absolute;
	left: -.02em;
	right: -.02em;
	bottom: -.08em;
	height: .14em;
	z-index: -1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 2, 80 12, 100 7 S 160 2, 198 8' fill='none' stroke='%23637D48' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	animation: bb-wipe var(--bb-duration-reveal) var(--bb-ease-out-expo) 520ms backwards;
}

/* Bars fill after their row settles (bb-home: rows at 120/220/320/420ms);
   each flag inks in once its bar has visibly landed. Done by ~1.1s. */
.bb-mock-hero .bb-mock-row-fill { transform-origin: left center; animation: bb-scale-x var(--bb-duration-reveal) var(--bb-ease-out-expo) 200ms backwards; }
.bb-mock-hero .bb-mock-row-flag { animation: bb-wipe var(--bb-duration-ui) linear 450ms backwards; }
.bb-mock-hero .bb-mock-row:nth-of-type(2) .bb-mock-row-fill { animation-delay: 300ms; }
.bb-mock-hero .bb-mock-row:nth-of-type(2) .bb-mock-row-flag { animation-delay: 550ms; }
.bb-mock-hero .bb-mock-row:nth-of-type(3) .bb-mock-row-fill { animation-delay: 400ms; }
.bb-mock-hero .bb-mock-row:nth-of-type(3) .bb-mock-row-flag { animation-delay: 650ms; }
.bb-mock-hero .bb-mock-row:nth-of-type(4) .bb-mock-row-fill { animation-delay: 500ms; }
.bb-mock-hero .bb-mock-row:nth-of-type(4) .bb-mock-row-flag { animation-delay: 750ms; }
.bb-mock-ring-amount { display: inline-block; min-width: 5.5ch; }

/* #15 one light pass across the primary CTA as the sequence ends; plays once. */
.bb-hero-ctas > .elementor-widget-button .elementor-button { position: relative; overflow: hidden; }
.bb-hero-ctas > .elementor-widget-button .elementor-button-content-wrapper { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
	.bb-hero-ctas > .elementor-widget-button .elementor-button::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(115deg, transparent 40%, rgba(255, 253, 248, .22) 50%, transparent 60%);
		transform: translateX(-120%);
		pointer-events: none;
		animation: bb-sheen 900ms var(--bb-ease-out-expo) 1400ms 1;
	}
	.bb-motion-paused .bb-hero-ctas .elementor-button::after { animation-play-state: paused; }
}
@keyframes bb-sheen { to { transform: translateX(120%); } }

/* ---------- 2. Home sections ---------- */
/* #5 Empathy, "Rule": hairlines draw, rows settle 8px, 90ms apart. */
.bb-motion-ready .bb-empathy-items.bb-rv > .bb-empathy-row { position: relative; border-top-color: transparent; }
.bb-motion-ready .bb-empathy-items.bb-rv > .bb-empathy-row:last-child { border-bottom-color: transparent; }
.bb-motion-ready .bb-empathy-items.bb-rv > .bb-empathy-row::before,
.bb-motion-ready .bb-empathy-items.bb-rv > .bb-empathy-row:last-child::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 1px;
	background: rgba(38, 49, 28, .16);
	transform-origin: left center;
	transition: transform var(--bb-duration-reveal) var(--bb-ease-out-expo);
}
.bb-motion-ready .bb-empathy-items.bb-rv > .bb-empathy-row:last-child::after { top: auto; bottom: -1px; transition-delay: 270ms; }
.bb-motion-ready .bb-empathy-items.bb-rv > .bb-empathy-row :is(.bb-empathy-term, .bb-empathy-line) { transition: transform var(--bb-duration-reveal) var(--bb-ease-out-expo); }
.bb-motion-ready .bb-empathy-items.bb-rv:not(.is-in) > .bb-empathy-row::before,
.bb-motion-ready .bb-empathy-items.bb-rv:not(.is-in) > .bb-empathy-row:last-child::after { transform: scaleX(0); }
.bb-motion-ready .bb-empathy-items.bb-rv:not(.is-in) > .bb-empathy-row :is(.bb-empathy-term, .bb-empathy-line) { transform: translateY(8px); }
.bb-motion-ready .bb-empathy-items.bb-rv > .bb-empathy-row:nth-child(2)::before,
.bb-motion-ready .bb-empathy-items.bb-rv > .bb-empathy-row:nth-child(2) :is(.bb-empathy-term, .bb-empathy-line) { transition-delay: 90ms; }
.bb-motion-ready .bb-empathy-items.bb-rv > .bb-empathy-row:nth-child(3)::before,
.bb-motion-ready .bb-empathy-items.bb-rv > .bb-empathy-row:nth-child(3) :is(.bb-empathy-term, .bb-empathy-line) { transition-delay: 180ms; }

/* #6 Three steps, "Connect": the connector draws with scroll and each badge
   stamps as the line reaches it. Scroll-linked where supported (no JS
   needed, never scroll-jacking); IO fallback elsewhere and below 900px. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
		.e-con.bb-how-steps::before {
			transform-origin: left center;
			animation: bb-scale-x linear backwards;
			animation-timeline: view();
			animation-range: entry 25% cover 45%;
		}
		.elementor-widget-text-editor.bb-step-badge {
			animation: bb-stamp linear backwards;
			animation-timeline: view();
			animation-range: entry 30% cover 55%;
		}
	}
}
@keyframes bb-stamp { from { transform: scale(.92); } }
.bb-motion-ready .bb-how-steps.bb-rv::before { transform-origin: left center; transition: transform var(--bb-duration-reveal) var(--bb-ease-out-expo); }
.bb-motion-ready .bb-how-steps.bb-rv .bb-step-badge { transition: transform var(--bb-duration-ui) var(--bb-ease-out-expo); }
.bb-motion-ready .bb-how-steps.bb-rv > .bb-step-item:nth-child(2) .bb-step-badge { transition-delay: 150ms; }
.bb-motion-ready .bb-how-steps.bb-rv > .bb-step-item:nth-child(3) .bb-step-badge { transition-delay: 300ms; }
@supports not (animation-timeline: view()) {
	.bb-motion-ready .bb-how-steps.bb-rv:not(.is-in)::before { transform: scaleX(0); }
	.bb-motion-ready .bb-how-steps.bb-rv:not(.is-in) .bb-step-badge { transform: scale(.92); }
}
@media (max-width: 900px) {
	.bb-motion-ready .bb-how-steps.bb-rv:not(.is-in) .bb-step-badge { transform: scale(.92); }
	.bb-motion-ready .bb-how-steps.bb-rv > .bb-step-item:nth-child(2) .bb-step-badge { transition-delay: 90ms; }
	.bb-motion-ready .bb-how-steps.bb-rv > .bb-step-item:nth-child(3) .bb-step-badge { transition-delay: 180ms; }
}

/* #7 Ticks draw down the plan lists (Home only; the table owns "tick" on
   Pricing). Free first, then the Dashboard card, 50ms apart. */
.bb-motion-ready body.home .bb-pricing-cards.bb-rv .bb-plan-list li::before { transition: transform var(--bb-duration-ui) var(--bb-ease-out-expo), opacity var(--bb-duration-ui) var(--bb-ease-out-expo); }
.bb-motion-ready body.home .bb-pricing-cards.bb-rv:not(.is-in) .bb-plan-list li::before { transform: translateY(-3px) rotate(-45deg) scale(.4); opacity: 0; }
.bb-motion-ready body.home .bb-pricing-cards.bb-rv .bb-plan-free li:nth-child(2)::before { transition-delay: 50ms; }
.bb-motion-ready body.home .bb-pricing-cards.bb-rv .bb-plan-free li:nth-child(3)::before { transition-delay: 100ms; }
.bb-motion-ready body.home .bb-pricing-cards.bb-rv .bb-plan-free li:nth-child(4)::before,
.bb-motion-ready body.home .bb-pricing-cards.bb-rv .bb-plan-dash li:nth-child(1)::before { transition-delay: 150ms; }
.bb-motion-ready body.home .bb-pricing-cards.bb-rv .bb-plan-dash li:nth-child(2)::before { transition-delay: 200ms; }
.bb-motion-ready body.home .bb-pricing-cards.bb-rv .bb-plan-dash li:nth-child(3)::before { transition-delay: 250ms; }
.bb-motion-ready body.home .bb-pricing-cards.bb-rv .bb-plan-dash li:nth-child(4)::before { transition-delay: 300ms; }
.bb-motion-ready body.home .bb-pricing-cards.bb-rv .bb-plan-dash li:nth-child(n+5)::before { transition-delay: 350ms; }

/* #8 Pen strike across $29.99 (Home + Pricing). Without the ready class the
   native line-through stays. */
.bb-motion-ready .bb-plan-card.bb-rv .bb-price-regular { position: relative; text-decoration: none; }
.bb-motion-ready .bb-plan-card.bb-rv .bb-price-regular::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1.5px;
	background: var(--bb-olive-900);
	transform-origin: left center;
	transition: transform var(--bb-duration-ui) var(--bb-ease-out-expo) 300ms;
}
.bb-motion-ready .bb-plan-card.bb-rv:not(.is-in) .bb-price-regular::after { transform: scaleX(0); }

/* #9 Month pill slides between chips (anchor positioning). [data-checked] is
   set only by bb-motion.js, so without JS or with reduced motion the static
   filled chip from bb-home.css stays. !important beats bb-home's #id:checked
   fill, and only ever applies while the pill is present behind the chip. */
@supports (anchor-name: --a) {
	.bb-motion-ready .bb-scrub-chips { position: relative; }
	.bb-motion-ready .bb-scrub-chips::before {
		content: "";
		position: absolute;
		position-anchor: --bb-month;
		top: anchor(top);
		bottom: anchor(bottom);
		left: anchor(left);
		width: anchor-size(width);
		border-radius: var(--bb-radius-pill);
		background: var(--bb-olive-900);
		transition: left var(--bb-duration-ui) var(--bb-ease), width var(--bb-duration-ui) var(--bb-ease);
	}
	.bb-motion-ready .bb-scrub-chip { position: relative; z-index: 1; transition: background-color var(--bb-duration-fast) var(--bb-ease), color var(--bb-duration-ui) var(--bb-ease); }
	.bb-motion-ready .bb-scrub-chip[data-checked] { anchor-name: --bb-month; background: transparent !important; color: var(--bb-cream); }
}

/* #10 The new panel's bars regrow when a month is picked. */
.bb-scrub-panel .bb-mock-row-fill { transform-origin: left center; transition: transform var(--bb-duration-reveal) var(--bb-ease-out-expo); }
.bb-scrub-panel .bb-mock-row:nth-child(2) .bb-mock-row-fill { transition-delay: 40ms; }
.bb-scrub-panel .bb-mock-row:nth-child(3) .bb-mock-row-fill { transition-delay: 80ms; }
.bb-scrub-panel .bb-mock-row:nth-child(4) .bb-mock-row-fill { transition-delay: 120ms; }
@starting-style { .bb-scrub-panel .bb-mock-row-fill { transform: scaleX(0); } }

/* #20 Hovering an insight sweeps a sage marker behind the row it names
   (Diapers = row 1, Clothes = row 4, in whichever month is showing). */
.bb-dashboard-grid .bb-scrub-panel .bb-mock-row { isolation: isolate; }
.bb-dashboard-grid:has(.bb-insight-over:hover) .bb-scrub-panel .bb-mock-row:nth-child(1)::before,
.bb-dashboard-grid:has(.bb-insight-under:hover) .bb-scrub-panel .bb-mock-row:nth-child(4)::before {
	content: "";
	position: absolute;
	inset: 2px -10px;
	z-index: -1;
	border-radius: var(--bb-radius-sm);
	background: var(--bb-sage-100);
	transform-origin: left center;
	animation: bb-scale-x var(--bb-duration-ui) var(--bb-ease-out-expo);
}
.bb-dashboard-grid .bb-scrub-panel .bb-mock-row:is(:nth-child(1), :nth-child(4)) { position: relative; }
.bb-dashboard-grid:has(.bb-insight-over:hover) .bb-scrub-panel .bb-mock-row:nth-child(1) .bb-mock-row-bar,
.bb-dashboard-grid:has(.bb-insight-under:hover) .bb-scrub-panel .bb-mock-row:nth-child(4) .bb-mock-row-bar { background: var(--bb-white); } /* track stays readable on the wash */

/* ---------- 3. Accordions (#11): Elementor animates the height (WAAPI); we
   add the answer settle and a +/- crossfade with a quarter turn. ---------- */
:is(.bb-faq, .bb-home-faq) .e-n-accordion-item > .e-con { transition: transform var(--bb-duration-ui) var(--bb-ease-out-expo); }
:is(.bb-faq, .bb-home-faq) .e-n-accordion-item-title[aria-expanded="false"] + .e-con { transform: translateY(-4px); }
:is(.bb-faq, .bb-home-faq) .e-n-accordion-item-title-icon { display: grid; place-items: center; }
:is(.bb-faq, .bb-home-faq) .e-n-accordion-item-title-icon > span {
	grid-area: 1 / 1;
	display: flex !important;
	transition: opacity var(--bb-duration-fast) var(--bb-ease), transform var(--bb-duration-ui) var(--bb-ease);
}
:is(.bb-faq, .bb-home-faq) [aria-expanded="true"] .e-closed { opacity: 0; transform: rotate(90deg); }
:is(.bb-faq, .bb-home-faq) [aria-expanded="false"] .e-opened { opacity: 0; transform: rotate(-90deg); }

/* ---------- 4. Inner-page H1 settles (#12) ---------- */
.bb-pg-hero-h1 .elementor-heading-title { animation: bb-settle var(--bb-duration-reveal) var(--bb-ease-out-expo) backwards; }
@keyframes bb-settle { from { transform: translateY(8px); filter: blur(2px); } }

/* ---------- 5. Pricing table ticks (#18): rows 1-3 at 40ms steps; the
   Dashboard-only ticks (rows 4-6) land last. ---------- */
.bb-motion-ready .bb-compare-wrap.bb-rv .bb-icon-check::before { transition: transform var(--bb-duration-ui) var(--bb-ease-out-expo) 40ms, opacity var(--bb-duration-ui) var(--bb-ease-out-expo) 40ms; }
.bb-motion-ready .bb-compare-wrap.bb-rv:not(.is-in) .bb-icon-check::before { transform: rotate(-45deg) translateY(-1px) scale(.4); opacity: 0; }
.bb-motion-ready .bb-compare-wrap.bb-rv tbody > tr:nth-child(2) .bb-icon-check::before { transition-delay: 80ms; }
.bb-motion-ready .bb-compare-wrap.bb-rv tbody > tr:nth-child(3) .bb-icon-check::before { transition-delay: 120ms; }
.bb-motion-ready .bb-compare-wrap.bb-rv tbody > tr:nth-child(4) .bb-icon-check::before { transition-delay: 280ms; }
.bb-motion-ready .bb-compare-wrap.bb-rv tbody > tr:nth-child(5) .bb-icon-check::before { transition-delay: 320ms; }
.bb-motion-ready .bb-compare-wrap.bb-rv tbody > tr:nth-child(n+6) .bb-icon-check::before { transition-delay: 360ms; }

/* ---------- 6. FAQ page: group divider rules itself (P2) ---------- */
.bb-motion-ready .bb-faq-group-inner.bb-rv::after { transform-origin: left center; transition: transform var(--bb-duration-reveal) var(--bb-ease-out-expo); }
.bb-motion-ready .bb-faq-group-inner.bb-rv:not(.is-in)::after { transform: scaleX(0); }

/* ---------- 7. How It Works: one micro-story per step (#13) ---------- */
.bb-motion-ready .bb-hiw-step-row.bb-rv .bb-hiw-step-num::after { transform-origin: left center; transition: transform var(--bb-duration-reveal) var(--bb-ease-out-expo) 150ms; }
.bb-motion-ready .bb-hiw-step-row.bb-rv:not(.is-in) .bb-hiw-step-num::after { transform: scaleX(0); }
/* 1: the copy lands in Drive; the row washes sage and the check stamps. */
.bb-motion-ready .bb-hiw-step-row.bb-rv .bb-hiw-copied-row { transition: background-color var(--bb-duration-reveal) var(--bb-ease-out-expo) 150ms; }
.bb-motion-ready .bb-hiw-step-row.bb-rv .bb-hiw-copied-row .bb-icon-circle-check { transition: transform var(--bb-duration-ui) var(--bb-ease-out-expo) 300ms; }
.bb-motion-ready .bb-hiw-step-row.bb-rv:not(.is-in) .bb-hiw-copied-row { background-color: var(--bb-white); }
.bb-motion-ready .bb-hiw-step-row.bb-rv:not(.is-in) .bb-hiw-copied-row .bb-icon-circle-check { transform: scale(.6); }
/* 2: planned amounts count up from $0 (bb-motion.js). */
/* 3: the new row rises, its dashed border inks solid, the plus turns. */
.bb-motion-ready .bb-hiw-step-row.bb-rv .bb-hiw-new-row { position: relative; transition: transform var(--bb-duration-reveal) var(--bb-ease-out-expo) 150ms; }
.bb-motion-ready .bb-hiw-step-row.bb-rv .bb-hiw-new-row::before {
	content: "";
	position: absolute;
	inset: -1.5px;
	border: 1.5px solid var(--bb-olive-500);
	border-radius: inherit;
	transition: opacity var(--bb-duration-ui) var(--bb-ease-out-expo) 500ms;
}
.bb-motion-ready .bb-hiw-step-row.bb-rv .bb-icon-plus { transition: transform var(--bb-duration-ui) var(--bb-ease-out-expo) 450ms; }
.bb-motion-ready .bb-hiw-step-row.bb-rv:not(.is-in) .bb-hiw-new-row { transform: translateY(6px); }
.bb-motion-ready .bb-hiw-step-row.bb-rv:not(.is-in) .bb-hiw-new-row::before { opacity: 0; }
.bb-motion-ready .bb-hiw-step-row.bb-rv:not(.is-in) .bb-icon-plus { transform: rotate(90deg); }
/* 4: echo of the Home hero: ring fills (the ring holds its inline --bb-pct,
   so the start is a paused keyframe), bars fill 40ms apart. */
.bb-motion-ready .bb-hiw-step-row.bb-rv .bb-hiw-dash-card .bb-mock-ring { animation: bb-pct-in var(--bb-duration-reveal) var(--bb-ease-out-expo) 150ms backwards paused; }
.bb-motion-ready .bb-hiw-step-row.bb-rv.is-in .bb-hiw-dash-card .bb-mock-ring { animation-play-state: running; }
.bb-motion-ready .bb-hiw-step-row.bb-rv .bb-hiw-dash-card .bb-mock-row-fill { transform-origin: left center; transition: transform var(--bb-duration-reveal) var(--bb-ease-out-expo) 300ms; }
.bb-motion-ready .bb-hiw-step-row.bb-rv:not(.is-in) .bb-hiw-dash-card .bb-mock-row-fill { transform: scaleX(0); }
.bb-motion-ready .bb-hiw-step-row.bb-rv .bb-hiw-dash-card .bb-mock-row:nth-child(2) .bb-mock-row-fill { transition-delay: 340ms; }
.bb-motion-ready .bb-hiw-step-row.bb-rv .bb-hiw-dash-card .bb-mock-row:nth-child(3) .bb-mock-row-fill { transition-delay: 380ms; }
.bb-motion-ready .bb-hiw-step-row.bb-rv .bb-hiw-dash-card .bb-mock-row:nth-child(n+4) .bb-mock-row-fill { transition-delay: 420ms; }

/* "Moving from free to the dashboard": numbered discs stamp, 90ms apart. */
.bb-motion-ready .bb-moving-list.bb-rv li::before { transition: transform var(--bb-duration-ui) var(--bb-ease-out-expo); }
.bb-motion-ready .bb-moving-list.bb-rv:not(.is-in) li::before { transform: scale(.92); }
.bb-motion-ready .bb-moving-list.bb-rv li:nth-child(2)::before { transition-delay: 90ms; }
.bb-motion-ready .bb-moving-list.bb-rv li:nth-child(3)::before { transition-delay: 180ms; }
.bb-motion-ready .bb-moving-list.bb-rv li:nth-child(n+4)::before { transition-delay: 270ms; }

/* ---------- 8. Footer wordmark inks in on hover (#22, sitewide, CSS-only) ----------
   Decorative; the real brand name is already set (and not aria-hidden) in
   .bb-footer-wordmark, column 1. Two stacked copies of the same word: a quiet
   olive-on-olive base (always present, low contrast by design) and a peach
   copy revealed left-to-right by a clip-path wipe -- "ink on paper", not
   gradient text. CSS-only so it works on legal/Woo pages too, where
   bb-motion.js never loads (enqueue.php scopes the script to 26/28/56/57). */
.bb-footer-mark {
	display: grid;
	margin-top: var(--bb-space-8);
	/* Clip sideways only: overflow:hidden also cut the "y" descender. */
	overflow-x: clip;
	overflow-y: visible;
}
.bb-footer-mark-base,
.bb-footer-mark-ink {
	grid-area: 1 / 1;
	display: block;
	font-family: var(--bb-font-display);
	font-weight: 600;
	line-height: 1;
	padding-bottom: .22em; /* box holds the descender, so the ink layer's clip-path doesn't cut it */
	letter-spacing: -0.03em;
	font-size: clamp(2rem, 10vw, 6rem); /* vw-scaled to the "Bump and Beyond" glyph width so it never exceeds .bb-container at any viewport; verified 320-1920px */
	white-space: nowrap;
	user-select: none;
}
.bb-footer-mark-base { color: var(--bb-olive-700); } /* quiet: olive-on-olive-900, decorative-contrast exempt */
.bb-footer-mark-ink {
	/* A muted, sepia-like ink (peach thinned into the olive ground) rather than
	   full peach: peach is the paid-tier accent, and a 6rem peach word read loud. */
	color: #a89e83; /* fallback = the mix below */
	color: color-mix(in srgb, var(--bb-peach-100) 60%, var(--bb-olive-900));
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--bb-duration-reveal) var(--bb-ease-out-expo);
}
.bb-footer:hover .bb-footer-mark-ink,
.bb-footer:focus-within .bb-footer-mark-ink { clip-path: inset(0 0 0 0); }
/* Touch/no-hover: no hover state exists, so show the inked-in final state,
   with no transition (it must never be caught mid-wipe). Reduced motion:
   bb-base's global transition-duration cut makes the wipe instant. */
@media (hover: none) {
	.bb-footer-mark-ink { clip-path: inset(0 0 0 0); transition: none; }
}