/*
 * 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);
	}
}

.ticketing-conversion-page #hero.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,
.eos-benefit-copy > .eos-section-more > 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);
}

/* A section's lead: the first sentence of its opening paragraph, at the size
   of /platform's introductions (.platform-hero-intro), in primary ink. The
   rest of the paragraph opens under the section's disclosure (SectionLead).
   A percentage in it takes the highlight colour. */
.eos-benefit-copy > .eos-benefit-lead {
	margin: 0 0 16px;
	color: var(--fg-primary-rest, #ebebee);
	font: 400 clamp(17px, 1.5vw, 20px)/1.55 var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

/* On the Event Operating System hub and areas the stat tiles and feature
   list follow the disclosure, so an open "How it works" keeps a gap above
   them. */
.eos-benefit-copy > .eos-section-more[open] + :is(.eos-stat-row, .eos-feature-list) {
	margin-top: 16px;
}

.eos-benefit-copy > .eos-benefit-lead .highlight-stat {
	color: var(--colors-violet-300, #c4b5ff);
	font-weight: 600;
}

.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);
}

/* A worked example's lead in primary ink, and the rest of its story under
   it in the card's quieter ink (topic_use_cases, SectionLead). A percentage
   in the lead takes the highlight colour. */
.eos-card > .eos-card-lead {
	color: var(--fg-primary-rest, #ebebee);
	font-size: 16px;
	line-height: 24px;
}

.eos-card > .eos-card-lead .highlight-stat {
	color: var(--colors-violet-300, #c4b5ff);
	font-weight: 600;
}

.eos-card > .eos-card-rest {
	margin-top: 8px;
	color: var(--fg-tertiary-rest, #9f9cb0);
}

/* On a card with a drawing, only the story's last paragraph grows, so the
   lead and the rest stay together above the drawing. */
.eos-card:has(> .eos-art) > .eos-card-lead:has(+ .eos-card-rest) {
	flex-grow: 0;
}

@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. The overview sets the content's order with !important. */
.ticketing-conversion-page #hero.eos-hero .hero-content {
	order: 0 !important;
}

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

/* The line under the heading (EventOsMicrosite 'pillar'): larger than the
   lead and in primary ink, as on /platform (.platform-hero-pillar). The lead
   follows it closely. */
.ticketing-conversion-page #hero.eos-hero .eos-hero-pillar {
	margin: 20px 0 0;
	text-wrap-style: balance;
	color: var(--fg-primary-rest, #ebebee);
	font: 500 clamp(19px, 1.7vw, 22px)/1.4 var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

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

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

/* On an area or topic page the pillar follows the introduction, at the
   introduction's size in primary ink, as the line the work adds up to. */
.ticketing-conversion-page #hero.eos-hero .hero-platform-desc + .eos-hero-pillar--after {
	margin-top: 12px;
	font-size: clamp(16px, 1.5vw, 20px);
	font-weight: 600;
}

.ticketing-conversion-page #hero.eos-hero .hero-platform-desc:has(+ .eos-hero-pillar--after) {
	margin-bottom: 0;
}

.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;
}

/* The name of the feature or area above the hero heading. The heading states
   an outcome, so this label tells a reader who arrives from a link which page
   they are on. */
.eos-page-name {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	width: fit-content;
	gap: 8px;
	margin: 0 0 16px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--colors-violet-300-12, rgba(196, 181, 255, 0.12));
	color: var(--fg-primary-rest, #ebebee);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

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

/* ---------------------------------------------------------------------------
 * The proof strip under a /features page's or topic's hero
 * (landing_page;microsite_proof): /platform's lead figures, in its gradient,
 * smaller, with a hairline between them.
 * ------------------------------------------------------------------------ */
.microsite-proof {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 1062px;
	margin: 28px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	list-style: none;
}

.microsite-proof li {
	margin: 0;
	padding: 4px 16px;
}

.microsite-proof li:first-child {
	padding-left: 0;
}

.microsite-proof li + li {
	border-left: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
}

.microsite-proof strong {
	display: block;
	background: var(--home-tag-gradient, linear-gradient(138.91deg, #ffbfb5 22%, #c4b5ff 56%, #b5bfff 85%));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font: 500 clamp(26px, 3vw, 36px)/1.15 var(--font-family-inter-tight, "Inter Tight", sans-serif);
	font-variant-numeric: tabular-nums;
	/* The gradient paints only inside this box: the bottom padding keeps the tails of g, j, p, q and y inside it, and the margin takes it back so nothing moves. */
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}

.microsite-proof span {
	display: block;
	margin-top: 4px;
	color: var(--fg-secondary-rest, rgba(235, 235, 238, 0.78));
	font: 400 14px/20px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-wrap: balance;
}

@media (max-width: 600px) {
	.microsite-proof {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 16px;
	}

	.microsite-proof li,
	.microsite-proof li:first-child {
		padding: 4px 12px 4px 0;
	}

	.microsite-proof li + li {
		border-left: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Folds on /features pages and topics: "How it works" under each section's
 * first paragraph (.eos-section-more) and "Show all" under the first six
 * feature cards (.eos-cards-more). The words stay in the page and its
 * Markdown; the summary reads as a text link with a plus that turns to a
 * minus when open.
 * ------------------------------------------------------------------------ */
.eos-section-more,
.eos-cards-more {
	margin: 16px 0 0;
}

.eos-section-more > summary,
.eos-cards-more > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	color: var(--colors-violet-300, #c4b5ff);
	font: 500 15px/22px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	list-style: none;
	cursor: pointer;
}

.eos-section-more > summary::-webkit-details-marker,
.eos-cards-more > summary::-webkit-details-marker {
	display: none;
}

.eos-section-more > summary::after,
.eos-cards-more > summary::after {
	content: "+";
	font-size: 18px;
	line-height: 1;
}

.eos-section-more[open] > summary::after,
.eos-cards-more[open] > summary::after {
	content: "\2212";
}

.eos-section-more > summary:focus-visible,
.eos-cards-more > summary:focus-visible {
	outline: 2px solid var(--colors-violet-300, #c4b5ff);
	outline-offset: 2px;
	border-radius: 6px;
}

.eos-benefit-copy > .eos-section-more > p {
	margin: 8px 0 0;
	/* The page's paragraph rhythm, which the first paragraph takes from the
	   shared landing-page styles. */
	line-height: 1.65;
}

.eos-section-more > .eos-feature-list {
	margin-top: 12px;
}

.eos-cards-more {
	margin-top: 20px;
	text-align: center;
}

.eos-cards-more[open] > .eos-card-grid {
	margin-top: 20px;
	text-align: left;
}

/* ---------------------------------------------------------------------------
 * Event Operating System pages only (.eos-microsite): the reassurance under
 * the hero's buttons, the row of area links under the overview's hero, and
 * one alignment for the hero below 1200px. Topic folds use /features'
 * .eos-section-more.
 * ------------------------------------------------------------------------ */
.eos-microsite .eos-hero-assurance {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.eos-microsite .eos-hero-assurance li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--fg-secondary-rest, #b4b4bd);
	font: 400 14px/20px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-microsite .eos-hero-assurance i {
	color: var(--colors-violet-300, #c4b5ff);
	font-size: 13px;
}

.eos-area-index {
	margin: 0 0 48px;
}

.eos-area-index ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.eos-area-index li {
	margin: 0;
}

.eos-area-index a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid rgba(196, 181, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--fg-primary-rest, #ebebee);
	font: 500 15px/20px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.eos-area-index a i {
	color: var(--colors-violet-300, #c4b5ff);
	font-size: 13px;
}

.eos-area-index a:hover,
.eos-area-index a:focus-visible {
	border-color: rgba(196, 181, 255, 0.6);
	background: rgba(196, 181, 255, 0.1);
}

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

@media (max-width: 1199px) {
	.eos-microsite #hero.eos-hero .button-row {
		justify-content: flex-start;
	}
}

/* The section menu above names the page on a phone and a tablet. */
@media (max-width: 880px) {
	.eos-microsite .eos-page-name {
		display: none;
	}

	.eos-area-index {
		margin-bottom: 32px;
	}

	.eos-area-index a {
		min-height: 36px;
		padding: 6px 12px;
		font-size: 14px;
	}
}

.eos-microsite .eos-hero-assurance i {
	width: 16px;
	text-align: center;
}

@media (max-width: 600px) {
	/* The stacked hero link lines up with the heading and the list under it. */
	.eos-microsite #hero .eos-hero-text-link {
		align-self: flex-start;
	}
}

/* The overview's area links: every area from 601px; on a phone the first six
   and the rest under "See all", so the row stays short. */
.eos-area-index .eos-area-index-phone {
	display: none;
}

.eos-area-index .eos-area-index-phone .eos-cards-more {
	margin-top: 12px;
	text-align: center;
}

.eos-area-index .eos-area-index-phone .eos-cards-more[open] > ul {
	margin-top: 12px;
}

@media (max-width: 600px) {
	.eos-area-index .eos-area-index-all {
		display: none;
	}

	.eos-area-index .eos-area-index-phone {
		display: block;
	}
}

/* ===========================================================================
 * The microsite in /platform's design (body.platform-overview-page with
 * platform.css): the lit section headings and cards come from platform.css;
 * these rules lay out what only this microsite has.
 * ======================================================================== */

/* ---- The overview's hero: centred like /platform's and /compare's ------- */
.eos-microsite #hero.eos-hero--hub > .inner-wrapper {
	max-width: 1180px;
	text-align: center;
}

.eos-hub-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 900px;
	margin: 0 auto;
}

.eos-microsite #hero.eos-hero--hub .eos-page-name {
	align-self: center;
	margin: 0 0 22px;
}

.ticketing-conversion-page #hero.eos-hero--hub h1 {
	max-width: 18ch;
	margin: 0 auto;
	font-size: clamp(36px, 5.4vw, 68px);
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.ticketing-conversion-page #hero.eos-hero--hub .eos-hero-pillar {
	margin: 24px auto 0;
	max-width: 40ch;
	font-size: clamp(19px, 1.8vw, 24px);
}

.ticketing-conversion-page #hero.eos-hero--hub .hero-platform-desc {
	max-width: 58ch;
	margin: 12px auto 0;
	text-wrap: balance;
}

.eos-microsite #hero.eos-hero--hub .button-row {
	justify-content: center;
	margin-top: 32px;
}

.eos-microsite #hero.eos-hero--hub .eos-hero-assurance {
	justify-content: center;
	margin-top: 22px;
}

/* The festival site stands wide under the words, on a pool of light. */
.eos-hub-hero-stage {
	position: relative;
	max-width: 1040px;
	margin: clamp(32px, 5vw, 56px) auto 0;
}

.eos-hub-hero-stage::after {
	content: '';
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: -30px;
	z-index: -1;
	height: 120px;
	background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(124, 92, 255, 0.4), rgba(255, 143, 199, 0.1) 50%, transparent 72%);
	filter: blur(22px);
	pointer-events: none;
}

.eos-hub-hero-stage .platform-topic-drawing--canvas .platform-drawing {
	height: clamp(300px, 36vw, 440px);
}

.eos-microsite #hero.eos-hero--hub .eos-hero-outcomes {
	justify-content: center;
	margin-top: clamp(24px, 3vw, 36px);
}

