/*
 * The Event OS microsite: /event-operating-system and its
 * area pages. Loaded after conversion-pages.css under the same
 * `ticketing-home-design` body class, so every section, card, button and
 * heading is the /event-ticketing recipe. This file adds only what the
 * microsite has and the overview does not: the area navigation, the
 * benefit rows, the feature lists and the animated scenes.
 */

/* ---------------------------------------------------------------------------
 * Section menu (landing_page;microsite_section_nav): the microsite's own menu
 * under the header. On a phone or tablet it is one disclosure that names the
 * reader's page; from 1200px it is one row of pages, with More for the rest.
 * The menu, the hero and the sections share the content column, so they
 * share one left edge.
 * ------------------------------------------------------------------------ */
.eos-area-nav {
	position: relative;
	z-index: 20;
	margin: 0 0 clamp(24px, 4vw, 40px);
	text-align: left;
}

.eos-area-nav > .inner-wrapper,
.event-os-page main #hero.eos-hero > .inner-wrapper {
	max-width: 1110px;
	padding-inline: 24px;
	box-sizing: border-box;
}

.eos-area-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eos-area-nav a,
.eos-area-nav-more summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: var(--roundings-round, 999px);
	background: var(--colors-base-white-05, rgba(235, 235, 238, 0.05));
	color: rgba(235, 235, 238, 0.78);
	font: 500 14px/21px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	white-space: nowrap;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.eos-area-nav a:hover,
