/* ==========================================================================
   ARCTIC — Course Management B design layer
   Owns: header, footer, home page. Loads last, so it wins over legacy CSS.
   ========================================================================== */

:root {
	--arctic-blue-1: #caf0f8;
	--arctic-blue-2: #ade8f4;
	--arctic-blue-3: #90e0ef;
	--arctic-blue-4: #48cae4;
	--arctic-blue-5: #00b4d8;

	--ab-ink: #04252f;
	--ab-ink-2: #0a3a49;
	--ab-slate: #4a6f7c;
	--ab-muted: #6f8f9a;
	--ab-paper: #ffffff;
	--ab-wash: #f2fbfd;
	--ab-line: #dceff4;

	--ab-r-sm: 12px;
	--ab-r: 20px;
	--ab-r-lg: 28px;
	--ab-r-xl: 40px;

	--ab-shadow: 0 18px 50px -28px rgba(4, 37, 47, .35);
	--ab-shadow-lg: 0 40px 90px -40px rgba(4, 37, 47, .45);
	--ab-grad: linear-gradient(120deg, var(--arctic-blue-5), var(--arctic-blue-3));
	--ab-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ab-head: 'Playfair Display', 'Inter', serif;
}

/* ---------- base ---------- */
body,
body.sf-theme {
	font-family: var(--ab-font);
	color: var(--ab-ink);
	background: var(--ab-paper);
	-webkit-font-smoothing: antialiased;
}

.ab-shell {
	width: min(1240px, calc(100% - 40px));
	margin-inline: auto;
}

.ab-sec {
	position: relative;
	padding: clamp(64px, 8vw, 120px) 0;
}

.ab-sec--wash {
	background: var(--ab-wash);
}

.ab-sec--ink {
	background: var(--ab-ink);
	color: #fff;
}

/* ---------- shared atoms ---------- */
.ab-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--arctic-blue-5);
	background: var(--arctic-blue-1);
	border-radius: 999px;
	padding: 8px 16px;
	margin-bottom: 18px;
}

.ab-eyebrow i {
	font-size: 11px;
}

.ab-sec--ink .ab-eyebrow {
	color: var(--arctic-blue-1);
	background: rgba(144, 224, 239, .14);
}

.ab-h2 {
	font-family: var(--ab-head);
	font-weight: 600;
	font-size: clamp(30px, 4.2vw, 52px);
	line-height: 1.1;
	letter-spacing: -.01em;
	margin: 0 0 14px;
	color: inherit;
}

.ab-h2 em {
	font-style: italic;
	color: var(--arctic-blue-5);
}

.ab-lede {
	font-size: 16px;
	line-height: 1.75;
	color: var(--ab-slate);
	max-width: 60ch;
	margin: 0;
}

.ab-sec--ink .ab-lede {
	color: rgba(202, 240, 248, .78);
}

.ab-head {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(32px, 5vw, 56px);
}

.ab-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ab-head--center .ab-lede {
	text-align: center;
}

.ab-head__l {
	max-width: 620px;
}

/* buttons */
.ab-btn,
button.ab-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 26px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 650;
	line-height: 1;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform .25s, box-shadow .25s, background .25s, color .25s;
	text-decoration: none;
}

.ab-btn i,
button.ab-btn i {
	font-size: 13px;
	transition: transform .25s;
}

.ab-btn:hover i,
button.ab-btn:hover i {
	transform: translateX(4px);
}

.ab-btn--solid,
button.ab-btn--solid {
	background: var(--ab-ink);
	color: #fff;
	box-shadow: 0 16px 34px -18px rgba(4, 37, 47, .8);
}

.ab-btn--solid:hover,
button.ab-btn--solid:hover {
	background: var(--arctic-blue-5);
	color: #04252f;
	transform: translateY(-2px);
}

.ab-btn--aqua,
button.ab-btn--aqua {
	background: var(--arctic-blue-5);
	color: #04252f;
	box-shadow: 0 16px 34px -16px rgba(0, 180, 216, .8);
}

.ab-btn--aqua:hover,
button.ab-btn--aqua:hover {
	background: var(--arctic-blue-4);
	color: #04252f;
	transform: translateY(-2px);
}

.ab-btn--line,
button.ab-btn--line {
	border-color: var(--ab-line);
	color: var(--ab-ink);
	background: #fff;
}

.ab-btn--line:hover,
button.ab-btn--line:hover {
	border-color: var(--arctic-blue-4);
	color: var(--arctic-blue-5);
}

.ab-sec--ink .ab-btn--line,
button.ab-sec--ink .ab-btn--line {
	background: transparent;
	border-color: rgba(173, 232, 244, .35);
	color: #fff;
}

.ab-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 650;
	font-size: 15px;
	color: var(--arctic-blue-5);
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	padding-bottom: 3px;
}

.ab-link:hover {
	color: var(--ab-ink);
	border-color: var(--arctic-blue-4);
}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.ab-load {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--ab-ink);
	transition: opacity .55s ease, visibility .55s, transform .55s ease;
}

/* soft aurora light drifting behind the mark */
.ab-load__aurora {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .5;
	pointer-events: none;
}

.ab-load__aurora--a {
	width: 46vmax;
	height: 46vmax;
	top: -16vmax;
	left: -12vmax;
	background: radial-gradient(circle, var(--arctic-blue-5), transparent 68%);
	animation: ab-load-drift 11s ease-in-out infinite;
}

.ab-load__aurora--b {
	width: 38vmax;
	height: 38vmax;
	right: -12vmax;
	bottom: -14vmax;
	background: radial-gradient(circle, var(--arctic-blue-3), transparent 70%);
	animation: ab-load-drift 13s ease-in-out infinite reverse;
}

.ab-load__inner {
	position: relative;
	z-index: 1;
	width: min(560px, calc(100% - 48px));
	display: grid;
	justify-items: stretch;
}

/* wordmark: dim outline copy, flooded bottom-up by a lit copy */
.ab-load__word {
	position: relative;
	font-family: var(--ab-head);
	font-size: clamp(30px, 7vw, 62px);
	line-height: 1.05;
	letter-spacing: -.01em;
	text-align: center;
}

.ab-load__word-base {
	display: block;
	color: transparent;
	-webkit-text-stroke: 1px rgba(173, 232, 244, .34);
}