@media (max-width: 880px) {
	.eos-microsite #hero.eos-hero--hub .eos-page-name {
		display: inline-flex;
	}

	.eos-microsite #hero.eos-hero--hub .button-row {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.eos-microsite #hero.eos-hero--hub .eos-hero-text-link {
		align-self: center;
	}

	.eos-microsite #hero.eos-hero--hub .eos-hero-assurance {
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
		margin-inline: auto;
		text-align: left;
	}

	.eos-hub-hero-stage .platform-topic-drawing--canvas .platform-drawing {
		height: 300px;
	}

	.eos-microsite #hero.eos-hero--hub .eos-hero-outcomes {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ---- Area and topic heroes: the product in a window on a pool of light -- */
.eos-microsite .eos-hero-product .eos-hero-media {
	position: relative;
}

.eos-microsite .eos-hero-product .eos-hero-media::after {
	content: '';
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: -48px;
	z-index: -1;
	height: 110px;
	background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(124, 92, 255, 0.42), rgba(255, 143, 199, 0.12) 50%, transparent 72%);
	filter: blur(20px);
	pointer-events: none;
}

.eos-topic-crumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.eos-topic-crumb:hover,
.eos-topic-crumb:focus-visible {
	border-color: rgba(196, 181, 255, 0.55);
}

