/* =========================================================================
 * CalSchedule - site header and footer
 *
 * Shared chrome for every public page: the landing page, the account
 * screens, pricing and the error pages. Written against the same custom
 * properties as the rest of the front end, so a brand colour set in the
 * settings moves this too.
 *
 * Motion is ambient and slow, and every animation is switched off wholesale
 * for prefers-reduced-motion at the end of the file.
 * ====================================================================== */

/* --------------------------- Missing tokens -------------------------
 *
 * Four of the design tokens this file uses are declared in the dashboard and
 * booking stylesheets, and neither of those is loaded on a landing, pricing,
 * welcome or error page. An undefined custom property makes the whole
 * declaration invalid, which is why the footer had no background at all.
 *
 * Same values as the originals, declared where these pages can see them.
 * ------------------------------------------------------------------- */

.bfz-app.bfz-land {
	/*
	 * The landing stylesheet sets overflow-x: hidden here to keep the
	 * decorative glows from widening the page. That makes this element a
	 * scroll container, and a scroll container is where position: sticky
	 * sticks - so the header scrolled away with the page instead of pinning
	 * to the top of the window.
	 *
	 * `clip` does the same trimming without becoming one. The `hidden` above
	 * it is the fallback for browsers that do not know `clip` (Safari before
	 * 16); there the header is simply not sticky, which is the behaviour
	 * everybody had before this release anyway.
	 */
	overflow-x: hidden;
	overflow-x: clip;

	--bfz-ink-soft: #334155;
	--bfz-line-soft: #EFF3F8;
	--bfz-card-alt: #FBFCFE;
	--bfz-wash: var(--bfz-brand-soft);
}

.bfz-app.bfz-land[data-theme="dark"] {
	--bfz-ink-soft: #CBD5E1;
	--bfz-line-soft: #1C2538;
	--bfz-card-alt: #0F1727;
	--bfz-wash: rgba(255, 255, 255, .07);
	--bfz-link-ink: #A5B4FC;
}

@media (prefers-color-scheme: dark) {
	.bfz-app.bfz-land[data-theme="auto"] {
		--bfz-ink-soft: #CBD5E1;
		--bfz-line-soft: #1C2538;
		--bfz-card-alt: #0F1727;
		--bfz-wash: rgba(255, 255, 255, .07);
		--bfz-link-ink: #A5B4FC;
	}
}

