/**
 * CalSchedule landing page.
 *
 * Self-contained: the landing page does not load the dashboard stylesheet, so
 * the handful of primitives it needs are defined here. Everything is scoped
 * under .bfz-land and defensively reset, because the host theme's rules will
 * otherwise bleed into it.
 */

.bfz-app.bfz-land {
	--bfz-brand: #4F46E5;
	--bfz-brand-text: #FFFFFF;
	--bfz-brand-soft: #EEF2FF;
	--bfz-brand-tint: #F5F7FF;
	--bfz-brand-dark: #4038BC;
	--bfz-ink: #0F172A;
	--bfz-muted: #64748B;
	--bfz-line: #E2E8F0;
	--bfz-bg: #F8FAFC;
	--bfz-card: #FFFFFF;
	--bfz-radius: 16px;
	--bfz-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .18);

	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: var(--bfz-ink);
	background: var(--bfz-card);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-align: left;
	overflow-x: hidden;
}

.bfz-app.bfz-land *,
.bfz-app.bfz-land *::before,
.bfz-app.bfz-land *::after {
	box-sizing: border-box;
}

.bfz-app.bfz-land h1,
.bfz-app.bfz-land h2,
.bfz-app.bfz-land h3,
.bfz-app.bfz-land p,
.bfz-app.bfz-land ul,
.bfz-app.bfz-land ol,
.bfz-app.bfz-land li,
.bfz-app.bfz-land figure {
	margin: 0;
	padding: 0;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.bfz-app.bfz-land ul,
.bfz-app.bfz-land ol {
	list-style: none;
}

.bfz-app.bfz-land a {
	color: var(--bfz-brand);
	text-decoration: none;
}

.bfz-app.bfz-land a:hover {
	text-decoration: underline;
}

.bfz-app.bfz-land button,
.bfz-app.bfz-land input {
	font: inherit;
	color: inherit;
	margin: 0;
}

.bfz-app.bfz-land :focus-visible {
	outline: 2px solid var(--bfz-brand);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ------------------------------ Notice ------------------------------ */

.bfz-app.bfz-land .bfz-land__notice {
	max-width: 1120px;
	margin: 0 auto 4px;
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 500;
}

.bfz-app.bfz-land .bfz-land__notice--success {
	background: #ECFDF5;
	color: #065F46;
	border: 1px solid #A7F3D0;
}

.bfz-app.bfz-land .bfz-land__notice--error {
	background: #FEF2F2;
	color: #991B1B;
	border: 1px solid #FECACA;
}

/* ------------------------------- Hero ------------------------------- */

.bfz-app.bfz-land .bfz-land__hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
	max-width: 1120px;
	margin: 0 auto;
	padding: 48px 16px 56px;
}

.bfz-app.bfz-land .bfz-land__eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bfz-brand);
	margin-bottom: 14px;
}

.bfz-app.bfz-land .bfz-land__h1 {
	font-size: clamp(32px, 6vw, 52px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.025em;
	color: var(--bfz-ink);
	margin-bottom: 18px;
}

.bfz-app.bfz-land .bfz-land__lede {
	font-size: clamp(16px, 2.2vw, 19px);
	line-height: 1.65;
	color: var(--bfz-muted);
	max-width: 40em;
}

.bfz-app.bfz-land .bfz-land__ticks {
	margin-top: 28px;
	display: grid;
	gap: 12px;
}

.bfz-app.bfz-land .bfz-land__ticks li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--bfz-ink);
}

.bfz-app.bfz-land .bfz-land__ticks li .bfz-gi {
	margin-top: 2px;
}

.bfz-app.bfz-land .bfz-land__herocopy {
	min-width: 0;
}

.bfz-app.bfz-land .bfz-land__heroform {
	min-width: 0;
}

/* ------------------------- Sign-up card ----------------------------- */

.bfz-app.bfz-land .bfz-land__card {
	background: var(--bfz-card);
	border: 1px solid var(--bfz-line);
	border-radius: var(--bfz-radius);
	box-shadow: var(--bfz-shadow);
	padding: 28px 24px;
}

.bfz-app.bfz-land .bfz-land__form {
	display: block;
}

.bfz-app.bfz-land .bfz-land__cardtitle {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin-bottom: 18px;
}

.bfz-app.bfz-land .bfz-land__cardnote {
	font-size: 15px;
	color: var(--bfz-muted);
	margin-bottom: 18px;
}

.bfz-app.bfz-land .bfz-land__field {
	margin-bottom: 16px;
}

.bfz-app.bfz-land .bfz-land__label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--bfz-ink);
}

.bfz-app.bfz-land .bfz-land__input {
	display: block;
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--bfz-line);
	border-radius: 12px;
	background: var(--bfz-card);
	color: var(--bfz-ink);
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.bfz-app.bfz-land .bfz-land__input::placeholder {
	color: #94A3B8;
}

.bfz-app.bfz-land .bfz-land__input:focus {
	outline: none;
	border-color: var(--bfz-brand);
	box-shadow: 0 0 0 3px var(--bfz-brand-soft);
}

.bfz-app.bfz-land .bfz-land__slugline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	font-size: 13px;
	color: var(--bfz-muted);
	margin: -4px 0 18px;
}

.bfz-app.bfz-land .bfz-land__sluglabel {
	font-weight: 600;
}

.bfz-app.bfz-land .bfz-land__slugurl {
	word-break: break-all;
}