.eos-topic-crumb .fa-arrow-left {
	font-size: 11px;
	opacity: 0.7;
}

/* ---- A dashboard capture as a window of the product ------------------- */
.eos-window {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: var(--roundings-l, 16px);
	background: #12111c;
	box-shadow: 0 40px 90px -30px rgba(5, 4, 12, 0.85), 0 0 0 1px rgba(196, 181, 255, 0.04);
}

.eos-window::before {
	content: '';
	position: absolute;
	inset: 0 12% auto;
	z-index: 2;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	pointer-events: none;
}

.eos-window .platform-journey-bar em {
	margin-right: 52px;
}

.event-os-page main .eos-window .product-capture,
.event-os-page main .eos-window .product-capture img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ---- Section rows: one picture each, and a steady rhythm -------------- */
.eos-microsite .eos-benefits {
	gap: clamp(56px, 8vw, 112px);
}

.eos-microsite .eos-benefit {
	align-items: center;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(28px, 5vw, 72px);
}

.eos-microsite .eos-benefit-copy h2 {
	text-wrap: balance;
}

.eos-microsite .eos-benefit-media {
	position: relative;
}

.eos-microsite .eos-benefit-media::after {
	content: '';
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -36px;
	z-index: -1;
	height: 90px;
	background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(124, 92, 255, 0.3), transparent 72%);
	filter: blur(18px);
	pointer-events: none;
}

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