.ab-load__word-fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--arctic-blue-2), var(--arctic-blue-5));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* --p is written by the preloader script */
	clip-path: inset(calc(100% - var(--p, 0%)) 0 0 0);
	transition: clip-path .35s cubic-bezier(.4, 0, .2, 1);
}

/* hairline meter with a travelling glint */
.ab-load__meter {
	position: relative;
	margin-top: 34px;
	height: 2px;
	border-radius: 2px;
	background: rgba(173, 232, 244, .16);
	overflow: hidden;
}

.ab-load__meter i {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--p, 0%);
	border-radius: 2px;
	background: linear-gradient(90deg, var(--arctic-blue-3), var(--arctic-blue-5));
	transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

.ab-load__meter::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 34%;
	background: linear-gradient(90deg, transparent, rgba(202, 240, 248, .5), transparent);
	animation: ab-load-glint 1.9s linear infinite;
}

.ab-load__foot {
	margin-top: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(202, 240, 248, .6);
}

.ab-load__pct {
	color: var(--arctic-blue-3);
	font-variant-numeric: tabular-nums;
	letter-spacing: .12em;
}

.ab-load.is-done {
	opacity: 0;
	visibility: hidden;
	transform: scale(1.04);
}

@keyframes ab-load-drift {

	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(6vmax, 4vmax, 0) scale(1.15);
	}
}

@keyframes ab-load-glint {
	from {
		transform: translateX(-120%);
	}

	to {
		transform: translateX(400%);
	}
}

@media (prefers-reduced-motion: reduce) {

	.ab-load__aurora,
	.ab-load__meter::after {
		animation: none;
	}
}

@keyframes ab-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.ab-hdr {
	position: sticky;
	top: 0;
	z-index: 900;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--ab-line);
	transition: box-shadow .3s, background .3s;
}

.ab-hdr.is-stuck {
	box-shadow: 0 12px 40px -30px rgba(4, 37, 47, .6);
	background: rgba(255, 255, 255, .95);
}

/* utility strip */
.ab-hdr__top {
	background: var(--ab-ink);
	color: rgba(202, 240, 248, .85);
	font-size: 13px;
}

.ab-hdr__top-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 40px;
}

.ab-hdr__note {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ab-hdr__note i {
	color: var(--arctic-blue-4);
}

.ab-hdr__tools {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ab-hdr__tools .ab-div {
	width: 1px;
	height: 16px;
	background: rgba(173, 232, 244, .2);
}

.ab-hdr__tlink {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 6px 10px;
	border-radius: 8px;
}

.ab-hdr__tlink:hover {
	color: var(--arctic-blue-3);
}

/* mini dropdowns */
.ab-mini {
	position: relative;
}

.ab-mini__btn {
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 8px;
	cursor: pointer;
}

.ab-mini__btn:hover {
	background: rgba(173, 232, 244, .12);
	color: #fff;
}

.ab-mini__btn .fa-chevron-down {
	font-size: 9px;
	opacity: .7;
}

.ab-pop {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 210px;
	background: #fff;
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-r-sm);
	box-shadow: var(--ab-shadow);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: .22s;
	z-index: 40;
}

.ab-mini:hover .ab-pop,
.ab-mini.is-open .ab-pop,
.ab-acct.is-open .ab-pop {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ab-pop--scroll {
	max-height: 320px;
	overflow-y: auto;
}

.ab-pop__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 550;
	color: var(--ab-ink);
	text-decoration: none;
}

.ab-pop__row:hover {
	background: var(--arctic-blue-1);
	color: var(--ab-ink);
}

.ab-pop__row.is-current {
	background: var(--arctic-blue-1);
}

.ab-pop__row .fa-check {
	margin-left: auto;
	font-size: 11px;
	color: var(--arctic-blue-5);
	opacity: 0;
}

.ab-pop__row.is-current .fa-check {
	opacity: 1;
}

.ab-pop__row--danger {
	color: #c0392b;
}

.ab-pop__row--danger:hover {
	background: #fdecea;
}

.ab-pop__sym {
	width: 22px;
	font-weight: 700;
	color: var(--arctic-blue-5);
}

.ab-pop__sep {
	display: block;
	height: 1px;
	background: var(--ab-line);
	margin: 6px 4px;
}

.ab-pop__ico {
	width: 26px;
	color: var(--arctic-blue-5);
}

.ab-pop__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 4px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--ab-ink);
	color: #fff;
	font-weight: 650;
	font-size: 14px;
	text-decoration: none;
}

.ab-pop__cta:hover {
	background: var(--arctic-blue-5);
	color: #04252f;
}

/* main bar */
.ab-hdr__bar {
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: 78px;
}

.ab-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	flex-shrink: 0;
}

.ab-logo__mark {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--ab-grad);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: -.02em;
	box-shadow: 0 10px 24px -12px rgba(0, 180, 216, .9);
}

.ab-logo__text {
	display: flex;
	align-items: center;
	line-height: 1.15;
}

.ab-logo__text b {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ab-ink);
}

.ab-logo__text > span.ab-logo__sub {
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ab-muted);
}

