/**
 * HappenBoard Theme — global styles.
 *
 * Only what theme.json cannot express lives here: interaction states shared
 * by many blocks, the markup contracts of the HappenBoard site plugins
 * (happenboard-ui, happenboard-header, happenboard-search) and the shapes of
 * the design system (tickets, scalloped edges, stickers).
 * Block-specific rules live in assets/css/blocks/ and load only when the
 * block is on the page.
 */

/* -------------------------------------------------------------- base -- */

html {
	/* Anchored sections (FAQ, hooks, changelog) land below the sticky header. */
	scroll-padding-top: var(--wp--custom--header--offset);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-optical-sizing: auto;
}

/*
 * Plugins hide elements with the hidden attribute (tab panels, slider nav,
 * integration cards). Layout classes such as .is-layout-flex would otherwise
 * win over the user-agent [hidden] rule.
 */
[hidden]:not([hidden="until-found"]) {
	display: none !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
}

:where(a) {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

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

/* Skip link added by core for block themes. */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	z-index: 100001;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Small transitions on the hover and focus states of links and buttons
 * (zero specificity: components set their own). The reduced motion rule
 * above shortens them to nothing. */
:where(a, button, .wp-element-button, .wp-block-button__link, summary) {
	transition:
		color var(--wp--custom--transition),
		background-color var(--wp--custom--transition),
		border-color var(--wp--custom--transition),
		box-shadow var(--wp--custom--transition),
		opacity var(--wp--custom--transition);
}

/* --------------------------------------------------------- utilities -- */

/* Eyebrow text above section titles (also emitted by happenboard-ui). */
.feature-eyebrow,
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.5;
	color: var(--wp--preset--color--secondary);
}

/* Visually hidden but available to assistive technology. */
.hb-visually-hidden,
.is-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ header -- */

/*
 * Header geometry (Figma "header-sticky"): a dark utility bar, then a white
 * card that overlaps the bar by 16px. The page content starts right under the
 * bar and slides beneath the card, so <main> sections pad their top with
 * --hb-header-overlap.
 */
:root {
	--hb-bar-pad-top: 1rem;
	--hb-bar-pad-bottom: 2rem;
	--hb-card-overlap: 1rem;
	--hb-card-height: 5.5rem;
	--hb-header-overlap: calc(var(--hb-card-height) - var(--hb-card-overlap));
	--hb-gutter: var(--wp--style--root--padding-left, clamp(1.5rem, 0.6rem + 3.75vw, 4rem));
	--hb-text-subtle: #6b6b6b;
	/* Text in the "selected" state: the design's #a37305 darkened to reach 4.5:1 on white and on the cream page. */
	--hb-select-text: #8a6204;
	--hb-shadow-drop: var(--wp--preset--shadow--drop);
}

@media (max-width: 1023.98px) {
	:root {
		--hb-card-overlap: 1.125rem;
		--hb-card-height: 4.5rem;
	}
}

.wp-site-blocks > header.wp-block-template-part.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	margin-block: 0 calc(-1 * var(--hb-header-overlap));
	/* The transparent strip around the card must not swallow clicks. */
	pointer-events: none;
	transition: top 0.25s ease;
}

/* Once the page is scrolled, happenboard-header hides the utility bar. The
 * bar keeps its room in the flow, so nothing below the header moves; the
 * header slides up instead, until the card is 24px from the top. */
html.hb-header-scrolled .wp-site-blocks > header.wp-block-template-part.site-header {
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--hb-bar-pad-top) - var(--hb-bar-pad-bottom) + var(--hb-card-overlap));
	/* happenboard-header adds a shadow to the whole part; the card carries its own. */
	box-shadow: none;
}

html.hb-header-scrolled .site-header .hb-announcement.header-utility-bar {
	max-height: none;
	padding-top: var(--hb-bar-pad-top) !important;
	overflow: visible;
}

.site-header .header-utility-bar,
.site-header .hb-header__card {
	pointer-events: auto;
}

.site-header .hb-header {
	margin: 0;
}

.site-header :where(.hb-header > *, .hb-header__bar) {
	margin-block: 0;
}

/* Utility bar — only padding-top is used: happenboard-header zeroes it when it collapses. */
.hb-announcement.header-utility-bar {
	padding: var(--hb-bar-pad-top) var(--hb-gutter) 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
}

.hb-announcement__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--style--global--wide-size);
	min-height: 1.5rem;
	margin-inline: auto;
	padding-bottom: var(--hb-bar-pad-bottom);
}

.hb-announcement__inner.hb-announcement__inner > * {
	margin-block: 0;
}

.hb-announcement__lang {
	justify-self: start;
	min-width: 0;
}

.hb-announcement__msg {
	justify-self: center;
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	letter-spacing: -0.05rem;
	white-space: nowrap;
}

.hb-announcement__msg a {
	margin-inline-start: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
}

