/*
 * The Platform menu in the marketing pages' header
 * (templates/partials/landing_page;features_menu.php).
 */
header nav ul li.nav-features-menu { position: static; display: inline-flex; align-items: center; }
header nav ul li.nav-features-menu > a { padding-right: 4px; }
/* The menu entries are taller than a plain link, for the 44px button; every
   entry of the row centres on the same line, so the labels line up. */
@media (min-width: 961px) {
	header nav ul:has(> li.nav-features-menu) { align-items: center; }
	header nav ul:has(> li.nav-features-menu) > li > a { white-space: nowrap; }
}
.nav-features-toggle { background: none; border: 0; color: rgba(235, 235, 238, 0.78); min-width: 44px; min-height: 44px; padding: 0 14px 0 4px; cursor: pointer; font-size: 12px; line-height: 1; }
.nav-features-toggle:hover, .nav-features-toggle:focus-visible { color: var(--fg-primary-rest, #ebebee); }
.nav-features-chevron { display: inline-block; vertical-align: middle; transition: transform 0.2s ease; }
.nav-features-menu.is-open > .nav-features-toggle .nav-features-chevron { transform: rotate(180deg); }
.nav-features-panel {
	position: absolute; top: 100%; left: 50%; transform: translateX(calc(-50% + var(--nav-features-shift, 0px)));
	width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 96px); overflow-y: auto;
	background: var(--bg-surface-primary, #0B0A15); border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: var(--roundings-12, 12px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
	padding: 24px; text-align: left; white-space: normal; z-index: 600;
	visibility: hidden; opacity: 0; transition: opacity 0.15s ease, visibility 0s linear 0.25s;
}
.nav-features-menu.is-open .nav-features-panel {
	visibility: visible; opacity: 1; transition-delay: 0s;
}
/* A header that styles no links of its own (the home page's) still gets
   readable ones; a header that does keeps its own. */
:where(.nav-features-panel, .lp-features-panel) a { color: rgba(235, 235, 238, 0.78); text-decoration: none; }
:where(.nav-features-panel, .lp-features-panel) a:hover, :where(.nav-features-panel, .lp-features-panel) a:focus-visible { color: #ebebee; }
.nav-features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
.nav-features-grid--solutions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nav-features-grid--ticketing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-features-grid--solutions > div { grid-column: span 2; }
.nav-features-grid--solutions ul { columns: 2; column-gap: 24px; }
.nav-features-grid--solutions li { break-inside: avoid; }
.nav-features-heading { font-family: var(--font-family-inter-tight, "Inter Tight"), sans-serif; font-size: 12px; font-weight: 600; color: var(--fg-tertiary-rest, #9f9cb0); margin: 0 0 10px; }
header nav .nav-features-panel ul { display: block; margin: 0; padding: 0; }
header nav .nav-features-panel ul li { display: block; width: auto; margin: 0; text-align: left; }
header nav .nav-features-panel ul li a { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; font-size: 14px; line-height: 1.3; }
header nav .nav-features-panel ul li a i { width: 16px; flex: none; font-size: 12px; color: var(--colors-violet-300, #c4b5ff); }
header nav .nav-features-panel ul li a[aria-current="page"] { color: var(--fg-primary-rest, #ebebee); }
.nav-features-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1)); }
header nav .nav-features-foot a { padding: 0; font-size: 14px; }
.nav-features-foot span { color: var(--fg-tertiary-rest, #9f9cb0); font-size: 13px; margin-left: 6px; }
/* The menu: the platform overview, then one section for each part of the
   platform. In a phone menu each section opens under its own button. */
.nav-platform-overview {
	display: block; margin: 0 0 8px; padding: 14px 16px; border: 1px solid rgba(196, 181, 255, 0.22); border-radius: 12px;
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.2), rgba(255, 92, 170, 0.08)); text-decoration: none;
}
.nav-platform-overview strong { display: block; color: #ebebee; font-size: 15px; font-weight: 600; line-height: 1.3; }
.nav-platform-overview > span { display: block; margin-top: 2px; color: rgba(235, 235, 238, 0.72); font-size: 13px; line-height: 1.4; }
.nav-platform-overview:hover, .nav-platform-overview:focus-visible { border-color: rgba(196, 181, 255, 0.5); }
.nav-platform-tab {
	display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0; padding: 10px 12px;
	border: 0; border-radius: 10px; background: none; color: rgba(235, 235, 238, 0.78); font: inherit; text-align: left; cursor: pointer;
}
.nav-platform-tab > i {
	display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px;
	border-radius: 8px; background: rgba(235, 235, 238, 0.06); color: var(--colors-violet-300, #c4b5ff); font-size: 14px;
}
.nav-platform-tab > span { flex: 1; min-width: 0; }
.nav-platform-tab strong { display: block; color: #ebebee; font-size: 14px; font-weight: 600; line-height: 1.3; }
.nav-platform-tab small { display: block; margin-top: 2px; color: rgba(235, 235, 238, 0.6); font-size: 12px; line-height: 1.35; }
.nav-platform-tab:hover { background: rgba(235, 235, 238, 0.05); }
.nav-platform-tab:focus-visible { outline: 2px solid var(--colors-violet-300, #c4b5ff); outline-offset: 2px; }
.nav-platform-tab[aria-expanded="true"] { background: rgba(124, 92, 255, 0.16); }
.nav-platform-tab[aria-expanded="true"] .nav-features-chevron { transform: rotate(180deg); }
.nav-platform-pane { padding: 8px 4px 16px 56px; }
.nav-platform-pane[hidden] { display: none; }
/* An open section starts with the link to its own page, in the overview
   card's style, so the section reads as a page and not only as a list. */
.nav-platform .nav-platform-lead {
	display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 16px; padding: 10px 16px;
	box-sizing: border-box; border: 1px solid rgba(196, 181, 255, 0.22); border-radius: 10px;
	background: linear-gradient(135deg, rgba(124, 92, 255, 0.2), rgba(255, 92, 170, 0.08));
	color: #ebebee; font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none;
}
.nav-platform .nav-platform-lead span { color: var(--colors-violet-300, #c4b5ff); }
.nav-platform .nav-platform-lead:hover, .nav-platform .nav-platform-lead:focus-visible { border-color: rgba(196, 181, 255, 0.5); color: #ebebee; }
/* On a wide window the sections are tabs down the left, and the open
   section fills the right. The empty row under the tabs takes any height
   the open section needs, so the tabs stay together. */
@media (min-width: 961px) {
	.nav-platform {
		display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: repeat(5, auto) 1fr auto;
		column-gap: 32px; align-items: start;
	}
	.nav-platform-overview { grid-column: 1; grid-row: 1; margin-bottom: 12px; }
	.nav-platform-tab { grid-column: 1; }
	.nav-platform-tab:nth-of-type(1) { grid-row: 2; }
	.nav-platform-tab:nth-of-type(2) { grid-row: 3; }
	.nav-platform-tab:nth-of-type(3) { grid-row: 4; }
	.nav-platform-tab:nth-of-type(4) { grid-row: 5; }
	.nav-platform-tab .nav-features-chevron { transform: rotate(-90deg); opacity: 0; }
	.nav-platform-tab[aria-expanded="true"] .nav-features-chevron { transform: rotate(-90deg); opacity: 1; color: var(--colors-violet-300, #c4b5ff); }
	.nav-platform-pane { grid-column: 2; grid-row: 1 / 7; padding: 4px 0 0; }
	.nav-platform .nav-features-foot { grid-column: 1 / -1; grid-row: 7; }
}
/* The bar (`.lp-header` pages): buttons in the header row, and one panel
   fixed under the header, outside it, because the header clips. */
.lp-features-toggle { gap: 6px; }
.lp-features-toggle .nav-features-chevron { stroke: var(--accent-violet, #c4b5ff); }
.lp-features-toggle[aria-expanded="true"] .nav-features-chevron { transform: rotate(180deg); }
.lp-features-panel {
	position: fixed; top: 74px; left: 0; right: 0; z-index: 49; max-height: calc(100vh - 64px); overflow-y: auto;
	padding: 24px 0 28px; text-align: left; background: rgba(11, 10, 21, 0.97);
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lp-features-panel ul { list-style: none; margin: 0; padding: 0; }
.lp-features-panel li a { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; font-size: 14px; line-height: 1.3; }
.lp-features-panel li a i { width: 16px; flex: none; font-size: 12px; color: var(--colors-violet-300, #c4b5ff); }
.lp-features-panel .nav-features-foot a { font-size: 14px; }
/* On a phone the row keeps the logo, the menu button and the primary action.
   The demo button gives way, as it already does on most of these pages, and
   is repeated in the page itself; below 561px the logo keeps only its mark. */
@media only screen and (max-width: 900px) {
	body .lp-header .header-actions .lp-features-toggle { display: inline-flex; }
}
@media only screen and (max-width: 768px) {
	body .lp-header .header-actions:has(.lp-features-toggle) .header-demo.open-modal { display: none; }
}
@media only screen and (max-width: 560px) {
	body .lp-header .container:has(.lp-features-toggle) .logo img { width: 36px; height: 24px; object-fit: cover; object-position: 0 50%; }
	body .lp-header .header-actions .lp-features-toggle { gap: 4px; padding: 0 10px; }
}
/* The narrowest phones keep the word, which says what the button opens. */
@media only screen and (max-width: 360px) {
	body .lp-header .header-actions .lp-features-toggle .nav-features-chevron { display: none; }
}
@media (min-width: 961px) and (max-width: 1180px) {
	.nav-platform { grid-template-columns: 240px minmax(0, 1fr); column-gap: 24px; }
	.nav-features-grid--solutions > div { grid-column: span 4; }
}
/* The open phone menu lists Pricing too. The header bar hides it below
   769px to save room; the open menu has the room. */
body.showMobileMenu header nav ul li.nav-pricing-link { display: block; }
@media only screen and (max-width: 960px) {
	header nav ul li.nav-features-menu { display: flex; flex-wrap: wrap; justify-content: center; }
	.nav-features-panel {
		position: static; transform: none; width: 100%; max-height: none; display: none; visibility: visible; opacity: 1;
		box-shadow: none; border-radius: 0; border-width: 1px 0; margin-top: 8px; padding: 16px;
	}
	.nav-features-menu.is-open .nav-features-panel { display: block; }
	.nav-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* The open phone menu covers the page and scrolls on its own, so the links
	   below an expanded menu stay reachable. The same rule as contact-us-v6,
	   for the headers whose stylesheet does not carry it. */
	body.showMobileMenu header nav {
		position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100vh; height: 100dvh;
		min-height: 0; margin-top: 0; overflow-y: auto; overscroll-behavior: contain;
	}
}
/* The home page's header keeps its row of entries from 768px, and opens
   every menu under that row, so the panel floats there as on a desktop. */
@media only screen and (min-width: 768px) and (max-width: 960px) {
	header nav:not(.mobile-nav) .mobile-menu-content li.nav-features-menu { display: inline-flex; flex-wrap: nowrap; }
	header nav:not(.mobile-nav) .mobile-menu-content .nav-features-panel {
		position: absolute; transform: translateX(calc(-50% + var(--nav-features-shift, 0px)));
		width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 96px); display: block;
		visibility: hidden; opacity: 0; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
		border-radius: var(--roundings-12, 12px); border-width: 1px; margin-top: 0; padding: 24px;
	}
	header nav:not(.mobile-nav) .mobile-menu-content .nav-features-menu.is-open .nav-features-panel { visibility: visible; opacity: 1; }
}
/* The blog's phone menu is a list at every width it shows at. */
header .mobile-nav li.nav-features-menu {
	display: flex; flex-wrap: wrap; justify-content: space-between;
	border-bottom: 1px solid var(--colors-base-white-05, rgba(235, 235, 238, 0.05));
}
header .mobile-nav li.nav-features-menu > a {
	flex: 1; padding: 14px 0; text-align: left; color: var(--fg-primary-rest, #ebebee); font-size: 15px; font-weight: 600;
}
header .mobile-nav .nav-features-toggle { padding: 0 0 0 14px; text-align: right; }
header .mobile-nav .nav-features-grid, header .mobile-nav .nav-features-grid--solutions { grid-template-columns: 1fr; }
header .mobile-nav .nav-features-grid--solutions > div { grid-column: auto; }
header .mobile-nav .nav-features-grid--solutions ul { columns: 1; }
header .mobile-nav .nav-features-panel {
	position: static; transform: none; width: 100%; max-height: none; display: none; visibility: visible; opacity: 1;
	box-shadow: none; border-radius: 0; border-width: 1px 0; margin-top: 8px; padding: 16px;
}
header .mobile-nav .nav-features-menu.is-open .nav-features-panel { display: block; }
/* Below 768px the home page's header is a list with each chevron at its edge. */
@media only screen and (max-width: 767px) {
	header .mobile-menu-content li.nav-features-menu { flex-wrap: wrap; justify-content: space-between; }
	header .mobile-menu-content li.nav-features-menu > a { flex: 1; width: auto; }
	header .mobile-menu-content li.nav-features-menu .nav-features-toggle { padding: 0 0 0 14px; text-align: right; }
}
@media only screen and (max-width: 560px) {
	.nav-features-grid, .nav-features-grid--solutions { grid-template-columns: 1fr; }
	.nav-features-grid--solutions > div { grid-column: auto; }
	.nav-features-grid--solutions ul { columns: 1; }
}
@media (prefers-reduced-motion: reduce) { .nav-features-panel, .nav-features-chevron { transition: none; } }