.ab-logo__learn {
	font-size: 24px !important;
	font-weight: 800 !important;
	text-transform: none !important;
	letter-spacing: -.02em !important;
	color: var(--arctic-blue-5, #00b4d8);
}

.ab-logo__withus {
	font-size: 24px !important;
	font-weight: 800 !important;
	text-transform: none !important;
	letter-spacing: -.02em !important;
	color: var(--ab-ink, #04252f);
}

.ab-ftr__logo .ab-logo__learn {
	color: var(--arctic-blue-4, #48cae4);
}

.ab-ftr__logo .ab-logo__withus {
	color: #ffffff;
}

.ab-drawer__head .ab-logo__learn {
	color: var(--arctic-blue-5, #00b4d8);
}

.ab-drawer__head .ab-logo__withus {
	color: var(--ab-ink, #04252f);
}

.ab-load__word .ab-logo__learn {
	color: var(--arctic-blue-4, #48cae4);
}

.ab-load__word .ab-logo__withus {
	color: #ffffff;
}

/* nav */
.ab-nav {
	margin-inline: auto;
}

.ab-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ab-nav__item {
	position: relative;
}

.ab-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 18px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ab-ink-2);
	text-decoration: none;
	transition: .22s;
}

.ab-nav__link i {
	font-size: 9px;
	opacity: .6;
}

.ab-nav__link:hover,
.ab-nav__link.is-active {
	background: var(--arctic-blue-1);
	color: var(--ab-ink);
}

/* mega */
.ab-mega {
	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	transform: translate(-50%, 10px);
	width: min(880px, 92vw);
	background: #fff;
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-r-lg);
	box-shadow: var(--ab-shadow-lg);
	padding: 26px;
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 26px;
	opacity: 0;
	visibility: hidden;
	transition: .26s;
	z-index: 50;
}

.ab-nav__item:hover .ab-mega,
.ab-nav__item.is-open .ab-mega {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.ab-mega__aside {
	background: var(--ab-ink);
	color: #fff;
	border-radius: var(--ab-r);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ab-mega__aside h4 {
	font-family: var(--ab-head);
	font-size: 24px;
	margin: 0;
	color: #fff;
}

.ab-mega__aside p {
	font-size: 13px;
	line-height: 1.65;
	color: rgba(202, 240, 248, .72);
	margin: 0;
}

.ab-mega__all {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--arctic-blue-3);
	font-weight: 650;
	font-size: 14px;
	text-decoration: none;
}

.ab-mega__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	align-content: start;
}

.ab-mega__card {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 13px;
	border-radius: var(--ab-r-sm);
	border: 1px solid transparent;
	text-decoration: none;
	transition: .22s;
}

.ab-mega__card:hover {
	background: var(--ab-wash);
	border-color: var(--ab-line);
}

.ab-mega__ico {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: var(--arctic-blue-1);
	color: var(--arctic-blue-5);
	font-size: 15px;
}

.ab-mega__card:hover .ab-mega__ico {
	background: var(--arctic-blue-5);
	color: #fff;
}

.ab-mega__name {
	display: block;
	font-weight: 650;
	font-size: 14.5px;
	color: var(--ab-ink);
}

.ab-mega__desc {
	display: block;
	font-size: 12.5px;
	color: var(--ab-muted);
	margin-top: 2px;
}

/* actions */
.ab-hdr__act {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.ab-ico-btn {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	border: 1px solid var(--ab-line);
	background: #fff;
	color: var(--ab-ink);
	display: grid;
	place-items: center;
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
	transition: .22s;
}

.ab-ico-btn:hover {
	background: var(--arctic-blue-1);
	border-color: var(--arctic-blue-3);
	color: var(--ab-ink);
}

.ab-ico-btn .ab-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--arctic-blue-5);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: grid;
	place-items: center;
	border: 2px solid #fff;
}

.ab-avatar {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: var(--ab-grad);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 13px;
}

.ab-acct {
	position: relative;
}

.ab-acct__head {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px;
	border-radius: 11px;
	background: var(--ab-wash);
	margin-bottom: 6px;
}

.ab-acct__name {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--ab-ink);
}

.ab-acct__creds {
	display: block;
	font-size: 12px;
	color: var(--arctic-blue-5);
	font-weight: 600;
}

.ab-hdr__cta,
button.ab-hdr__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border-radius: 999px;
	background: var(--ab-ink);
	color: #fff;
	font-weight: 650;
	font-size: 14.5px;
	text-decoration: none;
	transition: .25s;
}

.ab-hdr__cta:hover,
button.ab-hdr__cta:hover {
	background: var(--arctic-blue-5);
	color: #04252f;
	transform: translateY(-2px);
}

.ab-burger {
	display: none;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	border: 1px solid var(--ab-line);
	background: #fff;
	cursor: pointer;
	padding: 0;
	place-items: center;
	gap: 5px;
	flex-direction: column;
}

.ab-burger span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--ab-ink);
}

/* drawer */
.ab-drawer {
	position: fixed;
	inset: 0;
	z-index: 950;
	visibility: hidden;
}

.ab-drawer.is-open {
	visibility: visible;
}

.ab-drawer__ov {
	position: absolute;
	inset: 0;
	background: rgba(4, 37, 47, .5);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: .3s;
}

.ab-drawer.is-open .ab-drawer__ov {
	opacity: 1;
}

.ab-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(390px, 88vw);
	background: #fff;
	transform: translateX(100%);
	transition: transform .38s cubic-bezier(.4, 0, .2, 1);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 20px;
}

.ab-drawer.is-open .ab-drawer__panel {
	transform: none;
}

.ab-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ab-line);
}

.ab-drawer__close {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	border: 1px solid var(--ab-line);
	background: #fff;
	cursor: pointer;
}

.ab-drawer__nav {
	display: grid;
	gap: 2px;
	padding: 16px 0;
}

.ab-drawer__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 12px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ab-ink);
	text-decoration: none;
	background: none;
	border: 0;
	width: 100%;
	text-align: left;
	cursor: pointer;
}

.ab-drawer__link i:last-child {
	margin-left: auto;
	font-size: 12px;
	color: var(--ab-muted);
	transition: transform .25s;
}

.ab-drawer__link:hover,
.ab-drawer__link.is-active {
	background: var(--arctic-blue-1);
}

.ab-drawer__link.is-open i:last-child {
	transform: rotate(180deg);
}

.ab-drawer__num {
	font-size: 11px;
	font-weight: 700;
	color: var(--arctic-blue-5);
	letter-spacing: .1em;
}

.ab-drawer__sub {
	display: none;
	padding: 4px 0 8px 22px;
	border-left: 2px solid var(--ab-line);
	margin-left: 16px;
}

.ab-drawer__sub.is-open {
	display: grid;
	gap: 2px;
}

.ab-drawer__sub a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 10px;
	font-size: 14px;
	color: var(--ab-slate);
	text-decoration: none;
}

.ab-drawer__sub a:hover {
	background: var(--ab-wash);
	color: var(--arctic-blue-5);
}

.ab-drawer__foot {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--ab-line);
	display: grid;
	gap: 8px;
}

.ab-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.ab-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--ab-line);
	font-size: 13px;
	font-weight: 600;
	color: var(--ab-ink);
	text-decoration: none;
}

.ab-chip.is-current {
	background: var(--arctic-blue-1);
	border-color: var(--arctic-blue-3);
}

/* ==========================================================================
   CART DRAWER (legacy hooks preserved)
   ========================================================================== */
.cartcanvas__info {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: min(420px, 90vw);
	background: #fff;
	z-index: 1200;
	transform: translateX(105%);
	transition: transform .4s cubic-bezier(.4, 0, .2, 1);
	overflow-y: auto;
	padding: 26px;
	box-shadow: var(--ab-shadow-lg);
}