.hb-announcement a:where(:hover, :focus-visible) {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

.hb-utility-nav {
	justify-self: end;
	gap: var(--wp--preset--spacing--40);
}

/* Search and Cart on hover (Figma 10698:12300): gold, not underlined. */
.hb-announcement .hb-utility-nav a.wp-block-navigation-item__content:where(:hover, :focus-visible) {
	color: var(--wp--preset--color--highlight);
	text-decoration: none;
}

/* The Cart link while its "Your cart is currently empty!" toast is open
 * (Figma Cart / Empty / Overlay): label and icon in gold. */
.hb-announcement .hb-utility-nav .has-icon--cart > a[aria-expanded="true"] {
	color: var(--wp--preset--color--highlight);
}

.hb-announcement .hb-utility-nav .has-icon--cart > a[aria-expanded="true"]::before {
	background-color: currentcolor;
}

.hb-utility-nav .wp-block-navigation-item__content,
.hb-lang-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--base);
}

/* Language switcher (Polylang): round flag and language code; the other
 * languages open in a small dark menu. */
.hb-lang-nav .wp-block-navigation-item__label {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.hb-lang-nav .wp-block-navigation-item__label img {
	display: block;
	width: 1.5rem !important;
	height: 1.5rem !important;
	border-radius: 50%;
}

.hb-lang-code {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
}

.hb-lang-nav .wp-block-navigation__submenu-icon {
	width: 0.75rem;
	height: 0.75rem;
	margin-inline-start: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--border);
}

/* Announcement bar (Figma 10524:21370): flag and code only. The menu opens
 * on hover; the toggle button shows up when it gets the keyboard focus. */
.hb-announcement .hb-lang-nav .wp-block-navigation__submenu-icon:not(:focus-visible) {
	width: 0;
	margin: 0;
	overflow: hidden;
	opacity: 0;
}

.hb-lang-nav.hb-lang-nav .wp-block-navigation__submenu-container {
	z-index: 120;
	width: max-content;
	min-width: 0 !important;
	padding: var(--wp--preset--spacing--10);
	border: 1px solid var(--wp--preset--color--primary-hover);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.hb-lang-nav.hb-lang-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--xs);
}

.hb-lang-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.hb-lang-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--primary-hover);
	text-decoration: none;
}

/* Icons are drawn with a mask so they follow the link colour. */
.has-icon > .wp-block-navigation-item__content::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--wp--preset--color--border);
	-webkit-mask: var(--hb-icon) center / contain no-repeat;
	mask: var(--hb-icon) center / contain no-repeat;
}

.has-icon--search {
	--hb-icon: url("../icons/search-line.svg");
}

.has-icon--cart {
	--hb-icon: url("../icons/shopping-basket-2-line.svg");
}

/* Header bar and floating card. */
.hb-header__bar.hb-header__bar {
	margin-top: calc(-1 * var(--hb-card-overlap));
	padding-inline: var(--hb-gutter);
}

.hb-header__card {
	position: relative;
	max-width: var(--wp--style--global--wide-size);
	min-height: var(--hb-card-height);
	margin-inline: auto;
	padding: 1rem 1.5rem 1.25rem;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--hb-shadow-drop);
	gap: var(--wp--preset--spacing--40);
}

/* Figma navigation/desktop 10507:4265: 32px between the logo and the menu
 * (doubled: the group's own layout gap would win otherwise). */
.hb-header__start.hb-header__start {
	gap: 2rem;
	min-width: 0;
}

.hb-logo {
	flex: none;
	margin: 0;
}

.hb-logo a,
.hb-logo img {
	display: block;
}

.hb-logo a > img,
.hb-logo__mark {
	width: 118px;
	height: auto;
	aspect-ratio: 118 / 50.595;
}

/* The two layers of inc/logo.php, placed as in the original artwork. */
.hb-logo__mark {
	position: relative;
	display: block;
	perspective: 20rem;
}

.hb-logo__mark > img {
	position: absolute;
	height: auto;
}

.hb-logo__ticket {
	top: 21.834%;
	left: 0;
	width: 36.378%;
	backface-visibility: visible;
	transform-origin: 50% 50%;
}

.hb-logo__name {
	top: 0;
	left: 42.136%;
	width: 57.868%;
}

/* Hover or keyboard focus: the ticket flips over like a ticket in hand. */
@media (prefers-reduced-motion: no-preference) {
	.hb-logo a:hover .hb-logo__ticket,
	.hb-logo a:focus-visible .hb-logo__ticket {
		animation: hb-logo-flip 0.9s cubic-bezier(0.45, 0, 0.2, 1);
	}
}

@keyframes hb-logo-flip {
	0% {
		transform: rotateY(0) translateY(0);
	}

	45% {
		transform: rotateY(200deg) translateY(-12%) rotate(-6deg);
	}

	100% {
		transform: rotateY(360deg) translateY(0);
	}
}

.hb-header__actions {
	flex: none;
	gap: var(--wp--preset--spacing--40);
}

/* Cart in progress (Figma navigation state 10684:26972): "Complete your
 * order" over the cart total, in the 52px of the other buttons. */
