/* Bump and Beyond — Pricing / FAQ / How It Works craft CSS
   Loaded only on pages 28, 56, 57, after bb-base.css and every Elementor
   stylesheet (see inc/enqueue.php). Shared layout, headings, buttons, plan
   cards, the FAQ accordion, the inner-page hero and the final CTA band live in
   bb-base.css; this file holds only what is unique to these pages. Spacing
   between widgets uses bb-base's --bb-mt / --bb-mb properties. */

.bb-mock-row-amt, .bb-mock-ring-amount, .bb-hiw-new-amt, .bb-compare-table td { font-variant-numeric: tabular-nums lining-nums; }

/* Section H2s */
.bb-pg-h2, .bb-already-h2, .bb-faq-group-h2, .bb-moving-h2 { --bb-mb: var(--bb-space-7); }
.bb-pg-h2 .elementor-heading-title, .bb-moving-h2 .elementor-heading-title { max-width: 22ch; }

/* ================= Icons (CSS-drawn: Elementor strips literal <svg> from saved content) ================= */
.bb-icon-check, .bb-icon-dash {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	vertical-align: middle;
}
.bb-icon-check::before {
	content: "";
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--bb-olive-700);
	border-bottom: 2px solid var(--bb-olive-700);
	transform: rotate(-45deg) translateY(-1px);
}
.bb-icon-dash::before { content: ""; width: 12px; height: 2px; background: var(--bb-field); border-radius: 1px; }
.bb-icon-circle-check, .bb-icon-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1.75px solid var(--bb-olive-700);
	position: relative;
}
.bb-icon-circle-check::before {
	content: "";
	width: 9px;
	height: 5px;
	border-left: 1.75px solid var(--bb-olive-700);
	border-bottom: 1.75px solid var(--bb-olive-700);
	transform: rotate(-45deg) translateY(-1px);
}
.bb-icon-plus { width: 20px; height: 20px; border-color: var(--bb-olive-500); }
.bb-icon-plus::before, .bb-icon-plus::after { content: ""; position: absolute; background: var(--bb-olive-700); border-radius: 1px; }
.bb-icon-plus::before { width: 9px; height: 1.75px; }
.bb-icon-plus::after { width: 1.75px; height: 9px; }
.bb-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ================= PRICING ================= */
.bb-pricing .bb-pricing-cards, .bb-pricing .bb-pricing-note { max-width: 60rem; }

/* Comparison table: scrolls inside its own frame on small screens. */
.elementor-widget-text-editor.bb-compare-wrap {
	max-width: 60rem;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-md);
	background: var(--bb-white);
}
/* position: relative makes the scroller the containing block for the
   absolutely positioned visually-hidden cell text, so it is clipped here
   instead of widening the page (5px body overflow at 320px). */
.bb-compare-scroll { position: relative; overflow-x: auto; border-radius: var(--bb-radius-md); scrollbar-width: thin; }
.bb-compare-scroll:focus-visible { outline: 3px solid var(--bb-under); outline-offset: 3px; }
.bb-compare-table {
	width: 100%;
	min-width: 34rem;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 1rem;
}
.bb-compare-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Hello's reset stripes odd rows grey (tr:nth-child(odd) > td) and borders
   every cell; every rule below is written as `tr > *` so it outranks that. */
.bb-compare-table tr > *,
.bb-compare-table tbody > tr:nth-child(odd) > *,
.bb-compare-table tbody > tr:hover > * {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--bb-line);
	padding: 14px var(--bb-space-5);
	text-align: center;
	vertical-align: middle;
	line-height: 1.4;
	color: var(--bb-ink);
}
.bb-compare-table tbody > tr > th:first-child { text-align: left; font-weight: 600; }
.bb-compare-table thead > tr > * {
	font-family: var(--bb-font-display);
	font-weight: 600;
	color: var(--bb-olive-900);
	font-size: 1.0625rem;
	background: var(--bb-sage-100);
}
.bb-compare-table thead > tr > th:first-child { text-align: left; }
.bb-compare-table thead > tr:first-child > th { border-top: 0; } /* Hello draws a grey top rule here */
.bb-compare-table tbody > tr:last-child > * { border-bottom: 0; font-weight: 700; color: var(--bb-olive-900); }
.bb-compare-table thead > tr > *:not(:first-child), .bb-compare-table tbody > tr > td { width: 26%; }
@media (max-width: 767px) {
	/* Four columns since the Starter column: the feature column keeps a readable
	   ~150px and the table scrolls sideways inside its own frame on phones. */
	.bb-compare-table { min-width: 25rem; font-size: 0.9375rem; }
	.bb-compare-table tr > *,
	.bb-compare-table tbody > tr:nth-child(odd) > *,
	.bb-compare-table tbody > tr:hover > * { padding: 12px 10px; }
	.bb-compare-table tbody > tr > *:first-child, .bb-compare-table thead > tr > *:first-child { padding-left: var(--bb-space-4); }
	.bb-compare-table thead > tr > * { font-size: 0.9375rem; }
	.bb-compare-table thead > tr > *:not(:first-child), .bb-compare-table tbody > tr > td { width: 20%; }
}