.cartcanvas__info.info-open {
	transform: none;
}

.offcanvas__overlay {
	position: fixed;
	inset: 0;
	background: rgba(4, 37, 47, .45);
	backdrop-filter: blur(3px);
	z-index: 1100;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}

.offcanvas__overlay.overlay-open {
	opacity: 1;
	visibility: visible;
}

.ab-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ab-line);
	margin-bottom: 18px;
}

.ab-cart__head h4 {
	font-family: var(--ab-head);
	font-size: 22px;
	margin: 0;
	color: var(--ab-ink);
}

.cartcanvas__close {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--ab-wash);
	display: grid;
	place-items: center;
	cursor: pointer;
	color: var(--ab-ink);
}

.cartcanvas__close:hover {
	background: var(--arctic-blue-1);
}

.ab-cart__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.ab-cart__item {
	position: relative;
	display: flex;
	gap: 13px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-r-sm);
	background: var(--ab-wash);
}

.ab-cart__thumb {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--arctic-blue-1);
	display: grid;
	place-items: center;
	color: var(--arctic-blue-5);
}

.ab-cart__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ab-cart__t {
	display: block;
	font-weight: 650;
	font-size: 14px;
	color: var(--ab-ink);
	text-decoration: none;
	margin-bottom: 4px;
}

.ab-cart__meta {
	font-size: 12.5px;
	color: var(--ab-slate);
	margin: 0;
}

.ab-cart__lvl {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--arctic-blue-1);
	color: var(--arctic-blue-5);
	margin-bottom: 5px;
}

.ab-cart__rm {
	position: absolute;
	top: 8px;
	right: 8px;
	color: #c0392b;
	opacity: .55;
	font-size: 13px;
}

.ab-cart__rm:hover {
	opacity: 1;
}

.ab-cart__empty {
	text-align: center;
	padding: 50px 0;
	color: var(--ab-muted);
}

.ab-cart__empty i {
	font-size: 40px;
	color: var(--arctic-blue-2);
	margin-bottom: 14px;
	display: block;
}

.ab-cart__foot {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--ab-line);
}

.ab-cart__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	font-weight: 700;
}

.ab-cart__total strong {
	font-size: 20px;
	color: var(--arctic-blue-5);
}

.ab-cart__btns {
	display: flex;
	gap: 9px;
}

.ab-cart__btns .ab-btn {
	flex: 1;
	justify-content: center;
	padding: 13px 16px;
	font-size: 14px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.ab-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(170deg, #fff 0%, var(--arctic-blue-1) 100%);
	padding: clamp(48px, 6vw, 86px) 0 clamp(60px, 7vw, 100px);
}

.ab-hero__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .55;
	pointer-events: none;
}

.ab-hero__blob--a {
	width: 460px;
	height: 460px;
	background: var(--arctic-blue-3);
	top: -160px;
	right: -80px;
}

.ab-hero__blob--b {
	width: 380px;
	height: 380px;
	background: var(--arctic-blue-4);
	bottom: -180px;
	left: -120px;
	opacity: .35;
}

.ab-hero__in {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(32px, 5vw, 70px);
	align-items: center;
}

.ab-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 16px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--ab-line);
	font-size: 13px;
	font-weight: 600;
	color: var(--ab-ink-2);
	box-shadow: var(--ab-shadow);
	margin-bottom: 22px;
}

.ab-hero__badge b {
	background: var(--arctic-blue-5);
	color: #fff;
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ab-hero__title {
	font-family: var(--ab-head);
	font-weight: 600;
	font-size: clamp(38px, 5.6vw, 70px);
	line-height: 1.04;
	letter-spacing: -.02em;
	margin: 0 0 20px;
	color: var(--ab-ink);
}

.ab-hero__title em {
	position: relative;
	font-style: italic;
	color: var(--arctic-blue-5);
	white-space: nowrap;
}

.ab-hero__title em::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: .06em;
	height: .16em;
	background: var(--arctic-blue-2);
	border-radius: 4px;
	z-index: -1;
}

.ab-hero__desc {
	font-size: 17px;
	line-height: 1.75;
	color: var(--ab-slate);
	max-width: 52ch;
	margin: 0 0 30px;
}

.ab-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 34px;
}

.ab-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 34px;
}

.ab-fact strong {
	display: block;
	font-family: var(--ab-head);
	font-size: 32px;
	line-height: 1;
	color: var(--ab-ink);
}

.ab-fact span {
	font-size: 12.5px;
	color: var(--ab-muted);
	letter-spacing: .04em;
}

/* hero stage */
.ab-hero__stage {
	position: relative;
}

.ab-hero__frames {
	position: relative;
	aspect-ratio: 4/4.4;
	border-radius: var(--ab-r-xl);
	overflow: hidden;
	box-shadow: var(--ab-shadow-lg);
	background: var(--ab-ink);
}

.ab-hero__frame {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity .9s ease, transform 1.4s ease;
}

.ab-hero__frame.is-active {
	opacity: 1;
	transform: none;
}

.ab-hero__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ab-hero__frame figcaption {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	background: rgba(4, 37, 47, .55);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(202, 240, 248, .18);
	border-radius: var(--ab-r);
	padding: 16px 18px;
	color: #fff;
}

.ab-hero__frame figcaption b {
	display: block;
	font-size: 17px;
	font-weight: 650;
	color: #fff;
	margin-bottom: 3px;
}

.ab-hero__frame figcaption span {
	font-size: 12.5px;
	color: var(--arctic-blue-2);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ab-hero__dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 18px;
}

.ab-hero__dot {
	width: 30px;
	height: 5px;
	border-radius: 999px;
	border: 0;
	background: var(--arctic-blue-3);
	opacity: .45;
	cursor: pointer;
	padding: 0;
	transition: .3s;
}

.ab-hero__dot.is-active {
	opacity: 1;
	width: 52px;
	background: var(--arctic-blue-5);
}

.ab-hero__float {
	position: absolute;
	left: -26px;
	bottom: 152px;
	background: #fff;
	border-radius: var(--ab-r);
	box-shadow: var(--ab-shadow-lg);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	animation: ab-float 5s ease-in-out infinite;
}

.ab-hero__float i {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--arctic-blue-1);
	color: var(--arctic-blue-5);
	display: grid;
	place-items: center;
}

.ab-hero__float b {
	display: block;
	font-size: 15px;
	color: var(--ab-ink);
}

