/* BMA Event – theme styles.
   Design tokens come from theme.json; this file adds layout and components.
   The look follows BMA Studio (type, hairlines, pill buttons, outlined
   italics); the accent is the blue BMA Studio uses for BMA Event. */

/* ---------- Tokens ---------- */

/* Accent colours come from the settings (--bma-accent); html:root outranks
   the palette that theme.json prints on :root. */
html:root {
	--wp--preset--color--accent: var(--bma-accent, #5b8cff);
	--wp--preset--color--accent-2: var(--bma-accent-2, #ff4a3d);
	--shadow: rgb(0 0 0 / 0.7);
	--glow: 0.34;
	--ok: #4ade80;
	color-scheme: dark;
}

/* Light appearance: same roles, other values. */
html:root[data-theme="light"] {
	--wp--preset--color--base: #f5f5f2;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--line: #dcdbd5;
	--wp--preset--color--muted: #595d6b;
	--wp--preset--color--contrast: #0a0c14;
	--wp--preset--color--accent: color-mix(in srgb, var(--bma-accent, #5b8cff) 72%, #001a66);
	--wp--preset--color--accent-2: color-mix(in srgb, var(--bma-accent-2, #ff4a3d) 84%, #000);
	--shadow: rgb(20 24 40 / 0.26);
	--glow: 0.2;
	--ok: #15803d;
	color-scheme: light;
}

:root {
	--bg: var(--wp--preset--color--base);
	--surface: var(--wp--preset--color--surface);
	--line: var(--wp--preset--color--line);
	--muted: var(--wp--preset--color--muted);
	--fg: var(--wp--preset--color--contrast);
	--accent: var(--wp--preset--color--accent);
	--accent-2: var(--wp--preset--color--accent-2);
	--mono: var(--wp--preset--font-family--mono);

	/* Device frames keep their own colours in both appearances. */
	--device: #171a26;
	--device-edge: #343a4d;

	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--wide: 1240px;
	--section: clamp(4rem, 8vw, 7rem);
	--radius: 20px;
	--radius-l: 28px;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */

html {
	scroll-padding-top: 5.5rem;
	overflow-x: clip;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

::selection {
	background: var(--accent);
	color: var(--bg);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

img {
	max-width: 100%;
	height: auto;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Grid and flex containers manage their own spacing. */
body :is(
	.bma-header__inner,
	.bma-hero,
	.bma-panels,
	.bma-panel,
	.bma-combo,
	.bma-bento,
	.bma-steps,
	.bma-plans,
	.bma-plan,
	.bma-faq,
	.bma-contact__grid,
	.bma-footer__inner
) > * {
	margin-block: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Type primitives ---------- */

.bma-eyebrow {
	margin: 0 0 1.25rem;
	font-family: var(--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.bma-eyebrow::before {
	content: "";
	display: inline-block;
	width: 1.5em;
	height: 2px;
	margin-right: 0.75em;
	vertical-align: middle;
	background: currentColor;
}

.bma-title {
	max-width: 18ch;
	margin: 0;
	text-wrap: balance;
}

/* Signature: outlined italic, echoing the BMA Studio wordmark.
   Stroke is painted under a background-coloured fill, which hides the
   overlapping contours of the variable font. */
:is(.bma-title, .bma-hero__title) em {
	font-style: normal;
/*
	font-weight: 400;
	color: var(--bg);
	-webkit-text-stroke: 2.5px var(--fg);
	paint-order: stroke fill;
	letter-spacing: -0.005em;
*/
}

.bma-lead {
	max-width: 46ch;
	margin: 1.5rem 0 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.45;
	color: var(--muted);
	text-wrap: pretty;
}

/* ---------- Buttons ---------- */

.wp-block-buttons {
	gap: 0.75rem;
	margin-top: 2.25rem;
}

.wp-element-button {
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, translate 0.2s var(--ease);
	cursor: pointer;
}

.wp-element-button:active {
	translate: 0 1px;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0.9em 1.5em;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--fg);
}

.wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) {
	border-color: var(--fg);
	background: transparent;
	color: var(--fg);
}

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

.bma-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid transparent;
	view-transition-name: bma-header;
}

/* The blur lives on a pseudo-element: backdrop-filter on the header itself
   would trap the fixed mobile menu overlay inside the header box. */
.bma-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--bg) 78%, transparent);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
}

/* Reading progress: a hairline that fills as the page scrolls. */
.bma-header::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 1px;
	background: var(--accent);
	scale: 0 1;
	transform-origin: left;
}

.admin-bar .bma-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .bma-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .bma-header {
		top: 0;
	}
}

.bma-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	max-width: var(--wide);
	margin-inline: auto;
	padding: 1rem var(--gutter);
	box-sizing: content-box;
}

.bma-logo {
	flex: none;
	margin: 0;
	line-height: 0;
}

.bma-logo,
.bma-logo img {
	width: 148px;
	height: auto;
}

/* The logo is a white image: turn it dark on the light appearance. */
html[data-theme="light"] .bma-logo img {
	filter: invert(1);
}

.bma-nav {
	--wp--style--block-gap: clamp(1.1rem, 2.2vw, 2rem);
	margin-left: auto;
}

.bma-nav.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--muted);
	transition: color 0.2s;
}

.bma-nav.wp-block-navigation .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	color: var(--fg);
}

.bma-nav.wp-block-navigation .bma-nav__cta .wp-block-navigation-item__content {
	padding: 0.6em 1.15em;
	border: 1px solid var(--fg);
	border-radius: 999px;
	background: var(--fg);
	color: var(--bg);
	font-weight: 600;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.bma-nav.wp-block-navigation .bma-nav__cta .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--bg);
}