.bfz-app.bfz-land .bfz-land__slugurl strong {
	color: var(--bfz-brand);
	font-weight: 700;
}

.bfz-app.bfz-land .bfz-land__slugedit {
	background: none;
	border: 0;
	padding: 0;
	color: var(--bfz-brand);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
}

.bfz-app.bfz-land .bfz-land__field--slug {
	margin-top: -8px;
}

.bfz-app.bfz-land .bfz-land__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease, transform .1s ease;
}

.bfz-app.bfz-land .bfz-land__btn:hover {
	text-decoration: none;
}

.bfz-app.bfz-land .bfz-land__btn--primary {
	background: var(--bfz-brand);
	color: var(--bfz-brand-text);
}

.bfz-app.bfz-land .bfz-land__btn--primary:hover {
	background: var(--bfz-brand-dark);
	color: var(--bfz-brand-text);
}

.bfz-app.bfz-land .bfz-land__btn--primary:active {
	transform: translateY(1px);
}

.bfz-app.bfz-land .bfz-land__btn--block {
	width: 100%;
}

.bfz-app.bfz-land .bfz-land__fine {
	margin-top: 14px;
	font-size: 13px;
	color: var(--bfz-muted);
	text-align: center;
}

.bfz-app.bfz-land .bfz-land__fine .bfz-land__link {
	display: inline-block;
	margin-left: 6px;
}

.bfz-app.bfz-land .bfz-land__link {
	color: var(--bfz-brand);
	font-weight: 600;
}

/* ----------------------------- Sections ----------------------------- */

.bfz-app.bfz-land .bfz-land__section {
	max-width: 1120px;
	margin: 0 auto;
	padding: 56px 16px;
	border-top: 1px solid var(--bfz-line);
}

.bfz-app.bfz-land .bfz-land__h2 {
	font-size: clamp(24px, 4vw, 34px);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: 10px;
}

.bfz-app.bfz-land .bfz-land__sectionsub {
	font-size: 17px;
	color: var(--bfz-muted);
	margin-bottom: 32px;
}

/* --------------------------- Page mock-up --------------------------- */

.bfz-app.bfz-land .bfz-land__mock {
	border: 1px solid var(--bfz-line);
	border-radius: var(--bfz-radius);
	overflow: hidden;
	box-shadow: var(--bfz-shadow);
	background: var(--bfz-card);
}

.bfz-app.bfz-land .bfz-land__mockbar {
	display: flex;
	gap: 7px;
	padding: 12px 16px;
	background: var(--bfz-bg);
	border-bottom: 1px solid var(--bfz-line);
}

.bfz-app.bfz-land .bfz-land__mockbar span {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #CBD5E1;
}

.bfz-app.bfz-land .bfz-land__mockbody {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.bfz-app.bfz-land .bfz-land__mockside {
	padding: 26px 24px;
	border-bottom: 1px solid var(--bfz-line);
}

.bfz-app.bfz-land .bfz-land__mockavatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--bfz-brand-soft);
	border: 2px solid var(--bfz-brand);
	margin-bottom: 14px;
}

.bfz-app.bfz-land .bfz-land__mockname {
	font-size: 14px;
	color: var(--bfz-muted);
	font-weight: 600;
}

.bfz-app.bfz-land .bfz-land__mocktitle {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 4px 0 8px;
}

.bfz-app.bfz-land .bfz-land__mockmeta {
	font-size: 14px;
	color: var(--bfz-muted);
}

.bfz-app.bfz-land .bfz-land__mockmain {
	padding: 26px 24px;
}

.bfz-app.bfz-land .bfz-land__mockmonth {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 14px;
}

.bfz-app.bfz-land .bfz-land__mockgrid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	max-width: 330px;
}

.bfz-app.bfz-land .bfz-land__mockday {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	min-height: 36px;
	border-radius: 9px;
	font-size: 13px;
	color: #CBD5E1;
	background: transparent;
}

.bfz-app.bfz-land .bfz-land__mockday.is-open {
	background: var(--bfz-brand-tint);
	color: var(--bfz-brand);
	font-weight: 700;
}

.bfz-app.bfz-land .bfz-land__mockday.is-picked {
	background: var(--bfz-brand);
	color: var(--bfz-brand-text);
}

.bfz-app.bfz-land .bfz-land__mockslots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.bfz-app.bfz-land .bfz-land__mockslot {
	padding: 9px 16px;
	border: 1px solid var(--bfz-brand-soft);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bfz-brand);
	background: var(--bfz-card);
}

.bfz-app.bfz-land .bfz-land__mockslot.is-picked {
	background: var(--bfz-brand);
	border-color: var(--bfz-brand);
	color: var(--bfz-brand-text);
}

/* ------------------------------ Steps ------------------------------- */

.bfz-app.bfz-land .bfz-land__steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 28px;
	counter-reset: none;
}

.bfz-app.bfz-land .bfz-land__step {
	padding: 26px 24px;
	background: var(--bfz-bg);
	border-radius: var(--bfz-radius);
	border: 1px solid var(--bfz-line);
}

.bfz-app.bfz-land .bfz-land__stephead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.bfz-app.bfz-land .bfz-land__stepnum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--bfz-brand);
	color: var(--bfz-brand-text);
	font-size: 15px;
	font-weight: 700;
}

.bfz-app.bfz-land .bfz-land__steph {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 6px;
}