.ab-hero__float span {
	font-size: 12px;
	color: var(--ab-muted);
}

@keyframes ab-float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-12px);
	}
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.ab-marq {
	background: var(--ab-ink);
	padding: 20px 0;
	overflow: hidden;
	border-block: 1px solid rgba(173, 232, 244, .12);
}

.ab-marq__track {
	display: flex;
	width: max-content;
	animation: ab-scroll 34s linear infinite;
}

.ab-marq__run {
	display: flex;
	align-items: center;
	gap: 34px;
	padding-right: 34px;
}

.ab-marq__item {
	font-family: var(--ab-head);
	font-size: clamp(20px, 2.6vw, 32px);
	font-style: italic;
	color: rgba(202, 240, 248, .85);
	white-space: nowrap;
}

.ab-marq__sep {
	color: var(--arctic-blue-5);
	font-size: 12px;
}

@keyframes ab-scroll {
	to {
		transform: translateX(-50%);
	}
}

/* ==========================================================================
   COURSES GRID
   ========================================================================== */
.ab-courses {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 1000px) {
	.ab-courses {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.ab-courses {
		grid-template-columns: 1fr;
	}
}

.ab-course {
	position: relative;
	background: #fff;
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-r-lg);
	overflow: hidden;
	transition: transform .35s, box-shadow .35s, border-color .35s;
	display: flex;
	flex-direction: column;
}

.ab-course:hover {
	transform: translateY(-6px);
	box-shadow: var(--ab-shadow-lg);
	border-color: var(--arctic-blue-3);
}

.ab-course__media {
	position: relative;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--arctic-blue-1);
}

.ab-course__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s;
}

.ab-course:hover .ab-course__media img {
	transform: scale(1.07);
}

.ab-course__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(8px);
	color: var(--ab-ink);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 7px 13px;
	border-radius: 999px;
}

.ab-course__body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
}

.ab-course__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	color: var(--ab-ink);
}

.ab-course__sum {
	font-size: 14px;
	line-height: 1.7;
	color: var(--ab-slate);
	margin: 0;
}

.ab-course__go {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--ab-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 650;
	font-size: 14px;
	color: var(--arctic-blue-5);
	text-decoration: none;
}

.ab-course__go i {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--arctic-blue-1);
	display: grid;
	place-items: center;
	font-size: 12px;
	transition: .25s;
}

.ab-course:hover .ab-course__go i {
	background: var(--arctic-blue-5);
	color: #fff;
	transform: translateX(3px);
}

.ab-course__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* ==========================================================================
   FEATURES / WHY
   ========================================================================== */
.ab-why {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

.ab-why__card {
	position: relative;
	padding: 30px 26px;
	border-radius: var(--ab-r-lg);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(173, 232, 244, .18);
	transition: .35s;
	overflow: hidden;
}

.ab-why__card:hover {
	background: rgba(144, 224, 239, .12);
	transform: translateY(-5px);
}

.ab-why__num {
	position: absolute;
	top: 18px;
	right: 22px;
	font-family: var(--ab-head);
	font-size: 46px;
	color: rgba(173, 232, 244, .16);
	line-height: 1;
}

.ab-why__ico {
	width: 54px;
	height: 54px;
	border-radius: 17px;
	background: var(--ab-grad);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 20px;
	margin-bottom: 18px;
}

.ab-why__card h3 {
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 8px;
	color: #fff;
}

.ab-why__card p {
	font-size: 14px;
	line-height: 1.7;
	color: rgba(202, 240, 248, .7);
	margin: 0;
}

/* ==========================================================================
   CATEGORY TILES
   ========================================================================== */
.ab-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 224px;
	gap: 18px;
}

/* 01 — feature tile, two columns wide and two rows tall */
.ab-bento .ab-cat--1 {
	grid-column: span 2;
	grid-row: span 2;
}

/* 02 / 03 — portrait tiles stacked beside the feature */
.ab-bento .ab-cat--2,
.ab-bento .ab-cat--3 {
	grid-column: span 2;
}

/* 04 / 05 — wide tiles closing the block */
.ab-bento .ab-cat--4,
.ab-bento .ab-cat--5 {
	grid-column: span 2;
}

.ab-bento .ab-cat--1 .ab-cat__t {
	font-size: 27px;
}

.ab-bento .ab-cat--1 .ab-cat__d {
	max-width: 46ch;
}

.ab-cat {
	position: relative;
	display: block;
	height: 100%;
	border-radius: var(--ab-r-lg);
	overflow: hidden;
	text-decoration: none;
	background: var(--ab-ink);
	isolation: isolate;
}

.ab-cat img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .55;
	transition: transform .7s, opacity .5s;
	z-index: -2;
}

.ab-cat::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 37, 47, .1) 20%, rgba(4, 37, 47, .88) 100%);
	z-index: -1;
}

.ab-cat:hover img {
	transform: scale(1.08);
	opacity: .75;
}

.ab-cat__in {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px;
	color: #fff;
}

.ab-cat__ico {
	position: absolute;
	top: 22px;
	left: 24px;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: rgba(202, 240, 248, .16);
	backdrop-filter: blur(10px);
	display: grid;
	place-items: center;
	font-size: 17px;
	color: var(--arctic-blue-2);
}

.ab-cat__num {
	position: absolute;
	top: 26px;
	right: 24px;
	font-family: var(--ab-head);
	font-size: 22px;
	color: rgba(202, 240, 248, .5);
}

.ab-cat__t {
	font-size: 21px;
	font-weight: 700;
	margin: 0 0 6px;
	color: #fff;
}

.ab-cat__d {
	font-size: 13.5px;
	line-height: 1.65;
	color: rgba(202, 240, 248, .78);
	margin: 0 0 14px;
}

.ab-cat__go {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 650;
	color: var(--arctic-blue-3);
}

.ab-cat:hover .ab-cat__go {
	color: #fff;
}

/* ==========================================================================
   ABOUT / LEDGER
   ========================================================================== */
.ab-about {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(32px, 5vw, 70px);
	align-items: start;
}

.ab-about__sticky {
	position: sticky;
	top: 130px;
}

.ab-about__shots {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 28px;
}

.ab-about__shots figure {
	margin: 0;
	border-radius: var(--ab-r);
	overflow: hidden;
	aspect-ratio: 1;
	box-shadow: var(--ab-shadow);
}

.ab-about__shots img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ab-ledger {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
	counter-reset: ab;
}