@supports (color: color-mix(in oklab, #000, #FFF)) {
	.bfz-app.bfz-land[data-theme="dark"] {
		--bfz-link-ink: color-mix(in oklab, var(--bfz-brand) 42%, #FFFFFF);
	}

	@media (prefers-color-scheme: dark) {
		.bfz-app.bfz-land[data-theme="auto"] {
			--bfz-link-ink: color-mix(in oklab, var(--bfz-brand) 42%, #FFFFFF);
		}
	}
}

/* ------------------------- Shared primitives ------------------------
 *
 * Buttons, links and the screen-reader utility live in the dashboard and
 * booking stylesheets, neither of which is on a landing, pricing, welcome or
 * error page - the burger's "Menu" label was being drawn on the button and
 * the buttons on the error page had no styling at all.
 *
 * Same declarations as the originals, so a page that somehow loads both gets
 * the same result either way. Everything but the utility class is scoped to
 * .bfz-land, which is the only place these pages live.
 * ------------------------------------------------------------------- */

.bfz-app .bfz-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bfz-app.bfz-land .bfz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 11px 20px;
	border-radius: var(--bfz-radius-sm, 12px);
	border: 1px solid transparent;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease,
	box-shadow .16s ease, transform .12s ease;
}

.bfz-app.bfz-land a.bfz-btn--primary {
	background: var(--bfz-brand);
	color: var(--bfz-brand-text);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 16px -8px rgba(15, 23, 42, .35);
}

.bfz-app.bfz-land a.bfz-btn--primary:hover {
	background: var(--bfz-brand-dark);
	color: var(--bfz-brand-text);
	text-decoration: none;
}

.bfz-app.bfz-land a.bfz-btn--ghost {
	background: var(--bfz-card);
	border-color: var(--bfz-line);
	color: var(--bfz-ink);
}

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

.bfz-app.bfz-land .bfz-btn--block {
	display: flex;
	width: 100%;
}

.bfz-app.bfz-land a.bfz-link {
	color: var(--bfz-link-ink, var(--bfz-brand));
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .16s ease;
}

.bfz-app.bfz-land a.bfz-link:hover {
	border-bottom-color: currentColor;
	text-decoration: none;
}

/* ---------------------------- Theme button --------------------------
 *
 * Also a dashboard and booking primitive, and also not on these pages: the
 * switch was coming out as a bare white box with both icons showing at once.
 * ------------------------------------------------------------------- */

.bfz-app.bfz-land .bfz-themebtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	flex: 0 0 auto;
	border: 1px solid var(--bfz-line);
	border-radius: var(--bfz-radius-xs, 12px);
	background: var(--bfz-card);
	color: var(--bfz-ink-soft);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.bfz-app.bfz-land .bfz-themebtn:hover,
.bfz-app.bfz-land .bfz-themebtn:focus-visible {
	background: var(--bfz-card-alt);
	color: var(--bfz-ink);
}

.bfz-app.bfz-land .bfz-themebtn .bfz-i {
	flex: none;
}

.bfz-app.bfz-land .bfz-themebtn__moon,
.bfz-app.bfz-land .bfz-themebtn__sun {
	display: inline-flex;
}

.bfz-app.bfz-land .bfz-themebtn__sun {
	display: none;
}

.bfz-app.bfz-land[data-theme="dark"] .bfz-themebtn__moon {
	display: none;
}

.bfz-app.bfz-land[data-theme="dark"] .bfz-themebtn__sun {
	display: inline-flex;
}

@media (prefers-color-scheme: dark) {
	.bfz-app.bfz-land[data-theme="auto"] .bfz-themebtn__moon {
		display: none;
	}

	.bfz-app.bfz-land[data-theme="auto"] .bfz-themebtn__sun {
		display: inline-flex;
	}
}

/* ------------------------------ Header ------------------------------ */

.bfz-app .bfz-chrome {
	position: sticky;
	top: 0;
	z-index: 60;
	/* Opaque first: a browser without color-mix() keeps this rather than
	   falling back to a transparent bar with the page sliding under it. */
	background: var(--bfz-bg);
	background: color-mix(in oklab, var(--bfz-bg) 82%, transparent);
	backdrop-filter: saturate(1.6) blur(14px);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, background .25s ease;
}

/* The header overlaps whatever an in-page link jumps to, so every anchor
   target keeps its own clearance underneath it. */
.bfz-app [id="features"],
.bfz-app [id="how"],
.bfz-app [id="faq"],
.bfz-app [id="pricing"],
.bfz-app [id="bfz-main"] {
	scroll-margin-top: 84px;
}

.bfz-app .bfz-chrome.is-stuck {
	border-bottom-color: var(--bfz-line);
}

.bfz-app .bfz-chrome a.bfz-chrome__skip {
	position: absolute;
	left: 16px;
	top: 8px;
	z-index: 2;
	padding: 8px 14px;
	border-radius: 10px;
	background: var(--bfz-brand);
	color: #FFFFFF;
	font-weight: 600;
	transform: translateY(-160%);
	transition: transform .2s ease;
}

.bfz-app .bfz-chrome a.bfz-chrome__skip:focus {
	transform: translateY(0);
}

.bfz-app .bfz-chrome__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 12px 16px;
}

/* ------------------------------ Brand ------------------------------- */

.bfz-app .bfz-chrome a.bfz-chrome__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--bfz-ink);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -.01em;
	flex: 0 0 auto;
}

.bfz-app .bfz-chrome__logo {
	max-height: 34px;
	width: auto;
	display: block;
}

.bfz-app .bfz-mark {
	display: block;
	overflow: visible;
}

.bfz-app .bfz-mark__plate {
	opacity: .14;
	transform-origin: 16px 17px;
	animation: bfz-mark-breathe 6s ease-in-out infinite;
}

.bfz-app .bfz-mark__dot {
	transform-origin: center;
	animation: bfz-mark-tick 5s ease-in-out infinite;
}

.bfz-app .bfz-mark__dot--2 { animation-delay: .5s; }
.bfz-app .bfz-mark__dot--3 { animation-delay: 1s; }
.bfz-app .bfz-mark__dot--4 { animation-delay: 1.5s; }
.bfz-app .bfz-mark__dot--5 { animation-delay: 2s; }

@keyframes bfz-mark-breathe {
	0%, 100% { opacity: .12; }
	50%      { opacity: .26; }
}

@keyframes bfz-mark-tick {
	0%, 70%, 100% { opacity: .55; }
	18%, 40%      { opacity: 1; }
}

.bfz-app .bfz-chrome a.bfz-chrome__brand:hover .bfz-mark__plate {
	opacity: .3;
}

