/**
 * CalSchedule — Aurora.
 *
 * The design layer. It loads after the surface stylesheets (booking, dashboard,
 * landing) and re-skins what they built: the same markup, the same class names,
 * a different product. Nothing here changes layout logic or behaviour, so the
 * page keeps working exactly as it did if this file never loads.
 *
 * The language:
 *   - an aurora mesh behind every screen, drifting slowly;
 *   - frosted glass surfaces with a hairline edge and layered, tinted shadow;
 *   - the host's own brand colour blended into every gradient, so a page still
 *     belongs to its business;
 *   - colour carried by the icons themselves (gradient strokes painted from
 *     CSS onto the shared <defs> sprite) rather than by big blocks of fill;
 *   - motion that is slow, small and always optional.
 *
 * Contents
 *   1.  Tokens (light, dark, auto)
 *   2.  Canvas: the aurora mesh
 *   3.  Glass surfaces
 *   4.  Primitives: buttons, inputs, pills, badges, switches, segments
 *   5.  Colourful icons
 *   6.  Booking page: hero, calendar, times, steps, confirmation
 *   7.  Business page and the team
 *   8.  Manage and invitation screens
 *   9.  Landing and sign-in
 *   10. Motion, reduced motion, print
 *   11. Booking page: the meeting rail
 *   12. Depth: gradient rings and sheen
 *   13. Display type and portraits
 *   14. Pills, badges and buttons
 *   15. Manage booking
 *   16. Sign in and register
 *   17. Landing
 *   18. Icons by kind: colour and motion
 *   19. Polish
 */

/* =========================================================================
 * 1. Tokens
 * ====================================================================== */

.bfz-app {
	/* Aurora hues. Used for mesh, icon gradients and accents. */
	--bfz-au-1: #7C5CFF;
	--bfz-au-2: #22D3EE;
	--bfz-au-3: #F472B6;
	--bfz-au-4: #34D399;
	--bfz-au-5: #FBBF24;

	/* Glass. */
	--bfz-glass: rgba(255, 255, 255, .66);
	--bfz-glass-strong: rgba(255, 255, 255, .82);
	--bfz-glass-line: rgba(255, 255, 255, .7);
	--bfz-glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 52%);
	--bfz-blur: saturate(170%) blur(18px);

	/* Depth: tinted with the brand rather than flat black. */
	--bfz-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px -4px rgba(76, 61, 160, .22);
	--bfz-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -20px rgba(76, 61, 160, .38);
	--bfz-shadow-lift: 0 2px 6px rgba(15, 23, 42, .06), 0 28px 60px -24px rgba(76, 61, 160, .5);
	--bfz-glow: 0 10px 30px -12px color-mix(in oklab, var(--bfz-brand) 65%, transparent);

	/* Softer, larger radii read as "app", not "form". */
	--bfz-radius-xs: 12px;
	--bfz-radius-sm: 16px;
	--bfz-radius: 20px;
	--bfz-radius-lg: 28px;

	/* One spring for everything that moves. */
	--bfz-ease: cubic-bezier(.32, .72, .3, 1);
	--bfz-ease-out: cubic-bezier(.16, 1, .3, 1);

	/* Gradients built from the host's own colour. */
	--bfz-grad-brand: linear-gradient(135deg,
		color-mix(in oklab, var(--bfz-brand) 88%, #FFFFFF) 0%,
		var(--bfz-brand) 48%,
		color-mix(in oklab, var(--bfz-brand) 62%, var(--bfz-au-2)) 100%);
	--bfz-grad-soft: linear-gradient(135deg,
		color-mix(in oklab, var(--bfz-brand) 12%, transparent),
		color-mix(in oklab, var(--bfz-au-2) 14%, transparent));
	--bfz-hairline: color-mix(in oklab, var(--bfz-brand) 16%, var(--bfz-line));
}

/* Dark: the mesh does the lifting, surfaces go near-black with a lit edge. */
.bfz-app[data-theme="dark"] {
	--bfz-glass: rgba(18, 26, 43, .72);
	--bfz-glass-strong: rgba(18, 26, 43, .9);
	--bfz-glass-line: rgba(148, 163, 184, .16);
	--bfz-glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 55%);
	--bfz-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
	--bfz-shadow: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 60px -28px rgba(0, 0, 0, .9);
	--bfz-shadow-lift: 0 4px 10px rgba(0, 0, 0, .5), 0 34px 70px -30px rgba(0, 0, 0, 1);
	--bfz-hairline: color-mix(in oklab, var(--bfz-brand) 30%, var(--bfz-line));
}

@media (prefers-color-scheme: dark) {
	.bfz-app[data-theme="auto"] {
		--bfz-glass: rgba(18, 26, 43, .72);
		--bfz-glass-strong: rgba(18, 26, 43, .9);
		--bfz-glass-line: rgba(148, 163, 184, .16);
		--bfz-glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 55%);
		--bfz-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
		--bfz-shadow: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 60px -28px rgba(0, 0, 0, .9);
		--bfz-shadow-lift: 0 4px 10px rgba(0, 0, 0, .5), 0 34px 70px -30px rgba(0, 0, 0, 1);
		--bfz-hairline: color-mix(in oklab, var(--bfz-brand) 30%, var(--bfz-line));
	}
}

/* =========================================================================
 * 2. Canvas: the aurora mesh
 *
 * One fixed layer behind everything, four soft lights drifting at different
 * speeds. It is painted from the brand colour plus two aurora hues, so two
 * businesses with different colours get recognisably different pages.
 * ====================================================================== */

.bfz-app {
	position: relative;
	isolation: isolate;
}

.bfz-app::before {
	content: "";
	position: fixed;
	inset: -20vmax;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(42vmax 38vmax at 10% 4%, color-mix(in oklab, var(--bfz-brand) 52%, transparent), transparent 64%),
		radial-gradient(34vmax 32vmax at 92% 0%, color-mix(in oklab, var(--bfz-au-2) 48%, transparent), transparent 62%),
		radial-gradient(40vmax 34vmax at 86% 78%, color-mix(in oklab, var(--bfz-au-3) 42%, transparent), transparent 64%),
		radial-gradient(32vmax 30vmax at 4% 92%, color-mix(in oklab, var(--bfz-au-4) 36%, transparent), transparent 62%),
		radial-gradient(26vmax 24vmax at 50% 48%, color-mix(in oklab, var(--bfz-au-5) 20%, transparent), transparent 60%);
	filter: blur(26px);
	opacity: .95;
	animation: bfz-au-drift 42s ease-in-out infinite alternate;
}

/* A whisper of grain, so large flat areas do not band on wide screens. */
.bfz-app::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .35;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
	mix-blend-mode: soft-light;
}

.bfz-app[data-theme="dark"]::before {
	opacity: .55;
}

@media (prefers-color-scheme: dark) {
	.bfz-app[data-theme="auto"]::before {
		opacity: .55;
	}
}