.ab-ledger li {
	display: flex;
	gap: 20px;
	padding: 26px;
	border-radius: var(--ab-r-lg);
	background: #fff;
	border: 1px solid var(--ab-line);
	transition: .3s;
}

.ab-ledger li:hover {
	border-color: var(--arctic-blue-4);
	box-shadow: var(--ab-shadow);
	transform: translateX(6px);
}

.ab-ledger__n {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 15px;
	background: var(--arctic-blue-1);
	color: var(--arctic-blue-5);
	display: grid;
	place-items: center;
	font-weight: 750;
	font-size: 15px;
}

.ab-ledger li:hover .ab-ledger__n {
	background: var(--arctic-blue-5);
	color: #fff;
}

.ab-ledger h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--ab-ink);
}

.ab-ledger p {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--ab-slate);
	margin: 0;
}

/* ==========================================================================
   CREDITS
   ========================================================================== */
.ab-calc {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-radius: var(--ab-r-xl);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ab-line);
	box-shadow: var(--ab-shadow-lg);
	max-width: 940px;
	margin: 0 auto clamp(46px, 6vw, 78px);
}

.ab-calc__side {
	padding: clamp(28px, 4vw, 44px);
}

.ab-calc__side--ink {
	background: var(--ab-ink);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}

.ab-calc__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ab-muted);
	margin-bottom: 10px;
}

.ab-calc__input {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 2px solid var(--ab-line);
	border-radius: var(--ab-r);
	padding: 6px 18px;
	transition: .25s;
}

.ab-calc__input:focus-within {
	border-color: var(--arctic-blue-4);
	box-shadow: 0 0 0 5px var(--arctic-blue-1);
}

.ab-calc__input span {
	font-size: 26px;
	font-weight: 700;
	color: var(--arctic-blue-5);
}

.ab-calc__input input {
	flex: 1;
	border: 0;
	outline: 0;
	background: none;
	font-size: 34px;
	font-weight: 700;
	color: var(--ab-ink);
	padding: 12px 0;
	width: 100%;
	font-family: var(--ab-font);
}

.ab-calc__note {
	display: block;
	font-size: 13px;
	color: var(--ab-muted);
	margin-top: 12px;
}

.ab-calc__cells {
	display: grid;
	gap: 10px;
	margin-bottom: 6px;
}

.ab-calc__cell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 16px;
	border-radius: var(--ab-r-sm);
	background: rgba(202, 240, 248, .08);
	font-size: 14px;
	color: rgba(202, 240, 248, .8);
}

.ab-calc__cell strong {
	font-size: 17px;
	color: #fff;
}

.ab-calc__cell--total {
	background: var(--arctic-blue-5);
	color: #04252f;
}

.ab-calc__cell--total strong {
	font-size: 26px;
	color: #04252f;
}

.ab-calc__hidden {
	display: none;
}

.ab-calc__go {
	width: 100%;
	justify-content: center;
	margin-top: 6px;
}

.ab-calc__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 12.5px;
	color: rgba(202, 240, 248, .6);
}

/* tiers */
.ab-tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
	margin-bottom: 42px;
}

.ab-tier {
	position: relative;
	padding: 28px 24px;
	border-radius: var(--ab-r-lg);
	background: #fff;
	border: 1.5px solid var(--ab-line);
	transition: .3s;
}

.ab-tier:hover,
.ab-tier.timeline-step-highlight {
	border-color: var(--arctic-blue-5);
	transform: translateY(-5px);
	box-shadow: var(--ab-shadow);
}

.ab-tier.timeline-step-highlight {
	background: linear-gradient(180deg, var(--arctic-blue-1), #fff);
}

.ab-tier__x {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 22px;
	font-weight: 750;
	color: var(--arctic-blue-5);
	margin-bottom: 14px;
}

.ab-tier__x em {
	font-style: normal;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--ab-ink);
	color: var(--arctic-blue-2);
	padding: 4px 9px;
	border-radius: 999px;
}

.ab-tier h4 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 5px;
	color: var(--ab-ink);
}

.ab-tier__range {
	display: block;
	font-size: 13px;
	font-weight: 650;
	color: var(--ab-muted);
	margin-bottom: 10px;
}

.ab-tier p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--ab-slate);
	margin: 0;
}

.ab-perks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.ab-perks li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--ab-line);
	font-size: 14px;
	font-weight: 600;
	color: var(--ab-ink);
}

.ab-perks i {
	color: var(--arctic-blue-5);
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.ab-cta {
	position: relative;
	border-radius: var(--ab-r-xl);
	background: var(--ab-ink);
	color: #fff;
	padding: clamp(40px, 6vw, 72px);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.2fr auto;
	gap: 30px;
	align-items: center;
}

.ab-cta::before {
	content: '';
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: var(--arctic-blue-5);
	filter: blur(120px);
	opacity: .4;
	top: -140px;
	right: -60px;
}

.ab-cta__in {
	position: relative;
}

.ab-cta h2 {
	font-family: var(--ab-head);
	font-size: clamp(28px, 4vw, 46px);
	line-height: 1.12;
	margin: 0 0 12px;
	color: #fff;
}

.ab-cta p {
	color: rgba(202, 240, 248, .75);
	font-size: 16px;
	line-height: 1.7;
	margin: 0;
	max-width: 55ch;
}

.ab-cta__act {
	position: relative;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ab-ftr {
	position: relative;
	background: var(--ab-ink);
	color: rgba(202, 240, 248, .74);
	padding: clamp(56px, 7vw, 90px) 0 28px;
	overflow: hidden;
}

.ab-ftr::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: var(--ab-grad);
}

.ab-ftr__glow {
	position: absolute;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: var(--arctic-blue-5);
	filter: blur(150px);
	opacity: .22;
	bottom: -300px;
	left: -100px;
	pointer-events: none;
}

.ab-ftr__top {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	padding-bottom: 44px;
	border-bottom: 1px solid rgba(173, 232, 244, .15);
}

.ab-ftr__logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	margin-bottom: 16px;
}

.ab-ftr__logo b {
	font-size: 21px;
	font-weight: 750;
	color: #fff;
	letter-spacing: -.02em;
}

.ab-ftr__statement {
	font-size: 15px;
	line-height: 1.75;
	max-width: 42ch;
	margin: 0;
}

.ab-ftr__sub-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--arctic-blue-3);
	margin-bottom: 14px;
}