/* Reassurance strip: one quiet ruled row, not an icon grid. */
.bb-reassure-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid rgba(38, 49, 28, .16);
	border-bottom: 1px solid rgba(38, 49, 28, .16);
}
.bb-reassure-item {
	display: flex;
	align-items: flex-start;
	gap: var(--bb-space-3);
	padding: var(--bb-space-5) var(--bb-space-5) var(--bb-space-5) 0;
}
.bb-reassure-item + .bb-reassure-item { padding-left: var(--bb-space-5); border-left: 1px solid rgba(38, 49, 28, .16); }
@media (max-width: 900px) {
	.bb-reassure-list { grid-template-columns: 1fr 1fr; }
	.bb-reassure-item:nth-child(3) { padding-left: 0; border-left: 0; }
	.bb-reassure-item:nth-child(n+3) { border-top: 1px solid rgba(38, 49, 28, .16); }
}
@media (max-width: 560px) {
	.bb-reassure-list { grid-template-columns: 1fr; }
	.bb-reassure-item, .bb-reassure-item + .bb-reassure-item { padding: var(--bb-space-4) 0; border-left: 0; }
	.bb-reassure-item + .bb-reassure-item { border-top: 1px solid rgba(38, 49, 28, .16); }
}
.bb-reassure-item .bb-icon-circle-check { margin-top: 1px; }
.bb-reassure-item span:not(.bb-icon-circle-check) { font-weight: 700; color: var(--bb-ink); line-height: 1.45; }

/* "Already using the free sheet?" */
.bb-already-inner > .elementor-widget { max-width: 38rem; }
.bb-already-h2 { --bb-mb: var(--bb-space-4); }
.elementor-widget-text-editor.bb-already-body { font-size: 1.125rem; }

/* ================= FAQ page ================= */
/* Groups share one cream surface, separated by a hairline that sits inside
   the gutter like the text (drawn as a background so it respects padding). */
.e-con.bb-faq-group { padding-block: var(--bb-space-8); }
.e-con.bb-faq-group + .e-con.bb-faq-group { padding-top: 0; }
.e-con.bb-faq-group-inner { position: relative; }
.bb-faq-group + .bb-faq-group .bb-faq-group-inner { padding-top: var(--bb-space-8); }
.bb-faq-group + .bb-faq-group .bb-faq-group-inner::after {
	content: "";
	position: absolute;
	top: 0;
	left: var(--bb-gutter);
	right: var(--bb-gutter);
	height: 1px;
	background: rgba(38, 49, 28, .16);
}
@media (max-width: 767px) {
	.e-con.bb-faq-group { padding-block: var(--bb-space-7); }
	.bb-faq-group + .bb-faq-group .bb-faq-group-inner { padding-top: var(--bb-space-7); }
	.bb-faq-group + .bb-faq-group .bb-faq-group-inner::after { display: none; } /* the accordion's own top rule already separates groups */
}
.bb-faq-group-h2 .elementor-heading-title { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
.bb-faq-final-inner > .elementor-widget { max-width: 38rem; }
.bb-faq-final-h2 { --bb-mb: var(--bb-space-3); }

/* ================= HOW IT WORKS — alternating steps ================= */
.e-con.bb-hiw-steps { display: flex; flex-direction: column; }
.bb-hiw-steps-h2 { --bb-mb: var(--bb-space-6); }
.bb-section .e-con > .e-con.bb-hiw-step-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--bb-space-8);
	align-items: center;
	padding-block: var(--bb-space-7);
	border-top: 1px solid rgba(38, 49, 28, .16);
}
.bb-hiw-steps > .bb-hiw-step-row:last-child { border-bottom: 1px solid rgba(38, 49, 28, .16); }
.bb-hiw-step-row.bb-hiw-reverse > .bb-hiw-step-copy { order: 2; }
.bb-hiw-step-row.bb-hiw-reverse > .bb-hiw-step-illus { order: 1; }
@media (max-width: 860px) {
	.bb-section .e-con > .e-con.bb-hiw-step-row { grid-template-columns: 1fr; gap: var(--bb-space-5); padding-block: var(--bb-space-6); }
	.bb-hiw-step-row.bb-hiw-reverse > .bb-hiw-step-copy { order: 1; }
	.bb-hiw-step-row.bb-hiw-reverse > .bb-hiw-step-illus { order: 2; }
}
.e-con.bb-hiw-step-copy { display: flex; flex-direction: column; }
.elementor-widget-text-editor.bb-hiw-step-num {
	--bb-mb: var(--bb-space-3);
	font-family: var(--bb-font-display);
	font-weight: 600;
	font-size: 1rem;
	font-variant-numeric: lining-nums;
	color: var(--bb-olive-700); /* 5.66:1 on sage */
	display: flex;
	align-items: center;
	gap: var(--bb-space-3);
}
.elementor-widget-text-editor.bb-hiw-step-num::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .5; }
.bb-hiw-step-title { --bb-mb: var(--bb-space-3); }
.bb-hiw-step-title .elementor-heading-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; }
.elementor-widget-text-editor.bb-hiw-step-body { color: var(--bb-ink); font-size: 1.125rem; max-width: 40ch; }