.hb-header__cta--order .wp-block-button__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: calc(0.4375rem - 1px);
}

.hb-header__cta-note {
	margin-top: -2px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: -0.05em;
	line-height: 1.25;
}

/* Main navigation (desktop). */
.hb-main-nav {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
}

.hb-main-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}

.hb-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: var(--hb-text-subtle);
}

.hb-main-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.hb-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
	color: var(--hb-select-text);
}

/* Submenu toggles are <button>s: make them inherit the nav typography. */
.hb-main-nav button.wp-block-navigation-item__content {
	font: inherit;
	letter-spacing: inherit;
}

/* Remix "arrow-down-s" chevron, 24px, flipped while the panel is open. */
.hb-main-nav .wp-block-navigation__submenu-icon {
	width: 1.5rem;
	height: 1.5rem;
	margin-inline-start: var(--wp--preset--spacing--20);
	pointer-events: none;
}

/* 8px between the label and its chevron (Figma 7508:72471): core pulls the
 * icon 0.6em back over the toggle's 0.85em padding, which leaves 4px. */
.hb-main-nav .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
	margin-left: -0.35em;
}

.hb-main-nav .wp-block-navigation__submenu-icon svg {
	display: none;
}

.hb-main-nav .wp-block-navigation__submenu-icon::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-down-s-line.svg") center / contain no-repeat;
	mask: url("../icons/arrow-down-s-line.svg") center / contain no-repeat;
	transition: transform var(--wp--custom--transition);
}

.hb-main-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--highlight);
}

.hb-main-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon::before {
	transform: rotate(180deg);
}

.hb-main-nav .hb-nav-login {
	display: none;
}

/* Documentation header (Figma 10706:29567): the current section in gold. */
.hb-docs-nav .wp-block-navigation__container > .is-current > .wp-block-navigation-item__content {
	color: var(--hb-select-text);
}

/* Its bar only holds the message, shown at every width. */
.hb-announcement--docs .hb-announcement__inner {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
}

.hb-announcement--docs .hb-announcement__msg.hb-announcement__msg {
	display: block;
	grid-column: 1;
}

@media (min-width: 600px) {
	.hb-announcement--docs .hb-announcement__text.hb-announcement__text {
		display: inline;
	}
}

/* Narrow desktops: the message keeps only its link, and the header card
 * tightens its spacing so longer translations still fit on one line. */
@media (max-width: 1279.98px) {
	.hb-announcement__text {
		display: none;
	}
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.hb-header__card.hb-header__card {
		padding-inline: 1rem;
	}

	.hb-header__start.hb-header__start {
		gap: var(--wp--preset--spacing--40);
	}

	.hb-main-nav.hb-main-nav .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--20);
	}

	.hb-header__actions .wp-block-button__link {
		padding-inline: calc(var(--wp--preset--spacing--40) - 1px);
	}
}

