:root {
	--sky-deep: #0b3d66;
	--sky-mid: #1672b8;
	--sky-light: #7ec8f2;
	--sun: #f5a623;
}

body.public-site,
body.admin-site {
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	background: #f6fafd;
}

.site-nav {
	background: linear-gradient(90deg, var(--sky-deep), var(--sky-mid));
}

.brand-glider {
	display: inline-block;
	transform: rotate(-20deg);
	margin-right: .25rem;
}

/* White badge so the white-background logo sits cleanly on dark headers */
.logo-badge {
	display: inline-block;
	background: #fff;
	border-radius: .6rem;
	padding: .3rem .7rem;
	line-height: 0;
}

.logo-badge img {
	height: 44px;
	width: auto;
}

.logo-badge-lg img {
	height: 64px;
}

.hero-logo img {
	height: 180px;
	width: auto;
	background: #fff;
	border-radius: 1rem;
	padding: .6rem 1.2rem;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.hero {
	background:
		radial-gradient(ellipse 80% 60% at 70% 110%, rgba(255, 255, 255, .18), transparent),
		linear-gradient(180deg, var(--sky-deep) 0%, var(--sky-mid) 55%, var(--sky-light) 130%);
	color: #fff;
	padding: 5rem 0 6rem;
	position: relative;
	overflow: hidden;
}

.hero h1 {
	font-weight: 800;
	letter-spacing: -.02em;
}

.hero .lead {
	max-width: 42rem;
	margin: 1rem auto 0;
	opacity: .9;
}

.hero .glider-art {
	font-size: 5rem;
	transform: rotate(-15deg);
	display: inline-block;
	text-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.level-card {
	border: 0;
	border-radius: 1rem;
	box-shadow: 0 10px 30px rgba(11, 61, 102, .10);
	transition: transform .15s ease, box-shadow .15s ease;
	overflow: hidden;
}

.level-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(11, 61, 102, .18);
}

.level-card .level-img {
	width: 100%;
	height: 230px;
	object-fit: cover;
	display: block;
}

.level-card .card-top {
	background: linear-gradient(135deg, var(--sky-mid), var(--sky-deep));
	color: #fff;
	padding: 1.5rem;
}

.level-card .price {
	font-size: 2.2rem;
	font-weight: 800;
}

.level-card .duration-pill {
	background: rgba(255, 255, 255, .2);
	border-radius: 2rem;
	padding: .2rem .8rem;
	font-size: .85rem;
}

.level-card ul.highlights {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

.level-card ul.highlights li::before {
	content: '\2713';
	color: var(--sky-mid);
	font-weight: 700;
	margin-right: .5rem;
}

.btn-sun {
	background: var(--sun);
	border: 0;
	color: #2c1c00;
	font-weight: 600;
}

.btn-sun:hover {
	background: #ffb84d;
	color: #2c1c00;
}

.section-title {
	font-weight: 800;
	color: var(--sky-deep);
}

.voucher-code-box {
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 1.6rem;
	letter-spacing: .12em;
	background: #fff;
	border: 2px dashed var(--sky-mid);
	border-radius: .75rem;
	padding: .75rem 1.5rem;
	display: inline-block;
	color: var(--sky-deep);
}

/* Instructions & limitations panel on the buy page */
.terms-panel {
	border: 2px solid var(--sun);
	border-radius: .75rem;
	overflow: hidden;
	background: #fffdf5;
}

.terms-panel-header {
	background: var(--sun);
	color: #2c1c00;
	font-weight: 600;
	padding: .55rem 1rem;
}

.terms-panel-body {
	padding: 1rem 1.25rem;
}

.terms-panel-body :last-child {
	margin-bottom: 0;
}

.site-footer {
	background: var(--sky-deep);
	color: #cfe7f7;
}

.site-footer a {
	color: #cfe7f7;
}

/* Admin */
.admin-sidebar {
	background: var(--sky-deep);
	min-height: 100vh;
}

.admin-sidebar .nav-link {
	color: #cfe7f7;
	border-radius: .5rem;
}

.admin-sidebar .nav-link.active,
.admin-sidebar .nav-link:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.stat-card {
	border: 0;
	border-radius: .75rem;
	box-shadow: 0 4px 14px rgba(11, 61, 102, .08);
}

.stat-card .stat-value {
	font-size: 1.9rem;
	font-weight: 800;
	color: var(--sky-deep);
}