/* small CSS illustration card — the same ledger-card language as Home */
.e-con.bb-hiw-step-illus { display: flex; justify-content: center; width: 100%; }
.bb-hiw-illus-card {
	background: var(--bb-white);
	border-radius: var(--bb-radius-lg);
	box-shadow: 0 16px 32px -18px rgba(38, 49, 28, 0.22), 0 2px 6px rgba(13, 20, 26, 0.05);
	padding: var(--bb-space-5);
	width: 100%;
	max-width: 400px;
	position: relative;
}
.bb-hiw-illus-title {
	font-family: var(--bb-font-display);
	font-weight: 600;
	color: var(--bb-olive-900);
	font-size: 1rem;
	margin-bottom: var(--bb-space-4);
	padding-bottom: var(--bb-space-3);
	border-bottom: 1px solid var(--bb-line);
}
.bb-hiw-illus-rows { list-style: none; margin: 0; padding: 0; }
.bb-hiw-copied-row {
	display: flex;
	align-items: center;
	gap: var(--bb-space-3);
	padding: var(--bb-space-3);
	background: var(--bb-sage-100);
	border-radius: var(--bb-radius-sm);
}
.bb-hiw-copied-row span:not(.bb-icon-circle-check) { font-weight: 700; color: var(--bb-ink); font-size: 0.9375rem; }
.bb-hiw-new-row {
	display: flex;
	align-items: center;
	gap: var(--bb-space-3);
	padding: var(--bb-space-3);
	border: 1.5px dashed var(--bb-olive-500);
	border-radius: var(--bb-radius-sm);
	font-size: var(--bb-small-size);
}
.bb-hiw-new-row .bb-hiw-new-label { font-weight: 700; color: var(--bb-ink); flex: 1; }
.bb-hiw-new-row .bb-hiw-new-amt { font-weight: 700; color: var(--bb-olive-900); }
.bb-hiw-dash-card { max-width: 420px; }

.bb-mock-ring-wrap {
	display: flex;
	align-items: center;
	gap: var(--bb-space-5);
	margin-bottom: var(--bb-space-4);
	padding-bottom: var(--bb-space-4);
	border-bottom: 1px solid var(--bb-line);
}
.bb-mock-ring {
	--bb-pct: 77;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	flex-shrink: 0;
	background: conic-gradient(var(--bb-olive-700) calc(var(--bb-pct) * 1%), var(--bb-sage-100) 0);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bb-mock-ring-hole { width: 58px; height: 58px; border-radius: 50%; background: var(--bb-white); }
.bb-mock-ring-label { display: flex; flex-direction: column; }
.bb-mock-ring-amount { font-family: var(--bb-font-display); font-weight: 600; font-size: 1.375rem; color: var(--bb-olive-900); line-height: 1.1; }
.bb-mock-ring-of { font-size: var(--bb-small-size); color: var(--bb-muted); }
.bb-mock-rows { list-style: none; margin: 0; padding: 0; }
.bb-mock-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 64px auto;
	align-items: center;
	column-gap: var(--bb-space-3);
	padding-block: 9px;
	border-bottom: 1px solid var(--bb-line);
}
.bb-mock-row:last-child { border-bottom: none; }
.bb-mock-row-label { font-size: var(--bb-small-size); font-weight: 700; color: var(--bb-ink); }
.bb-mock-row-bar { height: 6px; border-radius: var(--bb-radius-pill); background: var(--bb-sage-100); overflow: hidden; }
.bb-mock-row-fill { display: block; height: 100%; width: calc(var(--fill, 0) * 1%); background: var(--bb-olive-700); border-radius: var(--bb-radius-pill); }
.bb-mock-row-fill.bb-fill-over { background: var(--bb-over); }
.bb-mock-row-amt { font-size: var(--bb-small-size); font-weight: 700; color: var(--bb-ink); text-align: right; white-space: nowrap; min-width: 6.5em; }
.bb-mock-row-of { font-weight: 400; color: var(--bb-muted); }

/* Moving from free to the dashboard */
.bb-moving-inner > .elementor-widget { max-width: 44rem; }
.bb-moving-list { list-style: none; margin: 0; padding: 0; counter-reset: bb-moving; }
.bb-moving-list li {
	counter-increment: bb-moving;
	display: flex;
	align-items: center;
	gap: var(--bb-space-4);
	min-height: 64px;
	padding-block: var(--bb-space-3);
	border-top: 1px solid var(--bb-line);
	font-size: 1.125rem;
}
.bb-moving-list li:last-child { border-bottom: 1px solid var(--bb-line); }
.bb-moving-list li::before {
	content: counter(bb-moving);
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--bb-olive-900);
	color: var(--bb-cream);
	font-family: var(--bb-font-display);
	font-weight: 600;
	font-size: 1rem;
	font-variant-numeric: lining-nums;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bb-moving-list li span { color: var(--bb-ink); }