/* --------------------------- Navigation ----------------------------- */

.bfz-app .bfz-chrome__nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.bfz-app ul.bfz-chrome__links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfz-app ul.bfz-chrome__links a {
	position: relative;
	display: inline-block;
	padding: 8px 12px;
	border-radius: 10px;
	color: var(--bfz-ink-soft);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	transition: color .18s ease, background .18s ease;
}

.bfz-app ul.bfz-chrome__links a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: var(--bfz-grad-brand, linear-gradient(90deg, #818CF8, #7C3AED));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s ease;
}

.bfz-app ul.bfz-chrome__links a:hover,
.bfz-app ul.bfz-chrome__links a:focus-visible {
	color: var(--bfz-ink);
	background: var(--bfz-wash);
}

.bfz-app ul.bfz-chrome__links a:hover::after,
.bfz-app ul.bfz-chrome__links a[aria-current="page"]::after {
	transform: scaleX(1);
}

.bfz-app .bfz-chrome__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: 8px;
}

.bfz-app .bfz-chrome a.bfz-chrome__signin {
	padding: 9px 14px;
	border-radius: 10px;
	color: var(--bfz-ink);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	transition: background .18s ease;
}

.bfz-app .bfz-chrome a.bfz-chrome__signin:hover {
	background: var(--bfz-wash);
}

.bfz-app .bfz-chrome a.bfz-chrome__cta {
	position: relative;
	overflow: hidden;
	padding: 10px 18px;
	border-radius: 11px;
	background-image: linear-gradient(120deg, #6366F1, #7C3AED 55%, #4F46E5);
	background-size: 180% 100%;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(79, 70, 229, .3), 0 10px 24px -12px rgba(79, 70, 229, .7);
	transition: background-position .5s ease, transform .18s ease, box-shadow .18s ease;
}

.bfz-app .bfz-chrome a.bfz-chrome__cta > span {
	position: relative;
	z-index: 1;
}

/* A highlight that sweeps across on hover, not on a loop: ambient motion on
   the one element people are about to click reads as a glitch. */
.bfz-app .bfz-chrome a.bfz-chrome__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .34) 50%, transparent 80%);
	transform: translateX(-120%);
	transition: transform .6s ease;
}

.bfz-app .bfz-chrome a.bfz-chrome__cta:hover {
	background-position: 100% 0;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(79, 70, 229, .32), 0 16px 30px -14px rgba(79, 70, 229, .8);
}

.bfz-app .bfz-chrome a.bfz-chrome__cta:hover::before {
	transform: translateX(120%);
}

/* ----------------------------- Burger ------------------------------- */

.bfz-app button.bfz-chrome__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	margin-left: auto;
	padding: 0 10px;
	border: 1px solid var(--bfz-line);
	border-radius: 11px;
	background: var(--bfz-card);
	cursor: pointer;
}

.bfz-app .bfz-chrome__bar {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--bfz-ink);
	transition: transform .22s ease, opacity .18s ease;
}

.bfz-app button.bfz-chrome__burger[aria-expanded="true"] .bfz-chrome__bar:nth-child(2) {
	transform: translateY(7px) rotate(45deg);
}

.bfz-app button.bfz-chrome__burger[aria-expanded="true"] .bfz-chrome__bar:nth-child(3) {
	opacity: 0;
}

.bfz-app button.bfz-chrome__burger[aria-expanded="true"] .bfz-chrome__bar:nth-child(4) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 859px) {
	.bfz-app button.bfz-chrome__burger {
		display: flex;
	}

	.bfz-app .bfz-chrome__nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		display: grid;
		gap: 14px;
		margin: 0;
		padding: 18px 16px 22px;
		background: var(--bfz-card);
		border-bottom: 1px solid var(--bfz-line);
		box-shadow: var(--bfz-shadow);
		clip-path: inset(0 0 100% 0);
		opacity: 0;
		pointer-events: none;
		transition: clip-path .28s ease, opacity .2s ease;
	}

	.bfz-app .bfz-chrome__nav.is-open {
		clip-path: inset(0 0 0 0);
		opacity: 1;
		pointer-events: auto;
	}

	.bfz-app ul.bfz-chrome__links {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.bfz-app ul.bfz-chrome__links a {
		display: block;
		padding: 12px;
		font-size: 16px;
	}

	.bfz-app .bfz-chrome__actions {
		margin-left: 0;
		flex-wrap: wrap;
	}

	.bfz-app .bfz-chrome a.bfz-chrome__cta,
	.bfz-app .bfz-chrome a.bfz-chrome__signin {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* ------------------------------ Footer ------------------------------ */

.bfz-app .bfz-foot {
	position: relative;
	margin-top: 72px;
	padding-top: 72px;
	background: var(--bfz-card-alt, var(--bfz-line-soft));
	border-top: 1px solid var(--bfz-line);
}

.bfz-app .bfz-foot__wave {
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	width: 100%;
	height: 116px;
	pointer-events: none;
}

.bfz-app .bfz-foot__wave1 {
	animation: bfz-foot-drift 22s ease-in-out infinite alternate;
}

.bfz-app .bfz-foot__wave2 {
	animation: bfz-foot-drift 17s ease-in-out infinite alternate-reverse;
}

@keyframes bfz-foot-drift {
	0%   { transform: translateX(-2%) translateY(0); }
	100% { transform: translateX(2%) translateY(-6px); }
}

.bfz-app .bfz-foot__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 16px 40px;
}

.bfz-app .bfz-foot a.bfz-foot__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--bfz-ink);
	text-decoration: none;
	font-weight: 700;
	font-size: 17px;
}