.bfz-app.bfz-land .bfz-land__stepp {
	font-size: 15px;
	color: var(--bfz-muted);
}

/* ----------------------------- Features ----------------------------- */

.bfz-app.bfz-land .bfz-land__features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-top: 28px;
}

.bfz-app.bfz-land .bfz-land__feature .bfz-gtile {
	margin-bottom: 12px;
}

.bfz-app.bfz-land .bfz-land__featureh {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 6px;
}

.bfz-app.bfz-land .bfz-land__featurep {
	font-size: 15px;
	color: var(--bfz-muted);
}

/* -------------------------------- FAQ ------------------------------- */

.bfz-app.bfz-land .bfz-land__faq {
	margin-top: 24px;
	border-top: 1px solid var(--bfz-line);
	max-width: 760px;
}

.bfz-app.bfz-land .bfz-land__q {
	border-bottom: 1px solid var(--bfz-line);
}

.bfz-app.bfz-land .bfz-land__q summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 34px 18px 0;
	font-size: 16px;
	font-weight: 600;
	position: relative;
}

.bfz-app.bfz-land .bfz-land__q summary::-webkit-details-marker {
	display: none;
}

.bfz-app.bfz-land .bfz-land__q summary::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 25px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--bfz-muted);
	border-bottom: 2px solid var(--bfz-muted);
	transform: rotate(45deg);
	transition: transform .15s ease;
}

.bfz-app.bfz-land .bfz-land__q[open] summary::after {
	transform: rotate(-135deg);
	top: 29px;
}

.bfz-app.bfz-land .bfz-land__q p {
	padding: 0 0 18px;
	font-size: 15px;
	color: var(--bfz-muted);
	max-width: 62ch;
}

.bfz-app.bfz-land .bfz-land__section--faq .bfz-land__h2 {
	margin-bottom: 4px;
}

/* ------------------------------- CTA -------------------------------- */

.bfz-app.bfz-land .bfz-land__cta {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
	max-width: 1120px;
	margin: 0 auto;
	padding: 56px 16px 72px;
	border-top: 1px solid var(--bfz-line);
}

.bfz-app.bfz-land .bfz-land__ctacopy {
	min-width: 0;
}

.bfz-app.bfz-land .bfz-land__ctaform {
	min-width: 0;
}

/* ---------------------------- Breakpoints --------------------------- */

@media (min-width: 720px) {
	.bfz-app.bfz-land .bfz-land__steps,
	.bfz-app.bfz-land .bfz-land__features {
		grid-template-columns: repeat(2, 1fr);
	}

	.bfz-app.bfz-land .bfz-land__mockbody {
		grid-template-columns: 250px 1fr;
	}

	.bfz-app.bfz-land .bfz-land__mockside {
		border-bottom: 0;
		border-right: 1px solid var(--bfz-line);
	}
}