@media (min-width: 1024px) {
	/* The mega panels are positioned against the header card. */
	.hb-header__card .hb-main-nav,
	.hb-header__card .hb-main-nav .wp-block-navigation__responsive-container,
	.hb-header__card .hb-main-nav .wp-block-navigation__responsive-dialog,
	.hb-header__card .hb-main-nav .wp-block-navigation-item.hb-mega {
		position: static;
	}

	.hb-main-nav .hb-mega > .wp-block-navigation__submenu-container {
		position: absolute;
		inset: 4.75rem 0 auto;
		z-index: 2;
		display: grid;
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
		width: auto;
		min-width: 0;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
		border: 0;
		border-radius: 0 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md);
		box-shadow: var(--hb-shadow-drop);
		font-weight: 600;
	}

	/* The navigation's overlay colours (dark, for the mobile menu) also land
	 * on the submenus as preset classes with !important: the desktop panels
	 * stay white (Figma mega menus). */
	.hb-main-nav .hb-mega > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--base) !important;
		color: var(--wp--preset--color--contrast) !important;
	}

	.hb-header__card:has(.hb-mega > .wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.hb-mega--features > .wp-block-navigation__submenu-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(4, auto);
		grid-auto-flow: column;
	}

	/* Illustration on the left (389 x 305) from 1200px, the links centred
	 * beside it. */
	.hb-main-nav .hb-mega--solutions > .wp-block-navigation__submenu-container,
	.hb-main-nav .hb-mega--resources > .wp-block-navigation__submenu-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, auto);
		grid-auto-flow: column;
		align-content: center;
	}

	.hb-main-nav .hb-mega--resources > .wp-block-navigation__submenu-container {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: repeat(4, auto);
	}

	@media (min-width: 1200px) {
		.hb-main-nav .hb-mega--solutions > .wp-block-navigation__submenu-container,
		.hb-main-nav .hb-mega--resources > .wp-block-navigation__submenu-container {
			min-height: calc(19.0625rem + var(--wp--preset--spacing--50) + var(--wp--preset--spacing--60));
			padding-left: calc(var(--wp--preset--spacing--70) + 24.3125rem + var(--wp--preset--spacing--50));
		}

		/* Solutions: the two link columns of the frame, 373 wide from x 545. */
		.hb-main-nav .hb-mega--solutions > .wp-block-navigation__submenu-container {
			padding-right: calc(var(--wp--preset--spacing--70) + 1.5625rem);
			padding-left: calc(var(--wp--preset--spacing--70) + 24.3125rem + var(--wp--preset--spacing--50) + 0.5rem);
		}

		.hb-main-nav .hb-mega--solutions > .wp-block-navigation__submenu-container::before,
		.hb-main-nav .hb-mega--resources > .wp-block-navigation__submenu-container::before {
			content: "";
			position: absolute;
			top: var(--wp--preset--spacing--50);
			left: var(--wp--preset--spacing--70);
			width: 24.3125rem;
			aspect-ratio: 389 / 305;
			border-radius: var(--wp--custom--radius--md);
			background: var(--wp--preset--color--surface-strong) var(--hb-mega-visual) center / cover no-repeat;
		}
	}

	.hb-mega--solutions {
		--hb-mega-visual: url("../images/mega/mega-solutions.webp");
	}

	.hb-mega--resources {
		--hb-mega-visual: url("../images/mega/mega-resources.webp");
	}

	/* Items: Figma "wrapper-ghost". */
	.hb-main-nav .hb-mega .wp-block-navigation__submenu-container .wp-block-navigation-item {
		width: 100%;
		min-width: 0;
	}

	/* Out-specifies core's submenu item padding (.5em 1em). */
	.hb-main-nav.hb-main-nav .hb-mega .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--10);
		width: 100%;
		padding: var(--wp--preset--spacing--30);
		border-radius: var(--wp--custom--radius--sm);
		transition: background-color var(--wp--custom--transition);
	}

	.hb-main-nav .hb-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.hb-main-nav .hb-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--contrast);
	}

	.hb-main-nav .hb-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		overflow: hidden;
		font-size: var(--wp--preset--font-size--large);
		font-weight: 600;
		letter-spacing: -0.04em;
		line-height: 1;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.hb-main-nav.hb-main-nav .hb-mega .wp-block-navigation__submenu-container > .hb-mega__label > .wp-block-navigation-item__content {
		padding-block: 0;
		opacity: 0.48;
	}
}

.hb-main-nav .wp-block-navigation-item__description {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: -0.05rem;
	line-height: 1.25;
	color: var(--hb-text-subtle);
}

/* Below 1024px the menu collapses into the overlay (core does it at 600px only). */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.hb-main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.hb-main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 1023.98px) {
	.hb-announcement__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.hb-announcement__msg {
		display: none;
	}

	.hb-announcement.header-utility-bar {
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.7143;
	}

	.hb-header__card {
		padding: 1rem 1.5rem;
	}

	/* Logo · Get started · menu button, as in the mobile mock. */
	.hb-header__card > .hb-header__start {
		display: contents;
	}

	.hb-logo a > img,
	.hb-logo__mark {
		width: 93px;
	}

	.hb-header__actions {
		margin-inline-start: auto;
	}

	.hb-header__card .hb-main-nav {
		order: 3;
	}

	.hb-header__actions > .wp-block-button.hb-header__login {
		display: none;
	}

	.hb-header__cta .wp-block-button__link {
		padding: calc(var(--wp--preset--spacing--10) - 1px) calc(var(--wp--preset--spacing--20) - 1px);
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.7143;
	}

	.hb-main-nav .wp-block-navigation__responsive-container-open {
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: var(--wp--custom--radius--sm);
		background-color: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
	}
}

/* Narrow phones: a longer call to action ("Buy HappenBoard") still fits beside the logo and the menu button. */
@media (max-width: 399.98px) {
	.hb-header__card.hb-header__card {
		gap: var(--wp--preset--spacing--20);
		padding-inline: var(--wp--preset--spacing--40);
	}

	.hb-header__card .hb-header__actions {
		gap: var(--wp--preset--spacing--20);
	}
}

/* 320px screens: no room for the long call to action; the page itself carries the buy button. */
@media (max-width: 359.98px) {
	.hb-header__actions > .wp-block-button.hb-header__cta--buy {
		display: none;
	}
}

/* Phones: the cart total gives way, then the whole button; the toast leads
 * back to the checkout. */
@media (max-width: 1023.98px) {
	.hb-header__cta--order .wp-block-button__link {
		padding-block: calc(var(--wp--preset--spacing--10) - 1px);
	}

	.hb-header__cta-note {
		display: none;
	}
}

@media (max-width: 439.98px) {
	.hb-header__actions > .wp-block-button.hb-header__cta--order {
		display: none;
	}
}

/* Mobile overlay (core responsive container), dark like the Figma mobile menu. */
.hb-main-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--hb-gutter) var(--wp--preset--spacing--70);
}

.hb-main-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--wp--preset--color--border);
}

.hb-main-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--70);
}