.ab-ftr__field {
	display: flex;
	gap: 8px;
	background: rgba(202, 240, 248, .07);
	border: 1px solid rgba(173, 232, 244, .2);
	border-radius: 999px;
	padding: 6px 6px 6px 20px;
	transition: .25s;
}

.ab-ftr__field:focus-within {
	border-color: var(--arctic-blue-4);
}

.ab-ftr__field input {
	flex: 1;
	background: none;
	border: 0;
	outline: 0;
	color: #fff;
	font-size: 14.5px;
	padding: 12px 0;
	font-family: var(--ab-font);
}

.ab-ftr__field input::placeholder {
	color: rgba(202, 240, 248, .45);
}

.ab-ftr__send,
button.ab-ftr__send {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	background: var(--arctic-blue-5);
	color: #04252f;
	cursor: pointer;
	flex-shrink: 0;
	transition: .25s;
}

.ab-ftr__send:hover,
button.ab-ftr__send:hover {
	background: var(--arctic-blue-2);
}

.ab-ftr__note {
	font-size: 13px;
	margin: 12px 0 0;
	color: rgba(202, 240, 248, .55);
}

.ab-ftr__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 34px;
	padding: 44px 0;
}

.ab-ftr__h {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 18px;
}

.ab-ftr__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}

.ab-ftr__links a {
	color: inherit;
	text-decoration: none;
	font-size: 14.5px;
	display: inline-block;
	transition: color .22s;
}

.ab-ftr__links a:hover {
	color: #fff;
}

.ab-ftr__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.ab-ftr__contact span.lbl {
	display: block;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--arctic-blue-4);
	margin-bottom: 4px;
}

.ab-ftr__contact a,
.ab-ftr__contact li>span:not(.lbl) {
	color: #fff;
	font-size: 14.5px;
	text-decoration: none;
	line-height: 1.6;
}

.ab-ftr__bottom {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding-top: 24px;
	border-top: 1px solid rgba(173, 232, 244, .15);
	font-size: 13.5px;
}

.ab-ftr__bottom p {
	margin: 0;
}

.ab-ftr__bottom a {
	color: var(--arctic-blue-3);
	text-decoration: none;
}

.ab-ftr__right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ab-ftr__pay {
	max-height: 26px;
	opacity: .8;
}

.ab-ftr__up {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff !important;
	border: 1px solid rgba(173, 232, 244, .25);
	border-radius: 999px;
	padding: 9px 16px;
}

.ab-ftr__up:hover {
	background: var(--arctic-blue-5);
	color: #04252f !important;
	border-color: transparent;
}

.scroll-to-top {
	background: var(--arctic-blue-5) !important;
	color: #fff !important;
	border-radius: 50% !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
	.ab-hdr__cta {
		display: none;
	}
}

@media (max-width: 1100px) {
	.ab-nav {
		display: none;
	}

	.ab-burger {
		display: flex;
	}

	.ab-hero__in,
	.ab-about,
	.ab-calc,
	.ab-cta {
		grid-template-columns: 1fr;
	}

	.ab-about__sticky {
		position: static;
	}

	.ab-ftr__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {

	.ab-hdr__top-in .ab-hdr__note {
		display: none;
	}

	.ab-ftr__top {
		grid-template-columns: 1fr;
	}

	.ab-hero__float {
		left: 10px;
		bottom: 20px;
	}
}

@media (max-width: 640px) {
	.ab-shell {
		width: calc(100% - 32px);
	}

	.ab-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.ab-ftr__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.ab-hero__frames {
		aspect-ratio: 4/3.6;
	}

	.ab-calc__input input {
		font-size: 26px;
	}

	.ab-cart__btns {
		flex-direction: column;
	}
}

/* The header is sticky and in-flow now, so drop app.css's fixed-header offset. */
body:not(.page-index) .page-wrapper {
	padding-top: 0;
}

/* Scrollbars — arctic, replacing the old ember/green thumbs from app.css */
* {
	scrollbar-color: var(--arctic-blue-4) var(--ab-wash);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--ab-wash);
}

::-webkit-scrollbar-thumb {
	background: var(--arctic-blue-4);
	border-radius: 6px;
	border: 2px solid var(--ab-wash);
	box-shadow: none;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--arctic-blue-5);
	box-shadow: none;
}

/* ==========================================================================
   LEGACY OVERRIDES
   style.css/app.css style `.subscribe-form` and bare `p` with the old theme at
   a higher weight than single-class rules — re-assert the arctic values here.
   ========================================================================== */
.ab-ftr .ab-ftr__statement,
.ab-ftr .ab-ftr__note {
	color: rgba(202, 240, 248, .74);
}

.ab-ftr .ab-ftr__note {
	color: rgba(202, 240, 248, .55);
}

.ab-ftr .subscribe-form {
	position: static;
}

.ab-ftr .subscribe-form form {
	margin: 0;
}

.ab-ftr .subscribe-form input.email {
	position: static;
	width: auto;
	height: auto;
	flex: 1;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	font-size: 14.5px;
	padding: 12px 0;
}

.ab-ftr .subscribe-form button.ab-ftr__send {
	position: static;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--arctic-blue-5);
	color: #04252f;
	flex-shrink: 0;
}

.ab-ftr .subscribe-form button.ab-ftr__send:hover {
	background: var(--arctic-blue-2);
	transform: none;
}

.ab-ftr .suces_rinfo {
	color: var(--arctic-blue-3) !important;
	font-size: 13px;
	margin-top: 10px;
}

.ab-ftr__top section {
	padding: 0;
	margin: 0;
}

.ab-ftr .ab-ftr__bottom,
.ab-ftr .ab-ftr__bottom p {
	color: rgba(202, 240, 248, .7);
}

.ab-ftr .ab-ftr__bottom a {
	color: var(--arctic-blue-3);
}

.ab-ftr .ab-ftr__bottom a.ab-ftr__up {
	color: #fff;
}

.ab-ftr__up {
	white-space: nowrap;
	flex-shrink: 0;
}

/* ==========================================================================
   ELEMENT-LEVEL LEGACY OVERRIDES
   theme.css ships `section:nth-child(even)` / `section:nth-child(3n)` with
   `background-color: transparent` — 0,1,1, which outranks a single class and
   silently blanked whole sections. Re-assert each themed band at that weight.
   ========================================================================== */
section.ab-sec--wash {
	background: var(--ab-wash);
}