.bfz-app p.bfz-foot__blurb {
	margin: 14px 0 0;
	max-width: 38ch;
	color: var(--bfz-muted);
	line-height: 1.65;
}

.bfz-app ul.bfz-foot__badges {
	display: grid;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.bfz-app ul.bfz-foot__badges li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bfz-ink-soft);
}

.bfz-app .bfz-foot__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

.bfz-app h2.bfz-foot__h {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bfz-muted);
}

.bfz-app .bfz-foot__col ul {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfz-app .bfz-foot__col a {
	color: var(--bfz-ink-soft);
	text-decoration: none;
	font-size: 15px;
	transition: color .18s ease;
}

.bfz-app .bfz-foot__col a:hover {
	color: var(--bfz-brand);
	text-decoration: underline;
}

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

.bfz-app .bfz-foot__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 18px 16px 26px;
	border-top: 1px solid var(--bfz-line);
	color: var(--bfz-muted);
	font-size: 14px;
}

.bfz-app .bfz-foot__bar p {
	margin: 0;
}

@media (min-width: 720px) {
	.bfz-app .bfz-foot__cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.bfz-app .bfz-foot__inner {
		grid-template-columns: 1.2fr 2fr;
		gap: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bfz-app .bfz-mark__plate,
	.bfz-app .bfz-mark__dot,
	.bfz-app .bfz-foot__wave1,
	.bfz-app .bfz-foot__wave2 {
		animation: none !important;
	}

	.bfz-app .bfz-chrome a.bfz-chrome__cta::before,
	.bfz-app ul.bfz-chrome__links a::after {
		transition: none !important;
	}
}

/* =========================================================================
 * Error, pricing and welcome pages
 *
 * All three sit between the shared header and footer, so they only need
 * their own middle. They reuse the landing page's type scale.
 * ====================================================================== */

/* ------------------------------ Errors ------------------------------ */

.bfz-app .bfz-err {
	max-width: 1120px;
	margin: 0 auto;
	padding: 48px 16px 24px;
}

.bfz-app .bfz-err__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}

.bfz-app p.bfz-err__code {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 6px 14px 6px 10px;
	border: 1px solid var(--bfz-line);
	border-radius: 999px;
	background: var(--bfz-wash);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bfz-ink-soft);
}

.bfz-app h1.bfz-err__title {
	margin: 0 0 12px;
	font-size: clamp(28px, 5vw, 44px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--bfz-ink);
}

.bfz-app p.bfz-err__lede {
	margin: 0 0 26px;
	max-width: 46ch;
	font-size: clamp(16px, 2.2vw, 18px);
	line-height: 1.65;
	color: var(--bfz-muted);
}

.bfz-app .bfz-err__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.bfz-app ul.bfz-err__hints {
	display: grid;
	gap: 12px;
	margin: 30px 0 0;
	padding: 18px 20px;
	list-style: none;
	border: 1px solid var(--bfz-line);
	border-radius: 16px;
	background: var(--bfz-card);
}

.bfz-app ul.bfz-err__hints li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--bfz-ink-soft);
}

.bfz-app figure.bfz-err__art {
	margin: 0;
	display: flex;
	justify-content: center;
}

.bfz-app figure.bfz-err__art .bfz-sc {
	width: 100%;
	max-width: 440px;
	height: auto;
}

/* ------------------------------ Pricing ----------------------------- */

.bfz-app .bfz-pr__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
	max-width: 1120px;
	margin: 0 auto;
	padding: 48px 16px 8px;
}