.hb-main-nav .is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--50);
	width: 100%;
}

.hb-main-nav .is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.hb-main-nav .is-menu-open .wp-block-navigation-item__content {
	color: inherit;
}

/* Top-level entries: Figma mobile menu items (Headline 2, white). */
.hb-main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--headline-2);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1;
}

.hb-main-nav .is-menu-open .hb-nav-login {
	display: block;
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--secondary);
}

.hb-main-nav .is-menu-open .wp-block-navigation__container > .hb-nav-login > .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
}

/* Submenus stay unfolded in the overlay (core behaviour): keep them compact. */
.hb-main-nav .is-menu-open .has-child > .wp-block-navigation__submenu-container {
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40) 0 0;
}

.hb-main-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1.2;
}

.hb-main-nav .is-menu-open .wp-block-navigation-item__description {
	display: none;
}

.hb-main-nav .is-menu-open .hb-mega__label > .wp-block-navigation-item__content {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0;
}

.hb-main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
	color: inherit;
}

/* ------------------------------------------------------------ footer -- */

.wp-site-blocks > footer.wp-block-template-part.site-footer {
	margin-block-start: 0;
	overflow-x: clip;
}

.hb-footer.hb-footer {
	padding-top: var(--wp--preset--spacing--90);
	padding-bottom: 0;
}

.hb-footer__top {
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--80);
}

.hb-footer__top.hb-footer__top > * {
	margin-block: 0;
}

/* Newsletter card (Figma "push-nl"). */
.hb-newsletter.hb-newsletter {
	position: relative;
	/* 527 and 721 wide side by side, both narrowing on smaller screens. */
	flex: 0 1 32.9375rem;
	flex-wrap: nowrap;
	min-width: 0;
	min-height: 41.8125rem;
	gap: 2.5rem;
	padding: clamp(1.5rem, 0.4rem + 4.5vw, 3.5rem);
	border-radius: var(--wp--custom--radius--md);
}

.hb-newsletter.hb-newsletter > * {
	margin-block: 0;
}

.hb-newsletter__title.hb-newsletter__title {
	line-height: 0.875;
	letter-spacing: -0.0625em;
}

.hb-newsletter__lede {
	line-height: 1.3;
	letter-spacing: -0.04em;
}

/* Email field with the button inside it (Figma "input"), from the
 * MailerPress opt-in shortcode. */
.hb-newsletter .mailerpress-optin-form {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 4.25rem;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
}

.hb-newsletter .mailerpress-optin-form:focus-within {
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
}

.hb-newsletter .mailerpress_shortcode-optin-form__field {
	flex: 1 1 6rem;
	min-width: 0;
}

.hb-newsletter .mailerpress_shortcode-optin-form__field label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.hb-newsletter .mailerpress_shortcode-optin-form__field input {
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.04em;
	line-height: 1.3;
}

.hb-newsletter .mailerpress_shortcode-optin-form__field input::placeholder {
	color: var(--wp--preset--color--contrast);
	opacity: 1;
}

.hb-newsletter .mailerpress_shortcode-optin-form__field input:focus {
	outline: 0;
}

.hb-newsletter .mailerpress_shortcode-optin-form__button {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition);
}

.hb-newsletter .mailerpress_shortcode-optin-form__button:hover,
.hb-newsletter .mailerpress_shortcode-optin-form__button:focus-visible {
	background-color: var(--wp--preset--color--primary-hover);
}

.hb-newsletter .mailerpress-optin-form :is(.mailerpress-notice, [role="alert"], [role="status"]) {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.hb-newsletter__consent.hb-newsletter__consent {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--medium);
	font-style: italic;
	letter-spacing: -0.05rem;
	line-height: 1.25;
}

.hb-newsletter__consent a {
	color: inherit;
}

.hb-footer__menus {
	display: flex;
	flex: 0 1 45.0625rem;
	flex-direction: column;
	justify-content: space-between;
	gap: 2.875rem;
	min-width: 0;
}

.hb-footer__menus.hb-footer__menus > * {
	margin-block: 0;
}

.hb-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.875rem var(--wp--preset--spacing--50);
}

.hb-footer__nav.hb-footer__nav > *,
.hb-footer__col.hb-footer__col > * {
	margin-block: 0;
}

.hb-footer__heading.hb-footer__heading {
	margin-bottom: var(--wp--preset--spacing--30);
	/* Figma fades the text to 48%; this solid grey keeps 4.5:1 on beige. */
	color: var(--hb-text-subtle);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
}

.hb-footer__links.hb-footer__links,
.hb-footer__legal-links.hb-footer__legal-links {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.25;
}

.hb-footer__links.hb-footer__links {
	max-width: 19.75rem;
}

