.tmpl-tidb-scaile-summit {
	.main-button {
		display: block;
		text-decoration: none;
		margin: 36px auto;
		position: relative;
		padding: 12px 24px;
		font-weight: 700;
		font-size: 17px;
		color: #fff;
		border-radius: 72px;
		background: #000;
		width: max-content;
		cursor: pointer;
		&::before {
			content: "";
			position: absolute;
			top: -2px;
			left: -2px;
			right: -2px;
			bottom: -2px;
			background: linear-gradient(90deg, #118cfa 0%, #9f36fe 44.79%, #fc6569 100%);
			z-index: -1;
			border-radius: 74px;
		}
		&:hover {
			background: linear-gradient(90deg, #118cfa 0%, #5861fc 50%, #fc6569 100%);
		}
	}
	&__header {
		background-color: #171c33;
		position: sticky;
		top: var(--admin-bar-height, 0);
		left: 0;
		right: 0;
		z-index: 2;
		padding: 12px 0;
		.contain {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 24px;
		}
		.logo {
			max-height: 55px;
		}
		nav {
			display: none;
			position: absolute;
			top: 100%;
			right: 4px;
			padding: 24px 0;
			background: rgba(0, 0, 0, 0.8);
			border-radius: 8px;
			left: 30%;
			padding-left: 32px;
			z-index: 0;
			@include media-min(1200px) {
				display: flex;
				align-items: center;
				gap: 24px;
				position: static;
				padding: 0;
				background: none;
			}
			&.active {
				@include media-max(1200px) {
					display: flex;
					flex-direction: column;
					gap: 16px;
				}
			}
		}
		.nav-menu {
			text-decoration: none;
			color: #fff;
			font-weight: 600;
			font-size: 16px;
			cursor: pointer;
			&:hover {
				color: #a2adb9;
			}
		}
		.nav-dropper {
			@include media-min(1200px) {
				position: absolute;
				top: 100%;
				left: -66px;
				margin: 0 auto;
				width: 200px;
				display: none;
			}
			transition: 0.2s ease-in-out;
			&__wrapper {
				position: relative;
				text-align: left;
				&:hover {
					.nav-dropper {
						display: block;
					}
				}
			}
			&__content {
				border-radius: 4px;
				font-size: 14px;
				padding-left: 32px;
				@include media-min(1200px) {
					margin-top: 1rem;
					background-color: #000;
					padding: 2rem;
				}
				a {
					color: #fff;
					font-size: 16px;
					line-height: 36px;
					text-decoration: none;
					transition: 0.2s ease-in-out;
					display: block;
					&:hover {
						color: rgb(66, 77, 87);
						padding-left: 0.9rem;
					}
				}
			}
		}

		.navbar-toggle {
			@include media-min(1200px) {
				display: none;
			}

			padding: 1rem;
			display: flex;
			flex-direction: column;
			gap: 4px;
			cursor: pointer;
			span {
				width: 24px;
				height: 2px;
				background-color: #fff;
			}
		}
		.main-button {
			position: relative;
			padding: 12px 24px;
			font-weight: 700;
			font-size: 16px;
			color: #fff;
			border-radius: 72px;
			background: #171c33;
			width: max-content;
			text-decoration: none;
			cursor: pointer;
			&::before {
				content: "";
				position: absolute;
				top: -2px;
				left: -2px;
				right: -2px;
				bottom: -2px;
				background: linear-gradient(90deg, #118cfa 0%, #9f36fe 44.79%, #fc6569 100%);
				z-index: -1;
				border-radius: 74px;
			}
			&:hover {
				background: linear-gradient(90deg, #118cfa 0%, #5861fc 50%, #fc6569 100%);
			}
		}
	}
	.banner {
		padding-bottom: 40px;
		background: url(https://static.pingcap.com/files/2025/06/09131009/summit-bg-mb.png)
			no-repeat center center/cover;
		text-align: center;
		padding-top: 110px;
		@include media-min($medium) {
			background: url(https://static.pingcap.com/files/2025/06/09131004/summit-bg.png)
				no-repeat center center/cover;
			padding-top: 70px;
		}
		img {
			width: 100%;
			max-width: 608px;
		}
		.time,
		.desc {
			font-size: 18px;
			margin-top: 24px;
			font-weight: 400;
			line-height: 26px;
			text-align: center;
			color: #fff;
			@include media-min($medium) {
				line-height: 41px;
				font-size: 24px;
			}
		}
		.desc {
			margin-top: 10px;
		}

		.save,
		.save a {
			font-weight: 700;
			font-size: 18px;
			line-height: 27px;
			text-align: center;
			color: #fff;
			text-decoration: none;
			.icon {
				font-size: 24px;
				padding: 0 8px;
			}
		}
		.main-button {
			font-size: 24px;
		}
	}
	.about,
	.cfp {
		.title {
			text-align: center;
			margin-bottom: 40px;
			h2 {
				font-size: 4rem;
				line-height: 48px;
				font-weight: 700;
				text-align: center;
				@include media-min($medium) {
					font-size: 58px;
					line-height: 72px;
				}
			}
			h3 {
				font-size: clamp(24px, 3vw, 34px);
			}
			p {
				font-size: 24px;
				width: 80%;
				margin-left: auto;
				margin-right: auto;
			}
		}
		ul {
			padding-left: 40px;
		}
		ul {
			margin-top: 16px;
		}
		li {
			line-height: 1.8;
		}
		ol,
		span,
		ul {
			color: #a2adb9;
			font-size: 18px;
		}
		p {
			font-weight: 300;
			font-size: 18px;
			line-height: 27px;
		}
		b {
			color: #fff;
			font-size: 18px;
			font-weight: 700;
		}
		.button-wrap {
			text-align: center;
			margin-top: 32px;
		}
	}
	&__speakers {
		.block-section__title {
			font-size: 4rem;
			line-height: 48px;
			font-weight: 700;
			text-align: center;
			@include media-min($medium) {
				font-size: 64px;
				line-height: 72px;
			}
		}
		.block-icon-grid__item-icon-image {
			overflow: hidden;
			border-radius: 50%;
			height: auto;
		}
		b {
			color: #fff;
		}
	}
	.section-carousel {
		width: 100%;
		overflow: hidden;
		background-color: #000;
		padding: 80px 0;

		.carousel-list {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			margin-bottom: 40px;
			width: fit-content;
			animation-play-state: running;
			animation: tidbScaileCarouselLoop 80s linear infinite;
			&-container {
				position: relative;
				overflow: hidden;
			}
		}
		.carousel-item {
			margin-left: 1.6rem;
			margin-right: 1.6rem;
			width: 300px;
			height: 200px;
			@include media-min($medium) {
				width: 450px;
				height: 300px;
			}
			&-image {
				width: 100%;
				border-radius: 1.6rem;
			}
		}
	}
	@keyframes tidbScaileCarouselLoop {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-50%);
		}
	}
	.video {
		iframe {
			max-width: 100%;
			width: 560px;
			height: 315px;
			@include media-min(1000px) {
				width: 800px;
				height: 450px;
			}
			@include media-min($large) {
				width: 954px;
				height: 536px;
			}
		}
		.video-placeholder-youtube {
			margin: auto;
		}
	}
	.sponsors {
		.content {
			display: flex;
			flex-wrap: wrap;
			gap: 32px;
			justify-content: center;
			margin-top: 60px;
			img {
				width: 200px;
			}
		}
	}
	.section-location {
		padding: 6rem 0;
		position: relative;
		video {
			position: absolute;
			left: 50%;
			margin-left: -50%;
			top: 0;
			width: 100%;
			height: 100%;
			border-radius: 0px;
			object-fit: cover;
			background-color: rgb(0, 0, 0);
			object-position: 50% 50%;
		}
		&__content {
			padding: 3rem;
			&-bg {
				padding: 3rem;
				text-align: center;
				backdrop-filter: blur(12px);
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 6px;
			}
			h3 {
				color: #fff;
				font-size: 36px;
				font-weight: 300;
			}
			p {
				font-size: 24px;
				color: #fff;
				margin-bottom: 1rem;
			}
			a {
				font-size: 24px;
				color: #fff;
			}
		}
	}
	&__registration-banner {
		background-position: center right;
		&.banner-default--display-type-product .banner-default__text-content {
			@include media-min($medium) {
				padding: 60px 0 20px;
			}
		}
		.banner-default__title {
			font-size: 24px;
			text-align: center;
		}
		.title-mono {
			margin-top: 16px;
		}
	}
	.registration {
		margin-top: 32px;
		.cards {
			display: flex;
			flex-direction: column;
			gap: 20px;
			@include media-min($large) {
				flex-direction: row;
			}
		}
		.card {
			border: 1px solid;
			border-image: linear-gradient(90deg, #118cfa 0%, #9f36fe 44.79%, #fc6569 100%) 1;
			display: flex;
			flex-direction: column;
			padding: 12px;
			flex: 1;
			&-head {
				color: #fff;
				font-weight: 700;
				font-style: Bold;
				font-size: 20px;
			}
			&-content {
				flex: 1;
				font-weight: 300;
				font-size: 16px;
				line-height: 26px;
				color: #fff;
			}
		}
	}
	.why-attend {
		margin-top: 64px;
		h3 {
			font-size: 24px;
			& + * {
				margin-top: 8px;
			}
		}
		ul {
			display: flex;
			flex-direction: column;
			gap: 20px;
			margin: 0;
			margin-top: 32px;
		}
		li {
			position: relative;
			list-style: none;
			font-weight: 300;
			font-size: 18px;
			line-height: 26px;
			color: #fff;
			padding-left: 24px;
			&::before {
				position: absolute;
				left: 0;
				top: 7px;
				content: "";
				background: #1c85fa;
				width: 14px;
				height: 12px;
				clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
				transform: rotate(90deg);
			}
		}
	}
	.agenda {
		min-height: calc(100vh - var(--admin-bar-height, 0px) - var(--header-height));
	}
	&__footer {
		background: #171c33;
		padding: 3.2rem 0;
		.site-footer__logo {
			width: 100px;
			height: auto;
			max-height: none;
		}
		.footer-container {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			align-items: center;
			gap: 4rem;
			@include media-min($medium) {
				flex-direction: row;
				gap: 0;
			}
		}
		.footer__column {
			width: 100%;
			@include media-min($medium) {
				width: 50%;
			}
		}
		.footer__title {
			font-weight: 700;
			font-size: 28px;
			line-height: 42px;
			color: #fff;
			padding-bottom: 4rem;
		}
		.footer__content {
			p {
				font-style: normal;
				font-weight: 400;
				font-size: 16px;
				line-height: 24px;
				color: #fff;
			}
		}
		.footer__share {
			display: flex;
			gap: 4rem;
			justify-content: flex-end;
			color: #fff;
			align-items: center;
			gap: 3.2rem;
			flex-wrap: wrap;
			@include media-max($medium) {
				justify-content: flex-start;
			}
			span {
				color: #fff;
			}
		}
	}
	&.scaile-2026 {
		.banner {
			background: url(https://static.pingcap.com/files/2026/07/26191055/SCaiLE-2026-hero-bg.png)
				no-repeat center center/cover #000;
			img {
				width: 100%;
				max-width: 660px;
			}
		}
		.time,
		.desc {
			line-height: 1.2;
		}
		.main-button {
			min-width: 200px;
		}
	}
}