@media (min-width: 900px) {
	.bfz-app.bfz-land .bfz-land__hero {
		grid-template-columns: 1.15fr .85fr;
		gap: 56px;
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.bfz-app.bfz-land .bfz-land__cta {
		grid-template-columns: 1fr .8fr;
	}

	.bfz-app.bfz-land .bfz-land__card {
		padding: 32px 28px;
	}
}

@media (min-width: 1080px) {
	.bfz-app.bfz-land .bfz-land__steps,
	.bfz-app.bfz-land .bfz-land__features {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --------------------------- Reduced motion ------------------------- */

@media (prefers-reduced-motion: reduce) {
	.bfz-app.bfz-land * {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* ------------------------------ Dark mode --------------------------- */

@media (prefers-color-scheme: dark) {
	.bfz-app.bfz-land[data-theme="auto"] {
		--bfz-ink: #E7ECF3;
		--bfz-muted: #98A5B8;
		--bfz-line: #27303F;
		--bfz-bg: #131822;
		--bfz-card: #0D1117;
	}

	.bfz-app.bfz-land[data-theme="auto"] .bfz-land__input::placeholder {
		color: #6B7A90;
	}

	.bfz-app.bfz-land[data-theme="auto"] .bfz-land__mockbar span {
		background: #3A4557;
	}

	.bfz-app.bfz-land[data-theme="auto"] .bfz-land__mockday {
		color: #4A5568;
	}

	.bfz-app.bfz-land[data-theme="auto"] .bfz-land__notice--success {
		background: #06251A;
		color: #6EE7B7;
		border-color: #0B5140;
	}

	.bfz-app.bfz-land[data-theme="auto"] .bfz-land__notice--error {
		background: #2A1113;
		color: #FCA5A5;
		border-color: #6B2226;
	}
}

/* =========================================================================
 * Long-form landing sections
 * ====================================================================== */

/* ---------------------------- Works-with strip ----------------------- */

.bfz-app.bfz-land .bfz-land__strip {
	max-width: 1120px;
	margin: 0 auto;
	padding: 8px 16px 44px;
	text-align: center;
}

.bfz-app.bfz-land .bfz-land__striplabel {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--bfz-muted);
	margin-bottom: 18px;
}

.bfz-app.bfz-land .bfz-land__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.bfz-app.bfz-land .bfz-land__chips li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px 9px 12px;
	border: 1px solid var(--bfz-line);
	border-radius: 999px;
	background: var(--bfz-card);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--bfz-ink);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

/* ---------------------------- Before / after ------------------------- */

.bfz-app.bfz-land .bfz-land__ba {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 30px;
}

.bfz-app.bfz-land .bfz-land__bacol {
	padding: 24px 22px;
	border-radius: var(--bfz-radius);
	border: 1px solid var(--bfz-line);
	background: var(--bfz-card);
}

.bfz-app.bfz-land .bfz-land__bacol--before {
	background: var(--bfz-bg);
}

.bfz-app.bfz-land .bfz-land__bacol--after {
	border-color: var(--bfz-brand-soft);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -26px rgba(79, 70, 229, .5);
}

.bfz-app.bfz-land .bfz-land__batag {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin-bottom: 14px;
	color: var(--bfz-muted);
}

.bfz-app.bfz-land .bfz-land__bacol--after .bfz-land__batag {
	color: var(--bfz-brand);
}

.bfz-app.bfz-land .bfz-land__bacol ul {
	display: grid;
	gap: 11px;
}

/*
 * The markers used to be drawn with ::before/::after. They are real
 * animated icons now, so the pseudo-elements are gone - leaving both in
 * would print two markers on every line.
 */
.bfz-app.bfz-land .bfz-land__bacol li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-left: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--bfz-ink);
}

.bfz-app.bfz-land .bfz-land__bacol li .bfz-gi {
	margin-top: 1px;
}

.bfz-app.bfz-land .bfz-land__bacol li > span {
	min-width: 0;
}

/* `.bfz-app.bfz-land p` resets paragraphs at (0,2,1); the tag needs its
   element in the selector to keep the icon on the same line as the text. */
p.bfz-land__batag {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ---------------------------- Feature rows --------------------------- */

.bfz-app.bfz-land .bfz-land__section--rows {
	padding-bottom: 20px;
}

.bfz-app.bfz-land .bfz-land__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	align-items: center;
	padding: 34px 0;
	border-top: 1px solid var(--bfz-line);
}

.bfz-app.bfz-land .bfz-land__row:first-of-type {
	border-top: 0;
	padding-top: 8px;
}

.bfz-app.bfz-land .bfz-land__rowart {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 10px;
	border-radius: var(--bfz-radius);
	background:
		radial-gradient(90% 80% at 30% 20%, rgba(129, 140, 248, .09), transparent 62%),
		var(--bfz-bg);
}

.bfz-app.bfz-land .bfz-land__rowcopy {
	min-width: 0;
}

.bfz-app.bfz-land .bfz-land__roweyebrow {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 10px;
	color: var(--bfz-brand);
}

.bfz-app.bfz-land .bfz-land__roweyebrow--indigo  { color: var(--bfz-brand); }
.bfz-app.bfz-land .bfz-land__roweyebrow--emerald { color: #059669; }
.bfz-app.bfz-land .bfz-land__roweyebrow--sky     { color: #0284C7; }
.bfz-app.bfz-land .bfz-land__roweyebrow--amber   { color: #B45309; }
.bfz-app.bfz-land .bfz-land__roweyebrow--rose    { color: #E11D48; }
.bfz-app.bfz-land .bfz-land__roweyebrow--violet  { color: #7C3AED; }

.bfz-app.bfz-land .bfz-land__rowtitle {
	font-size: clamp(21px, 2.4vw, 27px);
	line-height: 1.22;
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: 10px;
}

.bfz-app.bfz-land .bfz-land__rowbody {
	font-size: 16px;
	line-height: 1.62;
	color: var(--bfz-muted);
	max-width: 52ch;
}

.bfz-app.bfz-land .bfz-land__rowlist {
	display: grid;
	gap: 10px;
	margin-top: 18px;
}

.bfz-app.bfz-land .bfz-land__rowlist li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--bfz-ink);
}

.bfz-app.bfz-land .bfz-land__rowlist li .bfz-gi {
	margin-top: 1px;
}

/* -------------------------------- Who -------------------------------- */

.bfz-app.bfz-land .bfz-land__whos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin-top: 28px;
}

.bfz-app.bfz-land .bfz-land__who {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 20px 20px 18px;
	border: 1px solid var(--bfz-line);
	border-radius: var(--bfz-radius);
	background: var(--bfz-card);
	transition: transform .18s ease, box-shadow .18s ease;
}

.bfz-app.bfz-land .bfz-land__who:hover {
	transform: translateY(-2px);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 16px 32px -20px rgba(15, 23, 42, .4);
}

.bfz-app.bfz-land .bfz-land__whoh {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 4px;
}

.bfz-app.bfz-land .bfz-land__whop {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--bfz-muted);
}

/* ------------------------------ CTA ticks ---------------------------- */

.bfz-app.bfz-land .bfz-land__ctaticks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 20px;
}

.bfz-app.bfz-land .bfz-land__ctaticks li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bfz-ink);
}

/* ---------------------------- Breakpoints ---------------------------- */