.hb-footer__links a,
.hb-footer__legal-links a {
	display: inline-block;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Figma stacks the links 20px apart; 24px keeps every link a large enough
 * target (WCAG 2.5.8), the gaps around absorb the difference. */
.hb-footer__links a {
	padding-block: 0.125rem;
}

.hb-footer__links a:hover,
.hb-footer__legal-links a:hover {
	text-decoration: underline;
}

.hb-footer__legal {
	display: flex;
	flex-direction: column;
	gap: 2.4375rem;
	padding-block: 2.875rem;
	border-block: 1px solid var(--wp--preset--color--contrast);
}

.hb-footer__legal.hb-footer__legal > * {
	margin-block: 0;
}

.hb-footer__legal-links.hb-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
}

.hb-footer__social.hb-footer__social {
	gap: var(--wp--preset--spacing--50);
	margin: 0;
}

.hb-footer__social .wp-social-link svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* "Make it happen" brand block: one container, everything scales with it. */
.hb-footer__brand.hb-footer__brand {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 1312 / 877;
	margin-top: var(--wp--preset--spacing--80);
	overflow: visible;
}

.hb-footer__brand.hb-footer__brand > * {
	position: absolute;
	margin: 0;
}

.hb-footer__logo.hb-footer__logo {
	top: 7.295cqw;
	left: 50%;
	width: 19.97cqw;
	transform: translateX(-50%);
}

/* Core makes image links inline blocks, which would size the logo itself. */
.hb-footer__logo a {
	display: block;
}

.hb-footer__logo.hb-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 118 / 50.595;
}