/* ---- Cards headed by a vignette: the overview's areas, the one system,
        the ticketing, an area's topics and a topic's related topics ------- */
.eos-tile-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eos-tile-grid--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.eos-cards-more > .eos-tile-grid {
	margin-top: 20px;
}

.eos-tile {
	margin: 0;
	padding: 12px;
	text-align: left;
}

.eos-tile .platform-vignette-frame {
	--vignette-h: 168px;
}

.eos-tile-copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 18px 12px 10px;
}

.ticketing-conversion-page .eos-tile h3 {
	margin: 0 0 8px;
	color: var(--fg-primary-rest, #ebebee);
	font: 500 20px/1.3 var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-wrap: balance;
}

.eos-tile h3 a {
	color: inherit;
	text-decoration: none;
}

/* The whole card opens its page; the heading's link carries the name. */
.eos-tile--link h3 a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

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

.ticketing-conversion-page .eos-tile-copy > p {
	margin: 0 0 14px;
	color: rgba(235, 235, 238, 0.74);
	font: 400 15px/23px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-tile-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px !important;
	color: var(--colors-violet-300, #c4b5ff) !important;
	font: 600 13.5px/18px var(--font-family-inter-tight, "Inter Tight", sans-serif) !important;
}

.eos-tile-kicker i {
	font-size: 12px;
}

.eos-tile-ticks {
	display: grid;
	gap: 6px;
	margin: auto 0 0;
	padding: 14px 0 0;
	border-top: 1px solid rgba(235, 235, 238, 0.07);
	list-style: none;
}

.eos-tile-ticks li {
	position: relative;
	margin: 0;
	padding-left: 22px;
	color: rgba(235, 235, 238, 0.82);
	font: 400 14px/20px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-tile-ticks li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	color: var(--colors-peach-300, #ffbfb5);
	font-weight: 600;
}

.eos-tile-arrow {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(235, 235, 238, 0.12);
	border-radius: 50%;
	background: rgba(11, 10, 21, 0.6);
	color: var(--fg-primary-rest, #ebebee);
	font-size: 12px;
	transition: transform 0.2s ease, background 0.2s ease;
}

.eos-tile--link:hover .eos-tile-arrow {
	transform: translateX(3px);
	background: rgba(196, 181, 255, 0.18);
}

.eos-tile .eos-benefit-more {
	margin: auto 0 0;
}

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

/* On a phone a card that leads to a page stands its scene beside its
   heading, so the list of areas or topics reads as a list. */
@media (max-width: 640px) {
	.eos-tile-grid,
	.eos-tile-grid--two {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.eos-tile .platform-vignette-frame {
		--vignette-h: 150px;
	}

	.eos-tile-grid > .eos-tile--link {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		align-items: start;
		gap: 4px;
	}

	.eos-tile--link .platform-vignette-frame {
		--vignette-h: 104px;
		padding: 4px;
	}

	.eos-tile--link .eos-tile-copy {
		padding: 2px 8px 6px 10px;
	}

	.ticketing-conversion-page .eos-tile--link h3 {
		font-size: 17px;
	}

	.eos-tile--link .eos-tile-ticks,
	.eos-tile--link .eos-tile-arrow {
		display: none;
	}

	.ticketing-conversion-page .eos-tile--link .eos-tile-copy > p {
		margin: 0;
		font-size: 14px;
		line-height: 21px;
	}
}

/* ---- Proof: one organiser's results and the platform's -------------- */
.eos-proof {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 20px;
	max-width: 1062px;
	margin: 0 auto;
}

.eos-proof-case {
	margin: 0;
	padding: 32px 28px 24px;
}

.eos-microsite .eos-proof-figures {
	margin: 0;
}

.eos-proof-case figcaption {
	margin-top: 22px;
	color: rgba(235, 235, 238, 0.7);
	font: 400 14px/20px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-align: center;
}

.eos-proof-case figcaption strong {
	color: var(--fg-primary-rest, #ebebee);
	font-weight: 600;
}

.eos-proof-facts {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eos-proof-facts li {
	justify-content: center;
	margin: 0;
	padding: 24px 26px;
}

.eos-proof-facts strong {
	display: block;
	margin-bottom: 6px;
	background: linear-gradient(100deg, #ffbfb5, #c4b5ff 60%, #b5bfff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font: 600 24px/1.25 var(--font-family-inter-tight, "Inter Tight", sans-serif);
	/* The gradient paints only inside this box: the padding keeps the tails of g, j, p, q and y in it, and the margin takes it back. */
	padding-bottom: 0.12em;
	margin-bottom: calc(6px - 0.12em);
}

.eos-proof-facts span {
	color: rgba(235, 235, 238, 0.74);
	font: 400 15px/22px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

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

/* ---- An area's full feature list: a compact sheet, not a wall of cards -- */
.eos-feature-sheet {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 40px;
	max-width: 1062px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.eos-feature-sheet li {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 14px;
	align-content: start;
	margin: 0;
	padding: 22px 0;
	border-top: 1px solid rgba(235, 235, 238, 0.08);
	text-align: left;
}

.eos-feature-sheet .eos-area-icon {
	width: 36px;
	height: 36px;
	margin: 0;
	font-size: 14px;
}

.ticketing-conversion-page .eos-feature-sheet h3 {
	margin: 4px 0 6px;
	color: var(--fg-primary-rest, #ebebee);
	font: 500 17px/1.35 var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.ticketing-conversion-page .eos-feature-sheet p {
	margin: 0;
	color: rgba(235, 235, 238, 0.72);
	font: 400 14.5px/22px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.eos-feature-sheet .eos-benefit-more {
	margin-top: 8px;
}

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

@media (max-width: 640px) {
	.eos-feature-sheet {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- The way on: the area's pager and a topic's way back -------------- */
.eos-microsite .eos-pager a {
	transition: border-color 0.2s ease, background 0.2s ease;
}

.eos-microsite .eos-pager a:hover {
	border-color: rgba(196, 181, 255, 0.4);
	background: rgba(196, 181, 255, 0.06);
}

/* ---- Daylight ---------------------------------------------------------- */
html.platform-light .eos-window {
	border-color: rgba(28, 25, 23, 0.1);
	background: #fff;
	box-shadow: 0 30px 70px -34px rgba(60, 40, 20, 0.35);
}

html.platform-light .eos-window::before {
	display: none;
}

html.platform-light .eos-microsite :is(.eos-hub-hero-stage, .eos-hero-product .eos-hero-media, .eos-benefit-media)::after {
	opacity: 0.35;
}

html.platform-light .eos-tile-arrow {
	border-color: rgba(28, 25, 23, 0.12);
	background: #fff;
	color: var(--t-ink, #1c1917);
}

html.platform-light .ticketing-conversion-page .eos-tile h3,
html.platform-light .ticketing-conversion-page .eos-feature-sheet h3 {
	color: var(--t-ink, #1c1917);
}

html.platform-light .ticketing-conversion-page :is(.eos-tile-copy > p, .eos-feature-sheet p),
html.platform-light :is(.eos-tile-ticks li, .eos-proof-facts span, .eos-proof-case figcaption) {
	color: var(--t-ink-2, #57534e);
}

html.platform-light .eos-tile-ticks,
html.platform-light .eos-feature-sheet li {
	border-color: rgba(28, 25, 23, 0.08);
}

html.platform-light .eos-tile-kicker {
	color: var(--t-accent, #b4532a) !important;
}

html.platform-light .eos-proof-facts strong {
	background: none;
	color: var(--t-accent, #b4532a);
}

/* A topic's way back to its area shows on every window. */
@media (max-width: 880px) {
	.eos-microsite .eos-page-name.eos-topic-crumb {
		display: inline-flex;
	}
}

/* Figures beside a section's words stand as /platform's figures do: no box,
   a divider between them, the figure in the gradient. */
.eos-microsite .eos-benefit-copy .eos-stat-row {
	flex-wrap: nowrap;
	gap: 0;
	margin: 4px 0 24px;
}

.eos-microsite .eos-benefit-copy .eos-stat-row li {
	flex: 1 1 0;
	min-width: 0;
	padding: 2px 18px;
	border: 0;
	border-radius: 0;
	background: none;
}

.eos-microsite .eos-benefit-copy .eos-stat-row li:first-child {
	padding-left: 0;
}

.eos-microsite .eos-benefit-copy .eos-stat-row li + li {
	border-left: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
}

.eos-microsite .eos-benefit-copy .eos-stat-row strong {
	font-size: clamp(28px, 2.8vw, 38px);
}

html.platform-light .eos-microsite .eos-benefit-copy .eos-stat-row li + li {
	border-left-color: rgba(28, 25, 23, 0.1);
}

/* The case's figures sit in a card narrower than /platform's strip. */
.eos-microsite .eos-proof-figures {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eos-microsite .eos-proof-figures li {
	padding: 4px 12px;
}

.eos-microsite .eos-proof-figures strong {
	font-size: clamp(26px, 2.8vw, 38px);
	white-space: nowrap;
}

.eos-microsite .eos-proof-figures span {
	font-size: 14px;
	line-height: 20px;
}

@media (max-width: 600px) {
	.eos-microsite .eos-proof-figures {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.eos-proof-case {
		padding: 24px 12px 20px;
	}

	.eos-microsite .eos-proof-figures li {
		padding: 4px 2px;
	}

	.eos-microsite .eos-proof-figures strong {
		font-size: 20px;
	}
}

/* An area card alone in the last row spans it, its scene beside its words. */
@media (min-width: 981px) {
	.eos-tile-grid--areas > li.eos-tile:last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		align-items: stretch;
		gap: 12px;
	}

	.eos-tile-grid--areas > li:last-child:nth-child(3n + 1) .platform-vignette-frame {
		--vignette-h: 100%;
		min-height: 220px;
	}

	.eos-tile-grid--areas > li:last-child:nth-child(3n + 1) .eos-tile-copy {
		padding: 22px 20px 16px;
	}
}

@media (min-width: 641px) and (max-width: 980px) {
	.eos-tile-grid--areas > li:last-child:nth-child(2n + 1) {
		grid-column: 1 / -1;
	}
}

/* The hero's festival site floats on the page, with no panel round it. */
.eos-hub-hero-stage {
	max-width: 960px;
}

.eos-hub-hero-stage .platform-topic-drawing {
	border: 0;
	background: none;
}

/* A topic section's links to its guides and neighbouring pages: small lit
   chips under the section's words. */
.eos-microsite .eos-topic-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.eos-microsite .eos-topic-links li {
	margin: 0;
}

.eos-microsite .eos-topic-links a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border: 1px solid rgba(235, 235, 238, 0.1);
	border-radius: 12px;
	background: rgba(235, 235, 238, 0.04);
	color: var(--fg-primary-rest, #ebebee);
	font: 500 14px/20px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.eos-microsite .eos-topic-links a:hover,
.eos-microsite .eos-topic-links a:focus-visible {
	border-color: rgba(196, 181, 255, 0.45);
	background: rgba(196, 181, 255, 0.08);
}

.eos-microsite .eos-topic-links a i {
	color: var(--colors-peach-300, #ffbfb5);
	font-size: 11px;
}

html.platform-light .eos-microsite .eos-topic-links a {
	border-color: rgba(28, 25, 23, 0.1);
	background: #fff;
	color: var(--t-ink, #1c1917);
}

html.platform-light .eos-microsite .eos-topic-links a i {
	color: var(--t-accent, #b4532a);
}

html.platform-light .eos-tile h3 a {
	color: var(--t-ink, #1c1917) !important;
}

html.platform-light .eos-hub-hero-stage .platform-topic-drawing {
	border: 0;
	background: none;
}

@media (max-width: 360px) {
	.eos-microsite .eos-proof-figures strong {
		font-size: 17px;
	}
}