/* Dark / light switch */
.bma-theme-switch {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: none;
	color: var(--muted);
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.bma-theme-switch:is(:hover, :focus-visible) {
	border-color: var(--fg);
	color: var(--fg);
}

.bma-theme-switch span {
	display: grid;
}

html[data-theme="light"] .bma-theme-switch__to-light,
html:not([data-theme="light"]) .bma-theme-switch__to-dark {
	display: none;
}

/* Language menu */
.bma-lang {
	position: relative;
	flex: none;
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.bma-lang summary {
	display: flex;
	align-items: center;
	gap: 0.4em;
	height: 2.25rem;
	padding: 0 0.8em;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--muted);
	list-style: none;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.bma-lang summary::-webkit-details-marker {
	display: none;
}

.bma-lang summary::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	margin-top: -0.2em;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	rotate: 45deg;
	transition: rotate 0.2s var(--ease), margin 0.2s;
}

.bma-lang[open] summary::after {
	margin-top: 0.2em;
	rotate: -135deg;
}

.bma-lang summary:is(:hover, :focus-visible),
.bma-lang[open] summary {
	border-color: var(--fg);
	color: var(--fg);
}

.bma-lang ul {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 60;
	min-width: 11.5rem;
	margin: 0;
	padding: 0.4rem;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: 0 24px 50px -20px var(--shadow);
	list-style: none;
}

.bma-lang li a {
	display: flex;
	gap: 0.9em;
	padding: 0.6em 0.75em;
	border-radius: 9px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0;
	color: var(--muted);
	text-decoration: none;
}

.bma-lang li a span {
	width: 1.6em;
	font-family: var(--mono);
	font-size: 0.75rem;
	line-height: 1.9;
	letter-spacing: 0.04em;
}

.bma-lang li a:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--line) 55%, transparent);
	color: var(--fg);
}

.bma-lang li a[aria-current] {
	color: var(--fg);
}

.bma-lang li a[aria-current] span {
	color: var(--accent);
}

/* The menu, the button, the languages and the switch do not fit side by
   side below 1000px (German runs out first), so tablets get the menu button
   too. Core switches at 600px; these two rules carry it up to 999px. */
@media (min-width: 600px) and (max-width: 999px) {
	.bma-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.bma-nav.wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}

@media (max-width: 999px) {
	.bma-header__inner {
		gap: 0.6rem;
	}

	.bma-lang {
		order: 2;
		margin-left: auto;
	}

	.bma-theme-switch {
		order: 2;
	}

	.bma-nav {
		order: 3;
		margin-left: 0;
	}
}

@media (max-width: 380px) {
	.bma-logo,
	.bma-logo img {
		width: 120px;
	}
}

.bma-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem var(--gutter);
}

.bma-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
}

.bma-nav .is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container) {
	align-items: flex-start !important;
}

.bma-nav .is-menu-open .wp-block-navigation__container {
	gap: 1.5rem;
	font-size: var(--wp--preset--font-size--xl);
}

.bma-nav.wp-block-navigation .is-menu-open .wp-block-navigation-item__content {
	color: var(--fg);
}

.bma-nav.wp-block-navigation .is-menu-open .bma-nav__cta .wp-block-navigation-item__content {
	padding: 0.5em 1em !important;
	color: var(--bg);
}

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

.bma-section,
.bma-hero,
.bma-trust {
	max-width: var(--wide);
	margin-inline: auto;
	padding: var(--section) var(--gutter);
	box-sizing: content-box;
}

.bma-section--top {
	padding-top: clamp(3rem, 7vw, 6rem);
}

/* Section opening: headline on the left, the explanation beside it. */
.bma-section__intro {
	display: grid;
	gap: 0 clamp(2rem, 5vw, 4.5rem);
}

@media (min-width: 960px) {
	.bma-section__intro {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: end;
	}

	.bma-section__intro .bma-eyebrow {
		grid-column: 1 / -1;
	}

	.bma-section__intro .bma-lead {
		margin-top: 0;
		padding-bottom: 0.35em;
	}
}

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