@keyframes bfz-au-drift {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
	100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

/* The page itself sits on a near-neutral wash; the mesh supplies the colour. */
/* Colour and gradient are set separately on purpose: the shorthand would
 * reset background-color to transparent, leaving nothing underneath if the
 * gradient is ever dropped (print, a very old browser, a reader mode). */
body.bfz-body {
	background-color: #F8FAFC;
	background-image: linear-gradient(180deg, #FAFBFF 0%, #F1F3FB 55%, #ECEFFA 100%);
}

body.bfz-body[data-theme="dark"] {
	background-color: #0B1120;
	background-image: linear-gradient(180deg, #080C16 0%, #0B1120 60%, #0A0F1C 100%);
}

@media (prefers-color-scheme: dark) {
	body.bfz-body[data-theme="auto"] {
		background-color: #0B1120;
		background-image: linear-gradient(180deg, #080C16 0%, #0B1120 60%, #0A0F1C 100%);
	}
}

/* =========================================================================
 * 3. Glass surfaces
 * ====================================================================== */

.bfz-app .bfz-card,
.bfz-app .bfz-cal__pane,
.bfz-app .bfz-hero,
.bfz-app .bfz-grid,
.bfz-app .bfz-modal,
.bfz-app .bfz-mate,
.bfz-app .bfz-etype,
.bfz-app .bfz-tmember {
	position: relative;
	background-color: var(--bfz-glass);
	background-image: var(--bfz-glass-sheen);
	-webkit-backdrop-filter: var(--bfz-blur);
	backdrop-filter: var(--bfz-blur);
	border-color: var(--bfz-glass-line);
	border-radius: var(--bfz-radius);
	box-shadow: var(--bfz-shadow);
}

/* Browsers without backdrop-filter get an opaque surface instead of a
 * washed-out one. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.bfz-app .bfz-card,
	.bfz-app .bfz-cal__pane,
	.bfz-app .bfz-hero,
	.bfz-app .bfz-modal,
	.bfz-app .bfz-mate,
	.bfz-app .bfz-etype,
	.bfz-app .bfz-tmember {
		background-color: var(--bfz-card);
	}
}

.bfz-app .bfz-card--flush {
	overflow: hidden;
}

/* The top strip floats over the mesh. */
.bfz-app .bfz-topstrip {
	position: sticky;
	top: 0;
	z-index: 20;
	margin: -8px -8px 18px;
	padding: 10px 14px;
	border-radius: 999px;
	background: var(--bfz-glass);
	-webkit-backdrop-filter: var(--bfz-blur);
	backdrop-filter: var(--bfz-blur);
	box-shadow: var(--bfz-shadow-sm);
	border: 1px solid var(--bfz-glass-line);
}

.bfz-app .bfz-topstrip__name {
	background: var(--bfz-grad-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 750;
}

/* =========================================================================
 * 4. Primitives
 * ====================================================================== */

.bfz-app .bfz-btn {
	border-radius: 999px;
	font-weight: 650;
	letter-spacing: -.01em;
	transition: transform .18s var(--bfz-ease), box-shadow .22s var(--bfz-ease),
		background-color .18s ease, border-color .18s ease, color .18s ease;
}

.bfz-app .bfz-btn:active {
	transform: translateY(1px) scale(.99);
}

.bfz-app .bfz-btn--primary {
	background-color: var(--bfz-brand);
	background-image: var(--bfz-grad-brand);
	border-color: transparent;
	box-shadow: var(--bfz-glow);
}

.bfz-app .bfz-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 38px -14px color-mix(in oklab, var(--bfz-brand) 80%, transparent);
}

.bfz-app .bfz-btn--ghost {
	background-color: var(--bfz-glass-strong);
	border-color: var(--bfz-glass-line);
	-webkit-backdrop-filter: var(--bfz-blur);
	backdrop-filter: var(--bfz-blur);
}

.bfz-app .bfz-btn--ghost:hover {
	transform: translateY(-1px);
	border-color: var(--bfz-hairline);
	box-shadow: var(--bfz-shadow-sm);
}

.bfz-app .bfz-input,
.bfz-app .bfz-input--select,
.bfz-app .bfz-tz__select {
	border-radius: var(--bfz-radius-xs);
	background-color: var(--bfz-glass-strong);
	border-color: var(--bfz-glass-line);
	transition: border-color .18s ease, box-shadow .2s ease, background-color .18s ease;
}

.bfz-app .bfz-input:focus,
.bfz-app .bfz-input:focus-visible,
.bfz-app .bfz-tz__select:focus {
	border-color: var(--bfz-brand);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--bfz-brand) 22%, transparent);
	outline: none;
}

.bfz-app .bfz-pill {
	border-radius: 999px;
	background-image: var(--bfz-grad-soft);
	border-color: var(--bfz-glass-line);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.bfz-app .bfz-badge {
	border-radius: 999px;
	font-weight: 650;
}

/* Switch: the track fills with the brand gradient. */
.bfz-app .bfz-switch__input:checked ~ .bfz-switch__track {
	background-image: var(--bfz-grad-brand);
	box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--bfz-brand) 80%, transparent);
}

/* Segmented control: a glass pill with a gradient active segment. */
.bfz-app .bfz-seg {
	border-radius: 999px;
	background: var(--bfz-glass);
	border-color: var(--bfz-glass-line);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.bfz-app .bfz-seg__btn {
	border-radius: 999px;
	transition: color .18s ease, background-color .18s ease, box-shadow .2s ease;
}

.bfz-app .bfz-seg__btn.is-active {
	background-image: var(--bfz-grad-brand);
	color: var(--bfz-brand-text);
	box-shadow: 0 8px 20px -10px color-mix(in oklab, var(--bfz-brand) 80%, transparent);
}

/* =========================================================================
 * 5. Colourful icons
 *
 * The strokes are painted with the gradients in the <defs> sprite that every
 * page carries (bfz_the_gradient_defs() in PHP, injected by the app scripts
 * elsewhere). Painting from CSS means no call site has to change, and an icon
 * inside a coloured button keeps currentColor because it is not listed here.
 * ====================================================================== */

.bfz-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.bfz-app .bfz-i {
	transition: transform .28s var(--bfz-ease-out), opacity .2s ease;
}

/* Decorative contexts get a gradient stroke. */
.bfz-app .bfz-fact .bfz-i,
.bfz-app .bfz-tz__label .bfz-i,
.bfz-app .bfz-slots__hint .bfz-i,
.bfz-app .bfz-bk__loc .bfz-i,
.bfz-app .bfz-invite__points .bfz-i,
.bfz-app .bfz-hold .bfz-i,
.bfz-app .bfz-step__icon .bfz-i {
	stroke: url(#bfz-g-sky) currentColor;
}

.bfz-app .bfz-empty__icon .bfz-i,
.bfz-app .bfz-invite__icon .bfz-i,
.bfz-app .bfz-conf__icon .bfz-i {
	stroke: url(#bfz-g-brand) currentColor;
}

.bfz-app .bfz-alert--error .bfz-i {
	stroke: url(#bfz-g-rose) currentColor;
}

/*
 * A day held back deliberately is not an error. The rose gradient here read
 * as "something went wrong" on a screen whose whole job is to look like a
 * full diary, so it follows the brand instead.
 */
.bfz-app .bfz-full__icon .bfz-i {
	stroke: url(#bfz-g-indigo) currentColor;
}

.bfz-app .bfz-alert--success .bfz-i,
.bfz-app .bfz-badge--confirmed .bfz-i {
	stroke: url(#bfz-g-emerald) currentColor;
}

.bfz-app .bfz-pill .bfz-i {
	stroke: url(#bfz-g-brand) currentColor;
}

.bfz-app .bfz-pill--price .bfz-i {
	stroke: url(#bfz-g-emerald) currentColor;
}

.bfz-app .bfz-fact:nth-child(2) .bfz-i {
	stroke: url(#bfz-g-violet) currentColor;
}

.bfz-app .bfz-fact:nth-child(3) .bfz-i {
	stroke: url(#bfz-g-amber) currentColor;
}

/* A gentle float for the standalone marks that head a card or a state. */
.bfz-app .bfz-empty__icon .bfz-i,
.bfz-app .bfz-invite__icon .bfz-i,
.bfz-app .bfz-conf__icon .bfz-i,
.bfz-app .bfz-full__icon .bfz-i {
	animation: bfz-au-float 6s ease-in-out infinite;
}

@keyframes bfz-au-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}

/* Cards nudge their icon when the card is hovered. */
.bfz-app .bfz-etype:hover .bfz-i,
.bfz-app .bfz-mate:hover .bfz-i,
.bfz-app .bfz-slot:hover .bfz-i {
	transform: translateY(-1px) scale(1.06);
}

/* Tinted tiles pick up the glass treatment and a soft glow. */
.bfz-app .bfz-gtile {
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px var(--bfz-gtile-ring, rgba(79, 70, 229, .16)),
		0 8px 20px -14px rgba(15, 23, 42, .5);
}

/* =========================================================================
 * 6. Booking page
 * ====================================================================== */

.bfz-app .bfz-cal {
	border-radius: var(--bfz-radius-lg);
}

.bfz-app .bfz-cal__heading,
.bfz-app .bfz-slots__title {
	letter-spacing: -.025em;
}

.bfz-app .bfz-cal__monthname {
	font-weight: 750;
	letter-spacing: -.02em;
}

.bfz-app .bfz-cal__nav {
	border-radius: 999px;
	background: var(--bfz-glass-strong);
	border: 1px solid var(--bfz-glass-line);
	transition: transform .18s var(--bfz-ease), box-shadow .2s ease, border-color .2s ease;
}

.bfz-app .bfz-cal__nav:hover:not(:disabled) {
	transform: translateY(-1px);
	border-color: var(--bfz-hairline);
	box-shadow: var(--bfz-shadow-sm);
}

/* Open days: a soft tinted chip; the dot becomes a gradient bead. */
.bfz-app .bfz-cal__cell {
	border-radius: 14px;
}

.bfz-app .bfz-cal__cell.is-open {
	background-color: color-mix(in oklab, var(--bfz-brand) 10%, transparent);
	background-image: none;
	color: color-mix(in oklab, var(--bfz-brand) 72%, var(--bfz-ink));
	transition: transform .18s var(--bfz-ease), background-color .18s ease, box-shadow .2s ease;
}

.bfz-app .bfz-cal__cell.is-open:hover {
	transform: translateY(-1px);
	background-color: color-mix(in oklab, var(--bfz-brand) 18%, transparent);
	box-shadow: 0 8px 18px -10px color-mix(in oklab, var(--bfz-brand) 70%, transparent);
}

.bfz-app .bfz-cal__cell.is-open .bfz-cal__dot {
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	background: var(--bfz-grad-brand);
	opacity: .9;
}

.bfz-app .bfz-cal__cell.is-selected,
.bfz-app .bfz-cal__cell.is-open.is-selected:hover {
	background-color: var(--bfz-brand);
	background-image: var(--bfz-grad-brand);
	color: var(--bfz-brand-text);
	box-shadow: 0 10px 24px -10px color-mix(in oklab, var(--bfz-brand) 85%, transparent);
}

.bfz-app .bfz-cal__cell.is-today {
	box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--bfz-brand) 45%, transparent);
}

/* Times: glass chips that light up along their left edge. */
.bfz-app .bfz-slot__time {
	border-radius: var(--bfz-radius-xs);
	background-color: var(--bfz-glass-strong);
	border-color: var(--bfz-glass-line);
	transition: transform .18s var(--bfz-ease), border-color .18s ease,
		box-shadow .2s ease, background-color .18s ease, flex-basis .22s var(--bfz-ease);
}

.bfz-app .bfz-slot__time:hover {
	transform: translateY(-1px);
	border-color: color-mix(in oklab, var(--bfz-brand) 55%, transparent);
	box-shadow: 0 10px 24px -14px color-mix(in oklab, var(--bfz-brand) 80%, transparent);
}

.bfz-app .bfz-slot.is-open .bfz-slot__time {
	background-image: var(--bfz-grad-brand);
	border-color: transparent;
	color: var(--bfz-brand-text);
}

.bfz-app .bfz-slot__confirm {
	background-image: var(--bfz-grad-brand);
	border-radius: var(--bfz-radius-xs);
}

.bfz-app .bfz-wslot,
.bfz-app .bfz-gslot {
	border-radius: var(--bfz-radius-xs);
	transition: transform .18s var(--bfz-ease), border-color .18s ease, box-shadow .2s ease;
}

.bfz-app .bfz-wslot:hover,
.bfz-app .bfz-gslot:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -14px color-mix(in oklab, var(--bfz-brand) 75%, transparent);
}

.bfz-app .bfz-wslot__dot {
	background: linear-gradient(135deg, var(--bfz-au-4), var(--bfz-au-2));
}

/* Steps and the hold countdown. */
.bfz-app .bfz-steps__item.is-on .bfz-steps__num,
.bfz-app .bfz-step__num {
	background-image: var(--bfz-grad-brand);
	color: var(--bfz-brand-text);
}

.bfz-app .bfz-hold {
	border-radius: 999px;
	background-image: var(--bfz-grad-soft);
	border-color: var(--bfz-glass-line);
}

/* Confirmation: the tick lands inside a glowing ring. */
.bfz-app .bfz-conf__icon {
	background-image: radial-gradient(circle at 30% 25%,
		color-mix(in oklab, var(--bfz-au-4) 40%, transparent),
		color-mix(in oklab, var(--bfz-brand) 30%, transparent));
	box-shadow: 0 18px 40px -18px color-mix(in oklab, var(--bfz-au-4) 80%, transparent);
}

/* =========================================================================
 * 7. Business page and the team
 * ====================================================================== */

.bfz-app .bfz-hero {
	overflow: hidden;
	border-radius: var(--bfz-radius-lg);
}

.bfz-app .bfz-hero__art {
	background:
		radial-gradient(60% 120% at 20% 0%, color-mix(in oklab, var(--bfz-brand) 70%, transparent), transparent 70%),
		radial-gradient(50% 120% at 80% 0%, color-mix(in oklab, var(--bfz-au-2) 55%, transparent), transparent 70%),
		linear-gradient(120deg, color-mix(in oklab, var(--bfz-brand) 85%, #000000), color-mix(in oklab, var(--bfz-au-1) 70%, var(--bfz-brand)));
	background-size: 160% 160%;
	animation: bfz-au-pan 24s ease-in-out infinite alternate;
}

@keyframes bfz-au-pan {
	0%   { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

.bfz-app .bfz-hero__name {
	letter-spacing: -.03em;
}

.bfz-app .bfz-avatar--xl {
	box-shadow: 0 0 0 4px var(--bfz-card), 0 0 0 6px color-mix(in oklab, var(--bfz-brand) 40%, transparent),
		0 24px 50px -24px rgba(15, 23, 42, .6);
}

/* Meeting cards: gradient accent bar, glass body, lift on hover. */
.bfz-app .bfz-etype {
	border-radius: var(--bfz-radius);
	transition: transform .22s var(--bfz-ease), box-shadow .24s var(--bfz-ease), border-color .2s ease;
}

.bfz-app .bfz-etype:hover {
	transform: translateY(-3px);
	box-shadow: var(--bfz-shadow-lift);
	border-color: var(--bfz-hairline);
}

.bfz-app .bfz-etype__bar {
	background: linear-gradient(180deg,
		var(--bfz-etype-accent, var(--bfz-brand)),
		color-mix(in oklab, var(--bfz-etype-accent, var(--bfz-brand)) 55%, var(--bfz-au-2)));
	width: 5px;
	border-radius: 999px;
}

.bfz-app .bfz-etype__go {
	background-image: var(--bfz-grad-brand);
	color: var(--bfz-brand-text);
	transition: transform .2s var(--bfz-ease-out), box-shadow .22s ease;
}

.bfz-app .bfz-etype:hover .bfz-etype__go {
	transform: translateX(3px);
	box-shadow: 0 10px 22px -10px color-mix(in oklab, var(--bfz-brand) 85%, transparent);
}

.bfz-app .bfz-etype__title {
	letter-spacing: -.02em;
}

/* Colleagues. */
.bfz-app .bfz-mate {
	transition: transform .22s var(--bfz-ease), box-shadow .24s var(--bfz-ease), border-color .2s ease;
}

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

.bfz-app .bfz-mate__go {
	background-image: var(--bfz-grad-soft);
}

.bfz-app .bfz-mate:hover .bfz-mate__go {
	background-image: var(--bfz-grad-brand);
	color: var(--bfz-brand-text);
}

.bfz-app .bfz-avatar--md,
.bfz-app .bfz-avatar--lg {
	box-shadow: 0 0 0 2px var(--bfz-card), 0 0 0 3px color-mix(in oklab, var(--bfz-brand) 28%, transparent);
}

/* The fully-booked note keeps its warning colour but gains the glass. */
.bfz-app .bfz-full {
	border-radius: var(--bfz-radius);
	background-color: var(--bfz-glass);
	background-image: linear-gradient(135deg,
		color-mix(in oklab, var(--bfz-au-3) 10%, transparent),
		transparent 60%);
	border-color: var(--bfz-glass-line);
}

/*
 * Glass is see-through by design, which is fine until the box is pinned over
 * the scrolling list of taken times — then the hatching slides along behind
 * the words. The pinned copy keeps the aurora tint and loses the transparency.
 */
.bfz-app .bfz-slots__list > .bfz-full {
	background-color: var(--bfz-card);
	backdrop-filter: none;
}

/* =========================================================================
 * 8. Manage and invitation
 * ====================================================================== */

.bfz-app .bfz-invite__card {
	border-radius: var(--bfz-radius-lg);
}

.bfz-app .bfz-invite__icon {
	background-image: var(--bfz-grad-soft);
	box-shadow: inset 0 0 0 1px var(--bfz-glass-line),
		0 16px 34px -20px color-mix(in oklab, var(--bfz-brand) 90%, transparent);
}

.bfz-app .bfz-invite__title,
.bfz-app .bfz-conf__title {
	letter-spacing: -.03em;
}

/* =========================================================================
 * 9. Landing and sign-in
 * ====================================================================== */

.bfz-app.bfz-land .bfz-land__h1,
.bfz-app .bfz-auth__headline {
	letter-spacing: -.035em;
}

.bfz-app.bfz-land .bfz-land__h1 em,
.bfz-app .bfz-auth__headline em {
	font-style: normal;
	background: var(--bfz-grad-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.bfz-app .bfz-auth__panel,
.bfz-app.bfz-land .bfz-land__card {
	background-color: var(--bfz-glass);
	background-image: var(--bfz-glass-sheen);
	-webkit-backdrop-filter: var(--bfz-blur);
	backdrop-filter: var(--bfz-blur);
	border-radius: var(--bfz-radius-lg);
	box-shadow: var(--bfz-shadow);
}

.bfz-app .bfz-auth__pitch {
	border-radius: var(--bfz-radius-lg);
}

/* =========================================================================
 * 10. Motion
 * ====================================================================== */

/* Surfaces rise into place once, on first paint. */
.bfz-app .bfz-hero,
.bfz-app .bfz-cal__pane,
.bfz-app .bfz-card {
	animation: bfz-au-rise .5s var(--bfz-ease-out) both;
}

@keyframes bfz-au-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.bfz-app::before,
	.bfz-app .bfz-hero__art,
	.bfz-app .bfz-i,
	.bfz-app .bfz-hero,
	.bfz-app .bfz-cal__pane,
	.bfz-app .bfz-card,
	.bfz-app .bfz-auth__pitch,
	.bfz-app.bfz-land .bfz-land__cta,
	.bfz-app .bfz-hero__name,
	.bfz-app .bfz-book__title,
	.bfz-app.bfz-land .bfz-land__h1,
	.bfz-app .bfz-auth__headline,
	.bfz-app .bfz-invite__title,
	.bfz-app .bfz-manage__title {
		animation: none !important;
	}

	.bfz-app .bfz-btn,
	.bfz-app .bfz-etype,
	.bfz-app .bfz-mate,
	.bfz-app .bfz-slot__time,
	.bfz-app .bfz-cal__cell,
	.bfz-app.bfz-land .bfz-land__feature,
	.bfz-app.bfz-land .bfz-land__step,
	.bfz-app.bfz-land .bfz-land__who,
	.bfz-app .bfz-paymethod,
	.bfz-app .bfz-auth__points li,
	.bfz-app .bfz-btn--primary::after,
	.bfz-app.bfz-land .bfz-land__btn--primary::after {
		transition: none !important;
	}

	.bfz-app .bfz-etype:hover,
	.bfz-app .bfz-mate:hover,
	.bfz-app .bfz-btn--primary:hover,
	.bfz-app .bfz-slot__time:hover,
	.bfz-app .bfz-cal__cell.is-open:hover,
	.bfz-app.bfz-land .bfz-land__feature:hover,
	.bfz-app.bfz-land .bfz-land__step:hover,
	.bfz-app.bfz-land .bfz-land__who:hover,
	.bfz-app .bfz-paymethod:hover,
	.bfz-app .bfz-auth__points li:hover {
		transform: none !important;
	}

	.bfz-app .bfz-btn--primary:hover::after,
	.bfz-app.bfz-land .bfz-land__btn--primary:hover::after {
		left: -60% !important;
	}
}

@media print {
	.bfz-app::before {
		display: none;
	}

	.bfz-app .bfz-card,
	.bfz-app .bfz-hero {
		background: #FFFFFF !important;
		box-shadow: none !important;
	}
}

/* =========================================================================
 * 11. Booking page, continued: the meeting rail
 * ====================================================================== */

.bfz-app .bfz-book__card {
	border-radius: var(--bfz-radius-lg);
	overflow: hidden;
}

.bfz-app .bfz-book__aside {
	position: relative;
	background-image:
		radial-gradient(120% 60% at 0% 0%, color-mix(in oklab, var(--bfz-brand) 16%, transparent), transparent 60%),
		radial-gradient(90% 60% at 100% 100%, color-mix(in oklab, var(--bfz-au-2) 14%, transparent), transparent 60%);
	border-right-color: var(--bfz-glass-line);
}

.bfz-app .bfz-book__title {
	font-weight: 800;
	letter-spacing: -.035em;
}

.bfz-app .bfz-book__hostname {
	font-weight: 700;
}

.bfz-app .bfz-avatar--lg,
.bfz-app .bfz-book__host .bfz-avatar {
	box-shadow: 0 0 0 2px var(--bfz-card),
		0 0 0 4px color-mix(in oklab, var(--bfz-brand) 30%, transparent),
		0 10px 24px -12px color-mix(in oklab, var(--bfz-brand) 70%, transparent);
}

/* Section labels get a gradient bead, so even the small type carries colour. */
.bfz-app .bfz-host__subtitle,
.bfz-app .bfz-slots__hint,
.bfz-app .bfz-cal__heading {
	display: flex;
	align-items: center;
	gap: 9px;
}

.bfz-app .bfz-host__subtitle::before,
.bfz-app .bfz-cal__heading::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 999px;
	flex: none;
	background: var(--bfz-grad-brand);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--bfz-brand) 18%, transparent);
}

/* Time chips read as buttons again: a visible edge and a coloured bead. */
.bfz-app .bfz-slot__time {
	position: relative;
	border-width: 1px;
	border-color: color-mix(in oklab, var(--bfz-brand) 26%, var(--bfz-line));
	font-weight: 700;
}

.bfz-app .bfz-slot__time::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 999px;
	background: var(--bfz-grad-brand);
	opacity: .85;
	transition: transform .2s var(--bfz-ease-out), opacity .2s ease;
}

.bfz-app .bfz-slot__time:hover::before {
	transform: scale(1.5);
	opacity: 1;
}

.bfz-app .bfz-slot.is-open .bfz-slot__time::before {
	background: var(--bfz-brand-text);
}

/* The time column scrolls inside a glass pane rather than on the page. */
.bfz-app .bfz-cal__pane--times {
	border-radius: var(--bfz-radius);
	padding: 18px;
}

.bfz-app .bfz-slots__title {
	font-weight: 800;
	letter-spacing: -.02em;
}

/* =========================================================================
 * 12. Depth: gradient rings and sheen
 *
 * A one-pixel gradient ring around every glass surface. Painted with a
 * masked pseudo-element so it sits inside the radius and never clips the
 * content. Browsers without mask-composite keep the plain hairline.
 * ====================================================================== */

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {

	.bfz-app .bfz-card,
	.bfz-app .bfz-hero,
	.bfz-app .bfz-etype,
	.bfz-app .bfz-mate,
	.bfz-app .bfz-tmember,
	.bfz-app .bfz-book__card,
	.bfz-app .bfz-manage__card,
	.bfz-app .bfz-auth__panel,
	.bfz-app .bfz-auth__pitch,
	.bfz-app.bfz-land .bfz-land__card {
		position: relative;
		isolation: isolate;
	}

	.bfz-app .bfz-card::after,
	.bfz-app .bfz-hero::after,
	.bfz-app .bfz-etype::after,
	.bfz-app .bfz-mate::after,
	.bfz-app .bfz-tmember::after,
	.bfz-app .bfz-book__card::after,
	.bfz-app .bfz-manage__card::after,
	.bfz-app .bfz-auth__panel::after,
	.bfz-app .bfz-auth__pitch::after,
	.bfz-app.bfz-land .bfz-land__card::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		border-radius: inherit;
		padding: 1px;
		background: linear-gradient(140deg,
			color-mix(in oklab, var(--bfz-brand) 55%, transparent) 0%,
			rgba(255, 255, 255, .85) 28%,
			color-mix(in oklab, var(--bfz-au-2) 42%, transparent) 55%,
			rgba(255, 255, 255, .5) 78%,
			color-mix(in oklab, var(--bfz-au-3) 45%, transparent) 100%);
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		        mask-composite: exclude;
		opacity: .75;
		pointer-events: none;
	}

	.bfz-app[data-theme="dark"] .bfz-card::after,
	.bfz-app[data-theme="dark"] .bfz-hero::after,
	.bfz-app[data-theme="dark"] .bfz-etype::after,
	.bfz-app[data-theme="dark"] .bfz-mate::after,
	.bfz-app[data-theme="dark"] .bfz-tmember::after,
	.bfz-app[data-theme="dark"] .bfz-book__card::after,
	.bfz-app[data-theme="dark"] .bfz-manage__card::after,
	.bfz-app[data-theme="dark"] .bfz-auth__panel::after,
	.bfz-app[data-theme="dark"] .bfz-auth__pitch::after,
	.bfz-app.bfz-land[data-theme="dark"] .bfz-land__card::after {
		opacity: .38;
	}
}

/* Large panes get their own wash so they never read as a flat white slab. */
.bfz-app .bfz-book__card,
.bfz-app .bfz-hero,
.bfz-app.bfz-land .bfz-land__card,
.bfz-app .bfz-auth__panel {
	background-image:
		radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--bfz-au-2) 13%, transparent), transparent 62%),
		radial-gradient(110% 80% at 0% 100%, color-mix(in oklab, var(--bfz-au-3) 11%, transparent), transparent 60%),
		var(--bfz-glass-sheen);
}

.bfz-app[data-theme="dark"] .bfz-book__card,
.bfz-app[data-theme="dark"] .bfz-hero,
.bfz-app[data-theme="dark"] .bfz-land__card,
.bfz-app[data-theme="dark"] .bfz-auth__panel {
	background-image:
		radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--bfz-au-2) 16%, transparent), transparent 62%),
		radial-gradient(110% 80% at 0% 100%, color-mix(in oklab, var(--bfz-au-1) 18%, transparent), transparent 60%),
		var(--bfz-glass-sheen);
}

/* =========================================================================
 * 13. Display type and portraits
 * ====================================================================== */

.bfz-app .bfz-hero__name,
.bfz-app .bfz-book__title,
.bfz-app.bfz-land .bfz-land__h1,
.bfz-app .bfz-auth__headline,
.bfz-app .bfz-invite__title,
.bfz-app .bfz-manage__title {
	background-image: linear-gradient(115deg,
		var(--bfz-ink) 0%,
		color-mix(in oklab, var(--bfz-brand) 72%, var(--bfz-ink)) 46%,
		color-mix(in oklab, var(--bfz-au-1) 60%, var(--bfz-ink)) 78%,
		var(--bfz-ink) 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: bfz-au-type 14s var(--bfz-ease) infinite alternate;
}

/* The hero name sits on the art band, where it must stay white. */
.bfz-app .bfz-hero__art .bfz-hero__name {
	background-image: none;
	color: inherit;
	-webkit-text-fill-color: currentColor;
	animation: none;
}

@keyframes bfz-au-type {
	0%   { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

/* A lit ring around portraits. Avatars are often <img>, which has no
 * pseudo-elements and clips its own overflow, so the ring is built from
 * stacked shadows: a card-coloured gap, a brand hairline, then two
 * off-centre aurora glows. */
.bfz-app .bfz-avatar--xl {
	box-shadow:
		0 0 0 1px color-mix(in oklab, var(--bfz-brand) 45%, transparent),
		14px 10px 34px -14px color-mix(in oklab, var(--bfz-au-2) 85%, transparent),
		-14px 8px 34px -14px color-mix(in oklab, var(--bfz-au-3) 80%, transparent),
		0 26px 54px -26px rgba(15, 23, 42, .55);
}

.bfz-app .bfz-avatar--lg,
.bfz-app .bfz-avatar--md {
	box-shadow:
		0 0 0 2px var(--bfz-card),
		0 0 0 3px color-mix(in oklab, var(--bfz-brand) 38%, transparent),
		9px 7px 20px -12px color-mix(in oklab, var(--bfz-au-2) 85%, transparent),
		-9px 5px 20px -12px color-mix(in oklab, var(--bfz-au-3) 75%, transparent);
}

.bfz-app .bfz-avatar--fallback {
	background-image: var(--bfz-grad-brand);
	color: var(--bfz-brand-text);
	font-weight: 800;
}

/* =========================================================================
 * 14. Pills, badges and buttons
 * ====================================================================== */

.bfz-app .bfz-pill {
	border-radius: 999px;
	background-color: color-mix(in oklab, var(--bfz-brand) 7%, var(--bfz-card));
	border-color: color-mix(in oklab, var(--bfz-brand) 18%, transparent);
	backdrop-filter: saturate(150%) blur(6px);
}

.bfz-app .bfz-pill--location {
	background-color: color-mix(in oklab, var(--bfz-au-2) 12%, var(--bfz-card));
	border-color: color-mix(in oklab, var(--bfz-au-2) 30%, transparent);
}

.bfz-app .bfz-pill--price {
	background-color: color-mix(in oklab, var(--bfz-au-4) 14%, var(--bfz-card));
	border-color: color-mix(in oklab, var(--bfz-au-4) 32%, transparent);
}

.bfz-app .bfz-pill--duration {
	background-color: color-mix(in oklab, var(--bfz-au-1) 11%, var(--bfz-card));
	border-color: color-mix(in oklab, var(--bfz-au-1) 28%, transparent);
}

/* Primary buttons: gradient, a lit edge, and a sweep that crosses on hover. */
.bfz-app .bfz-btn--primary,
.bfz-app.bfz-land .bfz-land__btn--primary {
	position: relative;
	overflow: hidden;
	background-image: var(--bfz-grad-brand);
	border-color: transparent;
	box-shadow: var(--bfz-glow), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.bfz-app .bfz-btn--primary::after,
.bfz-app.bfz-land .bfz-land__btn--primary::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-18deg);
	pointer-events: none;
	transition: left .55s var(--bfz-ease-out);
}

.bfz-app .bfz-btn--primary:hover::after,
.bfz-app.bfz-land .bfz-land__btn--primary:hover::after {
	left: 115%;
}

.bfz-app .bfz-btn--primary > * {
	position: relative;
	z-index: 1;
}

/* =========================================================================
 * 15. Manage booking
 * ====================================================================== */

.bfz-app .bfz-manage__card {
	border-radius: var(--bfz-radius-lg);
}

.bfz-app .bfz-manage__head {
	position: relative;
	padding-top: 4px;
}

.bfz-app .bfz-manage__title {
	letter-spacing: -.03em;
}

.bfz-app .bfz-summary__row {
	border-radius: var(--bfz-radius-xs);
	transition: background-color .2s ease;
}

.bfz-app .bfz-summary__row:hover {
	background-color: color-mix(in oklab, var(--bfz-brand) 5%, transparent);
}

.bfz-app .bfz-summary__label {
	color: var(--bfz-muted);
	letter-spacing: .01em;
}

.bfz-app .bfz-badge {
	border-radius: 999px;
	backdrop-filter: saturate(150%) blur(6px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.bfz-app .bfz-paymethod {
	border-radius: var(--bfz-radius-sm);
	transition: border-color .2s ease, box-shadow .22s var(--bfz-ease), transform .2s var(--bfz-ease);
}

.bfz-app .bfz-paymethod:hover {
	border-color: var(--bfz-hairline);
	box-shadow: var(--bfz-shadow-sm);
	transform: translateY(-1px);
}

.bfz-app .bfz-paybox {
	border-radius: var(--bfz-radius);
	background-image: var(--bfz-grad-soft);
	border-color: var(--bfz-glass-line);
}

/* =========================================================================
 * 16. Sign in and register
 * ====================================================================== */

/* The pitch side carries the colour; the form side stays clean and white
 * so nothing competes with the fields. */
.bfz-app .bfz-auth__pitch {
	position: relative;
	overflow: hidden;
	border-radius: var(--bfz-radius-lg);
	background-image:
		radial-gradient(75% 60% at 8% 4%, color-mix(in oklab, var(--bfz-brand) 22%, transparent), transparent 64%),
		radial-gradient(65% 55% at 96% 16%, color-mix(in oklab, var(--bfz-au-2) 24%, transparent), transparent 62%),
		radial-gradient(80% 60% at 50% 104%, color-mix(in oklab, var(--bfz-au-3) 20%, transparent), transparent 64%),
		var(--bfz-glass-sheen);
	background-size: 150% 150%;
	animation: bfz-au-pan 30s ease-in-out infinite alternate;
}

.bfz-app .bfz-auth__eyebrow {
	letter-spacing: .12em;
	background-image: linear-gradient(100deg, var(--bfz-brand), var(--bfz-au-1));
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.bfz-app .bfz-auth__headline {
	letter-spacing: -.035em;
}

.bfz-app .bfz-auth__points li {
	border-radius: var(--bfz-radius-sm);
	transition: transform .2s var(--bfz-ease), background-color .2s ease;
}

.bfz-app .bfz-auth__points li:hover {
	transform: translateX(3px);
}

.bfz-app .bfz-tabs {
	border-radius: 999px;
	background-color: color-mix(in oklab, var(--bfz-brand) 8%, var(--bfz-card, #FFFFFF));
	padding: 4px;
	gap: 4px;
}

.bfz-app .bfz-tab {
	border-radius: 999px;
	transition: background-color .2s ease, color .2s ease, box-shadow .22s var(--bfz-ease);
}

.bfz-app .bfz-tab[aria-selected="true"],
.bfz-app .bfz-tab.is-active {
	background-image: var(--bfz-grad-brand);
	color: var(--bfz-brand-text);
	box-shadow: 0 8px 20px -12px color-mix(in oklab, var(--bfz-brand) 90%, transparent);
}

.bfz-app .bfz-input,
.bfz-app .bfz-inputgroup {
	border-radius: var(--bfz-radius-xs);
	transition: border-color .18s ease, box-shadow .2s ease, background-color .2s ease;
}

.bfz-app .bfz-input:focus,
.bfz-app .bfz-inputgroup:focus-within {
	border-color: color-mix(in oklab, var(--bfz-brand) 55%, transparent);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--bfz-brand) 16%, transparent);
}

/* =========================================================================
 * 17. Landing
 * ====================================================================== */

.bfz-app .bfz-land__hero {
	position: relative;
}

.bfz-app.bfz-land .bfz-land__eyebrow,
.bfz-app.bfz-land .bfz-land__roweyebrow,
.bfz-app.bfz-land .bfz-land__batag {
	display: inline-block;
	border-radius: 999px;
	padding: 5px 13px;
	background-image: var(--bfz-grad-soft);
	border: 1px solid color-mix(in oklab, var(--bfz-brand) 22%, transparent);
	-webkit-backdrop-filter: saturate(160%) blur(8px);
	        backdrop-filter: saturate(160%) blur(8px);
}

.bfz-app.bfz-land .bfz-land__h1 {
	letter-spacing: -.035em;
}

.bfz-app.bfz-land .bfz-land__card,
.bfz-app.bfz-land .bfz-land__mock {
	border-radius: var(--bfz-radius-lg);
}

.bfz-app.bfz-land .bfz-land__feature,
.bfz-app.bfz-land .bfz-land__step,
.bfz-app.bfz-land .bfz-land__who,
.bfz-app.bfz-land .bfz-land__faq {
	border-radius: var(--bfz-radius);
	transition: transform .22s var(--bfz-ease), box-shadow .24s var(--bfz-ease), border-color .2s ease;
}

.bfz-app.bfz-land .bfz-land__feature:hover,
.bfz-app.bfz-land .bfz-land__step:hover,
.bfz-app.bfz-land .bfz-land__who:hover {
	transform: translateY(-3px);
	box-shadow: var(--bfz-shadow-lift);
	border-color: var(--bfz-hairline);
}

.bfz-app.bfz-land .bfz-land__stepnum {
	background-image: var(--bfz-grad-brand);
	color: var(--bfz-brand-text);
	box-shadow: 0 10px 24px -14px color-mix(in oklab, var(--bfz-brand) 90%, transparent);
}

.bfz-app.bfz-land .bfz-land__strip {
	background-image: var(--bfz-grad-soft);
	border-radius: var(--bfz-radius);
}

.bfz-app .bfz-land__ticks li::before,
.bfz-app.bfz-land .bfz-land__ctaticks li::before,
.bfz-app .bfz-land__rowlist li::before {
	color: var(--bfz-au-4);
}

.bfz-app.bfz-land .bfz-land__cta {
	position: relative;
	overflow: hidden;
	border-radius: var(--bfz-radius-lg);
	background-image:
		radial-gradient(60% 100% at 18% 0%, color-mix(in oklab, var(--bfz-au-2) 55%, transparent), transparent 62%),
		radial-gradient(60% 100% at 82% 100%, color-mix(in oklab, var(--bfz-au-3) 45%, transparent), transparent 62%),
		linear-gradient(135deg, color-mix(in oklab, var(--bfz-brand) 90%, #000000), color-mix(in oklab, var(--bfz-au-1) 70%, var(--bfz-brand)));
	background-size: 160% 160%;
	animation: bfz-au-pan 26s ease-in-out infinite alternate;
}

/*
 * The band above paints itself a dark brand gradient, so everything written
 * directly on it has to be light. Without this the heading, the lede and the
 * tick labels kept the page's dark ink and all but disappeared - worst in the
 * light theme, where that ink is nearly black on deep indigo.
 *
 * Scoped to the copy column: the sign-up card beside it is its own light
 * panel and keeps its own colours.
 */
.bfz-app.bfz-land .bfz-land__cta .bfz-land__ctacopy {
	color: #FFFFFF;
}

.bfz-app.bfz-land .bfz-land__cta .bfz-land__ctacopy .bfz-land__h2 {
	color: #FFFFFF;
}

.bfz-app.bfz-land .bfz-land__cta .bfz-land__ctacopy .bfz-land__lede {
	color: rgba(255, 255, 255, .82);
}

.bfz-app.bfz-land .bfz-land__cta .bfz-land__ctaticks li {
	color: rgba(255, 255, 255, .94);
}

/*
 * The tick marks are drawn with an emerald tone chosen against a white page.
 * On this surface they need to lift off the indigo instead.
 */
.bfz-app.bfz-land .bfz-land__cta .bfz-land__ctaticks .bfz-gi__draw,
.bfz-app.bfz-land .bfz-land__cta .bfz-land__ctaticks li::before {
	color: #6EE7B7;
	stroke: #6EE7B7;
}

/* =========================================================================
 * 18. Icons by kind: colour and motion
 *
 * Every icon prints as .bfz-i.bfz-i--{name}, so a calendar is the same
 * indigo whether it sits in a summary row, a pill or a feature tile, and no
 * call site has to change. Each gradient keeps a currentColor fallback so a
 * page that somehow loses the <defs> sprite still shows a solid icon.
 *
 * Motion is ambient and slow. It is switched off inside buttons and on any
 * coloured surface, where the icon must stay the surface's own colour.
 * ====================================================================== */

.bfz-app .bfz-i--calendar,
.bfz-app .bfz-i--grid,
.bfz-app .bfz-i--building {
	stroke: url(#bfz-g-indigo) currentColor;
}

.bfz-app .bfz-i--clock {
	stroke: url(#bfz-g-violet) currentColor;
}

.bfz-app .bfz-i--video,
.bfz-app .bfz-i--link,
.bfz-app .bfz-i--copy,
.bfz-app .bfz-i--external {
	stroke: url(#bfz-g-cyan) currentColor;
}

.bfz-app .bfz-i--globe,
.bfz-app .bfz-i--mail,
.bfz-app .bfz-i--phone {
	stroke: url(#bfz-g-sky) currentColor;
}

.bfz-app .bfz-i--sparkle,
.bfz-app .bfz-i--lock {
	stroke: url(#bfz-g-amber) currentColor;
}

.bfz-app .bfz-i--shield,
.bfz-app .bfz-i--check,
.bfz-app .bfz-i--check-circle,
.bfz-app .bfz-i--card {
	stroke: url(#bfz-g-emerald) currentColor;
}

.bfz-app .bfz-i--alert,
.bfz-app .bfz-i--pin,
.bfz-app .bfz-i--close {
	stroke: url(#bfz-g-rose) currentColor;
}

.bfz-app .bfz-i--user,
.bfz-app .bfz-i--users {
	stroke: url(#bfz-g-brand) currentColor;
}

/* Sparkle: fills as well as strokes, so it gets a gradient fill too. */
.bfz-app .bfz-i--sparkle path {
	fill: url(#bfz-g-amber) transparent;
	fill-opacity: .22;
}

/* --- Motion ----------------------------------------------------------- */

/* The clock hand sweeps, one step a second, like a real one. */
.bfz-app .bfz-i--clock polyline {
	transform-origin: 12px 12px;
	animation: bfz-au-tick 60s steps(60, end) infinite;
}

@keyframes bfz-au-tick {
	to { transform: rotate(360deg); }
}

/* The sparkle twinkles. */
.bfz-app .bfz-i--sparkle {
	transform-origin: center;
	animation: bfz-au-twinkle 4.5s var(--bfz-ease) infinite;
}

@keyframes bfz-au-twinkle {
	0%, 100% { transform: scale(1)    rotate(0deg);   opacity: 1; }
	42%      { transform: scale(1.14) rotate(9deg);   opacity: .82; }
	70%      { transform: scale(.96)  rotate(-4deg);  opacity: 1; }
}

/* The globe's meridian drifts across it. */
.bfz-app .bfz-i--globe path:last-of-type {
	transform-origin: 12px 12px;
	animation: bfz-au-meridian 9s var(--bfz-ease) infinite;
}

@keyframes bfz-au-meridian {
	0%, 100% { transform: scaleX(1); }
	50%      { transform: scaleX(.3); }
}

/* Ticks draw themselves in. */
.bfz-app .bfz-i--check polyline,
.bfz-app .bfz-i--check-circle polyline {
	stroke-dasharray: 26;
	animation: bfz-au-draw 1.1s var(--bfz-ease-out) both;
}

@keyframes bfz-au-draw {
	from { stroke-dashoffset: 26; }
	to   { stroke-dashoffset: 0; }
}

/* The camera eye breathes. */
.bfz-app .bfz-i--video path {
	transform-origin: center;
	animation: bfz-au-lens 5s var(--bfz-ease) infinite;
}

@keyframes bfz-au-lens {
	0%, 100% { transform: translateX(0);      opacity: 1; }
	50%      { transform: translateX(.9px);   opacity: .72; }
}

/* An envelope that lifts its flap. */
.bfz-app .bfz-i--mail polyline {
	transform-origin: 12px 8px;
	animation: bfz-au-flap 6s var(--bfz-ease) infinite;
}

@keyframes bfz-au-flap {
	0%, 100% { transform: scaleY(1); }
	50%      { transform: scaleY(.62); }
}

/* The shield pulses its guard. */
.bfz-app .bfz-i--shield {
	transform-origin: center;
	animation: bfz-au-guard 6.5s var(--bfz-ease) infinite;
}

@keyframes bfz-au-guard {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.07); }
}

/* Everything above uses SVG user units, which need a fill-box origin. */
.bfz-app .bfz-i--clock polyline,
.bfz-app .bfz-i--globe path:last-of-type,
.bfz-app .bfz-i--video path,
.bfz-app .bfz-i--mail polyline {
	transform-box: view-box;
}

.bfz-app .bfz-i--sparkle,
.bfz-app .bfz-i--shield {
	transform-box: view-box;
}

/* --- Where icons must stay the surface's own colour -------------------- */

.bfz-app .bfz-btn--primary .bfz-i,
.bfz-app.bfz-land .bfz-land__btn--primary .bfz-i,
.bfz-app .bfz-etype__go .bfz-i,
.bfz-app .bfz-mate__go .bfz-i,
.bfz-app .bfz-hero__art .bfz-i,
.bfz-app.bfz-land .bfz-land__cta .bfz-i,
.bfz-app .bfz-auth__panel .bfz-tab[aria-selected="true"] .bfz-i,
.bfz-app .bfz-cal__cell.is-selected .bfz-i,
.bfz-app .bfz-slot__time.is-selected .bfz-i,
.bfz-app .bfz-topstrip .bfz-i,
.bfz-app .bfz-themebtn .bfz-i {
	stroke: currentColor;
	fill: none;
	animation: none;
}

.bfz-app .bfz-btn--primary .bfz-i *,
.bfz-app.bfz-land .bfz-land__btn--primary .bfz-i *,
.bfz-app .bfz-etype__go .bfz-i *,
.bfz-app .bfz-mate__go .bfz-i *,
.bfz-app .bfz-hero__art .bfz-i *,
.bfz-app.bfz-land .bfz-land__cta .bfz-i *,
.bfz-app .bfz-topstrip .bfz-i *,
.bfz-app .bfz-themebtn .bfz-i * {
	animation: none;
	fill: none;
}

@media (prefers-reduced-motion: reduce) {
	.bfz-app .bfz-i,
	.bfz-app .bfz-i * {
		animation: none !important;
	}
}

/* =========================================================================
 * 19. Polish
 * ====================================================================== */

/* The hero band ends in a fade rather than a ruled line, so the art melts
 * into the card instead of stopping dead behind the portrait. */
.bfz-app .bfz-hero__art {
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, .55) 84%, transparent 100%);
	        mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, .55) 84%, transparent 100%);
}

/* Colleague cards: the arrow is tinted at rest, brand-filled on hover. */
.bfz-app .bfz-mate__go {
	background-image: linear-gradient(135deg,
		color-mix(in oklab, var(--bfz-brand) 18%, transparent),
		color-mix(in oklab, var(--bfz-au-2) 22%, transparent));
	color: var(--bfz-brand);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bfz-brand) 20%, transparent);
	transition: background-image .2s ease, color .2s ease, transform .2s var(--bfz-ease-out);
}

.bfz-app .bfz-mate:hover .bfz-mate__go {
	transform: translateX(3px);
	box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--bfz-brand) 85%, transparent);
}

/* Free slots read as free: an emerald bead on every open time. */
.bfz-app .bfz-slot__time::before {
	background-image: linear-gradient(135deg, #6EE7B7, #059669);
}

.bfz-app .bfz-slot__time.is-selected::before {
	background-image: linear-gradient(135deg, #FFFFFF, rgba(255, 255, 255, .7));
}

/* The meeting rail carries a little weather of its own. */
.bfz-app .bfz-book__aside {
	position: relative;
	overflow: hidden;
}

.bfz-app .bfz-book__aside::after {
	content: "";
	position: absolute;
	right: -30%;
	bottom: -22%;
	width: 78%;
	padding-top: 78%;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%,
		color-mix(in oklab, var(--bfz-au-2) 26%, transparent),
		transparent 62%);
	filter: blur(26px);
	opacity: .8;
	pointer-events: none;
	animation: bfz-au-bob 18s ease-in-out infinite alternate;
}

@keyframes bfz-au-bob {
	from { transform: translate3d(0, 0, 0)      scale(1); }
	to   { transform: translate3d(-6%, -8%, 0)  scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
	.bfz-app .bfz-book__aside::after {
		animation: none !important;
	}

	/* Two animations predate this layer and were never guarded: the step
	 * fade on the booking rail and the skeleton shimmer. Nothing on the page
	 * should move when the reader has asked for stillness. */
	.bfz-app .bfz-step,
	.bfz-app .bfz-skel {
		animation: none !important;
	}
}

/* The dot between a booking's meeting title and the invitee's email is drawn
 * in the hairline colour, which all but disappears on a dark canvas. */
.bfz-app[data-theme="dark"] .bfz-bk__sep {
	color: var(--bfz-muted);
}

@media (prefers-color-scheme: dark) {
	.bfz-app[data-theme="auto"] .bfz-bk__sep {
		color: var(--bfz-muted);
	}
}