.eos-area-nav a:focus-visible,
.eos-area-nav summary:hover,
.eos-area-nav summary:focus-visible {
	border-color: var(--colors-base-white-20, rgba(235, 235, 238, 0.2));
	color: var(--fg-primary-rest, #ebebee);
}

.eos-area-nav a[aria-current],
.eos-area-nav-more summary.is-current {
	border-color: var(--colors-violet-300-12, rgba(196, 181, 255, 0.12));
	background: var(--colors-violet-300-12, rgba(196, 181, 255, 0.12));
	color: var(--fg-primary-rest, #ebebee);
}

/* A fixed box for each icon: the icon font arrives after the page, and a
   box that grew with its glyph would move the menu and everything below. */
.eos-area-nav i {
	display: inline-block;
	flex: 0 0 16px;
	width: 16px;
	color: var(--colors-violet-300, #c4b5ff);
	font-size: 13px;
	line-height: 1;
	text-align: center;
	text-wrap-style: balance;
}

.eos-area-nav summary {
	list-style: none;
	cursor: pointer;
}

.eos-area-nav summary::-webkit-details-marker {
	display: none;
}

.eos-area-nav-chevron {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin: -3px 2px 0 auto;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.eos-area-nav details[open] > summary .eos-area-nav-chevron {
	margin-top: 3px;
	transform: rotate(225deg);
}

/* Phone and tablet: one control that opens every page of the section. */
.eos-area-nav-menu > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 6px 18px;
	border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: var(--roundings-l, 16px);
	background: var(--colors-base-white-05, rgba(235, 235, 238, 0.05));
	color: var(--fg-primary-rest, #ebebee);
}

.eos-area-nav-menu-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.eos-area-nav-menu-label {
	color: var(--fg-tertiary-rest, #9f9cb0);
	font: 400 12px/16px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-area-nav-menu-current {
	overflow: hidden;
	font: 500 15px/20px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eos-area-nav-menu > ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px;
	margin-top: 8px;
}

.eos-area-nav-menu > ul a {
	min-height: 44px;
	border-radius: var(--roundings-12, 12px);
	white-space: normal;
}

.eos-area-nav-row {
	display: none;
}

@media (min-width: 1200px) {
	.eos-area-nav-menu {
		display: none;
	}

	.eos-area-nav ul.eos-area-nav-row {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
	}

	.eos-area-nav-row a,
	.eos-area-nav-more summary {
		min-height: 36px;
		padding: 0 14px;
		font-size: 13px;
	}

	/* Long labels, translated ones above all, shorten with an ellipsis
	   instead of pushing More past the end of the row. More never shrinks,
	   so the rest of the pages stay one click away. */
	.eos-area-nav-row > li {
		flex: 0 1 auto;
		min-width: 0;
	}

	.eos-area-nav-row > li.eos-area-nav-more-item {
		flex: none;
	}

	.eos-area-nav-row a {
		max-width: 100%;
	}

	.eos-area-nav-row .eos-area-nav-text {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.eos-area-nav-more summary .eos-area-nav-text {
		max-width: 18ch;
	}

	.eos-area-nav-more > ul .eos-area-nav-text {
		overflow: visible;
		white-space: normal;
	}

	.eos-area-nav-more {
		position: relative;
	}

	.eos-area-nav-more > ul {
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		display: grid;
		gap: 4px;
		min-width: 260px;
		max-height: min(70vh, 560px);
		overflow-y: auto;
		padding: 8px;
		border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
		border-radius: var(--roundings-l, 16px);
		background: var(--bg-surface-primary, #0b0a15);
		box-shadow: 0 4px 24px rgba(11, 10, 21, 0.8);
	}

	.eos-area-nav-more > ul a {
		border-color: transparent;
		border-radius: var(--roundings-12, 12px);
		background: transparent;
	}
}

/* ---------------------------------------------------------------------------
 * Hero: the overview hero grid with a scene or a capture in the media slot.
 * ------------------------------------------------------------------------ */
.eos-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}

.eos-hero-grid > * {
	min-width: 0;
}

@media (max-width: 960px) {
	.eos-hero-grid {
		grid-template-columns: 1fr;
	}
}

.eos-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	color: var(--fg-tertiary-rest, #9f9cb0);
	font: 400 14px/21px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-breadcrumb li,
.eos-breadcrumb a {
	display: inline-flex;
	align-items: center;
	margin: 0;
	font: 400 14px/21px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-breadcrumb a {
	color: rgba(235, 235, 238, 0.78);
	text-decoration: none;
}

.eos-breadcrumb a:hover {
	color: var(--fg-primary-rest, #ebebee);
}

.eos-breadcrumb li + li::before {
	content: "\203A";
	margin-right: 8px;
}

.eos-hero-outcomes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.eos-hero-outcomes li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: var(--roundings-round, 999px);
	background: var(--colors-base-white-05, rgba(235, 235, 238, 0.05));
	color: var(--fg-primary-rest, #ebebee);
	font: 500 14px/21px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-hero-outcomes i {
	color: var(--colors-violet-300, #c4b5ff);
}

/* ---------------------------------------------------------------------------
 * Product page and area heroes (.eos-hero-product): the heading, the lead,
 * one button and a text link beside a product capture of at least 560px on a
 * wide window. Below 1200px the 1062px column cannot hold both, so the
 * capture follows the actions at full width; on a phone it starts within the
 * first 700px. The three outcomes sit under the hero, not beside the heading.
 * ------------------------------------------------------------------------ */
@media (max-width: 1199px) {
	.eos-hero-product .eos-hero-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1200px) {
	.eos-hero-product .eos-hero-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		gap: 40px;
	}

	.ticketing-conversion-page #hero.eos-hero-product h1 {
		font-size: clamp(36px, 3.4vw, 48px);
	}
}

.eos-hero-product .button-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
}

.eos-hero-text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fg-primary-rest, #ebebee);
	font: 500 16px/24px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-decoration: none;
}

.eos-hero-text-link i {
	font-size: 13px;
	transition: transform 0.15s ease;
}

.eos-hero-text-link:hover,
.eos-hero-text-link:focus-visible {
	color: var(--colors-violet-300, #c4b5ff);
}

.eos-hero-text-link:hover i {
	transform: translateX(3px);
}

.eos-hero-product .eos-hero-outcomes {
	margin-top: clamp(28px, 4vw, 40px);
}

@media (max-width: 960px) {
	.ticketing-conversion-page #hero.eos-hero-product .button-row {
		margin-top: 20px;
	}

	.eos-hero-product .eos-hero-grid {
		gap: 28px;
	}
}

/* ---------------------------------------------------------------------------
 * Benefit rows: the outcome first, as a heading and a short paragraph with
 * the features that deliver it, beside the dashboard capture or scene that
 * shows it. Rows alternate sides on wide screens. The copy and the picture
 * both start at the top of the row, so a long text column never leaves a gap
 * above and below a short picture.
 * ------------------------------------------------------------------------ */
.eos-benefits {
	display: grid;
	gap: clamp(24px, 4vw, 40px);
}

.eos-benefit {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

.eos-benefit:nth-child(even) .eos-benefit-copy {
	order: 2;
}

.ticketing-conversion-page .eos-benefit-copy h2 {
	margin: 0 0 12px;
	color: var(--fg-primary-rest, #ebebee);
	font: 500 clamp(24px, 2.2vw, 32px)/1.25 var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-benefit-copy > p {
	margin: 0 0 20px;
	color: rgba(235, 235, 238, 0.8);
	font: 400 16px/24px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-benefit-kicker {
	display: block;
	margin-bottom: 12px;
	background: var(--gradient-button-outline);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font: 500 14px/21px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-feature-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eos-feature-list li {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	color: rgba(235, 235, 238, 0.8);
	font: 400 15px/23px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-feature-list li strong {
	color: var(--fg-primary-rest, #ebebee);
	font-weight: 500;
}

.eos-feature-list li > i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: 50%;
	background: var(--colors-base-white-05, rgba(235, 235, 238, 0.05));
	color: var(--colors-peach-300, #ffbfb5);
	font-size: 11px;
}

.eos-benefit-media {
	min-width: 0;
}

/* A section's further drawings stack under its capture or scene. */
.eos-benefit-media-more {
	margin-top: 32px;
}

@media (max-width: 880px) {
	.eos-benefit {
		grid-template-columns: 1fr;
	}

	.eos-benefit:nth-child(even) .eos-benefit-copy {
		order: 0;
	}
}

/* The page centres its text on a phone. A row's paragraphs and lists are
   long reading text, so they keep a left edge there. */
@media (max-width: 960px) {
	.eos-benefit-copy {
		text-align: left;
	}
}

/* ---------------------------------------------------------------------------
 * Area cards on the hub: the benefit an area delivers, what is in it, and a
 * link to its page. The home feature-card recipe, one level of containment.
 * ------------------------------------------------------------------------ */
.eos-area-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eos-area-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--roundings-xl, 24px);
	background: linear-gradient(180deg, rgba(235, 235, 238, 0.05), rgba(235, 235, 238, 0.01));
	box-shadow: 0 4px 24px rgba(11, 10, 21, 0.8);
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.eos-area-card:hover,
.eos-area-card:focus-within {
	border-color: var(--colors-base-white-20, rgba(235, 235, 238, 0.2));
}

/* The link sits on the card heading. Its ::after covers the card, so the
   whole card stays clickable. */
.eos-area-card h3 a {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.eos-area-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.eos-area-card h3 a:focus-visible {
	outline: none;
}

.eos-area-card:has(h3 a:focus-visible) {
	outline: 2px solid var(--colors-violet-300, #c4b5ff);
	outline-offset: 2px;
}

.eos-area-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 24px;
	border: 1px solid var(--colors-violet-300-12, rgba(196, 181, 255, 0.12));
	border-radius: 50%;
	background: var(--colors-base-white-05, rgba(235, 235, 238, 0.05));
	color: var(--fg-primary-rest, #ebebee);
	font-size: 20px;
}

.eos-area-card h3 {
	margin: 0 0 8px;
	color: var(--fg-primary-rest, #ebebee);
	font: 500 22px/30px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-area-card p {
	margin: 0 0 16px;
	color: rgba(235, 235, 238, 0.8);
	font: 400 16px/24px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-area-card ul {
	display: grid;
	gap: 6px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.eos-area-card ul li {
	position: relative;
	padding-left: 20px;
	color: var(--fg-tertiary-rest, #9f9cb0);
	font: 400 14px/21px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-area-card ul li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--colors-violet-300, #c4b5ff);
}

.eos-area-link {
	margin-top: auto;
	background: var(--gradient-button-outline);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font: 500 15px/22px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-area-link i {
	margin-left: 6px;
	color: var(--colors-violet-300, #c4b5ff);
	-webkit-text-fill-color: var(--colors-violet-300, #c4b5ff);
	font-size: 12px;
}

@media (max-width: 980px) {
	.eos-area-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.eos-area-grid {
		grid-template-columns: 1fr;
	}

	.eos-area-card {
		padding: 24px;
	}
}

/* ---------------------------------------------------------------------------
 * Feature cards: the full list for an area, each with the scene that shows
 * it where one exists. Same card recipe as the area cards.
 * ------------------------------------------------------------------------ */
.eos-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eos-card-grid--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eos-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--roundings-xl, 24px);
	background: linear-gradient(180deg, rgba(235, 235, 238, 0.05), rgba(235, 235, 238, 0.01));
	box-shadow: 0 4px 24px rgba(11, 10, 21, 0.8);
}

.eos-card .eos-area-icon {
	margin-bottom: 20px;
}

.eos-card h3 {
	margin: 0 0 8px;
	color: var(--fg-primary-rest, #ebebee);
	font: 500 20px/28px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-card p {
	margin: 0;
	color: rgba(235, 235, 238, 0.8);
	font: 400 15px/23px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

@media (max-width: 980px) {
	.eos-card-grid--three {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.eos-card-grid,
	.eos-card-grid--three {
		grid-template-columns: 1fr;
	}

	.eos-card {
		padding: 24px;
	}
}

/* ---------------------------------------------------------------------------
 * The dashboard captures a page shows together under its own heading.
 * ------------------------------------------------------------------------ */
.microsite-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.microsite-gallery figure {
	margin: 0;
}

.microsite-gallery .product-capture img {
	width: 100%;
	height: auto;
	border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: 14px;
}

.microsite-gallery figcaption {
	margin-top: 10px;
	color: var(--fg-tertiary-rest, #9f9cb0);
	font-size: 14px;
	line-height: 1.5;
}

/* A gallery ending on one capture centres it under the pair above. */
.microsite-gallery > :last-child:nth-child(odd):not(:only-child) {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc(50% - 12px);
}

.microsite-gallery:has(> :only-child) {
	grid-template-columns: minmax(0, 1fr);
}

/* Two captures need at least 300px each: 2 x 300px, the 24px gap and the
   page's 24px gutters on each side come to 672px. */
@media (max-width: 671px) {
	.microsite-gallery {
		grid-template-columns: 1fr;
	}

	.microsite-gallery > :last-child:nth-child(odd):not(:only-child) {
		width: auto;
	}
}

/* A capture keeps the overview's 16:10 frame and its fade. A wide capture
   is cropped at its sides, so the frame keeps the left edge, where a
   dashboard page starts, instead of the middle. */
.event-os-page main .product-capture img {
	object-position: left top;
}

/* A cropped capture (CaptureCrops) shows only the part of the dashboard page
   that reads in this frame: the image is scaled so the crop's width fills the
   frame, then pulled up and left so the crop's top-left corner sits at the
   frame's. Margins are a share of the frame's width, so the pull upwards also
   needs the capture's height over its width (--crop-ratio). The image is
   never shorter than the frame below the crop's top (100cqh), so a short,
   wide capture still fills the frame. */
.ticketing-conversion-page .product-capture.product-capture--cropped {
	container-type: size;
}

.ticketing-conversion-page .product-capture.product-capture--cropped img {
	--crop-scale: max(
		calc(100% / var(--crop-w, 1)),
		calc(100cqh / (var(--crop-ratio, 1) * (1 - var(--crop-y, 0))))
	);
	width: var(--crop-scale);
	max-width: none;
	height: auto;
	margin-top: calc(var(--crop-y, 0) * var(--crop-ratio, 1) * -1 * var(--crop-scale));
	margin-left: calc(var(--crop-x, 0) * -1 * var(--crop-scale));
	border: 0;
	border-radius: 0;
	object-fit: fill;
}

/* ---------------------------------------------------------------------------
 * Complete rows on a wide window. A grid of three never ends on one card
 * alone: the grid has six tracks and each card takes two. When the count
 * leaves one card over, the last four cards take half a row each; when it
 * leaves two, the last two do. A two-column list with an odd count of three
 * or more takes the same three-column layout.
 * ------------------------------------------------------------------------ */
@media (min-width: 981px) {
	:is(
		.eos-area-grid,
		.eos-card-grid--three,
		.eos-card-grid:has(> :nth-child(3)):has(> :last-child:nth-child(odd)),
		.eos-guide-grid:has(> :nth-child(3)):has(> :last-child:nth-child(odd))
	) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	:is(
		.eos-area-grid,
		.eos-card-grid--three,
		.eos-card-grid:has(> :nth-child(3)):has(> :last-child:nth-child(odd)),
		.eos-guide-grid:has(> :nth-child(3)):has(> :last-child:nth-child(odd))
	) > * {
		grid-column: span 2;
	}

	:is(
		.eos-area-grid,
		.eos-card-grid--three,
		.eos-card-grid:has(> :nth-child(3)):has(> :last-child:nth-child(odd)),
		.eos-guide-grid:has(> :nth-child(3)):has(> :last-child:nth-child(odd))
	):has(> :last-child:nth-child(3n + 4)) > :nth-last-child(-n + 4),
	:is(
		.eos-area-grid,
		.eos-card-grid--three,
		.eos-card-grid:has(> :nth-child(3)):has(> :last-child:nth-child(odd)),
		.eos-guide-grid:has(> :nth-child(3)):has(> :last-child:nth-child(odd))
	):has(> :last-child:nth-child(3n + 2)) > :nth-last-child(-n + 2) {
		grid-column: span 3;
	}
}

/* ---------------------------------------------------------------------------
 * The "one system" strip on the hub: the areas as chips joined by the flow
 * line, which shows the same record moving between them.
 * ------------------------------------------------------------------------ */
.eos-system-strip {
	margin: 0 auto;
	max-width: 1120px;
	text-align: center;
	text-wrap-style: balance;
}

.eos-system-points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.eos-system-points li {
	color: rgba(235, 235, 238, 0.8);
	font: 400 15px/23px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-system-points strong {
	display: block;
	margin-bottom: 6px;
	color: var(--fg-primary-rest, #ebebee);
	font: 500 18px/26px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

@media (max-width: 760px) {
	.eos-system-points {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * Next and previous area links at the foot of an area page.
 * ------------------------------------------------------------------------ */
.eos-pager {
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.eos-pager a {
	display: block;
	padding: 24px 28px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--roundings-xl, 24px);
	background: linear-gradient(180deg, rgba(235, 235, 238, 0.05), rgba(235, 235, 238, 0.01));
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.eos-pager a:hover,
.eos-pager a:focus-visible {
	border-color: var(--colors-base-white-20, rgba(235, 235, 238, 0.2));
}

.eos-pager a:last-child {
	text-align: right;
}

.eos-pager span {
	display: block;
	color: var(--fg-tertiary-rest, #9f9cb0);
	font: 400 14px/21px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-pager strong {
	color: var(--fg-primary-rest, #ebebee);
	font: 500 18px/26px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

@media (max-width: 600px) {
	.eos-pager {
		grid-template-columns: 1fr;
	}

	.eos-pager a:last-child {
		text-align: left;
	}
}

/* ---------------------------------------------------------------------------
 * Figures, quotes, guides and the small print.
 * ------------------------------------------------------------------------ */
.eos-stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.eos-stat-row li {
	display: flex;
	flex: 1 1 140px;
	flex-direction: column;
	gap: 2px;
	padding: 16px 20px;
	border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: var(--roundings-l, 16px);
	background: var(--colors-base-white-05, rgba(235, 235, 238, 0.05));
}

.eos-stat-row strong {
	background: var(--gradient-button-outline);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font: 500 clamp(24px, 2.4vw, 32px)/1.2 var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-stat-row span {
	color: var(--fg-tertiary-rest, #9f9cb0);
	font: 400 14px/21px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-stat-row--proof {
	max-width: 1120px;
	margin: 20px auto 0;
}

.eos-stat-row--proof strong {
	font-size: clamp(20px, 2vw, 24px);
}

.eos-quote-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.eos-quote {
	display: flex;
	flex-direction: column;
	padding: 32px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--roundings-xl, 24px);
	background: linear-gradient(180deg, rgba(235, 235, 238, 0.05), rgba(235, 235, 238, 0.01));
	box-shadow: 0 4px 24px rgba(11, 10, 21, 0.8);
}

.eos-quote--wide {
	grid-column: 1 / -1;
}

.eos-quote blockquote {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	color: var(--fg-primary-rest, #ebebee);
	font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-quote cite {
	margin: auto 0 0;
	color: var(--fg-tertiary-rest, #9f9cb0);
	font: normal 400 14px/21px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-quote cite strong {
	color: var(--fg-primary-rest, #ebebee);
	font-weight: 500;
}

.eos-quote cite a {
	color: var(--colors-violet-300, #c4b5ff);
}

.eos-quote .eos-stat-row {
	margin: 24px 0 0;
}

.eos-guide-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.eos-guide-grid a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 100%;
	padding: 18px 24px;
	border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: var(--roundings-l, 16px);
	background: var(--colors-base-white-05, rgba(235, 235, 238, 0.05));
	color: var(--fg-primary-rest, #ebebee);
	font: 500 16px/24px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.eos-guide-grid a:hover,
.eos-guide-grid a:focus-visible {
	border-color: var(--colors-base-white-20, rgba(235, 235, 238, 0.2));
}

.eos-guide-grid i,
.eos-benefit-more i {
	color: var(--colors-violet-300, #c4b5ff);
	font-size: 12px;
}

.eos-benefit-more {
	margin: 20px 0 0;
}

.eos-benefit-more a {
	color: var(--fg-primary-rest, #ebebee);
	font: 500 15px/22px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-decoration: none;
}

.eos-card .eos-benefit-more {
	margin-top: auto;
	padding-top: 16px;
}

.eos-disclaimer {
	max-width: 760px;
	margin: 32px auto 0;
	color: var(--fg-tertiary-rest, #9f9cb0);
	font: 400 12px/18px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-align: center;
	text-wrap-style: balance;
}

@media (max-width: 760px) {
	.eos-quote-grid,
	.eos-guide-grid {
		grid-template-columns: 1fr;
	}

	.eos-quote {
		padding: 24px;
	}
}

/* The page's base list styles space list items for long prose; these lists
   are short labels and keep their own rhythm. */
.eos-area-card ul li,
.eos-feature-list li,
.eos-hero-outcomes li,
.eos-stat-row li,
.eos-system-points li,
.eos-guide-grid li,
.eos-quote-grid > li,
.eos-card-grid > li,
.eos-area-grid > li,
.eos-area-nav li {
	margin: 0;
}

.eos-stat-row {
	align-items: stretch;
}

/* The overview's phone rules move its hero media first; a microsite hero
   reads headline first, with room between the heading, the lead and the
   actions. */
.ticketing-conversion-page #hero.eos-hero .hero-content {
	order: 0;
}

.ticketing-conversion-page #hero.eos-hero .eos-hero-media {
	order: 1;
}

.ticketing-conversion-page #hero.eos-hero .hero-platform-desc {
	margin-top: 20px;
}

.ticketing-conversion-page #hero.eos-hero .button-row {
	margin-top: 28px;
}

/* ---------------------------------------------------------------------------
 * Drawings (landing_page;event_os_scene and landing_page;event_os_concept):
 * small pieces of the product in motion, in the style of the /event-ticketing
 * referral network. Each drawing runs its own SVG timeline while it is on
 * the screen and pauses when it leaves; a reader who asked for less motion
 * sees its most complete moment, still. ticketing-conversion.js plays them
 * on the Event Operating System pages, and event-os.js on the Festival Pro
 * page.
 * ------------------------------------------------------------------------ */
.eos-art svg {
	display: block;
	width: 100%;
	height: auto;
}

.eos-art text {
	font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

/* The concept drawing sits under the copy it pictures; on an area card it
   takes the place of the icon, and on a platform card it sits at the foot. */
.eos-concept {
	max-width: 480px;
	margin: 24px 0 0;
}

.eos-area-card .eos-concept {
	max-width: none;
	margin: 0 0 20px;
}

/* A Festival Pro page feature card leads with its drawing. */
.seo-feature-card .eos-concept {
	margin: 0 0 18px;
}

/* The description takes the spare height, so the drawings in a row line up. */
.eos-card:has(> .eos-art) p {
	flex-grow: 1;
}

.eos-card .eos-art {
	margin: 20px 0 0;
}

.eos-hero-media .eos-art {
	max-width: 560px;
	margin: 0 auto;
}

.eos-system-strip .eos-art {
	max-width: 560px;
	margin: 12px auto 0;
}