.bma-hero {
	position: relative;
	display: grid;
	gap: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding-top: clamp(3rem, 7vw, 5.5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}


@media (min-width: 960px) {
	.bma-hero {
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	}

	.bma-facts {
		grid-column: 1 / -1;
	}
}

.bma-hero__title {
	margin: 0;
	font-size: clamp(2.6rem, 5.4vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

/* The BMA Studio wordmark ends in an underscore – so does the headline. */
.bma-hero__title em::after {
	font-style: normal;
	color: var(--accent-2);
	-webkit-text-stroke: 0;
}

/* ---------- Device frames ---------- */

/* Phone: the frame scales with its width; the screenshot fills it. */
.bma-phone {
	aspect-ratio: 400 / 866;
	margin: 0;
	overflow: hidden;
	border: 0.34rem solid var(--device);
	border-radius: 13% / 6%;
	background: #000;
	box-shadow: 0 0 0 1px var(--device-edge), 0 34px 70px -28px var(--shadow);
}

.bma-phone img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/* Laptop: an empty frame with the screenshot fitted into its screen. */
.bma-laptop {
	position: relative;
	aspect-ratio: 1613 / 960;
	margin: 0;
	background: url("../img/laptop-frame.webp") center / contain no-repeat;
}

.bma-laptop img {
	position: absolute;
	top: 10.6%;
	left: 13.55%;
	width: 72.9%;
	height: 79%;
	object-fit: cover;
	object-position: top;
}

/* Browser window with the three familiar dots. */
.bma-browser {
	margin: 0;
	padding-top: 1.75rem;
	overflow: hidden;
	border: 1px solid var(--device-edge);
	border-radius: 14px;
	background:
		radial-gradient(circle at 1rem 0.875rem, #ff5f57 0.25rem, transparent 0.28rem),
		radial-gradient(circle at 1.9rem 0.875rem, #febc2e 0.25rem, transparent 0.28rem),
		radial-gradient(circle at 2.8rem 0.875rem, #28c840 0.25rem, transparent 0.28rem),
		var(--device);
	box-shadow: 0 34px 70px -28px var(--shadow);
}

.bma-browser img {
	display: block;
	width: 100%;
}

/* ---------- Hero stage: three phones and a notification ---------- */

/* The tile of the notification shows the BMA Event mark. */

.bma-stage {
	position: relative;
	aspect-ratio: 1 / 0.98;
	max-width: 36rem;
	width: 100%;
	margin-inline: auto;
	isolation: isolate;
}

.bma-stage::before {
	content: "";
	position: absolute;
	inset: 4% -8% 0;
	z-index: -1;
	background:
		radial-gradient(closest-side, color-mix(in srgb, var(--accent) 70%, transparent), transparent),
		radial-gradient(closest-side at 22% 78%, color-mix(in srgb, var(--accent-2) 40%, transparent), transparent 70%);
	filter: blur(48px);
	opacity: var(--glow);
}

.bma-stage .bma-phone {
	position: absolute;
	top: 12%;
	width: 38%;
}

.bma-stage .bma-phone--left {
	left: 2%;
	rotate: -9deg;
}

.bma-stage .bma-phone--right {
	right: 2%;
	rotate: 9deg;
}

.bma-stage .bma-phone--center {
	top: 0;
	left: 28%;
	z-index: 2;
	width: 44%;
}

.bma-stage :is(.bma-phone--left, .bma-phone--right) img {
	filter: brightness(0.82);
}

/* The notification card */
.bma-push {
	position: absolute;
	bottom: 13%;
	left: 0;
	z-index: 3;
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	width: min(18.5rem, 66%);
	padding: 0.8rem 0.9rem;
	border: 1px solid color-mix(in srgb, #fff 16%, transparent);
	border-radius: 18px;
	background: color-mix(in srgb, #10131d 76%, transparent);
	box-shadow: 0 24px 50px -18px rgb(0 0 0 / 0.75);
	backdrop-filter: blur(16px) saturate(1.5);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
	color: #f4f3ef;
	font-size: 0.8125rem;
	line-height: 1.35;
}

.bma-push__icon {
	position: relative;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9px;
	background: #f4f3ef;
}

.bma-push__icon::before {
	content: "";
	position: absolute;
	inset: 26%;
	background: #10131d;
	clip-path: polygon(0 0, 100% 0, 54% 50%, 100% 100%, 0 100%);
}

.bma-push__icon::after {
	content: "";
	position: absolute;
	top: -0.2rem;
	right: -0.2rem;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--accent-2);
	box-shadow: 0 0 0 2px #10131d;
}

.bma-push__body {
	display: grid;
	min-width: 0;
}

.bma-push__app {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #a2a7b8;
}

.bma-push__app i {
	font-style: normal;
	text-transform: none;
}

.bma-push strong {
	margin-top: 0.15rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

.bma-push__body > span:last-child {
	color: #c9ccd8;
}

/* ---------- Facts ---------- */

.bma-facts {
	display: grid;
	gap: 1.25rem 2rem;
	margin: 0;
	padding: 1.75rem 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--muted);
}

@media (min-width: 560px) {
	.bma-facts {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}
}

.bma-facts strong {
	display: block;
	margin-bottom: 0.15rem;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 560;
	letter-spacing: -0.01em;
	color: var(--fg);
}

/* ---------- Events on the platform (ticker) ---------- */

.bma-trust {
	padding-block: 0;
}

.bma-trust__label {
	margin: 0 0 1rem;
	font-family: var(--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.bma-ticker {
	display: flex;
	margin: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.bma-ticker__list {
	display: flex;
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: clamp(1.375rem, 2.7vw, 2.25rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.bma-ticker__list li::after {
	content: "/";
	margin-inline: 0.5em;
	font-weight: 300;
	color: var(--accent);
}

/* ---------- Platform panels ---------- */

/* Colour of the event on show (set by assets/js/site.js from its app
   screen). Registered as a colour, so it can fade from one event to the next. */
@property --event {
	syntax: "<color>";
	inherits: true;
	initial-value: #5b8cff;
}

.bma-panels {
	display: grid;
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	counter-reset: panel;
}

.bma-panel {
	position: relative;
	display: grid;
	gap: 2.5rem;
	overflow: hidden;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	background:
		radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
		var(--surface);
}

body .bma-panel__copies > * {
	margin-block: 0;
}

.bma-panel__copies {
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.5rem);
	align-content: center;
}

.bma-panel__copy {
	max-width: 30rem;
	counter-increment: panel;
}

/* Two parts in one panel: a hairline between them. */
.bma-panel__copy + .bma-panel__copy {
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	border-top: 1px solid var(--line);
}

.bma-panel__copy::before {
	content: "0" counter(panel);
	display: block;
	margin-bottom: 1.25rem;
	font-family: var(--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--accent);
}

.bma-panel__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: -0.02em;
}

.bma-panel p {
	margin: 0.9rem 0 0;
	color: var(--muted);
}

.bma-panel .bma-panel__tags {
	margin-top: 1.25rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	color: var(--fg);
}

/* The panel with the devices takes on the colour of the event on show. */
.bma-panel--app {
	--event: var(--accent);
	background:
		radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--event) 20%, transparent), transparent 62%),
		var(--surface);
	transition: --event 1.1s var(--ease);
}

/* Laptop with the event website, the phone with the app in front of it. */
.bma-combo {
	position: relative;
	padding: 0 0 5% 12%;
	isolation: isolate;
}

.bma-combo::before {
	content: "";
	position: absolute;
	inset: 8% 2% 2% 8%;
	z-index: -1;
	background: radial-gradient(closest-side, var(--event), transparent);
	filter: blur(48px);
	opacity: 0.42;
}

.bma-combo .bma-phone {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 27%;
}

.bma-combo .bma-phone img {
	position: absolute;
	inset: 0;
}

/* Screens that take turns: the pictures of a device lie on top of each
   other and the one of the event on show is faded in (assets/js/site.js). */
.bma-combo img {
	opacity: 0;
	transition: opacity 0.9s var(--ease);
}

.bma-combo img.is-active {
	opacity: 1;
}

/* Events on show, in the corner of the panel: plain name without
   JavaScript, otherwise one button per event (assets/js/site.js). */
.bma-screens__label {
	position: absolute;
	top: clamp(1.5rem, 3vw, 2.5rem);
	right: clamp(1.5rem, 3vw, 2.5rem);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	justify-content: flex-end;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.bma-screens__label button {
	position: relative;
	padding: 0.55em 0.95em 0.7em;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.bma-screens__label button:is(:hover, :focus-visible) {
	color: var(--fg);
}

.bma-screens__label button[aria-pressed="true"] {
	border-color: var(--line);
	background: color-mix(in srgb, var(--surface) 80%, transparent);
	color: var(--fg);
}

/* A hairline under the current event fills until the next one comes up. */
.bma-screens__label button::after {
	content: "";
	position: absolute;
	right: 0.95em;
	bottom: 0.32em;
	left: 0.95em;
	height: 1.5px;
	border-radius: 1px;
	background: var(--event);
	scale: 0 1;
	transform-origin: left;
}

.bma-screens__label button[aria-pressed="true"]::after {
	scale: 1 1;
}

.bma-screens__label.is-running button[aria-pressed="true"]::after {
	scale: 0 1;
	animation: bma-progress var(--delay, 4s) linear forwards;
}

/* The dashboard runs out of the bottom edge of its panel. */
.bma-panel--cms {
	padding-bottom: 0;
}

.bma-panel--cms .bma-browser {
	margin-bottom: -12%;
}

@media (max-width: 959px) {
	/* Stacked: leave room for the event name above the devices. */
	.bma-panel--app .bma-panel__visual {
		padding-top: 0.5rem;
	}

	.bma-panel--app .bma-screens__label {
		position: static;
		justify-content: flex-start;
		margin-bottom: 1.5rem;
	}
}

@media (min-width: 960px) {
	.bma-panel--app,
	.bma-panel--cms {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: clamp(2.5rem, 5vw, 4.5rem);
		align-items: center;
	}

	.bma-panel--app .bma-panel__visual {
		padding-top: 3rem;
	}

	.bma-panel--cms {
		align-items: end;
	}

	.bma-panel--cms .bma-panel__copies {
		align-self: center;
		padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
	}
}

/* ---------- Feature tiles ---------- */

.bma-bento {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 1100px) {
	.bma-bento {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.bma-tile:nth-child(-n + 2) {
		grid-column: span 2;
	}
}

.bma-tile {
	position: relative;
	padding: 1.6rem 1.6rem 1.75rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	transition: border-color 0.3s, translate 0.3s var(--ease);
}

body .bma-tile > * {
	position: relative;
	margin-block: 0;
}

/* Spotlight that follows the pointer (position set by assets/js/site.js). */
.bma-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(18rem circle at var(--x, 50%) var(--y, 0%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
	opacity: 0;
	transition: opacity 0.35s;
}

.bma-tile:hover {
	border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
	translate: 0 -3px;
}

.bma-tile:hover::before {
	opacity: 1;
}

.bma-tile .bma-icon {
	display: block;
	box-sizing: content-box;
	padding: 0.6rem;
	border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
	border-radius: 12px;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
}

.bma-tile .bma-tile__title {
	margin-top: 2rem;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: -0.01em;
}

.bma-tile p {
	margin-top: 0.6rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	color: var(--muted);
}

/* ---------- Showcase reel ---------- */

.bma-showcase {
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* The reel runs from one edge of the window to the other. */
.bma-reel {
	width: 100vw;
	margin: clamp(2.5rem, 5vw, 4rem) 0 0 calc(50% - 50vw);
	padding-block: 1rem 2.5rem;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.bma-reel:focus-visible {
	outline-offset: -4px;
}

.bma-reel__track {
	display: flex;
	width: max-content;
}

.bma-reel__set {
	display: flex;
	flex: none;
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0 clamp(0.5rem, 1vw, 0.875rem);
	list-style: none;
}

.bma-reel__set li {
	width: clamp(9.5rem, 16vw, 13.5rem);
}

.bma-reel__set li:nth-child(even) {
	translate: 0 2rem;
}

.bma-reel__name {
	display: block;
	margin-top: 0.9rem;
	font-family: var(--mono);
	font-size: 0.6875rem;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--muted);
}

/* Showcase as a 3D carousel (class is-flow, set by assets/js/site.js; without
   JavaScript the reel above stays). The app in the middle faces the visitor,
   its neighbours turn away into the depth, and the backdrop takes on the
   colour of the app in the middle. */
.bma-showcase {
	--event: var(--accent);
	transition: --event 1.1s var(--ease);
}

.bma-reel.is-flow {
	--w: clamp(10.5rem, 19vw, 16rem);
	--grow: 1.14; /* How much larger the app in the middle is. */
	position: relative;
	width: auto; /* As wide as the title and lead above, not the window. */
	margin-left: 0;
	height: calc(var(--w) * 2.165 * var(--grow) + 3.5rem);
	padding: 1.5rem 0 2rem;
	box-sizing: border-box;
	overflow: hidden;
	perspective: 1300px;
	scroll-snap-type: none;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.bma-reel.is-flow.is-dragging {
	cursor: grabbing;
}

.bma-reel.is-flow::before {
	content: "";
	position: absolute;
	top: 12%;
	left: 50%;
	width: calc(var(--w) * 3.2);
	height: 80%;
	translate: -50% 0;
	background: radial-gradient(closest-side, var(--event), transparent);
	filter: blur(60px);
	opacity: 0.45;
	pointer-events: none;
}

.bma-reel.is-flow .bma-reel__track {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

.bma-reel.is-flow .bma-reel__set {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	animation: none;
	transform-style: preserve-3d;
}

.bma-reel.is-flow .bma-reel__set li {
	position: absolute;
	top: calc(var(--w) * 2.165 * (var(--grow) - 1) / 2);
	left: 50%;
	width: var(--w);
	margin-left: calc(var(--w) / -2);
	translate: none;
	will-change: transform;
}

/* The app in the middle steps forward: --pop runs from 0 (a neighbour) to 1
   (the middle) and is set by assets/js/site.js. */
.bma-reel.is-flow .bma-phone {
	scale: calc(1 + (var(--grow) - 1) * var(--pop, 0));
}

.bma-reel.is-flow .is-current .bma-phone {
	box-shadow: 0 0 0 1px var(--device-edge), 0 44px 80px -30px var(--shadow), 0 0 70px -20px var(--event);
}

.bma-reel.is-flow .bma-reel__name {
	display: none;
}

.bma-reel.is-flow img {
	pointer-events: none;
}

/* Name of the app in the middle, the position and the two buttons. */
.bma-flow {
	display: flex;
	gap: 1.25rem;
	align-items: center;
	justify-content: center;
	margin-top: 0.5rem;
}

.bma-flow__text {
	min-width: min(22rem, 52vw);
	text-align: center;
}

.bma-flow__name {
	display: block;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 560;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.bma-flow__count {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.bma-flow button {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: none;
	color: var(--fg);
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.bma-flow button:is(:hover, :focus-visible) {
	border-color: var(--fg);
	background: var(--fg);
	color: var(--bg);
}

/* ---------- Live demo: the real app in a phone ---------- */

.bma-demo {
	display: grid;
	justify-items: center;
	text-align: center;
}

body .bma-demo > * {
	margin-block: 0;
}

.bma-demo .bma-title,
.bma-demo .bma-lead {
	max-width: 24ch;
	margin-inline: auto;
}

.bma-demo .bma-lead {
	max-width: 52ch;
}

.bma-demo .bma-live {
	position: relative;
	width: min(21.5rem, 78vw);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	isolation: isolate;
}

.bma-live::before {
	content: "";
	position: absolute;
	inset: 6% -45%;
	z-index: -1;
	background:
		radial-gradient(closest-side, color-mix(in srgb, var(--accent) 75%, transparent), transparent),
		radial-gradient(closest-side at 28% 70%, color-mix(in srgb, var(--accent-2) 40%, transparent), transparent 70%);
	filter: blur(60px);
	opacity: var(--glow);
}

.bma-live__phone {
	position: relative;
	aspect-ratio: 390 / 844;
	border-width: 0.5rem;
	border-radius: 14% / 6.5%;
}

.bma-live__phone img {
	transition: filter 0.4s, scale 0.6s var(--ease);
}

/* The button that starts the app covers the whole screen of the phone. */
.bma-live__start {
	position: absolute;
	inset: 0;
	display: grid;
	gap: 1rem;
	place-content: center;
	justify-items: center;
	background: linear-gradient(rgb(10 12 20 / 0.15), rgb(10 12 20 / 0.55));
	color: #f4f3ef;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.bma-live__start:is(:hover, :focus-visible) {
	color: #f4f3ef;
}

.bma-live__start > span:last-child {
	padding: 0.7em 1.2em;
	border-radius: 999px;
	background: rgb(10 12 20 / 0.7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.bma-live__play {
	position: relative;
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: #f4f3ef;
	box-shadow: 0 0 0 0 rgb(244 243 239 / 0.5);
	transition: scale 0.3s var(--ease);
}

.bma-live__play::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 0.3rem;
	border: 0.7rem solid transparent;
	border-right: 0;
	border-left: 1.15rem solid #0a0c14;
}

.bma-live__start:is(:hover, :focus-visible) .bma-live__play {
	scale: 1.08;
}

.bma-live__phone:has(.bma-live__start:hover) img {
	scale: 1.03;
}

/* Running: the app itself, drawn at phone size and scaled to the frame. */
.bma-live__phone iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 390px;
	height: 844px;
	border: 0;
	background: #fff;
	transform: scale(var(--scale, 1));
	transform-origin: 0 0;
	opacity: 0;
	transition: opacity 0.5s;
}

.bma-live.is-running iframe {
	opacity: 1;
}

.bma-live.is-loading .bma-live__start {
	background: rgb(10 12 20 / 0.6);
	cursor: progress;
}

.bma-live.is-loading .bma-live__play::before {
	width: 1.6rem;
	height: 1.6rem;
	margin: 0;
	border: 2px solid #0a0c14;
	border-top-color: transparent;
	border-radius: 50%;
}

.bma-live.is-running .bma-live__start {
	display: none;
}

.bma-demo .bma-demo__stores {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.bma-demo__stores p {
	max-width: 46ch;
	margin: 0 auto;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--muted);
}

.bma-demo__stores .wp-block-buttons {
	justify-content: center;
	margin-top: 1.25rem;
}

/* ---------- Process ---------- */

.bma-statement {
	max-width: 22ch;
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 3.25rem);
	font-weight: 500;
	line-height: 1.12;
	text-wrap: balance;
}

.bma-statement em {
	font-style: normal;
	color: var(--muted);
}

.bma-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 2rem 2.5rem;
	margin-top: clamp(3rem, 6vw, 5rem);
	counter-reset: step;
}

.bma-step {
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	counter-increment: step;
}

.bma-step::before {
	content: "0" counter(step);
	display: block;
	margin-bottom: 1.25rem;
	font-family: var(--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--accent);
}

.bma-step__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: -0.01em;
}

.bma-step p {
	margin: 0.6rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--muted);
}

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

.bma-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 1rem;
	align-items: stretch;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.bma-plan {
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	background: var(--surface);
}

.bma-plan--featured {
	border-color: var(--accent);
	background:
		radial-gradient(130% 70% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
		var(--surface);
	box-shadow: 0 30px 70px -40px var(--accent);
}

.bma-plan__name {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	justify-content: space-between;
	min-height: 1.75rem;
	font-family: var(--mono);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.08em;
}

.bma-plan__name strong {
	padding: 0.35em 0.8em;
	border-radius: 999px;
	background: var(--accent);
	color: var(--bg);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.bma-plan .bma-plan__price {
	margin-top: 1.75rem;
	color: var(--muted);
}

.bma-plan__price strong {
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 560;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--fg);
}

.bma-plan .bma-plan__text {
	min-height: 4.2em;
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--muted);
}

.bma-plan .bma-plan__list {
	display: grid;
	gap: 0.65rem;
	margin: 1.5rem 0 auto;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
}

.bma-plan__list li {
	position: relative;
	padding-left: 1.75rem;
}

.bma-plan__list li::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1.1em;
	height: 1.1em;
	background: var(--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bma-plan .wp-block-buttons {
	margin-top: 2rem;
}

.bma-plan .wp-block-button,
.bma-plan .wp-block-button__link {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.bma-plan--featured .wp-block-button__link {
	background: var(--accent);
	color: var(--bg);
}

.bma-plan--featured .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--fg);
	color: var(--bg);
}

.bma-pricing__note {
	margin: 1.5rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--muted);
}

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

.bma-faq {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 960px) {
	.bma-faq {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	}

	.bma-faq__head {
		position: sticky;
		top: 7rem;
		align-self: start;
	}
}

.bma-faq__item {
	margin: 0;
	border-top: 1px solid var(--line);
}

.bma-faq__item:last-child {
	border-bottom: 1px solid var(--line);
}

.bma-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.25rem 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: -0.01em;
	list-style: none;
	cursor: pointer;
}

.bma-faq__item summary::-webkit-details-marker {
	display: none;
}

.bma-faq__item summary::after {
	content: "+";
	flex: none;
	font-weight: 300;
	font-size: 1.5em;
	line-height: 1;
	color: var(--accent);
	transition: rotate 0.25s var(--ease);
}

.bma-faq__item[open] summary::after {
	rotate: 45deg;
}

.bma-faq__item p {
	max-width: 60ch;
	margin: 0 0 1.5rem;
	color: var(--muted);
}

/* ---------- Contact ---------- */

/* Hairline aligned with the content column, only between sections. */
.bma-section + .bma-contact {
	background: linear-gradient(var(--line), var(--line)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}

.bma-contact__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 960px) {
	.bma-contact__grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}
}

.bma-contact__details {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
}

.bma-contact__details li + li {
	margin-top: 0.35rem;
}

.bma-contact__details a {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--accent);
}

.bma-contact__intro .wp-block-buttons {
	margin-top: 1.75rem;
}

.bma-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	background: var(--surface);
}

.bma-form p {
	margin: 0;
}

.bma-form__trap {
	position: absolute;
	left: -9999px;
}

.bma-form__field--wide,
.bma-form__actions,
.bma-form__status {
	grid-column: 1 / -1;
}

@media (max-width: 520px) {
	.bma-form__field {
		grid-column: 1 / -1;
	}
}

.bma-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	color: var(--muted);
}

.bma-form label span {
	font-weight: 400;
	opacity: 0.7;
}

.bma-form :is(input, textarea, select) {
	width: 100%;
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--bg);
	color: var(--fg);
	font: inherit;
	box-sizing: border-box;
	transition: border-color 0.2s;
}

.bma-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.bma-form :is(input, textarea, select):focus {
	border-color: var(--accent);
	outline: none;
}

.bma-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.bma-form button {
	padding: 0.9em 1.5em;
	border: 0;
	border-radius: 999px;
}

.bma-form button:disabled {
	opacity: 0.6;
	cursor: progress;
}

.bma-form__note {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--muted);
}

.bma-form__status:empty {
	display: none;
}

.bma-form__status {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

.bma-form__status[data-state="ok"] {
	color: var(--ok);
}

.bma-form__status[data-state="error"] {
	color: var(--accent-2);
}

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

.bma-footer {
	border-top: 1px solid var(--line);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--muted);
}

.bma-footer__inner {
	display: grid;
	gap: 2rem;
	max-width: var(--wide);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 2rem;
	box-sizing: content-box;
}

@media (min-width: 760px) {
	.bma-footer__inner {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	}

	.bma-footer__legal {
		grid-column: 1 / -1;
	}
}

.bma-footer__brand p {
	max-width: 30ch;
	margin: 1rem 0 0;
}

.bma-footer__brand .bma-footer__maker {
	margin-top: 0.5rem;
	font-family: var(--mono);
	font-size: 0.75rem;
}

.bma-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bma-footer__links li + li {
	margin-top: 0.5rem;
}

.bma-footer__links a {
	color: var(--muted);
	text-decoration: none;
	transition: color 0.2s;
}

.bma-footer__links a:hover {
	color: var(--fg);
}

.bma-footer__legal {
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 0.75rem;
}

.bma-footer__legal a {
	color: inherit;
}

/* ---------- Mobile quick-contact bar ---------- */

/* Phones only. See inc/mobile.php. */
.bma-dock {
	display: none;
}

@media (max-width: 599px) {
	.bma-dock {
		display: flex;
		position: fixed;
		right: var(--gutter);
		bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
		left: var(--gutter);
		z-index: 40;
		gap: 0.4rem;
		align-items: center;
		padding: 0.4rem;
		border: 1px solid var(--line);
		border-radius: 999px;
		background: color-mix(in srgb, var(--surface) 82%, transparent);
		box-shadow: 0 18px 40px -14px var(--shadow);
		backdrop-filter: blur(14px) saturate(1.4);
		-webkit-backdrop-filter: blur(14px) saturate(1.4);
		view-transition-name: bma-dock;
		transition: translate 0.45s var(--ease), opacity 0.3s, visibility 0s;
	}

	/* Out of the way: top of the page, contact section, footer, open menu,
	   or while the visitor is typing. */
	.bma-dock.is-away,
	.has-modal-open .bma-dock,
	body:has(:is(input, textarea, select):focus) .bma-dock {
		translate: 0 calc(100% + 2rem);
		opacity: 0;
		visibility: hidden;
		transition: translate 0.45s var(--ease), opacity 0.3s, visibility 0s 0.45s;
	}

	.bma-dock a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 2.75rem;
		border-radius: 999px;
		color: var(--fg);
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: background-color 0.2s, color 0.2s, scale 0.2s var(--ease);
	}

	.bma-dock a:active {
		scale: 0.96;
	}

	.bma-dock__icon {
		flex: none;
		width: 2.75rem;
		border: 1px solid var(--line);
	}

	.bma-dock .bma-dock__cta {
		flex: 1;
		padding-inline: 1rem;
		background: var(--fg);
		color: var(--bg);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
	}

	.bma-dock__cta::after {
		content: "→";
		margin-left: 0.5em;
	}
}

@media print {
	.bma-dock {
		display: none;
	}
}

/* ---------- Articles, pages, news ---------- */

.bma-article {
	padding-block: clamp(3rem, 7vw, 6rem) var(--section);
}

.bma-article > .bma-title {
	max-width: var(--wp--style--global--content-size);
	margin-bottom: 2.5rem;
}

.bma-article__image img {
	display: block;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.wp-block-post-content {
	color: color-mix(in srgb, var(--fg) 86%, var(--bg));
}

.wp-block-post-content a {
	text-decoration-color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.wp-block-post-content :is(h2, h3, h4) {
	margin-top: 2.5em;
	color: var(--fg);
}

.wp-block-post-content h2 {
	font-size: var(--wp--preset--font-size--xl);
}

.wp-block-post-content h3 {
	font-size: var(--wp--preset--font-size--lg);
}

.wp-block-post-content > .bma-section:first-child {
	padding-top: clamp(3rem, 7vw, 6rem);
}

.bma-posts .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bma-posts .wp-block-post {
	padding-block: 2rem;
	border-top: 1px solid var(--line);
}

.bma-posts .wp-block-post > * {
	margin-block: 0;
}

.bma-posts .wp-block-post-excerpt {
	margin-top: 0.75rem;
	color: var(--muted);
}

.bma-pager {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	font-weight: 500;
}

.bma-pager a {
	text-decoration: none;
}

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

@keyframes bma-rise {
	from {
		opacity: 0;
		translate: 0 2.5rem;
	}
}

@keyframes bma-header-solid {
	to {
		border-bottom-color: var(--line);
	}
}

@keyframes bma-progress {
	to {
		scale: 1 1;
	}
}

@keyframes bma-blink {
	50% {
		opacity: 0;
	}
}

@keyframes bma-pulse {
	70%,
	100% {
		box-shadow: 0 0 0 1.4rem rgb(244 243 239 / 0);
	}
}

@keyframes bma-spin {
	to {
		rotate: 1turn;
	}
}

@keyframes bma-marquee {
	to {
		translate: -100% 0;
	}
}

@keyframes bma-push-in {
	0% {
		opacity: 0;
		translate: 0 1.25rem;
		scale: 0.94;
	}

	6%,
	86% {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}

	94%,
	100% {
		opacity: 0;
		translate: 0 -0.75rem;
		scale: 0.98;
	}
}

@keyframes bma-fan-left {
	to {
		rotate: -15deg;
		translate: -9% 3%;
	}
}

@keyframes bma-fan-right {
	to {
		rotate: 15deg;
		translate: 9% 3%;
	}
}

@keyframes bma-lift {
	to {
		translate: 0 -5%;
	}
}

/* Without motion the two tickers become plain lists: the events wrap, the
   app screens scroll sideways by hand. */
.bma-ticker__list[aria-hidden],
.bma-reel__set[aria-hidden] {
	display: none;
}

.bma-ticker {
	-webkit-mask-image: none;
	mask-image: none;
}

.bma-ticker__list {
	flex: 1;
	flex-wrap: wrap;
	white-space: normal;
}

.bma-reel {
	overflow-x: auto;
	scroll-snap-type: x proximity;
}

.bma-reel__set li {
	scroll-snap-align: center;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* Cross-page transitions, no JavaScript. */
	@view-transition {
		navigation: auto;
	}

	.bma-hero__title em::after {
		animation: bma-blink 1.1s steps(1) infinite;
	}

	.bma-hero__copy > *,
	.bma-stage {
		animation: bma-rise 0.9s var(--ease) both;
	}

	.bma-hero__copy > :nth-child(2) { animation-delay: 0.06s; }
	.bma-hero__copy > :nth-child(3) { animation-delay: 0.12s; }
	.bma-hero__copy > :nth-child(4) { animation-delay: 0.18s; }
	.bma-stage { animation-delay: 0.2s; }

	/* The notification arrives, stays and leaves – like the real thing. */
	.bma-push {
		animation: bma-push-in 9s var(--ease) 1.2s infinite both;
	}

	/* Tickers */
	.bma-ticker__list[aria-hidden],
	.bma-reel__set[aria-hidden] {
		display: flex;
	}

	.bma-ticker {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	}

	.bma-ticker__list {
		flex: none;
		flex-wrap: nowrap;
		white-space: nowrap;
		animation: bma-marquee 46s linear infinite;
	}

	.bma-reel {
		overflow: hidden;
		scroll-snap-type: none;
	}

	.bma-reel__set {
		animation: bma-marquee 70s linear infinite;
	}

	.bma-reel.is-flow .bma-reel__set li {
		transition: transform 0.8s var(--ease), filter 0.8s var(--ease), opacity 0.4s;
	}

	/* It arrives first and then grows, with a slight spring. */
	.bma-reel.is-flow .bma-phone {
		transition: scale 0.9s cubic-bezier(0.34, 1.45, 0.64, 1) 0.12s, box-shadow 0.9s var(--ease);
	}

	/* The play button gently calls for attention; while loading it turns. */
	.bma-live__play {
		animation: bma-pulse 2.4s var(--ease) infinite;
	}

	.bma-live.is-loading .bma-live__play {
		animation: none;
	}

	.bma-live.is-loading .bma-live__play::before {
		animation: bma-spin 0.8s linear infinite;
	}

	.bma-reel.is-flow.is-dragging :is(.bma-reel__set li, .bma-phone) {
		transition: none;
	}

	:is(.bma-ticker, .bma-reel):is(:hover, :focus-within, :focus) :is(.bma-ticker__list, .bma-reel__set) {
		animation-play-state: paused;
	}

	/* Sections fade in as they come into view. The hidden state is only
	   ever applied by assets/js/site.js (class bma-reveal), which also takes
	   it away again – so content never depends on a scroll position the
	   browser may not have caught up with (jump to an anchor, back button). */
	.bma-reveal {
		opacity: 0;
		translate: 0 2rem;
	}

	.bma-reveal.is-in {
		opacity: 1;
		translate: none;
		transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
	}

	/* Scroll-driven decoration where supported: nothing here hides content. */
	@supports (animation-timeline: view()) {
		.bma-header {
			animation: bma-header-solid linear both;
			animation-timeline: scroll(root);
			animation-range: 0 8rem;
		}

		.bma-header::after {
			animation: bma-progress linear both;
			animation-timeline: scroll(root);
		}

		/* The phones fan out as the visitor scrolls away from the top. */
		.bma-stage .bma-phone--left {
			animation: bma-fan-left linear both;
			animation-timeline: scroll(root);
			animation-range: 0 70vh;
		}

		.bma-stage .bma-phone--right {
			animation: bma-fan-right linear both;
			animation-timeline: scroll(root);
			animation-range: 0 70vh;
		}

		.bma-stage .bma-phone--center {
			animation: bma-lift linear both;
			animation-timeline: scroll(root);
			animation-range: 0 70vh;
		}
	}
}

@supports not (animation-timeline: view()) {
	.bma-header {
		border-bottom-color: var(--line);
	}
}