.bfz-app figure.bfz-pr__art {
	margin: 0;
	display: flex;
	justify-content: center;
}

.bfz-app figure.bfz-pr__art .bfz-sc {
	width: 100%;
	max-width: 400px;
	height: auto;
}

.bfz-app .bfz-pr__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 32px 16px 8px;
	align-items: start;
}

.bfz-app .bfz-pr__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 28px 24px;
	border: 1px solid var(--bfz-line);
	border-radius: var(--bfz-radius, 20px);
	background: var(--bfz-card);
	box-shadow: var(--bfz-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}

.bfz-app .bfz-pr__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--bfz-shadow-lift);
}

.bfz-app .bfz-pr__card.is-featured {
	border-color: color-mix(in oklab, var(--bfz-brand) 55%, transparent);
	border-width: 2px;
	box-shadow: var(--bfz-shadow);
}

.bfz-app p.bfz-pr__flag {
	position: absolute;
	top: -13px;
	left: 24px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background-image: linear-gradient(120deg, #6366F1, #7C3AED);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	/* Absolutely positioned, so it shrink-wraps: without this the label
	   wraps inside its own pill. */
	white-space: nowrap;
	box-shadow: 0 6px 18px -8px rgba(79, 70, 229, .9);
}

.bfz-app h2.bfz-pr__name {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 700;
	color: var(--bfz-ink);
}

.bfz-app p.bfz-pr__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0 0 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--bfz-line);
}

.bfz-app .bfz-pr__amount {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--bfz-ink);
}

.bfz-app .bfz-pr__period,
.bfz-app .bfz-pr__noprice {
	font-size: 14px;
	color: var(--bfz-muted);
}

.bfz-app ul.bfz-pr__feats {
	display: grid;
	gap: 11px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
}

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

.bfz-app .bfz-pr__note {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 1120px;
	margin: 20px auto 0;
	padding: 20px 24px;
	border: 1px solid var(--bfz-line);
	border-radius: 18px;
	background: var(--bfz-wash);
}

.bfz-app .bfz-pr__note p {
	margin: 0;
	max-width: 70ch;
	color: var(--bfz-ink-soft);
	line-height: 1.6;
}

/* ------------------------------ Welcome ----------------------------- */

.bfz-app .bfz-wel__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
	max-width: 1120px;
	margin: 0 auto;
	padding: 48px 16px 8px;
}

.bfz-app figure.bfz-wel__art {
	margin: 0;
	display: flex;
	justify-content: center;
	order: -1;
}

.bfz-app figure.bfz-wel__art .bfz-sc {
	width: 100%;
	max-width: 380px;
	height: auto;
}

.bfz-app .bfz-wel__link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	padding: 14px 18px;
	border: 1px solid var(--bfz-line);
	border-radius: 14px;
	background: var(--bfz-card);
}

.bfz-app .bfz-wel__linklabel {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bfz-muted);
}

.bfz-app .bfz-wel__url {
	font-size: 15px;
	font-weight: 600;
	color: var(--bfz-ink);
	word-break: break-all;
}

.bfz-app .bfz-wel__steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 32px 16px 8px;
}

.bfz-app .bfz-wel__step {
	position: relative;
	padding: 26px 24px;
	border: 1px solid var(--bfz-line);
	border-radius: var(--bfz-radius, 20px);
	background: var(--bfz-card);
	box-shadow: var(--bfz-shadow-sm);
}

.bfz-app .bfz-wel__num {
	position: absolute;
	top: 20px;
	right: 22px;
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: var(--bfz-ink);
	opacity: .08;
}

.bfz-app h2.bfz-wel__steptitle {
	margin: 14px 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--bfz-ink);
}

.bfz-app p.bfz-wel__stepbody {
	margin: 0 0 14px;
	line-height: 1.65;
	color: var(--bfz-muted);
}

.bfz-app .bfz-wel__go {
	display: flex;
	justify-content: center;
	padding: 28px 16px 8px;
}

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

@media (min-width: 720px) {
	.bfz-app .bfz-pr__grid,
	.bfz-app .bfz-wel__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 880px) {
	.bfz-app .bfz-err__inner {
		grid-template-columns: 1.05fr .95fr;
		gap: 48px;
	}

	.bfz-app .bfz-pr__head,
	.bfz-app .bfz-wel__head {
		grid-template-columns: 1.15fr .85fr;
		gap: 40px;
		padding-top: 64px;
	}

	.bfz-app figure.bfz-wel__art {
		order: 1;
	}
}