@media (min-width: 720px) {
	.bfz-app.bfz-land .bfz-land__ba {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.bfz-app.bfz-land .bfz-land__whos {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.bfz-app.bfz-land .bfz-land__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 52px;
		padding: 48px 0;
	}

	/* Alternate which side the artwork sits on, so the page has a rhythm. */
	.bfz-app.bfz-land .bfz-land__row--flip .bfz-land__rowart {
		order: 2;
	}

	.bfz-app.bfz-land .bfz-land__rowart {
		padding: 22px;
	}
}

@media (min-width: 1080px) {
	.bfz-app.bfz-land .bfz-land__whos {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ------------------------------ Dark mode ---------------------------- */

@media (prefers-color-scheme: dark) {
	.bfz-app.bfz-land[data-theme="auto"] .bfz-land__chips li {
		background: var(--bfz-bg);
	}

	.bfz-app.bfz-land[data-theme="auto"] .bfz-land__rowart {
		background:
			radial-gradient(90% 80% at 30% 20%, rgba(129, 140, 248, .10), transparent 62%),
			var(--bfz-bg);
	}

}

.bfz-land .bfz-land__cardfoot {
	margin: 12px 0 0;
	font-size: .86rem;
	text-align: center;
}

/* The landing page renders as its own document, so it owns the canvas. */

body.bfz-body--land {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: #FFFFFF;
}

/* ------------------- Dark mode, asked for explicitly -----------------
 *
 * The two blocks above only fire for data-theme="auto" on a device set to
 * dark. That covered the landing page, which is pinned to light, but the
 * pricing, welcome and error screens follow the site's own theme setting and
 * carry the visitor's toggle, so they can be handed an explicit "dark" - and
 * with no rules for it they were drawing light text on light panels.
 *
 * Same values as the auto block, keyed off the attribute instead of the
 * media query. Nothing here can reach the landing page itself.
 * ------------------------------------------------------------------- */

.bfz-app.bfz-land[data-theme="dark"] {
	--bfz-ink: #E7ECF3;
	--bfz-muted: #98A5B8;
	--bfz-line: #27303F;
	--bfz-bg: #131822;
	--bfz-card: #0D1117;
}

.bfz-app.bfz-land[data-theme="dark"] .bfz-land__input::placeholder {
	color: #6B7A90;
}

.bfz-app.bfz-land[data-theme="dark"] .bfz-land__mockbar span {
	background: #3A4557;
}

.bfz-app.bfz-land[data-theme="dark"] .bfz-land__mockday {
	color: #4A5568;
}

.bfz-app.bfz-land[data-theme="dark"] .bfz-land__notice--success {
	background: #06251A;
	color: #6EE7B7;
	border-color: #0B5140;
}

.bfz-app.bfz-land[data-theme="dark"] .bfz-land__notice--error {
	background: #2A1113;
	color: #FCA5A5;
	border-color: #6B2226;
}

.bfz-app.bfz-land[data-theme="dark"] .bfz-land__chips li {
	background: var(--bfz-bg);
}

.bfz-app.bfz-land[data-theme="dark"] .bfz-land__rowart {
	background:
		radial-gradient(90% 80% at 30% 20%, rgba(129, 140, 248, .10), transparent 62%),
		var(--bfz-bg);
}


/* ------------------- Notice: dismissible, and it goes ------------------- */

/* `.bfz-app.bfz-land button` resets buttons at (0,2,1), so the close button
   is qualified with its element to outrank it rather than lose its box. */
.bfz-app.bfz-land .bfz-land__notice {
	display: flex;
	align-items: center;
	gap: 10px;
	overflow: hidden;
	transition:
		height .26s ease,
		opacity .26s ease,
		margin .26s ease,
		padding .26s ease,
		border-width .26s ease;
}

.bfz-app.bfz-land .bfz-land__notice .bfz-alert__text {
	flex: 1 1 auto;
	min-width: 0;
}

.bfz-app.bfz-land button.bfz-alert__close {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin: 0 -4px 0 0;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: currentColor;
	font: inherit;
	opacity: .6;
	cursor: pointer;
	transition: opacity .15s ease, background-color .15s ease;
}

.bfz-app.bfz-land button.bfz-alert__close:hover,
.bfz-app.bfz-land button.bfz-alert__close:focus-visible {
	opacity: 1;
	background: rgba( 15, 23, 42, .08 );
}

.bfz-app.bfz-land button.bfz-alert__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.bfz-app.bfz-land .bfz-land__notice.is-leaving {
	opacity: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-top-width: 0;
	border-bottom-width: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.bfz-app.bfz-land .bfz-land__notice,
	.bfz-app.bfz-land button.bfz-alert__close {
		transition: none;
	}
}

/* ------------------- Hero: the picture of the flow ------------------- */

/* `.bfz-app.bfz-land p` resets paragraphs at (0,2,1), so the eyebrow is
   qualified with its element to keep the row layout it needs. */
p.bfz-land__eyebrow--what {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 10px;
	border-radius: 999px;
	background: var(--bfz-brand-tint, #EEF2FF);
	box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .14);
}

.bfz-app.bfz-land .bfz-land__heroart {
	margin: 30px 0 0;
	padding: 0;
	max-width: 100%;
}

/* Scenes are capped at 460px for the feature rows. This one is the lead
   image and has a whole column to fill, so the cap is lifted here. */
.bfz-app.bfz-land .bfz-land__heroart .bfz-sc {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	overflow: visible;
}

@media ( max-width: 900px ) {
	.bfz-app.bfz-land .bfz-land__heroart {
		margin-top: 24px;
		max-width: 100%;
	}
}


/* ------------------- FAQ: an icon per question ----------------------- */

.bfz-app.bfz-land .bfz-land__q summary {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bfz-app.bfz-land .bfz-land__q summary > span {
	min-width: 0;
}

/* ===================================================================
 * Two corrections to the shared design layer, landing page only
 * ================================================================ */

/*
 * 1. The aurora backdrop.
 *
 * `.bfz-app::before` paints a fixed, full-viewport wash of five coloured
 * lobes. Behind the app - one compact panel on a short page - that reads as
 * atmosphere. Behind the landing page it does not: the page is a long white
 * document, the wash is fixed so it never scrolls away, and the amber and
 * pink lobes sit under body copy looking like a rendering fault rather than
 * a decision.
 *
 * Here it becomes absolute instead of fixed, so it frames the hero and then
 * scrolls off; it keeps only the two tints that belong to the brand; and it
 * stops drifting, because movement behind text you are trying to read is
 * noise.
 */
.bfz-app.bfz-land::before {
	position: absolute;
	inset: -12vmax -12vmax auto -12vmax;
	height: 118vh;
	background:
		radial-gradient(40vmax 30vmax at 14% 0%, color-mix(in oklab, var(--bfz-brand) 20%, transparent), transparent 66%),
		radial-gradient(30vmax 24vmax at 88% 4%, color-mix(in oklab, var(--bfz-au-2) 14%, transparent), transparent 64%);
	opacity: .55;
	animation: none;
}

/* The grain overlay is fixed too, and has the same problem at this length. */
.bfz-app.bfz-land::after {
	display: none;
}

/*
 * 2. The feature grid's hover state.
 *
 * The design layer gives .bfz-land__feature a card's lift and shadow, but
 * the cell has never had a surface to lift: no padding, no background, no
 * border. So hovering drew a panel flush against the text, with the icon
 * tile hanging outside its corner.
 *
 * The cells keep their airy look at rest and gain a real card - with room
 * inside it - only while hovered. The gap shrinks to pay for the padding,
 * so the grid's spacing is unchanged.
 */
.bfz-app.bfz-land .bfz-land__features {
	gap: 8px;
}

.bfz-app.bfz-land .bfz-land__feature {
	padding: 18px 20px;
	border: 1px solid transparent;
	background: transparent;
}

.bfz-app.bfz-land .bfz-land__feature:hover {
	background: var(--bfz-card);
	border-color: var(--bfz-line);
}

@media ( max-width: 600px ) {
	.bfz-app.bfz-land .bfz-land__feature {
		padding: 14px 16px;
	}
}

/* =========================================================================
 * 2.1.11 - the night band and the week
 *
 * The page used to open with a white hero and a small illustration beside
 * the sign-up card, which looked like every other plugin's landing page.
 * It now opens with a midnight band carrying the copy and the form, and a
 * full-width week of coloured meetings filling up along its bottom edge.
 *
 * Everything here is scoped to .bfz-land, so nothing can reach the booking
 * page, the dashboard or the admin screens.
 * ====================================================================== */

/* ----------------------------- The band ---------------------------------
 *
 * Full bleed. Every other section carries its own 1120px measure, so the
 * band simply has none, and the hero grid inside it keeps the measure it
 * always had.
 *
 * The colour is three soft lobes over near-black rather than a flat navy:
 * one indigo, one teal, one violet. A single-accent dark hero is the stock
 * treatment, and the point of this page is that the colour comes from the
 * calendar.
 * --------------------------------------------------------------------- */
.bfz-app.bfz-land .bfz-land__night {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(118% 86% at 6% -6%, #221E63 0%, transparent 58%),
		radial-gradient(96% 76% at 94% 2%, #0A3A52 0%, transparent 54%),
		radial-gradient(86% 64% at 46% 108%, #35164A 0%, transparent 60%),
		#0A0E1A;

	/*
	 * Re-pointing the tokens is what carries the band: the eyebrow pill, the
	 * ticks, the icon tiles and the headline all read these, so none of them
	 * needs an override of its own.
	 */
	--bfz-ink: #F4F7FD;
	--bfz-muted: #A9B6CE;
	--bfz-line: rgba(255, 255, 255, .16);
	--bfz-card: rgba(255, 255, 255, .06);
	--bfz-bg: transparent;

	color: var(--bfz-ink);
}

/* A hairline of light along the top edge, where the band meets the header. */
.bfz-app.bfz-land .bfz-land__night::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
}

.bfz-app.bfz-land .bfz-land__night .bfz-land__hero {
	position: relative;
	z-index: 1;
	padding-bottom: 28px;
}

/*
 * The sign-up card stays light. It is the one thing on this band a visitor
 * has to type into, and a bright card on midnight both reads as premium and
 * keeps the fields at full contrast - so the light tokens come back here.
 */
.bfz-app.bfz-land .bfz-land__night .bfz-land__heroform {
	--bfz-ink: #0F172A;
	--bfz-muted: #64748B;
	--bfz-line: #E2E8F0;
	--bfz-card: #FFFFFF;

	color: var(--bfz-ink);
}

/* The headline carries the band. Tighter and heavier than the old hero. */
.bfz-app.bfz-land .bfz-land__night .bfz-land__h1 {
	font-size: clamp(2.3rem, 5.4vw, 3.9rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.028em;
	color: #FFFFFF;
	-webkit-text-fill-color: currentColor;
	background: none;
}

.bfz-app.bfz-land .bfz-land__night .bfz-land__lede {
	max-width: 46ch;
	font-size: 1.08rem;
	color: var(--bfz-muted);
}

/* The eyebrow pill, glass rather than tinted brand. */
.bfz-app.bfz-land .bfz-land__night p.bfz-land__eyebrow--what {
	color: #DCE4F5;
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .16);
}

.bfz-app.bfz-land .bfz-land__night .bfz-land__ticks li {
	color: #DEE6F4;
}

/*
 * The eyebrow, in sentence case.
 *
 * A tracked-out all-caps label above the headline is the single most
 * recognisable piece of template chrome going, and it was fighting the
 * headline for attention. Same words, read as a sentence.
 */
.bfz-app.bfz-land .bfz-land__night p.bfz-land__eyebrow--what {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/*
 * The sign-up card, solid.
 *
 * The design layer gives it frosted glass, which is right over a light page
 * and wrong over this band: glass over near-black renders as muddy grey and
 * drags the input labels down with it. On the band it is a plain white card
 * with a real shadow - the brightest thing on the screen, which is also
 * where we want the eye to land.
 */
.bfz-app.bfz-land .bfz-land__night .bfz-land__card {
	background-color: #FFFFFF;
	background-image: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: 1px solid rgba(255, 255, 255, .5);
	box-shadow:
		0 2px 6px rgba(5, 8, 18, .3),
		0 30px 70px -28px rgba(5, 8, 18, .85);
}

/* The design layer's gradient hairline ring reads as a smudge on white. */
.bfz-app.bfz-land .bfz-land__night .bfz-land__card::after {
	display: none;
}

/* ------------------------ Labels, in sentence case ----------------------
 *
 * Applies to the "works with" line and the two before/after tags. The hero
 * eyebrow is handled with the band above.
 * --------------------------------------------------------------------- */
.bfz-app.bfz-land p.bfz-land__striplabel,
.bfz-app.bfz-land p.bfz-land__batag {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------------------------- Hour rules --------------------------------
 *
 * Sections were already divided by a hairline. Giving each rule a short
 * coloured segment at its left end turns a generic divider into the same
 * marker the week uses, and the hue cycle carries the band's palette down
 * the page without colouring anything that should stay quiet.
 * --------------------------------------------------------------------- */
.bfz-app.bfz-land .bfz-land__section {
	position: relative;
}

.bfz-app.bfz-land .bfz-land__section::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 16px;
	width: 56px;
	height: 2px;
	border-radius: 2px;
	background: var(--bfz-sec-hue, #6366F1);
}

.bfz-app.bfz-land .bfz-land__section:nth-of-type(6n + 1) { --bfz-sec-hue: #6366F1; }
.bfz-app.bfz-land .bfz-land__section:nth-of-type(6n + 2) { --bfz-sec-hue: #06B6D4; }
.bfz-app.bfz-land .bfz-land__section:nth-of-type(6n + 3) { --bfz-sec-hue: #10B981; }
.bfz-app.bfz-land .bfz-land__section:nth-of-type(6n + 4) { --bfz-sec-hue: #F59E0B; }
.bfz-app.bfz-land .bfz-land__section:nth-of-type(6n + 5) { --bfz-sec-hue: #F43F5E; }
.bfz-app.bfz-land .bfz-land__section:nth-of-type(6n + 6) { --bfz-sec-hue: #8B5CF6; }

/* ------------------------- Blocks, not cards ----------------------------
 *
 * The before and after columns were two identical cards with a shadow
 * apiece. They become event blocks: a coloured spine down the left edge, a
 * flat tint, no shadow - the same shape the week is full of, and the one
 * place on this page where red and green mean something.
 * --------------------------------------------------------------------- */
.bfz-app.bfz-land .bfz-land__bacol {
	position: relative;
	border: 0;
	border-left: 4px solid var(--bfz-ba-hue, #94A3B8);
	border-radius: 0 14px 14px 0;
	box-shadow: none;
	background: color-mix(in srgb, var(--bfz-ba-hue, #94A3B8) 6%, var(--bfz-card));
}

.bfz-app.bfz-land .bfz-land__bacol--before { --bfz-ba-hue: #F43F5E; }
.bfz-app.bfz-land .bfz-land__bacol--after  { --bfz-ba-hue: #10B981; }

/* The tags sit on the tint rather than in a pill of their own. */
.bfz-app.bfz-land .bfz-land__bacol p.bfz-land__batag {
	background: none;
	border: 0;
	padding: 0;
	color: var(--bfz-ba-hue);
}

/* --------------------------- The logo strip -----------------------------
 *
 * A pale lavender-to-mint gradient panel behind six chips: decoration with
 * no information in it, and the one place the page still looked templated
 * after everything above. The chips carry themselves.
 * --------------------------------------------------------------------- */
.bfz-app.bfz-land .bfz-land__strip {
	background: none;
	border: 0;
	box-shadow: none;
	padding-top: 40px;
}

.bfz-app.bfz-land .bfz-land__chips li {
	box-shadow: none;
}

/* ------------------------ Icon-and-label pills --------------------------
 *
 * The eyebrow and the two before/after tags are each an icon followed by a
 * label, and each was rendering with the icon stacked on top of the words.
 * The design layer sets `display: inline-block` on them at (0,3,0), which
 * outranks the `p.bfz-land__batag { display: flex }` written for them at
 * (0,1,1) - so the flex never applied and the block-level SVG took a line
 * of its own.
 *
 * Qualifying with the element reaches (0,3,1) and wins. The same trap the
 * rest of this file documents: against the design layer, a class alone is
 * never enough.
 * --------------------------------------------------------------------- */
.bfz-app.bfz-land p.bfz-land__eyebrow,
.bfz-app.bfz-land p.bfz-land__batag,
.bfz-app.bfz-land p.bfz-land__striplabel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* The strip panel: same specificity problem, same fix. */
.bfz-app.bfz-land section.bfz-land__strip {
	background-image: none;
	background-color: transparent;
	border-radius: 0;
}

/* The deep-dive eyebrows, in sentence case like the rest. */
.bfz-app.bfz-land p.bfz-land__roweyebrow {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* ------------------------- The closing panel ----------------------------
 *
 * Same problem the hero had: a frosted card over a saturated panel renders
 * as muddy lilac and takes the field labels down with it. It is the second
 * of the two sign-up forms on this page, so it gets the same solid white
 * treatment as the first.
 * --------------------------------------------------------------------- */
.bfz-app.bfz-land .bfz-land__ctaform {
	--bfz-ink: #0F172A;
	--bfz-muted: #64748B;
	--bfz-line: #E2E8F0;
	--bfz-card: #FFFFFF;

	color: var(--bfz-ink);
}

.bfz-app.bfz-land .bfz-land__ctaform .bfz-land__card {
	background-color: #FFFFFF;
	background-image: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: 1px solid rgba(255, 255, 255, .5);
	box-shadow:
		0 2px 6px rgba(23, 10, 65, .22),
		0 30px 70px -28px rgba(23, 10, 65, .7);
}

.bfz-app.bfz-land .bfz-land__ctaform .bfz-land__card::after {
	display: none;
}

/*
 * The closing headline carries its column.
 *
 * The panel's height is set by the sign-up card beside it, which left the
 * three short lines of copy floating in a large field of blue. Both columns
 * were centred correctly - the copy was simply too light to hold its half.
 */
.bfz-app.bfz-land .bfz-land__ctacopy .bfz-land__h2 {
	font-size: clamp(2rem, 4.4vw, 3rem);
	line-height: 1.06;
	letter-spacing: -.028em;
	margin-bottom: 14px;
}

.bfz-app.bfz-land .bfz-land__ctacopy .bfz-land__lede {
	max-width: 32ch;
	font-size: 1.05rem;
}

/*
 * The before/after tag colours.
 *
 * The spine and the tint can use the bright hue; the label cannot. Rose 500
 * on its own 6% tint measures 3.40:1, under the 4.5:1 AA needs for text at
 * this size, so the words get a darker shade of the same hue and the block
 * keeps its colour. Inverted for dark mode, where the tint is near-black.
 */
.bfz-app.bfz-land .bfz-land__bacol--before { --bfz-ba-text: #BE123C; }
.bfz-app.bfz-land .bfz-land__bacol--after  { --bfz-ba-text: #047857; }

.bfz-app.bfz-land[data-theme="dark"] .bfz-land__bacol--before { --bfz-ba-text: #FDA4AF; }
.bfz-app.bfz-land[data-theme="dark"] .bfz-land__bacol--after  { --bfz-ba-text: #6EE7B7; }

@media ( prefers-color-scheme: dark ) {
	.bfz-app.bfz-land[data-theme="auto"] .bfz-land__bacol--before { --bfz-ba-text: #FDA4AF; }
	.bfz-app.bfz-land[data-theme="auto"] .bfz-land__bacol--after  { --bfz-ba-text: #6EE7B7; }
}

.bfz-app.bfz-land .bfz-land__bacol p.bfz-land__batag {
	color: var(--bfz-ba-text, var(--bfz-ba-hue));
}

/*
 * The two sign-up cards in dark mode.
 *
 * A pure white card is right over the midnight band on a light page - it is
 * the brightest thing on the screen and that is where the eye should go.
 * On a dark page it is a glare, so the card becomes a raised dark surface
 * instead and keeps its contrast the other way up.
 */
.bfz-app.bfz-land[data-theme="dark"] .bfz-land__night .bfz-land__heroform,
.bfz-app.bfz-land[data-theme="dark"] .bfz-land__ctaform {
	--bfz-ink: #E7ECF3;
	--bfz-muted: #98A5B8;
	--bfz-line: #2B3547;
	--bfz-card: #161C28;
}

.bfz-app.bfz-land[data-theme="dark"] .bfz-land__night .bfz-land__card,
.bfz-app.bfz-land[data-theme="dark"] .bfz-land__ctaform .bfz-land__card {
	background-color: #161C28;
	border-color: rgba(255, 255, 255, .1);
	box-shadow:
		0 2px 6px rgba(0, 0, 0, .5),
		0 30px 70px -28px rgba(0, 0, 0, .9);
}

@media ( prefers-color-scheme: dark ) {
	.bfz-app.bfz-land[data-theme="auto"] .bfz-land__night .bfz-land__heroform,
	.bfz-app.bfz-land[data-theme="auto"] .bfz-land__ctaform {
		--bfz-ink: #E7ECF3;
		--bfz-muted: #98A5B8;
		--bfz-line: #2B3547;
		--bfz-card: #161C28;
	}

	.bfz-app.bfz-land[data-theme="auto"] .bfz-land__night .bfz-land__card,
	.bfz-app.bfz-land[data-theme="auto"] .bfz-land__ctaform .bfz-land__card {
		background-color: #161C28;
		border-color: rgba(255, 255, 255, .1);
		box-shadow:
			0 2px 6px rgba(0, 0, 0, .5),
			0 30px 70px -28px rgba(0, 0, 0, .9);
	}
}