.hb-claim.hb-claim {
	inset: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 21.086cqw;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.0788;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

.hb-claim__line {
	position: absolute;
	left: 15.691cqw;
	transform: matrix(0.991239, -0.132083, 0, 0.99875, 0, 0);
	transform-origin: 0 0;
}

.hb-claim__line:first-child {
	top: 19.441cqw;
}

.hb-claim__line:last-child {
	top: 36.72cqw;
}

/* ---------------------------------------------------------- stickers -- */

.is-style-sticker.hb-sticker {
	--hb-sticker-rotate: 0deg;
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 15.0625rem;
	aspect-ratio: 241 / 136;
	padding: 1rem 0.5rem 0.75rem;
	color: var(--wp--preset--color--contrast);
	text-align: center;
	rotate: var(--hb-sticker-rotate);
	-webkit-mask: url("../images/badges/badge-ticket-yellow.svg") center / 100% 100% no-repeat;
	mask: url("../images/badges/badge-ticket-yellow.svg") center / 100% 100% no-repeat;
}

.hb-sticker.hb-sticker > * {
	margin: 0;
}

.hb-sticker .hb-sticker__small {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.05rem;
	line-height: 1.25;
}

.hb-sticker .hb-sticker__big {
	margin-block: -0.125rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 3rem;
	font-weight: 400;
	letter-spacing: -0.042em;
	line-height: 1;
	white-space: nowrap;
}

.hb-sticker .hb-sticker__label {
	max-width: 6.875rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
}

/* Perforated "stamp" variant (SEOPress): notches along the top and bottom edges. */
.is-style-sticker.hb-sticker--seopress {
	--hb-notch: 8.985px;
	--hb-pitch: 23.1px;
	width: 11.25rem;
	aspect-ratio: 180 / 125.35;
	padding: 1.75rem 0.5rem;
	-webkit-mask:
		radial-gradient(circle at 50% 0, #0000 var(--hb-notch), #000 calc(var(--hb-notch) + 0.5px)) top / var(--hb-pitch) 51% repeat-x,
		radial-gradient(circle at 50% 100%, #0000 var(--hb-notch), #000 calc(var(--hb-notch) + 0.5px)) bottom / var(--hb-pitch) 51% repeat-x;
	mask:
		radial-gradient(circle at 50% 0, #0000 var(--hb-notch), #000 calc(var(--hb-notch) + 0.5px)) top / var(--hb-pitch) 51% repeat-x,
		radial-gradient(circle at 50% 100%, #0000 var(--hb-notch), #000 calc(var(--hb-notch) + 0.5px)) bottom / var(--hb-pitch) 51% repeat-x;
}

/* Figma badges 10510:21462: "Trusted by" 22px from the top, the figure 8px
 * under it and 4px above "WordPress sites". */
.hb-sticker.hb-sticker--trusted {
	--hb-sticker-rotate: 4deg;
	padding-top: 1.25rem;
}

.hb-sticker--trusted .hb-sticker__big.hb-sticker__big {
	margin-block: 0.1667em 0.0833em;
}

.hb-newsletter .hb-sticker--trusted.hb-sticker--trusted {
	position: absolute;
	top: -1.375rem;
	right: -1.125rem;
}

/* Inside the brand block every sticker dimension follows the container. */
.hb-footer__brand .is-style-sticker.hb-sticker {
	position: absolute;
	width: 18.369cqw;
	padding: 1.2cqw 0.6cqw 0.9cqw;
}

.hb-footer__brand .hb-sticker .hb-sticker__small {
	font-size: 1.2195cqw;
}

.hb-footer__brand .hb-sticker .hb-sticker__big {
	font-size: 3.6585cqw;
}

.hb-footer__brand .hb-sticker .hb-sticker__label {
	max-width: 8.3cqw;
	font-size: 1.5244cqw;
}

.hb-footer__brand .hb-sticker.hb-sticker--best {
	--hb-sticker-rotate: 6deg;
	top: 12.517cqw;
	left: 3.921cqw;
}

.hb-footer__brand .is-style-sticker.hb-sticker--seopress {
	--hb-sticker-rotate: 9deg;
	--hb-notch: 0.685cqw;
	--hb-pitch: 1.761cqw;
	top: 45.737cqw;
	left: 79.311cqw;
	width: 13.727cqw;
	padding: 2.1cqw 0.6cqw;
}

/* ---------------------------------------------------- footer: tablet -- */

@media (max-width: 1023.98px) {
	.hb-footer__top {
		flex-direction: column;
	}

	.hb-footer__menus {
		flex-basis: auto;
	}

	.hb-newsletter.hb-newsletter {
		flex: none;
		min-height: 0;
	}
}

@media (max-width: 599.98px) {
	.hb-footer__nav {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--70);
	}

	.hb-newsletter .hb-sticker--trusted.hb-sticker--trusted {
		scale: 0.8;
		top: -2rem;
		right: -1.5rem;
	}

	/* Touch targets of at least 24px. */
	.hb-footer__links a,
	.hb-footer__legal-links a {
		padding-block: 0.25rem;
	}
}

/* ----------------------------------------------------------- tickets -- */

/* Figma "wrapper-ticket": dark band whose top and bottom edges are bitten. */
.wp-block-group.is-style-ticket {
	--hb-bite-x: 10.64px;
	--hb-bite-y: 10.35px;
	--hb-bite-pitch: 27.36px;
	--hb-bite-offset: 3.82px;
	gap: var(--wp--preset--spacing--40);
	padding: 3rem 2rem;
	-webkit-mask:
		radial-gradient(var(--hb-bite-x) var(--hb-bite-y) at 50% 0, #0000 99%, #000) var(--hb-bite-offset) 0 / var(--hb-bite-pitch) 51% repeat-x,
		radial-gradient(var(--hb-bite-x) var(--hb-bite-y) at 50% 100%, #0000 99%, #000) var(--hb-bite-offset) 100% / var(--hb-bite-pitch) 51% repeat-x;
	mask:
		radial-gradient(var(--hb-bite-x) var(--hb-bite-y) at 50% 0, #0000 99%, #000) var(--hb-bite-offset) 0 / var(--hb-bite-pitch) 51% repeat-x,
		radial-gradient(var(--hb-bite-x) var(--hb-bite-y) at 50% 100%, #0000 99%, #000) var(--hb-bite-offset) 100% / var(--hb-bite-pitch) 51% repeat-x;
}

.wp-block-group.is-style-ticket > * {
	margin-block: 0;
}

.hb-ticket__icon img {
	display: block;
}

.hb-ticket__title.hb-ticket__title {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
}

.is-style-ticket .hb-ticket__title + .hb-ticket__text {
	margin-top: calc(-1 * var(--wp--preset--spacing--20));
}

.hb-ticket__text {
	letter-spacing: -0.04em;
	line-height: 1.3;
}

/* ------------------------------------------------------------- templates -- */

/* Clear the sticky header, which overlaps the top of <main>: the breadcrumb
 * sits 18px under the header card (Figma breadcrumb band, text at y 162). */
.wp-block-group.site-main {
	padding-top: calc(var(--hb-header-overlap) + 1.125rem);
}

.entry-header .entry-date {
	color: var(--hb-text-subtle);
	font-size: var(--wp--preset--font-size--medium);
}

.entry-header .wp-block-post-title {
	letter-spacing: -0.042em;
	line-height: 1;
}

/* Long-form text: a larger, airier serif than the marketing sections. */
.entry-content:not(.is-landing-content) {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

.entry-content:not(.is-landing-content) > :is(h2, h3, h4) {
	margin-top: var(--wp--preset--spacing--70);
}

.entry-content:not(.is-landing-content) > h2 {
	font-size: var(--wp--preset--font-size--headline-2);
	letter-spacing: -0.03em;
}

.entry-content:not(.is-landing-content) > h3 {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.entry-content:not(.is-landing-content) > :is(ul, ol) li + li {
	margin-top: var(--wp--preset--spacing--20);
}

.wp-block-group.post-navigation {
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--border);
}

/* --------------------------------------------------- checkout header & footer -- */

/* Not sticky, and nothing slides under it. */
.wp-site-blocks header.wp-block-template-part.site-header.site-header--checkout {
	position: relative;
	top: auto;
	margin: 0;
	pointer-events: auto;
}

.hb-header--checkout .hb-header__bar.hb-header__bar {
	margin-top: 0;
	padding-top: var(--wp--preset--spacing--50);
}

.hb-header--checkout .hb-header__card {
	min-height: 0;
	padding-block: var(--wp--preset--spacing--40);
}

/* Phones: a compact account button; on the narrowest ones the actions go
 * under the logo rather than out of the screen. */
@media (max-width: 599.98px) {
	.hb-header--checkout .hb-header__actions.hb-header__actions {
		gap: var(--wp--preset--spacing--20);
	}

	.hb-header--checkout .hb-header__login .wp-block-button__link {
		padding: calc(var(--wp--preset--spacing--10) - 1px) calc(var(--wp--preset--spacing--20) - 1px);
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.7143;
		white-space: nowrap;
	}
}

@media (max-width: 379.98px) {
	.hb-header--checkout .hb-header__card.hb-header__card {
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--30);
	}

	.hb-header--checkout .hb-header__actions.hb-header__actions {
		margin-inline-start: auto;
	}
}

.hb-header__actions .wp-block-buttons {
	margin: 0;
}

/* The language switcher on a white card. */
.hb-lang-nav--light .wp-block-navigation-item__content,
.hb-lang-nav--light .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--contrast);
}

.hb-lang-nav--light.hb-lang-nav--light .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
}

/* Checkout header (Figma 10650:20132): the language code and a 24px chevron,
 * no flag. The flag keeps its text alternative for screen readers. */
.hb-lang-nav--code .wp-block-navigation-item__label img {
	position: absolute;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden;
	clip-path: inset(50%);
}

.hb-lang-nav--code .wp-block-navigation-item__label {
	gap: 0;
}

.hb-lang-nav--code > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	gap: var(--wp--preset--spacing--20);
}

.hb-lang-nav--code .wp-block-navigation__submenu-icon {
	width: 1.5rem;
	height: 1.5rem;
	margin-inline-start: 0;
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask: url("../icons/arrow-down-s-line.svg") center / contain no-repeat;
	mask: url("../icons/arrow-down-s-line.svg") center / contain no-repeat;
}

.hb-lang-nav--code .wp-block-navigation__submenu-icon svg {
	visibility: hidden;
}

.hb-tunnel.hb-tunnel {
	gap: var(--wp--preset--spacing--70);
	margin-block: 0;
	padding: 5rem var(--hb-gutter);
}

.hb-tunnel.hb-tunnel > * {
	margin: 0;
}

.hb-tunnel__list.hb-tunnel__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
}

.hb-tunnel__list a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.hb-tunnel__list a:hover,
.hb-tunnel__list a:focus-visible {
	text-decoration: underline;
}

.hb-tunnel__trust.hb-tunnel__trust {
	gap: var(--wp--preset--spacing--40);
}

.hb-tunnel__line.hb-tunnel__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
}

.hb-tunnel__logo {
	display: block;
	width: auto;
	height: 1.5rem;
}

.hb-tunnel__line img[alt="o2switch"] {
	height: 0.9375rem;
}

/* Rating: score, review count and stars (Figma reviews 10521:28791). */
.hb-rating.hb-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	letter-spacing: -0.04em;
	line-height: 1.3;
}

.hb-rating strong {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.033em;
	line-height: 1;
}

.hb-rating::after {
	content: "";
	width: 8.25rem;
	height: 1.5rem;
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask:
		url("../icons/star-s-fill.svg") 0 0 / 1.5rem no-repeat,
		url("../icons/star-s-fill.svg") 1.625rem 0 / 1.5rem no-repeat,
		url("../icons/star-s-fill.svg") 3.25rem 0 / 1.5rem no-repeat,
		url("../icons/star-s-fill.svg") 4.875rem 0 / 1.5rem no-repeat,
		url("../icons/star-half-s-fill.svg") 6.5rem 0 / 1.5rem no-repeat;
	mask:
		url("../icons/star-s-fill.svg") 0 0 / 1.5rem no-repeat,
		url("../icons/star-s-fill.svg") 1.625rem 0 / 1.5rem no-repeat,
		url("../icons/star-s-fill.svg") 3.25rem 0 / 1.5rem no-repeat,
		url("../icons/star-s-fill.svg") 4.875rem 0 / 1.5rem no-repeat,
		url("../icons/star-half-s-fill.svg") 6.5rem 0 / 1.5rem no-repeat;
}

/* Partner logos (Figma works-with): shared by the works-with dome, the
 * lined row of the solution pages and the integration pills. */
.hb-works-with__logos.hb-works-with__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40) 2rem;
}

.hb-works-with__logos.hb-works-with__logos > * {
	margin: 0;
}

.hb-works-with__logos img {
	display: block;
	width: auto;
	height: 1.5rem;
}

.hb-works-with__logo--stripe img {
	height: 2.125rem;
}

.hb-works-with__logo--elementor img {
	height: 1.5rem;
}

.hb-logo-mailerpress.hb-logo-mailerpress {
	gap: 0.6rem;
	align-items: center;
}

.hb-logo-mailerpress__symbol img {
	height: 1.69rem;
}

.hb-logo-mailerpress__wordmark img {
	height: 1.15rem;
}