section.ab-sec--ink {
	background: var(--ab-ink);
}

section.ab-hero {
	background: linear-gradient(170deg, #fff 0%, var(--arctic-blue-1) 100%);
}

section.ab-marq {
	background: var(--ab-ink);
}

section.px-page,
section.vx-sec,
section.ordr,
section.dbx,
section.topup-console-section,
section.cart-redesign,
section.faq-section,
section.instructor-section,
section.instructor-detail-section {
	background: var(--ab-wash);
}

section.vx-sec--paper {
	background: #fff;
}

section.vx-sec--tint {
	background: var(--arctic-blue-1);
}

section.vx-hero {
	background: linear-gradient(170deg, #fff 0%, var(--arctic-blue-1) 100%);
}

.page-about-us section.ab-intro {
	background: linear-gradient(170deg, #fff 0%, var(--arctic-blue-1) 100%);
}

.page-about-us section.ab-manifesto {
	background: var(--ab-ink);
}

.page-about-us section.ab-tracks {
	background: var(--ab-wash);
}

.page-about-us section.ab-proof {
	background: #fff;
}

/* Cart button — app.css forces `.cart-btn` white-on-white with !important, so
   the header uses its own class; keep the icon legible either way. */
.ab-hdr .ab-ico-btn--cart {
	background: #fff;
	color: var(--ab-ink);
	border: 1px solid var(--ab-line);
}

.ab-hdr .ab-ico-btn--cart:hover {
	background: var(--arctic-blue-1);
	border-color: var(--arctic-blue-3);
	color: var(--ab-ink);
}

.ab-hdr .ab-ico-btn--cart i {
	font-size: 17px;
}

/* Preloader — style.css sets a light #f7f7f7 on the #preloader id (1,0,0),
   which washed the whole overlay out. Match that weight. */
#preloader.ab-load {
	position: fixed;
	inset: 0;
	background: var(--ab-ink);
	z-index: 999999;
}

/* Bento — responsive collapse */
@media (max-width: 1000px) {
	.ab-bento {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 210px;
	}

	.ab-bento .ab-cat--1 {
		grid-column: span 2;
		grid-row: span 1;
	}

	.ab-bento .ab-cat--2,
	.ab-bento .ab-cat--3,
	.ab-bento .ab-cat--4,
	.ab-bento .ab-cat--5 {
		grid-column: span 1;
	}
}

@media (max-width: 620px) {
	.ab-bento {
		grid-template-columns: 1fr;
		grid-auto-rows: 230px;
	}

	.ab-bento .ab-cat--1,
	.ab-bento .ab-cat--2,
	.ab-bento .ab-cat--3,
	.ab-bento .ab-cat--4,
	.ab-bento .ab-cat--5 {
		grid-column: span 1;
	}
}

.ab-ftr .ab-ftr__links,
.ab-ftr .ab-ftr__contact {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.ab-ftr .ab-ftr__links li {
	padding: 0;
	margin: 0;
	list-style: none;
}

.ab-ftr .ab-ftr__links li a {
	padding: 0;
	margin: 0;
}

/* The footer "back to top" pill reuses `.scroll-to-target` for script.js's
   smooth-scroll handler; style.css styles that class as the hidden floating
   button, so re-assert the pill here. */
.ab-ftr .ab-ftr__up.scroll-to-target {
	position: static;
	visibility: visible;
	opacity: 1;
	width: auto;
	height: auto;
	line-height: normal;
	background: transparent;
	border: 1px solid rgba(173, 232, 244, .25);
	border-radius: 999px;
	padding: 9px 16px;
	box-shadow: none;
	transform: none;
}

.ab-ftr .ab-ftr__up.scroll-to-target:hover {
	background: var(--arctic-blue-5);
	border-color: transparent;
	color: #04252f !important;
}

/* ==========================================================================
   LEGACY TOKEN RETARGET
   theme.css defines the retired seafoam/pine palette, and app.css, style.css
   and theme.css itself resolve ~215 var() references against it — including
   `button[type="submit"]`, whose green fill outranked every single-class
   button. Repointing the tokens here (arctic.css loads after theme.css) moves
   every remaining legacy surface onto the arctic palette in one place.
   Dark tokens stay dark and light tokens stay light, so existing contrast
   pairings are preserved and only the hue changes.
   ========================================================================== */
:root {
	/* light scale */
	--seafoam-1: #caf0f8;
	--seafoam-2: #ade8f4;
	--seafoam-3: #90e0ef;
	--seafoam-4: #48cae4;
	--seafoam-5: #00b4d8;

	/* dark scale */
	--pine-1: #0096c7;
	--pine-2: #0a3a49;
	--pine-3: #04252f;
	--pine-4: #04252f;

	/* canvas */
	--canvas: #f2fbfd;
	--canvas-tint: #eaf7fb;
	--canvas-deep: #04252f;

	/* elevation */
	--ring: 0 0 0 1px rgba(4, 37, 47, .08);
	--lift-sm: 0 2px 8px rgba(4, 37, 47, .05);
	--lift-md: 0 10px 30px -12px rgba(4, 37, 47, .16);
	--lift-lg: 0 28px 60px -28px rgba(4, 37, 47, .28);
	--glow: 0 12px 32px -10px rgba(0, 180, 216, .45);

	/* brand core — primary CTA fill is ink, hover is one step lighter, so
	   legacy buttons keep white labels at full contrast in both states */
	--brand-purple: #04252f;
	--brand-purple-dark: #0a3a49;
	--brand-purple-light: #90e0ef;
	--brand-purple-wash: rgba(0, 180, 216, .10);
	--brand-purple-glow: rgba(0, 180, 216, .35);

	--brand-blue: #00b4d8;
	--brand-blue-dark: #0096c7;
	--brand-blue-light: #ade8f4;
	--brand-blue-wash: rgba(72, 202, 228, .10);
	--brand-blue-glow: rgba(72, 202, 228, .30);

	--brand-black: #04252f;
	--brand-black-soft: #031c24;
	--brand-black-card: #04252f;
	--brand-black-border: #0a3a49;

	/* semantic aliases */
	--color-ink: #04252f;
	--color-pencil: #4a6f7c;
	--color-graphite: #6f8f9a;
	--color-charcoal: #0a3a49;
	--color-cream: #f2fbfd;
	--color-stone: #dceff4;
	--shadow-lg: 0 18px 50px -28px rgba(4, 37, 47, .35);
}