/* ============================================================
   app.css — single consolidated stylesheet (auto-built)
   layout chrome (global) + per-page scoped blocks

   THEME TOKENS are defined in theme.css (:root).
   Brand palette reference (do NOT change here — edit theme.css):
     --brand-purple  : #2d6a4f   primary actions, CTAs, highlights
     --brand-blue    : #52b788   links, secondary accents
     --brand-black   : #000000   deep backgrounds
   All component colors below use var(--brand-*) or the semantic
   aliases (--color-ember-red, --color-deep-ember, etc.) from theme.css
   ============================================================ */

/* ===== Header / global chrome ===== */


/* ============================================================
   PRELOADER — orbital progress ring on a scanning grid,
   leaving via a horizontal split-curtain wipe.
   Structure: 2 curtain panels (z1) > grid + beam (z2) > content (z3)
   ============================================================ */
#preloader.flx-loader {
	--flx-r: 92px;                                /* ring radius in CSS px (SVG r=54 @ 204px box) */
	--flx-ease: cubic-bezier(0.76, 0, 0.24, 1);
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	overflow: hidden;
	pointer-events: auto;
}

/* --- Curtain panels: the actual backdrop, they split on exit --- */
.flx-loader__panel {
	position: absolute;
	left: 0;
	right: 0;
	height: 50.5%;
	background: #07060d;
	z-index: 1;
	will-change: transform;
	transition: transform 0.9s var(--flx-ease);
}

.flx-loader__panel--top {
	top: 0;
}

.flx-loader__panel--bottom {
	bottom: 0;
}

/* Horizon hairline on the seam, fading out toward the edges */
.flx-loader__panel--top::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(82, 183, 136, 0.45) 35%,
		rgba(116, 198, 157, 0.45) 65%,
		transparent 100%);
}

/* --- Backdrop: drifting grid, masked to a soft vignette --- */
.flx-loader__grid {
	position: absolute;
	inset: -64px;
	z-index: 2;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
	mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
	animation: flxGridDrift 16s linear infinite;
	transition: opacity 0.3s ease;
}

@keyframes flxGridDrift {
	to { background-position: 64px 64px, 64px 64px; }
}

/* --- Backdrop: scan beam sweeping down the viewport --- */
.flx-loader__beam {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 200px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(82, 183, 136, 0.16) 45%,
		rgba(116, 198, 157, 0.22) 56%,
		transparent 100%);
	filter: blur(8px);
	animation: flxBeam 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	transition: opacity 0.3s ease;
}

/* transform only — animating opacity here would override the exit fade-out */
@keyframes flxBeam {
	0%   { transform: translateY(-220px); }
	100% { transform: translateY(100vh); }
}

/* --- Content stack --- */
.flx-loader__inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 20px;
	transition: opacity 0.35s ease, transform 0.5s var(--flx-ease);
}

/* --- Orbital ring --- */
.flx-loader__ring {
	position: relative;
	width: 204px;
	height: 204px;
}

.flx-loader__svg {
	width: 100%;
	height: 100%;
	overflow: visible;
	transform: rotate(-90deg);       /* start the meter at 12 o'clock */
}

.flx-loader__track {
	fill: none;
	stroke: rgba(255, 255, 255, 0.08);
	stroke-width: 2;
}

/* Slow-spinning dotted inner orbit */
.flx-loader__dots {
	fill: none;
	stroke: rgba(149, 213, 178, 0.38);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-dasharray: 0.5 8;
	transform-origin: 60px 60px;
	animation: flxSpin 9s linear infinite;
}

@keyframes flxSpin {
	to { transform: rotate(360deg); }
}

/* The progress arc itself */
.flx-loader__meter {
	fill: none;
	stroke: url(#flxLoaderGrad);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 339.292;
	stroke-dashoffset: 339.292;
	filter: drop-shadow(0 0 7px rgba(82, 183, 136, 0.7));
	transition: stroke-dashoffset 0.3s ease;
}

/* Satellite dot riding the head of the arc */
.flx-loader__head {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow:
		0 0 0 4px rgba(82, 183, 136, 0.22),
		0 0 20px 5px rgba(82, 183, 136, 0.75);
	transform: rotate(0deg) translateY(calc(var(--flx-r) * -1));
	transition: transform 0.3s ease;
}

/* Counter, centred inside the ring */
.flx-loader__count {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	font-family: var(--font-graphik, 'Inter', sans-serif);
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #ffffff;
	font-variant-numeric: tabular-nums;
}

.flx-loader__count i {
	font-style: normal;
	font-size: 18px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.45);
	transform: translateY(-12px);   /* raise toward the cap-height of the digits */
}

/* Wordmark with a light sweep */
.flx-loader__word {
	margin-top: 34px;
	font-family: var(--font-graphik, 'Inter', sans-serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	text-transform: uppercase;
	background: linear-gradient(90deg,
		rgba(255, 255, 255, 0.52) 0%,
		rgba(255, 255, 255, 0.52) 38%,
		#ffffff 50%,
		rgba(255, 255, 255, 0.52) 62%,
		rgba(255, 255, 255, 0.52) 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: flxShimmer 2.8s linear infinite;
}

@keyframes flxShimmer {
	0%   { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}

.flx-loader__status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
	font-family: var(--font-inter, 'Inter', sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.46);
}

.flx-loader__status::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--brand-blue, #52b788);
	box-shadow: 0 0 10px var(--brand-blue, #52b788);
	animation: flxPulse 1.4s ease-in-out infinite;
}

@keyframes flxPulse {
	0%, 100% { opacity: 0.25; transform: scale(0.8); }
	50%      { opacity: 1;    transform: scale(1.3); }
}

/* --- Exit sequence: content lifts, then curtains split --- */
#preloader.flx-loader.is-done .flx-loader__inner {
	opacity: 0;
	transform: translateY(-16px) scale(0.94);
}

#preloader.flx-loader.is-done .flx-loader__grid,
#preloader.flx-loader.is-done .flx-loader__beam {
	opacity: 0;
}

#preloader.flx-loader.hidden {
	pointer-events: none;
}

#preloader.flx-loader.hidden .flx-loader__panel--top {
	transform: translateY(-100%);
}

#preloader.flx-loader.hidden .flx-loader__panel--bottom {
	transform: translateY(100%);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	.flx-loader__grid,
	.flx-loader__beam,
	.flx-loader__dots,
	.flx-loader__word,
	.flx-loader__status::before {
		animation: none !important;
	}
	.flx-loader__beam {
		opacity: 0;
	}
	.flx-loader__word {
		-webkit-text-fill-color: rgba(255, 255, 255, 0.85);
		color: rgba(255, 255, 255, 0.85);
	}
	.flx-loader__panel,
	.flx-loader__inner,
	.flx-loader__meter,
	.flx-loader__head {
		transition-duration: 0.01ms !important;
	}
}

/* --- Mobile --- */
@media (max-width: 576px) {
	#preloader.flx-loader {
		--flx-r: 68px;
	}
	.flx-loader__ring {
		width: 152px;
		height: 152px;
	}
	.flx-loader__count {
		font-size: 34px;
	}
	.flx-loader__count i {
		font-size: 14px;
		margin-top: 7px;
	}
	.flx-loader__head {
		width: 8px;
		height: 8px;
		margin: -4px 0 0 -4px;
	}
	.flx-loader__word {
		margin-top: 26px;
		font-size: 10px;
		letter-spacing: 0.3em;
		text-indent: 0.3em;
	}
	.flx-loader__status {
		font-size: 9px;
		letter-spacing: 0.18em;
	}
	.flx-loader__grid {
		background-size: 44px 44px;
		animation-name: flxGridDriftSm;
	}
}

@keyframes flxGridDriftSm {
	to { background-position: 44px 44px, 44px 44px; }
}

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
            .cookiesBtn__link {
                background: var(--color-ink) !important;
                border: none !important;
                color: var(--color-paper) !important;
            }

            /* ============================================================
               SCROLLBAR STYLING (NEW THEME)
               ============================================================ */
            html {
                scroll-behavior: smooth;
                scrollbar-width: thin;
                scrollbar-color: var(--color-ember-red) var(--color-lighter);
            }

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

            ::-webkit-scrollbar-track {
                background: var(--color-lighter);
                border-radius: 5px;
            }

            ::-webkit-scrollbar-thumb {
                background: var(--color-ember-red);
                border-radius: 5px;
                border: 2px solid var(--color-lighter);
                transition: all var(--transition-normal);
            }

            ::-webkit-scrollbar-thumb:hover {
                background: var(--color-deep-ember);
                box-shadow: 0 0 8px rgba(82, 183, 136, 0.4);
            }

            /* ============================================================
               XH — REDESIGNED HEADER v2 (Dark Glass + Brand Palette)
               ============================================================ */

            /* ── Base shell ── */
            .xh {
                position: fixed;
                top: 0; left: 0; right: 0;
                z-index: 1200;
                width: 100%;
                transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
                background: #0b2018;
                border-bottom: 1px solid transparent;
            }
            .xh--scrolled {
                background: transparent;
                /* backdrop-filter: blur(18px);
                -webkit-backdrop-filter: blur(18px); */
                /* border-bottom-color: rgba(82, 183, 136, 0.18);
                box-shadow:
                    0 4px 32px rgba(0, 0, 0, 0.45),
                    0 0 0 1px rgba(82, 183, 136, 0.08); */
            }

            /* ── Gradient accent bar at the very top ── */
            .xh::before {
                content: '';
                position: absolute;
                top: 0; left: 0; right: 0;
                height: 2px;
                background: linear-gradient(90deg, var(--brand-purple) 0%, var(--brand-blue) 50%, var(--brand-purple) 100%);
                background-size: 200% 100%;
                animation: xhBarShimmer 4s linear infinite;
                opacity: 0.9;
                z-index: 1;
            }
            @keyframes xhBarShimmer {
                0%   { background-position: 0% 0%; }
                100% { background-position: 200% 0%; }
            }

            /* ── Inner layout ── */
            .xh__inner {
                display: flex;
                align-items: center;
                max-width: 1320px;
                margin: 0 auto;
                padding: 0 40px;
                height: 70px;
                gap: 0;
            }

            /* ── Logo ── */
            .xh__logo {
                display: inline-flex;
                align-items: center;
                flex-shrink: 0;
                text-decoration: none;
                margin-right: 36px;
            }
            .xh__logo-img {
                height: 42px;
                width: auto;
                display: block;
                object-fit: contain;
                /* filter: brightness(0) invert(1); */
                transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
            }
            .xh__logo:hover .xh__logo-img {
                transform: scale(1.06) rotate(-1deg);
            }
            .xh--scrolled .xh__logo-img {
                /* filter: brightness(0) invert(1); */
            }

            /* ── Center nav ── */
            .xh__nav {
                flex: 1;
                display: flex;
                align-items: center;
            }
            .xh__nav-list {
                display: flex;
                align-items: center;
                gap: 2px;
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .xh__nav-item { position: relative; }

            .xh__nav-link {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 8px 16px;
                font-family: var(--font-inter), sans-serif;
                font-size: 14px;
                font-weight: 500;
                color: rgba(255, 255, 255, 0.78);
                text-decoration: none;
                white-space: nowrap;
                position: relative;
                border-radius: 8px;
                letter-spacing: 0.01em;
                transition: color 0.22s ease, background 0.22s ease;
            }
            /* Hover — underline glow */
            .xh__nav-link::after {
                content: '';
                position: absolute;
                bottom: 2px;
                left: 16px;
                right: 16px;
                height: 2px;
                border-radius: 2px;
                background: linear-gradient(90deg, var(--brand-purple), var(--brand-blue));
                transform: scaleX(0);
                transform-origin: left center;
                transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .xh__nav-link:hover {
                color: #ffffff;
                background: rgba(255, 255, 255, 0.05);
                text-decoration: none;
            }
            .xh__nav-link:hover::after { transform: scaleX(1); }

            /* Active — glowing pill */
            .xh__nav-link--active {
                color: #ffffff !important;
                font-weight: 600;
                background: linear-gradient(135deg, rgba(82, 183, 136, 0.22) 0%, rgba(116, 198, 157, 0.16) 100%);
                border: 1px solid rgba(82, 183, 136, 0.35);
                box-shadow: 0 0 16px rgba(82, 183, 136, 0.20), inset 0 1px 0 rgba(255,255,255,0.08);
            }
            .xh__nav-link--active::after {
                transform: scaleX(1);
                opacity: 0.6;
            }
            .xh__nav-link--active:hover {
                background: linear-gradient(135deg, rgba(82, 183, 136, 0.30) 0%, rgba(116, 198, 157, 0.22) 100%) !important;
                box-shadow: 0 0 24px rgba(82, 183, 136, 0.35) !important;
            }

            /* Caret */
            .xh__caret {
                width: 9px;
                height: 5px;
                flex-shrink: 0;
                opacity: 0.5;
                transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
            }
            .xh__nav-item--drop:hover .xh__caret,
            .xh__pill-drop:hover .xh__caret,
            .xh__pill-drop--account:hover .xh__caret {
                transform: rotate(180deg);
                opacity: 1;
            }

            /* ── MEGA DROPDOWN — categories ── */
            .xh__dropdown {
                position: absolute;
                top: calc(100% + 12px);
                left: 50%;
                transform: translateX(-50%) translateY(10px) scale(0.97);
                transform-origin: top center;
                min-width: 620px;
                max-width: min(760px, calc(100vw - 40px));
                background: rgba(10, 10, 20, 0.96);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                border: 1px solid rgba(82, 183, 136, 0.22);
                border-radius: 18px;
                padding: 16px;
                box-shadow:
                    0 32px 80px rgba(0, 0, 0, 0.55),
                    0 0 0 1px rgba(82, 183, 136, 0.10),
                    inset 0 1px 0 rgba(255,255,255,0.06);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition:
                    opacity 0.28s ease,
                    transform 0.3s cubic-bezier(0.34, 1.2, 0.5, 1),
                    visibility 0.28s;
                z-index: 1300;
            }
            /* Small dropdowns (lang, account, currency) */
            .xh__dropdown--sm {
                min-width: 200px;
                left: auto;
                right: 0;
                transform: translateY(10px) scale(0.97);
                transform-origin: top right;
            }
            /* Bridge zone so cursor can travel */
            .xh__dropdown::before {
                content: '';
                position: absolute;
                top: -14px;
                left: 0; right: 0;
                height: 14px;
            }

            .xh__nav-item--drop:hover .xh__dropdown,
            .xh__nav-item--drop:focus-within .xh__dropdown,
            .xh__pill-drop:hover .xh__dropdown,
            .xh__pill-drop:focus-within .xh__dropdown {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: translateX(-50%) translateY(0) scale(1);
            }
            .xh__dropdown--sm.xh__dropdown:is(.xh__pill-drop:hover .xh__dropdown,
                .xh__pill-drop:focus-within .xh__dropdown) {
                transform: translateY(0) scale(1);
            }
            /* override for small dropdowns (no translateX) */
            .xh__pill-drop:hover .xh__dropdown--sm,
            .xh__pill-drop:focus-within .xh__dropdown--sm {
                transform: translateY(0) scale(1) !important;
            }

            /* Dropdown header label */
            .xh__drop-header {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 6px 10px 14px;
                border-bottom: 1px solid rgba(82, 183, 136, 0.15);
                margin-bottom: 10px;
            }
            .xh__drop-header-title {
                font-family: var(--font-inter), sans-serif;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.12em;
                text-transform: uppercase;
                color: var(--brand-purple);
            }
            .xh__drop-header-line {
                flex: 1;
                height: 1px;
                background: linear-gradient(90deg, rgba(82, 183, 136,0.4) 0%, transparent 100%);
            }

            /* Two-column grid for catalog mega */
            .xh__drop-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 4px;
            }

            /* Category names are long: wrap them instead of clipping. */
            .xh__drop-grid .xh__drop-item {
                align-items: flex-start;
                white-space: normal;
                overflow-wrap: anywhere;
                line-height: 1.35;
            }
            .xh__drop-grid .xh__drop-ico {
                margin-top: -1px;
            }

            /* ── Drop items ── */
            .xh__drop-item {
                display: flex;
                align-items: center;
                gap: 11px;
                padding: 11px 13px;
                border-radius: 12px;
                font-family: var(--font-inter), sans-serif;
                font-size: 13.5px;
                font-weight: 500;
                color: rgba(255, 255, 255, 0.75);
                text-decoration: none;
                white-space: nowrap;
                cursor: pointer;
                background: transparent;
                border: 1px solid transparent;
                transition: all 0.2s ease;
                position: relative;
                overflow: hidden;
            }
            .xh__drop-item::before {
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 12px;
                background: linear-gradient(135deg, rgba(82, 183, 136,0.12) 0%, rgba(116, 198, 157,0.08) 100%);
                opacity: 0;
                transition: opacity 0.2s ease;
            }
            .xh__drop-item:hover {
                color: #ffffff;
                border-color: rgba(82, 183, 136, 0.25);
                transform: translateY(-1px);
                box-shadow: 0 4px 16px rgba(0,0,0,0.2);
            }
            .xh__drop-item:hover::before { opacity: 1; }

            .xh__drop-item--active {
                color: #ffffff;
                background: rgba(82, 183, 136, 0.12);
                border-color: rgba(82, 183, 136, 0.30);
            }
            .xh__drop-item--danger { color: rgba(248, 113, 113, 0.85); }
            .xh__drop-item--danger:hover { color: #f87171; border-color: rgba(248,113,113,0.25); }
            .xh__drop-item--danger::before { background: rgba(248,113,113,0.08) !important; }

            .xh__drop-item--all {
                grid-column: 1 / -1;
                justify-content: center;
                margin-top: 6px;
                padding: 12px;
                background: rgba(82, 183, 136, 0.08);
                border: 1px dashed rgba(82, 183, 136, 0.30);
                color: var(--brand-purple-light);
                font-weight: 600;
                letter-spacing: 0.02em;
            }
            .xh__drop-item--all:hover {
                background: rgba(82, 183, 136, 0.16);
                border-color: rgba(82, 183, 136, 0.50);
                color: #fff;
            }
            .xh__drop-item--muted {
                color: rgba(255,255,255,0.35);
                pointer-events: none;
                cursor: default;
            }

            /* Icon badge */
            .xh__drop-ico {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 28px;
                height: 28px;
                border-radius: 8px;
                font-size: 11px;
                background: rgba(82, 183, 136, 0.15);
                color: var(--brand-purple-light);
                flex-shrink: 0;
                transition: background 0.2s ease, color 0.2s ease;
                position: relative;
                z-index: 1;
            }
            .xh__drop-item:hover .xh__drop-ico {
                background: var(--brand-purple);
                color: #ffffff;
            }
            .xh__drop-item--danger .xh__drop-ico { background: rgba(248,113,113,0.12); color: #f87171; }
            .xh__drop-item--danger:hover .xh__drop-ico { background: rgba(248,113,113,0.25); color: #fff; }

            /* Flag icon */
            .xh__drop-ico-flag {
                display: inline-block;
                width: 22px;
                height: 16px;
                border-radius: 3px;
                background-size: cover;
                background-position: center;
                box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
                flex-shrink: 0;
            }
            /* Checkmark */
            .xh__drop-check {
                font-size: 10px;
                margin-left: auto;
                color: var(--brand-purple-light);
                opacity: 0;
                flex-shrink: 0;
                position: relative;
                z-index: 1;
            }
            .xh__drop-item--active .xh__drop-check { opacity: 1; }

            /* Divider */
            .xh__drop-divider {
                height: 1px;
                background: rgba(82, 183, 136, 0.15);
                border: none;
                margin: 8px 4px;
            }

            /* ── Account head in dropdown ── */
            .xh__acct-head {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 12px 14px 14px;
            }
            .xh__acct-head-avatar {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
                color: #ffffff;
                font-size: 16px;
                font-weight: 700;
                flex-shrink: 0;
                box-shadow: 0 4px 14px rgba(82, 183, 136, 0.45);
            }
            .xh__acct-head-name {
                font-size: 14px;
                font-weight: 700;
                color: #ffffff;
                font-family: var(--font-inter), sans-serif;
            }
            .xh__acct-head-credits {
                font-size: 12px;
                color: var(--brand-blue-light);
                font-weight: 600;
                display: flex;
                align-items: center;
                gap: 5px;
                margin-top: 3px;
            }
            .xh__acct-head-credits i { color: var(--brand-blue); }

            /* ── RIGHT ACTIONS ── */
            .xh__actions {
                display: flex;
                align-items: center;
                gap: 6px;
                flex-shrink: 0;
                margin-left: auto;
            }

            /* Pill trigger buttons (lang, currency, account) */
            .xh__pill-drop { position: relative; }
            .xh__pill-btn {
                display: inline-flex;
                align-items: center;
                gap: 7px;
                padding: 7px 12px;
                border: 1px solid rgba(255,255,255,0.10);
                border-radius: 999px;
                background: rgba(255,255,255,0.05);
                font-family: var(--font-inter), sans-serif;
                font-size: 13px;
                font-weight: 500;
                color: rgba(255,255,255,0.75);
                cursor: pointer;
                transition: all 0.22s ease;
                white-space: nowrap;
                line-height: 1;
                backdrop-filter: blur(8px);
            }
            .xh__pill-btn:hover,
            .xh__pill-drop:hover .xh__pill-btn {
                color: #ffffff;
                background: rgba(82, 183, 136, 0.15);
                border-color: rgba(82, 183, 136, 0.40);
                box-shadow: 0 0 12px rgba(82, 183, 136, 0.20);
            }
            .xh__flag {
                display: inline-block;
                width: 18px;
                height: 13px;
                border-radius: 2px;
                background-size: cover;
                background-position: center;
                box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
            }
            .xh__pill-label { line-height: 1; }

            /* ── Account button ── */
            .xh__acct-btn {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 5px 12px 5px 5px;
                border: 1px solid rgba(255,255,255,0.10);
                border-radius: 999px;
                background: rgba(255,255,255,0.05);
                font-family: var(--font-inter), sans-serif;
                font-size: 13px;
                font-weight: 500;
                color: rgba(255,255,255,0.78);
                cursor: pointer;
                transition: all 0.22s ease;
                line-height: 1;
                backdrop-filter: blur(8px);
            }
            .xh__acct-btn:hover,
            .xh__pill-drop--account:hover .xh__acct-btn {
                color: #ffffff;
                background: rgba(82, 183, 136, 0.15);
                border-color: rgba(82, 183, 136, 0.40);
                box-shadow: 0 0 12px rgba(82, 183, 136, 0.20);
            }
            .xh__acct-avatar {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
                color: #ffffff;
                font-size: 12px;
                font-weight: 700;
                flex-shrink: 0;
                box-shadow: 0 2px 8px rgba(82, 183, 136, 0.40);
            }
            .xh__acct-ico {
                font-size: 15px;
                color: rgba(255,255,255,0.65);
                padding-left: 6px;
            }
            .xh__acct-name {
                max-width: 100px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .xh__acct-cta { padding: 4px 4px; }
            .xh__cta-register {
                display: block;
                width: 100%;
                text-align: center;
                background: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
                color: #ffffff;
                padding: 11px 20px;
                border-radius: 10px;
                font-family: var(--font-inter), sans-serif;
                font-size: 13.5px;
                font-weight: 700;
                letter-spacing: 0.02em;
                text-decoration: none;
                transition: all 0.25s ease;
                box-shadow: 0 4px 16px rgba(82, 183, 136, 0.40);
                position: relative;
                overflow: hidden;
            }
            .xh__cta-register:hover {
                box-shadow: 0 8px 24px rgba(82, 183, 136, 0.55);
                transform: translateY(-1px);
                color: #ffffff;
            }

            /* ── Cart icon button ── */
            .xh__cart-btn {
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 42px;
                height: 42px;
                border: 1px solid rgba(255,255,255,0.10);
                border-radius: 12px;
                background: rgba(255,255,255,0.05);
                color: rgba(255,255,255,0.75);
                font-size: 16px;
                text-decoration: none;
                transition: all 0.22s ease;
                backdrop-filter: blur(8px);
            }
            .xh__cart-btn:hover {
                color: #ffffff;
                background: rgba(82, 183, 136, 0.15);
                border-color: rgba(82, 183, 136, 0.40);
                box-shadow: 0 0 16px rgba(82, 183, 136, 0.25);
                transform: translateY(-2px);
            }
            .xh__cart-badge {
                position: absolute;
                top: -5px;
                right: -5px;
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 18px;
                height: 18px;
                padding: 0 4px;
                background: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
                color: #ffffff;
                border: 2px solid rgba(5, 5, 12, 0.9);
                border-radius: 999px;
                font-size: 9.5px;
                font-weight: 700;
                font-family: var(--font-inter), sans-serif;
                line-height: 1;
                box-shadow: 0 2px 8px rgba(82, 183, 136, 0.50);
            }

            /* ── Start Learning CTA ── */
            .xh__start-btn {
                display: inline-flex;
                align-items: center;
                gap: 7px;
                padding: 10px 22px;
                background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-blue) 100%);
                color: #ffffff;
                border: none;
                border-radius: 999px;
                font-family: var(--font-inter), sans-serif;
                font-size: 13.5px;
                font-weight: 700;
                letter-spacing: 0.02em;
                text-decoration: none;
                white-space: nowrap;
                margin-left: 4px;
                box-shadow:
                    0 4px 20px rgba(82, 183, 136, 0.45),
                    inset 0 1px 0 rgba(255,255,255,0.18);
                transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                position: relative;
                overflow: hidden;
            }
            .xh__start-btn::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-purple) 100%);
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            .xh__start-btn:hover {
                color: #ffffff;
                transform: translateY(-2px) scale(1.02);
                box-shadow: 0 8px 30px rgba(82, 183, 136, 0.60), inset 0 1px 0 rgba(255,255,255,0.18);
            }
            .xh__start-btn:hover::before { opacity: 1; }
            .xh__start-btn span { position: relative; z-index: 1; }

            /* ── Hamburger ── */
            .xh__burger {
                display: none;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 5px;
                width: 40px;
                height: 40px;
                background: rgba(255,255,255,0.05);
                border: 1px solid rgba(255,255,255,0.10);
                border-radius: 10px;
                cursor: pointer;
                transition: all 0.22s ease;
                flex-shrink: 0;
            }
            .xh__burger span {
                display: block;
                width: 20px;
                height: 2px;
                background: rgba(255,255,255,0.75);
                border-radius: 2px;
                transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .xh__burger:hover {
                background: rgba(82, 183, 136, 0.15);
                border-color: rgba(82, 183, 136, 0.40);
            }
            .xh__burger:hover span { background: #ffffff; }
            .xh__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
            .xh__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
            .xh__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

            /* ── MOBILE DRAWER (right slide-in, dark) ── */
            .xh__drawer {
                position: fixed;
                top: 0; right: 0; bottom: 0; left: 0;
                width: 100vw;
                height: 100vh;
                height: 100dvh;
                z-index: 1500;
                pointer-events: none;
            }
            .xh__drawer--open { pointer-events: auto; }

            .xh__drawer-overlay {
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, 0.70);
                backdrop-filter: blur(4px);
                opacity: 0;
                transition: opacity 0.35s ease;
            }
            .xh__drawer--open .xh__drawer-overlay { opacity: 1; }

            .xh__drawer-panel {
                position: absolute;
                top: 0; right: 0; bottom: 0;
                width: 320px;
                max-width: 88vw;
                background: #0b2018;
                border-left: 1px solid rgba(82, 183, 136, 0.20);
                box-shadow: -20px 0 60px rgba(0, 0, 0, 0.65);
                display: flex;
                flex-direction: column;
                transform: translate3d(100%, 0, 0);
                transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            .xh__drawer--open .xh__drawer-panel { transform: translate3d(0, 0, 0); }

            /* Top gradient bar on drawer */
            .xh__drawer-panel::before {
                content: '';
                display: block;
                height: 2px;
                background: linear-gradient(90deg, var(--brand-purple), var(--brand-blue));
                flex-shrink: 0;
            }

            .xh__drawer-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20px 22px;
                border-bottom: 1px solid rgba(82, 183, 136, 0.12);
            }
            .xh__drawer-logo {
                height: 36px;
                width: auto;
                display: block;
                object-fit: contain;
                filter: brightness(0) invert(1);
            }
            .xh__drawer-close {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: rgba(82, 183, 136, 0.10);
                border: 1px solid rgba(82, 183, 136, 0.20);
                color: rgba(255,255,255,0.65);
                font-size: 13px;
                cursor: pointer;
                transition: all 0.25s ease;
            }
            .xh__drawer-close:hover {
                background: rgba(82, 183, 136, 0.22);
                border-color: var(--brand-purple);
                color: #ffffff;
                transform: rotate(90deg);
            }

            .xh__drawer-nav {
                padding: 16px 14px 8px;
                display: flex;
                flex-direction: column;
                gap: 3px;
                flex: 1;
            }
            .xh__drawer-link {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 13px 14px;
                border-radius: 10px;
                font-family: var(--font-inter), sans-serif;
                font-size: 14.5px;
                font-weight: 500;
                color: rgba(255,255,255,0.72);
                text-decoration: none;
                transition: all 0.2s ease;
                border: 1px solid transparent;
                background: none;
                width: 100%;
                text-align: left;
                cursor: pointer;
            }
            .xh__drawer-link:hover,
            .xh__drawer-toggle--open {
                color: #ffffff;
                background: rgba(82, 183, 136, 0.10);
                border-color: rgba(82, 183, 136, 0.20);
            }
            .xh__drawer-link i {
                width: 16px;
                text-align: center;
                color: var(--brand-purple-light);
                font-size: 13px;
            }
            .xh__drawer-link--danger { color: rgba(248,113,113,0.75); }
            .xh__drawer-link--danger:hover { color: #f87171; background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.20); }
            .xh__drawer-link--danger i { color: #f87171; }

            /* Toggle (catalog expand) */
            .xh__drawer-group { display: flex; flex-direction: column; }
            .xh__drawer-toggle {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font: inherit;
            }
            .xh__drawer-link-inner {
                display: inline-flex;
                align-items: center;
                gap: 12px;
            }
            .xh__drawer-caret {
                color: rgba(255,255,255,0.35);
                transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
                flex-shrink: 0;
            }
            .xh__drawer-toggle--open .xh__drawer-caret {
                transform: rotate(180deg);
                color: var(--brand-purple-light);
            }

            .xh__drawer-sub {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
                margin: 0 4px;
            }
            .xh__drawer-sub--open {
                max-height: 55vh;
                overflow-y: auto;
                padding: 6px 0 8px;
            }
            .xh__drawer-sub-link {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px 16px 10px 18px;
                border-radius: 8px;
                font-family: var(--font-inter), sans-serif;
                font-size: 13.5px;
                font-weight: 500;
                color: rgba(255,255,255,0.60);
                text-decoration: none;
                transition: all 0.2s ease;
            }
            .xh__drawer-sub-link:hover {
                color: #ffffff;
                background: rgba(82, 183, 136, 0.08);
                transform: translateX(4px);
            }
            .xh__drawer-sub-link--muted { color: rgba(255,255,255,0.28); pointer-events: none; }
            .xh__drawer-sub-link--all {
                margin-top: 4px;
                border-top: 1px dashed rgba(82, 183, 136, 0.20);
                padding-top: 12px;
                color: var(--brand-purple-light);
                font-weight: 600;
            }
            .xh__drawer-sub-ico {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 24px;
                height: 24px;
                border-radius: 7px;
                background: rgba(82, 183, 136, 0.12);
                color: var(--brand-purple-light);
                font-size: 10px;
                flex-shrink: 0;
                transition: background 0.2s ease, color 0.2s;
            }
            .xh__drawer-sub-link:hover .xh__drawer-sub-ico {
                background: var(--brand-purple);
                color: #ffffff;
            }

            .xh__drawer-footer {
                padding: 14px 14px 24px;
                border-top: 1px solid rgba(82, 183, 136, 0.12);
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            .xh__drawer-btn {
                display: block;
                text-align: center;
                padding: 13px;
                border-radius: 10px;
                background: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
                color: #ffffff;
                font-family: var(--font-inter), sans-serif;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 0.02em;
                text-decoration: none;
                transition: all 0.25s ease;
                box-shadow: 0 4px 16px rgba(82, 183, 136, 0.40);
            }
            .xh__drawer-btn:hover {
                box-shadow: 0 8px 24px rgba(82, 183, 136, 0.55);
                transform: translateY(-1px);
                color: #ffffff;
            }
            .xh__drawer-btn--outline {
                background: transparent;
                border: 1.5px solid rgba(82, 183, 136, 0.30);
                color: rgba(255,255,255,0.70);
                box-shadow: none;
            }
            .xh__drawer-btn--outline:hover {
                background: rgba(82, 183, 136, 0.10);
                border-color: var(--brand-purple);
                color: #ffffff;
                box-shadow: none;
                transform: none;
            }

            /* ── Responsive ── */
            .xh__hide-md { display: inline-flex !important; }
            .xh__hide-sm { display: inline !important; }

            @media (max-width: 1280px) {
                .xh__inner { padding: 0 28px; }
                .xh__logo { margin-right: 24px; }
            }
            @media (max-width: 1024px) {
                .xh__nav { display: none; }
                .xh__hide-md { display: none !important; }
                .xh__burger { display: flex; }
                .xh__start-btn { display: none !important; }
            }
            @media (max-width: 640px) {
                .xh__inner { padding: 0 18px; height: 62px; }
                .xh__logo-img { height: 36px; }
                .xh__hide-sm { display: none !important; }
                .xh__pill-btn { padding: 7px 10px; gap: 5px; }
                .xh__acct-btn { padding: 4px 10px 4px 4px; gap: 6px; }
                .xh__cart-btn { width: 38px; height: 38px; font-size: 15px; }
                .xh__actions { gap: 4px; }
            }
            @media (max-width: 420px) {
                .xh__inner { padding: 0 14px; gap: 6px; }
                .xh__logo-img { height: 32px; }
                .xh__pill-drop--lang .xh__pill-label { display: none; }
                .xh__pill-drop--lang .xh__caret { display: none; }
                .xh__pill-btn { padding: 8px; }
            }

            /* ── Page body offset (fixed header = 70px tall) ── */
            /* Hero pages: header overlays the hero (transparent) — no offset needed */
            body.page-index .page-wrapper > *:not(header) { /* hero handles its own height */ }
            /* All other pages: push content below the fixed header */
            body:not(.page-index) .page-wrapper {
                padding-top: 70px;
            }

               translucent backgrounds instead so the mobile drawer can cover the viewport. */
            .nh {
                position: sticky;
                top: 0;
                z-index: 1050;
                width: 100%;
                background: rgba(254, 253, 252, 0.92);
                transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
                border-bottom: 1px solid transparent;
            }
            .nh--scrolled {
                background: var(--color-paper);
                box-shadow: 0 2px 20px rgba(37, 34, 30, 0.08);
                border-bottom-color: rgba(215, 214, 212, 0.5);
            }

            /* Inner bar */
            .nh__inner {
                display: flex;
                align-items: center;
                gap: 16px;
                max-width: 1280px;
                margin: 0 auto;
                padding: 0 32px;
                height: 72px;
            }

            /* Logo */
            .nh__logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
            .nh__logo-img {
                height: 46px;
                width: auto;
                display: block;
                object-fit: contain;
                transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .nh__logo:hover .nh__logo-img { transform: scale(1.04); }

            /* ── CENTER NAV ── */
            .nh__nav { flex: 1; display: flex; justify-content: center; }
            .nh__nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
            .nh__nav-item { position: relative; }

            .nh__nav-link {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 10px 18px;
                border-radius: 999px;
                font-family: var(--font-inter), sans-serif;
                font-size: 14.5px;
                font-weight: 500;
                color: var(--color-ink, var(--brand-black-soft));
                text-decoration: none;
                white-space: nowrap;
                position: relative;
                transition: color 0.28s ease,
                            background 0.28s ease,
                            box-shadow 0.28s ease,
                            transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            /* HOVER (non-active): subtle ember tint + micro-lift */
            .nh__nav-link:hover {
                color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
                background: rgba(82, 183, 136, 0.08);
                transform: translateY(-1px);
                text-decoration: none;
            }

            /* ACTIVE: bold ember gradient pill with glow */
            .nh__nav-link--active,
            .nh__nav-link--active:hover {
                color: #ffffff !important;
                background: linear-gradient(135deg, var(--color-ember-red, var(--brand-purple)) 0%, var(--color-deep-ember, var(--brand-purple-dark)) 100%) !important;
                font-weight: 700;
                box-shadow: 0 6px 16px rgba(82, 183, 136, 0.35),
                            inset 0 1px 0 rgba(255, 255, 255, 0.18);
                transform: translateY(-1px);
            }
            .nh__nav-link--active .nh__caret {
                opacity: 0.9;
            }

            .nh__caret {
                width: 10px;
                height: 6px;
                flex-shrink: 0;
                opacity: 0.5;
                transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
            }
            .nh__nav-item--drop:hover .nh__caret,
            .nh__pill-drop:hover .nh__caret,
            .nh__pill-drop--account:hover .nh__caret {
                transform: rotate(180deg);
                opacity: 0.85;
            }

            /* ── DROPDOWN ── */
            .nh__dropdown {
                position: absolute;
                top: calc(100% + 10px);
                left: 0;
                min-width: 240px;
                background: rgba(254, 253, 252, 0.98);
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
                border: 1px solid rgba(215, 214, 212, 0.7);
                border-radius: 16px;
                padding: 8px;
                box-shadow:
                    0 20px 48px rgba(37, 34, 30, 0.12),
                    0 2px 8px rgba(37, 34, 30, 0.04),
                    inset 0 1px 0 rgba(255, 255, 255, 0.6);
                opacity: 0;
                visibility: hidden;
                transform: translateY(8px) scale(0.98);
                transform-origin: top left;
                pointer-events: none;
                transition: opacity 0.25s ease,
                            transform 0.28s cubic-bezier(0.34, 1.4, 0.5, 1),
                            visibility 0.25s;
                z-index: 1060;
            }
            .nh__dropdown--end { left: auto; right: 0; transform-origin: top right; }
            .nh__dropdown--catalog { min-width: 270px; }
            .nh__dropdown--account { min-width: 260px; }

            /* Bridge so cursor can travel to dropdown */
            .nh__dropdown::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }

            .nh__nav-item--drop:hover .nh__dropdown,
            .nh__nav-item--drop:focus-within .nh__dropdown,
            .nh__pill-drop:hover .nh__dropdown,
            .nh__pill-drop:focus-within .nh__dropdown {
                opacity: 1;
                visibility: visible;
                transform: translateY(0) scale(1);
                pointer-events: auto;
            }

            .nh__dropdown-inner { display: flex; flex-direction: column; gap: 2px; }

            .nh__drop-item {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 11px 14px;
                border-radius: 12px;
                font-family: var(--font-inter), sans-serif;
                font-size: 14px;
                font-weight: 500;
                color: var(--color-ink, var(--brand-black-soft));
                text-decoration: none;
                white-space: nowrap;
                transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
                cursor: pointer;
                background: transparent;
                border: none;
            }
            .nh__drop-item:hover {
                background: rgba(82, 183, 136, 0.08);
                color: var(--color-deep-ember, var(--brand-purple-dark));
                transform: translateX(3px);
            }
            .nh__drop-item--active {
                background: rgba(82, 183, 136, 0.09);
                color: var(--color-deep-ember, var(--brand-purple-dark));
                font-weight: 600;
            }
            .nh__drop-item--danger { color: #dc3545; }
            .nh__drop-item--danger:hover { background: rgba(220, 53, 69, 0.08); color: #b91c1c; }
            .nh__drop-item--muted {
                color: var(--color-pencil, var(--color-pencil));
                font-size: 13px;
                cursor: default;
                pointer-events: none;
            }
            .nh__drop-item--all {
                border-top: 1px dashed rgba(215, 214, 212, 0.6);
                margin-top: 6px;
                padding-top: 14px;
                color: var(--color-deep-ember, var(--brand-purple-dark));
                font-weight: 600;
            }

            .nh__drop-ico {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 26px;
                height: 26px;
                border-radius: 8px;
                font-size: 12px;
                color: var(--color-deep-ember, var(--brand-purple-dark));
                background: rgba(82, 183, 136, 0.10);
                flex-shrink: 0;
                transition: background 0.2s ease, color 0.2s ease;
            }
            .nh__drop-item:hover .nh__drop-ico {
                background: var(--color-ember-red, var(--brand-purple));
                color: #ffffff;
            }
            .nh__drop-item--danger .nh__drop-ico {
                background: rgba(220, 53, 69, 0.10);
                color: #dc3545;
            }
            .nh__drop-item--danger:hover .nh__drop-ico {
                background: #dc3545;
                color: #ffffff;
            }
            .nh__drop-ico-flag {
                display: inline-block;
                width: 22px;
                height: 16px;
                border-radius: 3px;
                background-size: cover;
                background-position: center;
                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
                flex-shrink: 0;
            }
            .nh__drop-check {
                font-size: 11px;
                margin-left: auto;
                color: var(--color-forest, var(--color-forest));
                opacity: 0;
                flex-shrink: 0;
            }
            .nh__drop-item--active .nh__drop-check { opacity: 1; }

            .nh__drop-divider {
                height: 1px;
                background: var(--color-stone, var(--color-stone));
                border: none;
                margin: 8px 4px;
                opacity: 0.5;
            }

            /* ── RIGHT ACTIONS ── */
            .nh__actions {
                display: flex;
                align-items: center;
                gap: 4px;
                flex-shrink: 0;
                margin-left: auto;
            }

            /* Pill buttons (lang / currency) */
            .nh__pill-drop { position: relative; }
            .nh__pill-btn {
                display: inline-flex;
                align-items: center;
                gap: 7px;
                padding: 8px 13px;
                border: 1px solid transparent;
                border-radius: 999px;
                background: transparent;
                font-family: var(--font-inter), sans-serif;
                font-size: 13.5px;
                font-weight: 500;
                color: var(--color-ink, var(--brand-black-soft));
                cursor: pointer;
                transition: all 0.22s ease;
                white-space: nowrap;
                line-height: 1;
            }
            .nh__pill-btn:hover,
            .nh__pill-drop:hover .nh__pill-btn {
                color: var(--color-deep-ember, var(--brand-purple-dark));
                background: rgba(82, 183, 136, 0.07);
                border-color: rgba(82, 183, 136, 0.20);
                transform: translateY(-1px);
            }
            .nh__flag {
                display: inline-block;
                width: 20px;
                height: 14px;
                border-radius: 3px;
                background-size: cover;
                background-position: center;
                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
            }
            .nh__pill-label { line-height: 1; }

            /* Account button */
            .nh__acct-btn {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 5px 12px 5px 5px;
                border: 1px solid transparent;
                border-radius: 999px;
                background: transparent;
                font-family: var(--font-inter), sans-serif;
                font-size: 13.5px;
                font-weight: 500;
                color: var(--color-ink, var(--brand-black-soft));
                cursor: pointer;
                transition: all 0.22s ease;
                line-height: 1;
            }
            .nh__acct-btn:hover,
            .nh__pill-drop--account:hover .nh__acct-btn {
                background: rgba(82, 183, 136, 0.07);
                border-color: rgba(82, 183, 136, 0.20);
                transform: translateY(-1px);
            }
            .nh__acct-avatar {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--color-ember-red, var(--brand-purple)), var(--color-deep-ember, var(--brand-purple-dark)));
                color: #ffffff;
                font-size: 13px;
                font-weight: 700;
                flex-shrink: 0;
                box-shadow: 0 3px 10px rgba(82, 183, 136, 0.35);
            }
            .nh__acct-ico {
                font-size: 16px;
                color: var(--color-ink, var(--brand-black-soft));
                padding-left: 6px;
            }
            .nh__acct-name {
                max-width: 110px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            /* Account dropdown head */
            .nh__acct-head {
                display: flex;
                align-items: center;
                gap: 14px;
                padding: 10px 14px 14px;
            }
            .nh__acct-head-avatar {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, var(--color-ember-red, var(--brand-purple)), var(--color-deep-ember, var(--brand-purple-dark)));
                color: #ffffff;
                font-size: 17px;
                font-weight: 700;
                box-shadow: 0 4px 12px rgba(82, 183, 136, 0.35);
            }
            .nh__acct-head-name {
                font-size: 14.5px;
                font-weight: 700;
                color: var(--color-ink, var(--brand-black-soft));
                font-family: var(--font-graphik), sans-serif;
            }
            .nh__acct-head-credits {
                font-size: 12.5px;
                color: var(--color-deep-ember, var(--brand-purple-dark));
                font-weight: 600;
                display: flex;
                align-items: center;
                gap: 6px;
                margin-top: 3px;
            }
            .nh__acct-head-credits i { color: var(--color-ember-red, var(--brand-purple)); }
            .nh__acct-cta { padding: 4px 6px 4px; }
            .nh__cta-register {
                display: block;
                width: 100%;
                text-align: center;
                background: var(--color-ember-red, var(--brand-purple));
                color: #ffffff;
                border: none;
                padding: 12px 20px;
                border-radius: 12px;
                font-family: var(--font-inter), sans-serif;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 0.02em;
                text-decoration: none;
                transition: all 0.25s ease;
                box-shadow: 0 6px 16px rgba(82, 183, 136, 0.35);
            }
            .nh__cta-register:hover {
                background: var(--color-deep-ember, var(--brand-purple-dark));
                color: #ffffff;
                transform: translateY(-2px);
                box-shadow: 0 10px 24px rgba(82, 183, 136, 0.45);
            }

            /* Cart button */
            .nh__cart-btn {
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 44px;
                height: 44px;
                border: 1px solid transparent;
                border-radius: 12px;
                background: transparent;
                color: var(--color-ink, var(--brand-black-soft));
                font-size: 17px;
                text-decoration: none;
                transition: all 0.22s ease;
            }
            .nh__cart-btn:hover {
                color: var(--color-deep-ember, var(--brand-purple-dark));
                background: rgba(82, 183, 136, 0.07);
                border-color: rgba(82, 183, 136, 0.20);
                transform: translateY(-2px);
            }
            .nh__cart-badge {
                position: absolute;
                top: -4px;
                right: -4px;
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 20px;
                height: 20px;
                padding: 0 5px;
                background: var(--color-ember-red, var(--brand-purple));
                color: #ffffff;
                border: 2px solid var(--color-paper);
                border-radius: 999px;
                font-size: 10.5px;
                font-weight: 700;
                font-family: var(--font-inter), sans-serif;
                line-height: 1;
                box-shadow: 0 3px 8px rgba(82, 183, 136, 0.35);
            }

            /* Start Learning CTA */
            .nh__start-btn {
                display: inline-flex;
                align-items: center;
                padding: 11px 22px;
                background: var(--color-ember-red, var(--brand-purple));
                color: #ffffff;
                border: none;
                border-radius: 999px;
                font-family: var(--font-inter), sans-serif;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 0.02em;
                text-decoration: none;
                white-space: nowrap;
                margin-left: 6px;
                box-shadow: 0 6px 18px rgba(82, 183, 136, 0.35);
                transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .nh__start-btn:hover {
                background: var(--color-deep-ember, var(--brand-purple-dark));
                color: #ffffff;
                transform: translateY(-2px);
                box-shadow: 0 10px 26px rgba(82, 183, 136, 0.50);
            }

            /* Hamburger */
            .nh__burger {
                display: none;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 5px;
                width: 42px;
                height: 42px;
                background: transparent;
                border: 1px solid transparent;
                border-radius: 12px;
                cursor: pointer;
                transition: all 0.22s ease;
                flex-shrink: 0;
            }
            .nh__burger span {
                display: block;
                width: 22px;
                height: 2px;
                background: var(--color-ink, var(--brand-black-soft));
                border-radius: 2px;
                transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .nh__burger:hover {
                background: rgba(82, 183, 136, 0.08);
                border-color: rgba(82, 183, 136, 0.20);
            }
            .nh__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
            .nh__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
            .nh__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

            /* ── MOBILE DRAWER ──
               Explicit top/right/bottom/left + high z-index + hardware-accel transform
               so it always covers the full viewport regardless of parent context. */
            .nh__drawer {
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                height: 100dvh;
                z-index: 1200;
                pointer-events: none;
            }
            .nh__drawer--open { pointer-events: auto; }
            .nh__drawer-overlay {
                position: absolute;
                top: 0; right: 0; bottom: 0; left: 0;
                background: rgba(22, 19, 15, 0.55);
                opacity: 0;
                transition: opacity 0.35s ease;
            }
            .nh__drawer--open .nh__drawer-overlay { opacity: 1; }

            .nh__drawer-panel {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                width: 340px;
                max-width: 92vw;
                height: 100%;
                background: var(--color-paper);
                border-left: 1px solid rgba(215, 214, 212, 0.6);
                box-shadow: -16px 0 48px rgba(22, 19, 15, 0.18);
                display: flex;
                flex-direction: column;
                transform: translate3d(100%, 0, 0);
                transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            .nh__drawer--open .nh__drawer-panel { transform: translate3d(0, 0, 0); }

            .nh__drawer-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 22px 24px;
                border-bottom: 1px dashed rgba(215, 214, 212, 0.6);
            }
            .nh__drawer-logo { height: 40px; width: auto; display: block; object-fit: contain; }
            .nh__drawer-close {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: rgba(82, 183, 136, 0.06);
                border: 1px solid rgba(82, 183, 136, 0.15);
                color: var(--color-ink, var(--brand-black-soft));
                font-size: 14px;
                cursor: pointer;
                transition: all 0.25s ease;
            }
            .nh__drawer-close:hover {
                border-color: var(--color-ember-red, var(--brand-purple));
                background: rgba(82, 183, 136, 0.12);
                color: var(--color-ember-red, var(--brand-purple));
                transform: rotate(90deg);
            }

            .nh__drawer-nav {
                padding: 20px 16px 8px;
                display: flex;
                flex-direction: column;
                gap: 4px;
                flex: 1;
            }
            .nh__drawer-link {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 14px 16px;
                border-radius: 12px;
                font-family: var(--font-inter), sans-serif;
                font-size: 15px;
                font-weight: 500;
                color: var(--color-ink, var(--brand-black-soft));
                text-decoration: none;
                transition: all 0.22s ease;
            }
            .nh__drawer-link:hover {
                background: rgba(82, 183, 136, 0.08);
                color: var(--color-deep-ember, var(--brand-purple-dark));
            }
            .nh__drawer-link i {
                width: 18px;
                text-align: center;
                color: var(--color-deep-ember, var(--brand-purple-dark));
                font-size: 14px;
            }
            .nh__drawer-link--danger { color: #dc3545; }
            .nh__drawer-link--danger:hover { background: rgba(220, 53, 69, 0.08); color: #b91c1c; }
            .nh__drawer-link--danger i { color: #dc3545; }

            .nh__drawer-link-inner {
                display: inline-flex;
                align-items: center;
                gap: 12px;
                transition: transform 0.2s ease;
            }
            .nh__drawer-link:hover .nh__drawer-link-inner {
                transform: translateX(4px);
            }

            /* Expandable catalog group */
            .nh__drawer-group {
                display: flex;
                flex-direction: column;
            }
            .nh__drawer-toggle {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                background: transparent;
                border: none;
                cursor: pointer;
                text-align: left;
                font: inherit;
            }
            .nh__drawer-caret {
                color: var(--color-pencil, var(--color-pencil));
                opacity: 0.6;
                transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
                flex-shrink: 0;
            }
            .nh__drawer-toggle--open .nh__drawer-caret {
                transform: rotate(180deg);
                opacity: 1;
                color: var(--color-deep-ember, var(--brand-purple-dark));
            }
            .nh__drawer-toggle--open {
                color: var(--color-deep-ember, var(--brand-purple-dark));
                background: rgba(82, 183, 136, 0.06);
            }

            .nh__drawer-sub {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
                margin: 0 4px;
                display: flex;
                flex-direction: column;
                gap: 2px;
            }
            .nh__drawer-sub--open {
                max-height: 60vh;
                overflow-y: auto;
                padding: 6px 0 8px;
            }
            .nh__drawer-sub-link {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 11px 16px 11px 20px;
                border-radius: 10px;
                font-family: var(--font-inter), sans-serif;
                font-size: 14px;
                font-weight: 500;
                color: var(--color-ink, var(--brand-black-soft));
                text-decoration: none;
                transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
            }
            .nh__drawer-sub-link:hover {
                background: rgba(82, 183, 136, 0.07);
                color: var(--color-deep-ember, var(--brand-purple-dark));
                transform: translateX(3px);
            }
            .nh__drawer-sub-link--muted {
                color: var(--color-pencil, var(--color-pencil));
                font-size: 13px;
                cursor: default;
                pointer-events: none;
            }
            .nh__drawer-sub-link--all {
                margin-top: 4px;
                border-top: 1px dashed rgba(215, 214, 212, 0.6);
                padding-top: 14px;
                color: var(--color-deep-ember, var(--brand-purple-dark));
                font-weight: 600;
            }
            .nh__drawer-sub-ico {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 26px;
                height: 26px;
                border-radius: 8px;
                background: rgba(82, 183, 136, 0.10);
                color: var(--color-deep-ember, var(--brand-purple-dark));
                font-size: 11px;
                flex-shrink: 0;
                transition: background 0.2s ease, color 0.2s ease;
            }
            .nh__drawer-sub-link:hover .nh__drawer-sub-ico {
                background: var(--color-ember-red, var(--brand-purple));
                color: #ffffff;
            }

            .nh__drawer-footer {
                padding: 18px 16px 22px;
                border-top: 1px dashed rgba(215, 214, 212, 0.6);
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .nh__drawer-btn {
                display: block;
                text-align: center;
                padding: 14px;
                border-radius: 12px;
                background: var(--color-ember-red, var(--brand-purple));
                color: #ffffff;
                font-family: var(--font-inter), sans-serif;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 0.02em;
                text-decoration: none;
                transition: all 0.25s ease;
                box-shadow: 0 6px 16px rgba(82, 183, 136, 0.35);
            }
            .nh__drawer-btn:hover {
                background: var(--color-deep-ember, var(--brand-purple-dark));
                color: #ffffff;
                transform: translateY(-1px);
                box-shadow: 0 10px 24px rgba(82, 183, 136, 0.45);
            }
            .nh__drawer-btn--outline {
                background: transparent;
                color: var(--color-ink, var(--brand-black-soft));
                border: 1.5px solid rgba(215, 214, 212, 0.8);
                box-shadow: none;
            }
            .nh__drawer-btn--outline:hover {
                background: rgba(82, 183, 136, 0.05);
                border-color: var(--color-ember-red, var(--brand-purple));
                color: var(--color-deep-ember, var(--brand-purple-dark));
                box-shadow: none;
            }

            /* ── RESPONSIVE ── */
            .nh__hide-md { display: inline-flex !important; }
            .nh__hide-sm { display: inline !important; }

            @media (max-width: 1200px) {
                .nh__inner { padding: 0 24px; }
                .nh__nav-list { gap: 2px; }
                .nh__nav-link { padding: 9px 12px; font-size: 14px; }
            }
            @media (max-width: 1024px) {
                .nh__nav { display: none; }
                .nh__hide-md { display: none !important; }
                .nh__burger { display: flex; }
                .nh__start-btn { display: none !important; }
            }
            @media (max-width: 640px) {
                .nh__inner { padding: 0 16px; height: 64px; }
                .nh__logo-img { height: 40px; }
                .nh__hide-sm { display: none !important; }
                .nh__pill-btn { padding: 7px 10px; font-size: 13px; gap: 6px; }
                .nh__acct-btn { padding: 4px 10px 4px 4px; gap: 6px; }
                .nh__acct-avatar { width: 28px; height: 28px; font-size: 11.5px; }
                .nh__acct-ico { font-size: 15px; padding-left: 4px; }
                .nh__cart-btn { width: 40px; height: 40px; font-size: 16px; }
                .nh__actions { gap: 2px; }
                .nh__burger { width: 40px; height: 40px; }
                .nh__dropdown { min-width: 200px; }
            }
            @media (max-width: 420px) {
                .nh__inner { gap: 8px; padding: 0 12px; }
                .nh__logo-img { height: 34px; }
                .nh__pill-drop--lang .nh__pill-label { display: none; }
                .nh__pill-drop--lang .nh__caret { display: none; }
                .nh__pill-btn { padding: 8px; }
            }

            /* ============================================================
               HEADER STYLING (NEW THEME)
               ============================================================ */
            header.main-header {
                position: sticky !important;
                top: 0 !important;
                background-color: transparent !important;
                background-image: none !important;
                border-bottom: 0px solid var(--color-stone) !important;
                z-index: 1030 !important;
                transition: all var(--transition-normal);
                width: 100% !important;
                left: 0 !important;
                right: 0 !important;
                padding: var(--spacing-12) 0 !important;
                box-shadow: none !important;
            }

            header.main-header.sticky-top {
                box-shadow: none !important;
            }

            header.main-header:hover,
            header.main-header.scrolled {
                background-color: rgba(254, 253, 252, 1) !important;
                backdrop-filter: blur(10px) !important;
                -webkit-backdrop-filter: blur(10px) !important;
                box-shadow: 0 4px 18px rgba(37, 34, 30, 0.08) !important;
                /* border-bottom: 1px solid var(--color-stone) !important; */
            }

            header.main-header .auto-container {
                padding: var(--spacing-12) var(--spacing-20);
                max-width: var(--page-max-width);
                margin: 0 auto;
            }

            /* ============================================================
               LOGO STYLING
               ============================================================ */
            .logo-box {
                display: flex;
                align-items: center;
                gap: var(--spacing-8);
                flex-shrink: 0;
            }

            .logo-box a {
                display: inline-flex;
                align-items: center;
                text-decoration: none;
                transition: transform var(--transition-normal);
                outline: none;
            }

            .logo-box a:hover {
                transform: translateY(-2px);
            }

            .logo-box a:focus {
                outline: 2px solid var(--color-cobalt-link);
                outline-offset: 4px;
                border-radius: var(--radius-sm);
            }

            .logo-box img {
                height: 44px;
                width: auto;
                display: block;
                object-fit: contain;
                transition: filter var(--transition-normal);
            }

            .modern-nav > li.dropdown > a {
                color: inherit;
                text-decoration: none;
                gap: 6px;
                display: inline-flex;
                align-items: center;
            }

            .dropdown-item i {
                font-size: 12px;
            }

            .dropdown-menu {
                min-width: 200px;
            }

            .currency-dropdown {
                min-width: auto;
            }

            .logo-box a:hover img {
                filter: brightness(1.1);
            }

            /* ============================================================
               NAVIGATION STYLING
               ============================================================ */
            nav.modern-nav-wrapper {
                flex: 1;
                display: flex;
                justify-content: center;
            }

            .modern-nav {
                display: flex;
                list-style: none;
                margin: 0;
                padding: 0;
                gap: var(--spacing-8);
            }

            .modern-nav > li {
                position: relative;
            }

            .modern-nav > li > a {
                display: inline-flex !important;
                align-items: center !important;
                gap: var(--spacing-4) !important;
                padding: var(--spacing-8) var(--spacing-16) !important;
                color: var(--color-ink) !important;
                font-family: var(--font-inter) !important;
                font-size: var(--text-body) !important;
                font-weight: var(--font-weight-medium) !important;
                line-height: var(--leading-body) !important;
                letter-spacing: var(--tracking-body) !important;
                text-decoration: none !important;
                transition: all var(--transition-normal) !important;
                border-radius: var(--radius-nav) !important;
                position: relative !important;
            }

            .modern-nav > li > a::after {
                content: '';
                position: absolute;
                bottom: 6px;
                left: var(--spacing-16);
                right: var(--spacing-16);
                height: 2px;
                background-color: var(--color-ember-red);
                transform: scaleX(0);
                transform-origin: center;
                transition: transform var(--transition-normal);
            }

            .modern-nav > li > a:hover {
                color: var(--color-deep-ember);
                background-color: rgba(82, 183, 136, 0.05);
            }

            .modern-nav > li > a:hover::after {
                transform: scaleX(1);
            }

            .modern-nav > li.active > a {
                color: var(--color-deep-ember);
                background-color: rgba(82, 183, 136, 0.08);
            }

            .modern-nav > li.active > a::after {
                transform: scaleX(1);
            }

            /* ============================================================
               DROPDOWN STYLING
               ============================================================ */
            .dropdown-menu {
                background-color: var(--surface-paper-canvas) !important;
                border: 1px solid var(--color-stone) !important;
                border-radius: var(--radius-lg) !important;
                padding: var(--spacing-8) 0 !important;
                margin-top: var(--spacing-8) !important;
                min-width: 200px !important;
                box-shadow: var(--shadow-lg) !important;
                animation: slideDown var(--transition-normal) ease-out !important;
            }

            @keyframes slideDown {
                from {
                    opacity: 0;
                    transform: translateY(-8px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .dropdown-menu.show {
                display: block;
                animation: slideDown var(--transition-normal) ease-out;
            }

            .dropdown-item {
                color: var(--color-ink) !important;
                font-family: var(--font-inter) !important;
                font-size: var(--text-body-sm) !important;
                font-weight: var(--font-weight-regular) !important;
                line-height: var(--leading-body-sm) !important;
                letter-spacing: var(--tracking-body-sm) !important;
                padding: var(--spacing-12) var(--spacing-16) !important;
                display: flex !important;
                align-items: center !important;
                gap: var(--spacing-8) !important;
                border: none !important;
                background-color: transparent !important;
                transition: all var(--transition-normal) !important;
                text-decoration: none !important;
                border-radius: 0 !important;
                cursor: pointer !important;
                white-space: nowrap !important;
            }

            .dropdown-item:hover {
                background-color: var(--color-cream);
                color: var(--color-deep-ember);
                padding-left: calc(var(--spacing-16) + 4px);
            }

            .dropdown-item:focus {
                background-color: rgba(82, 183, 136, 0.1);
                outline: none;
                border-left: 3px solid var(--color-deep-ember);
                padding-left: calc(var(--spacing-16) - 3px);
            }

            .dropdown-item.active {
                background-color: var(--surface-tinted-wave);
                color: var(--color-ink);
                font-weight: var(--font-weight-semibold);
            }

            .dropdown-item.active.bg-primary {
                background-color: var(--color-ember-red) !important;
                color: var(--color-paper) !important;
            }

            .dropdown-item.text-muted {
                color: var(--color-graphite);
                cursor: default;
                pointer-events: none;
            }

            .dropdown-item i {
                font-size: 14px;
                flex-shrink: 0;
                color: var(--color-ember-red);
            }

            .dropdown-divider {
                height: 1px;
                background-color: var(--color-stone);
                margin: var(--spacing-8) 0;
                border: none;
            }

            /* ============================================================
               BUTTONS STYLING
               ============================================================ */
            .modern-btn {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: var(--spacing-4) !important;
                padding: var(--spacing-8) var(--spacing-12) !important;
                border: 1px solid transparent !important;
                border-radius: var(--radius-buttons) !important;
                font-family: var(--font-inter) !important;
                font-size: var(--text-body-sm) !important;
                font-weight: var(--font-weight-medium) !important;
                line-height: var(--leading-body-sm) !important;
                letter-spacing: var(--tracking-body-sm) !important;
                color: var(--color-ink) !important;
                background-color: transparent !important;
                text-decoration: none !important;
                cursor: pointer !important;
                transition: all var(--transition-normal) !important;
                outline: none !important;
                white-space: nowrap !important;
            }

            .modern-btn:hover {
                background-color: rgba(82, 183, 136, 0.05) !important;
                color: var(--color-deep-ember) !important;
            }

            .modern-btn:focus {
                outline: 2px solid var(--color-cobalt-link);
                outline-offset: 2px;
            }

            .modern-btn-outline {
                border: 1px solid var(--color-stone);
                background-color: var(--surface-paper-canvas);
                color: var(--color-ink);
            }

            .modern-btn-outline:hover {
                border-color: var(--color-deep-ember);
                background-color: rgba(82, 183, 136, 0.05);
                color: var(--color-deep-ember);
            }

            .modern-btn-solid {
                background-color: var(--color-ember-red) !important;
                color: var(--color-paper) !important;
                border: 1px solid var(--color-ember-red) !important;
                font-weight: var(--font-weight-semibold) !important;
                box-shadow: var(--shadow-lg) !important;
            }

            .modern-btn-solid:hover {
                background-color: var(--color-deep-ember) !important;
                border-color: var(--color-deep-ember) !important;
                transform: translateY(-1px) !important;
                box-shadow: var(--shadow-lg) !important;
            }

            .modern-btn-solid:active {
                background-color: var(--color-charcoal) !important;
                transform: translateY(0) !important;
            }

            /* ============================================================
               CART BUTTON
               ============================================================ */
            .modern-cart-btn {
                position: relative !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 44px !important;
                height: 44px !important;
                padding: 0 !important;
                color: var(--color-ink) !important;
                background-color: var(--surface-paper-canvas) !important;
                border: 1px solid var(--color-stone) !important;
                border-radius: var(--radius-buttons) !important;
                font-size: 20px !important;
                cursor: pointer !important;
                transition: all var(--transition-normal) !important;
                text-decoration: none !important;
            }

            .modern-cart-btn:hover {
                background-color: var(--color-cream) !important;
                border-color: var(--color-deep-ember) !important;
                color: var(--color-deep-ember) !important;
            }

            .modern-cart-btn:focus {
                outline: 2px solid var(--color-cobalt-link);
                outline-offset: 2px;
            }

            .cart-count {
                position: absolute !important;
                top: -8px !important;
                right: -8px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 24px !important;
                height: 24px !important;
                min-width: 24px !important;
                background-color: var(--color-ember-red) !important;
                color: var(--color-paper) !important;
                border-radius: 50% !important;
                font-family: var(--font-inter) !important;
                font-size: 11px !important;
                font-weight: var(--font-weight-bold) !important;
                line-height: 1 !important;
                animation: scaleIn 0.3s ease-out !important;
            }

            @keyframes scaleIn {
                from {
                    transform: scale(0);
                }
                to {
                    transform: scale(1);
                }
            }

            /* ============================================================
               RESPONSIVE
               ============================================================ */
            @media (max-width: 767px) {
                header.main-header {
                    padding: var(--spacing-8) 0;
                }

                header.main-header .auto-container {
                    padding: var(--spacing-8) var(--spacing-12);
                }

                .logo-box img {
                    height: 40px;
                }

                .modern-btn {
                    padding: var(--spacing-8) var(--spacing-8);
                    font-size: var(--text-caption);
                }

                .dropdown.d-none.d-md-block {
                    display: none;
                }

                .dropdown.d-none.d-lg-block {
                    display: none;
                }
            }

            /* Cart item title full text with line breaks */
            .cart-info a {
                white-space: normal !important;
                word-wrap: break-word !important;
                overflow: visible !important;
                text-overflow: clip !important;
                display: block !important;
                line-height: 1.4 !important;
            }

            /* ============================================================
               REVAMPED NAVBAR (restored)
               ============================================================ */
            header.main-header {
                box-shadow: 0 4px 18px rgba(37, 34, 30, 0.05) !important;
                padding: 0 !important;
                overflow: visible !important;
            }
            .header-wrapper { gap: 24px !important; width: 100% !important; overflow: visible !important; }
            .logo-section { display: flex !important; align-items: center !important; flex-shrink: 0 !important; }
            .logo-link { display: inline-flex !important; align-items: center !important; transition: transform .3s cubic-bezier(.34,1.56,.64,1) !important; }
            .logo-link:hover { transform: translateY(-1px) scale(1.02) !important; }
            .logo-img { height: 60px !important; width: auto !important; display: block !important; object-fit: contain !important; }

            /* center nav */
            .center-nav { flex: 1 1 auto !important; display: flex !important; justify-content: center !important; }
            .nav-list { display: flex !important; align-items: center !important; list-style: none !important; margin: 0 !important; padding: 0 !important; column-gap: 8px !important; }
            .nav-item { position: relative !important; margin: 0 !important; }
            .nav-link {
                position: relative !important;
                display: inline-flex !important; align-items: center !important; gap: 6px !important;
                padding: 9px 15px !important; border-radius: 4px !important;
                color: var(--color-ink) !important; font-family: var(--font-inter) !important;
                font-size: 15px !important; font-weight: 500 !important; text-decoration: none !important;
                white-space: nowrap !important; line-height: 1 !important;
                transition: color .25s ease, background-color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1) !important;
            }
            .nav-link:hover, .nav-link.active { color: var(--color-deep-ember) !important; background-color: rgb(50 227 131 / 8%) !important; transform: translateY(-1px) !important; }
            .nav-toggle::after, .dropdown-toggle::after { display: none !important; }
            .nav-caret { width: 10px !important; height: 6px !important; opacity: .5 !important; flex-shrink: 0 !important; transition: transform .28s cubic-bezier(.34,1.56,.64,1) !important; }
            .hover-dropdown:hover .nav-caret { transform: rotate(180deg) !important; opacity: 1 !important; }

            /* right actions */
            .right-actions { display: flex !important; align-items: center !important; column-gap: 6px !important; flex-shrink: 0 !important; }
            .selector-btn, .account-btn {
                display: inline-flex !important; align-items: center !important; gap: 6px !important;
                background: transparent !important; border: 1px solid transparent !important;
                color: var(--color-ink) !important; font-family: var(--font-inter) !important;
                font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important;
                padding: 7px 12px !important; border-radius: 999px !important; line-height: 1 !important;
                transition: all .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1) !important;
            }
            .selector-btn:hover, .account-btn:hover, .hover-dropdown:hover .selector-btn, .hover-dropdown:hover .account-btn {
                color: var(--color-deep-ember) !important; background-color: rgba(50, 227, 127, 0.07) !important; border-color: rgba(50, 227, 109, 0.22) !important; transform: translateY(-1px) !important;
            }
            .selector-ico { font-size: 13px !important; opacity: .7 !important; }
            .account-ico { font-size: 18px !important; transition: transform .25s ease !important; }
            .hover-dropdown:hover .account-ico { transform: scale(1.08) !important; color: var(--color-ember-red) !important; }
            .account-name { max-width: 120px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

            /* primary button (register CTA in account dropdown) */
            .primary-btn {
                background: var(--color-ember-red) !important; color: var(--color-paper) !important;
                border: none !important; padding: 9px 20px !important; border-radius: 8px !important;
                font-family: var(--font-inter) !important; font-size: 14px !important; font-weight: 600 !important;
                text-decoration: none !important; display: inline-block !important; text-align: center !important;
                box-shadow: 0 2px 10px rgba(227,68,50,.28) !important; transition: all .2s ease !important;
            }
            .primary-btn:hover { background: var(--color-deep-ember) !important; color: var(--color-paper) !important; transform: translateY(-1px) !important; }
            .primary-btn--block { display: block !important; width: 100% !important; }

            /* cart button (themed, overrides old .modern-cart-btn) */
            .cart-btn {
                position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
                width: 44px !important; height: 44px !important; margin-left: 2px !important;
                color: var(--color-paper) !important; background: transparent !important; border: 1px solid transparent !important;
                font-size: 18px !important; border-radius: 8px !important; text-decoration: none !important;
                transition: all .2s ease !important;
            }
            .cart-btn:hover { color: var(--color-deep-ember) !important; background: rgb(50 227 131 / 8%) !important; border-color: rgba(227,68,50,.25) !important; transform: translateY(-1px) !important; }
            .cart-btn .cart-badge, .cart-btn .cart-count {
                position: absolute !important; top: -4px !important; right: -4px !important;
                display: flex !important; align-items: center !important; justify-content: center !important;
                min-width: 20px !important; height: 20px !important; padding: 0 4px !important;
                background: var(--color-ember-red) !important; color: var(--color-paper) !important;
                border: 2px solid var(--color-cream) !important; border-radius: 999px !important;
                font-family: var(--font-inter) !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important;
            }

            /* hover dropdowns */
            .hover-dropdown { position: relative !important; }
            .main-header .hover-dropdown .dropdown-menu {
                display: block !important; position: absolute !important; top: calc(100% + 14px) !important; inset: auto !important; margin: 0 !important;
                background: linear-gradient(180deg, #fffefd 0%, #fff7f1 100%) !important;
                border: 1px solid rgba(215,214,212,.8) !important; border-radius: 15px !important; padding: 8px !important; min-width: 230px !important;
                box-shadow: 0 10px 30px rgba(37,34,30,.12), inset 0 1px 0 rgba(255,255,255,.8) !important;
                opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) scale(.98) !important; transform-origin: top center !important;
                pointer-events: none !important; transition: opacity .22s ease, transform .26s cubic-bezier(.34,1.4,.5,1), visibility .22s !important; z-index: 1040 !important;
            }
            .main-header .hover-dropdown .dropdown-menu-end, .main-header .hover-dropdown .account-dropdown { right: 0 !important; left: auto !important; }
            .main-header .hover-dropdown .catalog-menu { left: 0 !important; right: auto !important; }
            .main-header .hover-dropdown .dropdown-menu::before { content: '' !important; position: absolute !important; top: -16px !important; left: 0 !important; right: 0 !important; height: 16px !important; }
            .main-header .hover-dropdown:hover .dropdown-menu, .main-header .hover-dropdown:focus-within .dropdown-menu {
                opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important;
            }
            .main-header .dropdown-item {
                display: flex !important; align-items: center !important; gap: 10px !important;
                color: var(--color-ink) !important; font-family: var(--font-inter) !important; font-size: 14px !important; font-weight: 500 !important;
                padding: 10px 12px !important; border: none !important; border-radius: 8px !important; background: transparent !important; text-decoration: none !important; white-space: nowrap !important; transition: all .15s ease !important;
            }
            .main-header .dropdown-item:hover { background: rgb(50 227 131 / 8%) !important; color: var(--color-deep-ember) !important; }
            .main-header .dropdown-item.active { background: rgb(50 227 131 / 8%) !important; color: var(--color-forest) !important; font-weight: 600 !important; }
            .main-header .dropdown-divider { height: 1px !important; background: var(--color-stone) !important; margin: 6px 4px !important; border: none !important; opacity: .6 !important; }
            .dd-icon { font-size: 13px !important; width: 18px !important; text-align: center !important; color: var(--color-ember-red) !important; flex-shrink: 0 !important; }
            .dropdown-item.active .dd-icon { color: var(--color-forest) !important; }
            /* Flag icons for language selector */
            .fi.selector-ico, .fi.dd-icon { display: inline-block !important; width: 20px !important; height: 14px !important; border-radius: 3px !important; background-size: cover !important; background-position: center !important; opacity: 1 !important; box-shadow: 0 0 0 1px rgba(0,0,0,.08) !important; }
            .dd-check { font-size: 11px !important; width: 14px !important; margin-left: auto !important; color: var(--color-forest) !important; opacity: 0 !important; flex-shrink: 0 !important; }
            .dropdown-item.active .dd-check { opacity: 1 !important; }
            .account-head { padding: 6px 12px 10px !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
            .account-head__name { font-family: var(--font-graphik) !important; font-weight: 600 !important; font-size: 15px !important; color: var(--color-ink) !important; }
            .account-head__credits { font-size: 12px !important; color: var(--color-cobalt-link) !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
            .account-head__credits i { color: var(--color-ember-red) !important; }
            .account-cta { padding: 4px 6px 2px !important; }

            @media (max-width: 991px) {
                .center-nav { display: none !important; }
                .currency-selector { display: none !important; }
                .account-name { display: none !important; }
            }
            @media (max-width: 767px) {
                .logo-img { height: 54px !important; }
                .right-actions { column-gap: 2px !important; }
                .language-selector, .currency-selector { display: none !important; }
                .account-btn { padding: 7px 8px !important; }
                .cart-btn { width: 40px !important; height: 40px !important; }
            }

            /* ============================================================
               MODERN CART SIDEBAR DRAWER (REVAMPED THEME)
               ============================================================ */
            .modern-cart-drawer {
                background: linear-gradient(180deg, var(--surface-paper-canvas, var(--color-paper)) 0%, var(--surface-cream-wash, var(--color-cream)) 100%) !important;
                border-left: 1px solid var(--color-stone, var(--color-stone)) !important;
                box-shadow: -10px 0 35px rgba(37, 34, 30, 0.08) !important;
                width: 420px !important;
                max-width: 100% !important;
            }

            .modern-cart-drawer .offcanvas__wrapper {
                padding: 30px clamp(15px, 4vw, 30px) !important;
            }

            /* Cart list items style overrides */
            .modern-cart-drawer .cart-list li {
                background: var(--color-paper, var(--color-paper)) !important;
                border: 1px solid var(--color-stone, var(--color-stone)) !important;
                border-radius: 14px !important;
                padding: 16px !important;
                transition: all 0.25s ease !important;
                box-shadow: 0 4px 10px rgba(37,34,30,0.02) !important;
            }

            .modern-cart-drawer .cart-list .cart-thumb {
                width: 56px !important;
                height: 56px !important;
                border-radius: 10px !important;
                overflow: hidden !important;
                border: 1px solid var(--color-stone, var(--color-stone)) !important;
            }
            .modern-cart-drawer .cart-list .cart-thumb img {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
                display: block !important;
            }
            .modern-cart-drawer .cart-list .cart-thumb--credits {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                background: var(--surface-cream-wash, var(--color-cream)) !important;
                color: var(--color-ember-red, var(--brand-purple)) !important;
                font-size: 20px !important;
            }

            .modern-cart-drawer .cart-list li:hover {
                transform: translateY(-2px);
                border-color: rgba(82, 183, 136, 0.25) !important;
                box-shadow: 0 8px 20px rgba(37,34,30,0.05) !important;
                background: var(--color-paper, var(--color-paper)) !important;
            }

            .modern-cart-drawer .cart-list .remove-item {
                background: var(--surface-cream-wash, var(--color-cream)) !important;
                border: 1px solid var(--color-stone, var(--color-stone)) !important;
                color: var(--color-ember-red, var(--brand-purple)) !important;
                transition: all 0.25s ease !important;
                box-shadow: none !important;
            }

            .modern-cart-drawer .cart-list .remove-item:hover {
                background: var(--color-ember-red, var(--brand-purple)) !important;
                border-color: var(--color-ember-red, var(--brand-purple)) !important;
                color: #fff !important;
                transform: rotate(90deg) scale(1.05) !important;
            }

            /* Close Button Override */
            .modern-cart-drawer .cartcanvas__close {
                background: transparent !important;
                border: 1px solid var(--color-stone, var(--color-stone)) !important;
                color: var(--color-ink, var(--brand-black-soft)) !important;
                transition: all 0.25s ease !important;
            }

            .modern-cart-drawer .cartcanvas__close:hover {
                border-color: var(--color-ember-red, var(--brand-purple)) !important;
                color: var(--color-ember-red, var(--brand-purple)) !important;
                transform: rotate(90deg) scale(1.05) !important;
                background: transparent !important;
            }

            /* Credits badges inside drawer */
            .modern-cart-drawer .db-points-badge--amber {
                background: var(--surface-cream-wash, var(--color-cream)) !important;
                border: 1px solid rgba(82, 183, 136, 0.15) !important;
                color: var(--color-ember-red, var(--brand-purple)) !important;
                display: inline-flex;
                align-items: center;
                padding: 3px 8px;
                border-radius: 6px;
                font-size: 11px;
                font-weight: 700;
            }

            /* Drawer Footer adjustments */
            .modern-cart-drawer .cart-footer {
                border-top: 1.5px dashed var(--color-stone, var(--color-stone)) !important;
            }

            .modern-cart-drawer .cart-footer h5 {
                font-family: var(--font-inter), sans-serif !important;
                font-weight: 700 !important;
                color: var(--color-pencil, var(--color-pencil)) !important;
            }

            .modern-cart-drawer .cart-footer .modern-btn-outline {
                border: 1.5px solid var(--color-stone, var(--color-stone)) !important;
                color: var(--color-pencil, var(--color-pencil)) !important;
                background: transparent !important;
                font-weight: 700 !important;
                border-radius: 10px !important;
                transition: all 0.25s ease !important;
            }
            .modern-cart-drawer .cart-footer .modern-btn-outline:hover {
                border-color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
                color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
                background-color: var(--surface-cream-wash, var(--color-cream)) !important;
            }
            .modern-cart-drawer .cart-footer .modern-btn-solid {
                background: var(--color-ember-red, var(--brand-purple)) !important;
                color: white !important;
                border: none !important;
                border-radius: 10px !important;
                font-weight: 700 !important;
                transition: all 0.25s ease !important;
                box-shadow: 0 4px 12px rgba(82, 183, 136, 0.15) !important;
            }
            .modern-cart-drawer .cart-footer .modern-btn-solid:hover {
                background: var(--color-deep-ember, var(--brand-purple-dark)) !important;
                transform: translateY(-1px) !important;
                box-shadow: 0 6px 16px rgba(82, 183, 136, 0.22) !important;
            }

/* ============================================================
   FOOTER — "Sign off"
   Brand statement and a single line subscribe on top, a four
   column directory under it, one rule, then the fine print.
   ============================================================ */
    .ftr {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background: var(--brand-black, #000000);
        color: rgba(255, 255, 255, 0.72);
        font-family: var(--font-inter, 'Inter', sans-serif);

        --ftr-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
        --ftr-hair: rgba(255, 255, 255, 0.10);
        --ftr-accent: linear-gradient(90deg, var(--brand-purple, #2d6a4f) 0%, var(--brand-blue, #52b788) 100%);
    }
    .ftr::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--ftr-accent);
        z-index: 2;
    }
    .ftr__glow {
        position: absolute;
        top: -260px;
        left: 50%;
        transform: translateX(-50%);
        width: 900px;
        height: 520px;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(circle, rgba(82, 183, 136, 0.22) 0%, rgba(116, 198, 157, 0.08) 45%, transparent 70%);
    }
    .ftr__shell {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 64px var(--spacing-20, 20px) 0;
    }
    .ftr .ftr-mono {
        font-family: var(--ftr-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    /* ---- Top: brand + subscribe ---- */
    .ftr__top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 56px;
        align-items: center;
        padding-bottom: 44px;
        border-bottom: 1px solid var(--ftr-hair);
    }
    .ftr__logo {
        display: inline-block;
        margin-bottom: 22px;
    }
    .ftr__logo img {
        width: 190px;
        max-width: 100%;
        height: auto;
    }
    .ftr__logo-text {
        display: inline-block;
        font-size: 26px;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -.01em;
        color: #fff;
    }
    .ftr__logo:hover .ftr__logo-text { opacity: .85; }
    .ftr__statement {
        max-width: 34ch;
        margin: 0;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: clamp(20px, 2.4vw, 27px);
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: -0.025em;
        color: #ffffff;
    }

    .ftr__subscribe {
        padding: 0;                 /* the theme pads every <section> */
    }
    .ftr__subscribe-label {
        display: block;
        margin-bottom: 16px;
        color: rgba(255, 255, 255, 0.45);
    }
    .ftr .subscribe-form form {
        margin: 0;
    }
    .ftr .ftr__field {
        display: flex;
        align-items: center;
        gap: 18px;
        height: auto;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .ftr .ftr__field input.email {
        flex: 1;
        min-width: 0;
        height: auto;
        padding: 0 0 13px;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        transition: border-color 220ms ease;
        font-family: var(--font-inter, 'Inter', sans-serif);
        font-size: clamp(17px, 2vw, 21px);
        font-weight: 500;
        color: #ffffff;
    }
    .ftr .ftr__field input.email::placeholder {
        color: rgba(255, 255, 255, 0.34);
    }
    .ftr .ftr__field input.email:focus {
        outline: none;
        box-shadow: none;
        background: transparent;
        border-bottom-color: var(--brand-purple-light, #95d5b2);
    }
    .ftr .subscribe-form .ftr__field .ftr__send {
        position: static;           /* the legacy subscribe form absolutely positions it */
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 46px;
        min-width: 46px;
        height: 46px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--ftr-accent);
        color: #ffffff;
        font-size: 13px;
        cursor: pointer;
        box-shadow: 0 12px 26px -14px rgba(82, 183, 136, 0.95);
        transition: transform 200ms ease;
    }
    .ftr .subscribe-form .ftr__field .ftr__send:hover {
        transform: translateY(-2px);
    }
    .ftr__subscribe-note {
        max-width: 52ch;
        margin: 16px 0 0;
        font-size: 13.5px;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.45);
    }
    .ftr .suces_rinfo {
        margin: 14px 0 0;
        font-size: 13.5px;
        color: #7ee2b8;
    }

    /* ---- Directory ---- */
    .ftr__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 40px;
        padding: 44px 0 48px;
    }
    .ftr__heading {
        margin: 0 0 20px;
        color: rgba(255, 255, 255, 0.42);
    }
    .ftr__links {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .ftr__links li + li {
        margin-top: 12px;
    }
    .ftr__links a {
        position: relative;
        display: inline-block;
        padding:0;
        font-size: 14.5px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.72);
        text-decoration: none;
        transition: color 200ms ease;
    }
    .ftr__links a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 100%;
        bottom: -3px;
        height: 1px;
        background: var(--brand-purple-light, #95d5b2);
        transition: right 240ms ease;
    }
    .ftr__links a:hover {
        color: #ffffff;
    }
    .ftr__links a:hover::after {
        right: 0;
    }

    .ftr__contact {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .ftr__contact li + li {
        margin-top: 18px;
    }
    .ftr__contact-label {
        display: block;
        margin-bottom: 7px;
        color: rgba(255, 255, 255, 0.34);
    }
    .ftr__contact a,
    .ftr__contact span:not(.ftr__contact-label) {
        font-size: 14.5px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.72);
        text-decoration: none;
    }
    .ftr__contact a:hover {
        color: #ffffff;
    }

    /* ---- Fine print ---- */
    .ftr__bottom {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 26px 0 30px;
        border-top: 1px solid var(--ftr-hair);
    }
    .ftr__copy {
        margin: 0;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.45);
    }
    .ftr__copy a {
        color: rgba(255, 255, 255, 0.72);
        text-decoration: none;
    }
    .ftr__copy a:hover {
        color: #ffffff;
    }
    .ftr__bottom-right {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 24px;
    }
    .ftr__payment {
        max-width: 210px;
        height: auto;
        opacity: 0.8;
    }
    .ftr__top-link {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 9px 16px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.72);
        text-decoration: none;
        transition: border-color 200ms ease, color 200ms ease;
    }
    .ftr__top-link:hover {
        border-color: rgba(255, 255, 255, 0.42);
        color: #ffffff;
    }
    .ftr__top-link i {
        font-size: 10px;
    }

    /* ---- Focus ---- */
    .ftr a:focus-visible,
    .ftr button:focus-visible,
    .ftr input:focus-visible {
        outline: 2px solid var(--brand-blue, #52b788);
        outline-offset: 3px;
    }

    /* ---- Responsive ---- */
    @media (max-width: 991px) {
        .ftr__shell {
            padding-top: 56px;
        }
        .ftr__top {
            grid-template-columns: minmax(0, 1fr);
            gap: 40px;
            padding-bottom: 40px;
        }
        .ftr__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 36px 32px;
            padding: 40px 0 44px;
        }
    }
    @media (max-width: 575px) {
        .ftr__shell {
            padding-top: 44px;
        }
        .ftr__grid {
            grid-template-columns: minmax(0, 1fr);
            gap: 32px;
        }
        .ftr__bottom {
            flex-direction: column;
            align-items: flex-start;
        }
        .ftr__bottom-right {
            width: 100%;
            justify-content: space-between;
            gap: 14px;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .ftr__field,
        .ftr .subscribe-form .ftr__field .ftr__send,
        .ftr__links a,
        .ftr__links a::after,
        .ftr__top-link {
            transition: none !important;
        }
        .ftr .subscribe-form .ftr__field .ftr__send:hover {
            transform: none;
        }
    }

/* ============================================================
   COOKIE CONSENT — EDITORIAL DARK BAR WITH EMBER MEDIA BLOCK
   Override vendor's #cookies-policy.cookies with high specificity.
   ============================================================ */
#cookies-policy.cookies.artify-cookies,
.artify-cookies {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: auto !important;
    z-index: 9999 !important;
    display: block !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    font-family: var(--font-inter, 'Inter', sans-serif);
    font-size: 16px;
}
.artify-cookies__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: -1;
    animation: artifyCookiesFadeIn 0.35s ease;
    pointer-events: none;
}
.artify-cookies__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    background: var(--brand-black);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 24px 24px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 -24px 60px rgba(0, 0, 0, 0.55),
        0 -4px 14px rgba(0, 0, 0, 0.25);
    padding: 0;
    overflow: hidden;
    animation: artifyCookiesSlideUp 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Grabber hint at very top (subtle) */
.artify-cookies__card::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

/* Warm ember glow accent — sits at top-center */
.artify-cookies__card::after {
    content: '';
    position: absolute;
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(82, 183, 136, 0.25) 0%, transparent 65%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

/* Content max-width wrapper — center everything */
.artify-cookies__main,
.artify-cookies__customize-toggle,
.artify-cookies__customize {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* MAIN 3-COLUMN LAYOUT: icon block | copy | actions */
.artify-cookies__main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 26px 34px 26px;
    position: relative;
}

/* LEFT: bold ember icon block */
.artify-cookies__media {
    flex-shrink: 0;
}
.artify-cookies__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-ember-red, var(--brand-purple)) 0%, var(--color-deep-ember, var(--brand-purple-dark)) 100%);
    color: #ffffff;
    font-size: 30px;
    box-shadow:
        0 12px 26px rgba(82, 183, 136, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    animation: artifyCookieWiggle 3s ease-in-out infinite;
}
.artify-cookies__icon i {
    line-height: 1;
    color: inherit;
    font-size: inherit;
}
@keyframes artifyCookieWiggle {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-8deg) scale(1.04); }
    30% { transform: rotate(8deg) scale(1.04); }
    45% { transform: rotate(-3deg); }
    60% { transform: rotate(3deg); }
    75% { transform: rotate(0deg); }
}

/* CENTER: copy */
.artify-cookies__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.artify-cookies__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-inter, sans-serif);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-purple-light);
}
.artify-cookies__eyebrow-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-ember-red, var(--brand-purple));
    box-shadow: 0 0 10px rgba(82, 183, 136, 0.7);
    animation: artifyCookiesPulse 1.8s ease-in-out infinite;
}
@keyframes artifyCookiesPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.25); opacity: 0.75; }
}

/* Backward-compat title (if used) */
.artify-cookies__title {
    font-family: var(--font-graphik, sans-serif);
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.artify-cookies__intro {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    max-width: 640px;
}
.artify-cookies__policy-link {
    font-size: 12.5px;
    margin: 4px 0 0 0;
    color: rgba(255, 255, 255, 0.55);
}
.artify-cookies__policy-link a {
    color: var(--brand-purple-light);
    text-decoration: none;
    border-bottom: 1px dashed rgba(240, 165, 140, 0.4);
    transition: all 0.2s ease;
}
.artify-cookies__policy-link a:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
    border-bottom-style: solid;
}

/* RIGHT: action buttons — stacked vertical */
.artify-cookies__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    justify-content: center;
    flex-shrink: 0;
    min-width: 210px;
}

/* The @cookieconsentbutton directive renders as:
   <form class="artify-cookies__btn artify-cookies__btn--{variant}">
       <button class="artify-cookies__btn__link">
           <span class="artify-cookies__btn__label">…</span>
       </button>
   </form>
   So treat the form as an invisible full-width slot and style the inner button. */
.artify-cookies__btn {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
.artify-cookies__btn > button,
.artify-cookies__btn__link {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 24px;
    border-radius: 12px;
    font-family: var(--font-inter, 'Inter', sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.28s ease,
                box-shadow 0.28s ease,
                color 0.28s ease,
                border-color 0.28s ease;
}
.artify-cookies__btn__label {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    line-height: 1;
}

/* Primary (ember filled) */
.artify-cookies__btn--primary > button,
.artify-cookies__btn--primary .artify-cookies__btn__link {
    background: var(--color-ember-red, var(--brand-purple)) !important;
    color: #ffffff !important;
    border: 1px solid var(--color-ember-red, var(--brand-purple)) !important;
    box-shadow: 0 10px 24px rgba(82, 183, 136, 0.38) !important;
}
.artify-cookies__btn--primary > button:hover,
.artify-cookies__btn--primary .artify-cookies__btn__link:hover {
    background: var(--color-deep-ember, var(--brand-purple-dark)) !important;
    border-color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
    box-shadow: 0 14px 32px rgba(82, 183, 136, 0.55) !important;
    transform: translateY(-2px);
}

/* Secondary (translucent glass) */
.artify-cookies__btn--secondary > button,
.artify-cookies__btn--secondary .artify-cookies__btn__link {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;
}
.artify-cookies__btn--secondary > button:hover,
.artify-cookies__btn--secondary .artify-cookies__btn__link:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    transform: translateY(-1px);
}

/* Close button — floating top-right corner */
.artify-cookies__close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.55);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 3;
    padding: 0;
}
.artify-cookies__close:hover {
    background: var(--color-ember-red, var(--brand-purple));
    border-color: var(--color-ember-red, var(--brand-purple));
    color: #ffffff;
    transform: rotate(90deg);
}

/* Customize toggle — full-width dashed strip */
.artify-cookies__customize-toggle {
    display: flex;
    width: 100%;
    max-width: none;
    padding: 16px 34px;
    background: rgba(255, 255, 255, 0.02);
    border: none;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
    font-family: var(--font-inter, sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-purple-light);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.25s ease;
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
}
.artify-cookies__customize-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}
.artify-cookies__customize-toggle--open {
    background: rgba(240, 165, 140, 0.06);
    color: #ffffff;
}
.artify-cookies__customize-toggle i {
    font-size: 10px;
    transition: transform 0.3s ease;
}
.artify-cookies__customize-label {
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
}

/* Expand section */
.artify-cookies__expand {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.artify-cookies__expand--open {
    max-height: 520px;
    overflow-y: auto;
}
.artify-cookies__customize {
    padding: 26px 32px 30px;
}

/* Sections */
.artify-cookies__sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}
.artify-cookies__section {
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.28s ease;
}
.artify-cookies__section:hover {
    border-color: rgba(240, 165, 140, 0.30);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

/* Category structure */
.artify-cookies__category-wrapper {
    display: flex;
    flex-direction: column;
}
.artify-cookies__category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.artify-cookies__cat-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.01em;
}
.artify-cookies__cat-desc {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
    margin: 6px 0 0 0;
    line-height: 1.5;
}

/* Toggle Switch — dark palette */
.artify-cookies__switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}
.artify-cookies__switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.artify-cookies__slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.14);
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 34px;
}
.artify-cookies__slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.artify-cookies__switch input:checked + .artify-cookies__slider {
    background-color: var(--color-ember-red, var(--brand-purple));
    box-shadow: 0 0 12px rgba(82, 183, 136, 0.4);
}
.artify-cookies__switch input:checked + .artify-cookies__slider:before {
    transform: translateX(18px);
}
.artify-cookies__switch input:disabled + .artify-cookies__slider {
    opacity: 0.6;
    background-color: rgba(240, 165, 140, 0.35);
    cursor: not-allowed;
}

/* More toggle */
.artify-cookies__more-toggle {
    background: none;
    border: none;
    color: var(--brand-purple-light);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.04em;
    transition: color 0.2s ease;
}
.artify-cookies__more-toggle:hover {
    color: #ffffff;
}
.artify-cookies__more-toggle i {
    font-size: 10px;
    transition: transform 0.25s ease;
}

/* Details */
.artify-cookies__details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 12px;
}
.artify-cookies__details--open {
    max-height: 400px;
}
.artify-cookies__cookies-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.artify-cookies__cookie-item {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    border-left: 3px solid var(--color-ember-red, var(--brand-purple));
}
.artify-cookies__cookie-name {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}
.artify-cookies__cookie-duration {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--brand-purple-light);
    background: rgba(82, 183, 136, 0.20);
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}
.artify-cookies__cookie-desc {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
    margin: 4px 0 0;
    line-height: 1.55;
}

/* Footer save */
.artify-cookies__footer {
    padding: 18px 0 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
    display: flex;
    justify-content: flex-end;
}
.artify-cookies__save {
    width: 100%;
    padding: 14px 24px;
    background: var(--color-ember-red, var(--brand-purple));
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.28s ease;
    text-align: center;
    box-shadow: 0 10px 24px rgba(82, 183, 136, 0.38);
}
.artify-cookies__save:hover {
    background: var(--color-deep-ember, var(--brand-purple-dark));
    box-shadow: 0 14px 32px rgba(82, 183, 136, 0.55);
    transform: translateY(-2px);
}

/* Animations */
@keyframes artifyCookiesFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes artifyCookiesSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Responsive */
@media (max-width: 991px) {
    .artify-cookies__main {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "media body"
            "actions actions";
        padding: 24px 28px 22px;
        gap: 22px;
    }
    .artify-cookies__media   { grid-area: media; }
    .artify-cookies__body    { grid-area: body; }
    .artify-cookies__actions {
        grid-area: actions;
        flex-direction: row;
        min-width: 0;
    }
    .artify-cookies__btn {
        flex: 1 1 0;
    }
}

@media (max-width: 575px) {
    .artify-cookies__card {
        border-radius: 20px 20px 0 0;
    }
    .artify-cookies__main {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "body"
            "actions";
        padding: 22px 20px;
        gap: 18px;
        text-align: center;
    }
    .artify-cookies__media {
        justify-self: center;
    }
    .artify-cookies__icon {
        width: 60px;
        height: 60px;
        font-size: 26px;
        border-radius: 18px;
    }
    .artify-cookies__eyebrow {
        justify-content: center;
    }
    .artify-cookies__intro {
        max-width: none;
    }
    .artify-cookies__actions {
        flex-direction: column;
    }
    .artify-cookies__customize-toggle {
        padding: 14px 20px;
    }
    .artify-cookies__customize {
        padding: 22px 20px;
    }
    .artify-cookies__close {
        top: 10px;
        right: 10px;
        width: 26px;
        height: 26px;
    }
    .artify-cookies__expand--open {
        max-height: 65vh;
    }
}

/* ============================================================
   FLASH NOTIFICATIONS / TOAST MESSAGES — modern glassmorphism
   ============================================================ */
.artify-toasts {
	position: fixed;
	top: 100px;
	right: 24px;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 384px;
	max-width: calc(100vw - 48px);
	pointer-events: none;
	font-family: var(--font-inter, sans-serif);
}

.artify-toast {
	position: relative;
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	background: linear-gradient(135deg, rgba(254, 253, 252, 0.95) 0%, rgba(255, 250, 248, 0.92) 100%);
	border: 1px solid rgba(215, 214, 212, 0.6);
	border-radius: 12px;
	color: var(--color-ink, var(--brand-black-soft));
	box-shadow: 0 16px 48px rgba(37, 34, 30, 0.12), 0 2px 8px rgba(37, 34, 30, 0.04);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	overflow: hidden;
	animation: artifyToastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.artify-toast.artify-toast--dismiss {
	opacity: 0;
	transform: translateX(400px);
}

/* Left accent stripe */
.artify-toast::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	border-radius: 5px 0 0 5px;
}

.artify-toast--success::before {
	background: linear-gradient(180deg, var(--color-forest, var(--color-forest)) 0%, var(--color-forest, var(--color-forest)) 100%);
	box-shadow: inset 0 2px 4px rgba(68, 108, 61, 0.3);
}

.artify-toast--error::before {
	background: linear-gradient(180deg, var(--color-ember-red, var(--brand-purple)) 0%, var(--color-deep-ember, var(--brand-purple-dark)) 100%);
	box-shadow: inset 0 2px 4px rgba(82, 183, 136, 0.3);
}

/* Content wrapper */
.artify-toast__content {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex: 1;
}

/* Icon medallion */
.artify-toast__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	font-size: 18px;
	margin-top: 1px;
}

.artify-toast--success .artify-toast__icon {
	background: linear-gradient(135deg, rgba(68, 108, 61, 0.1) 0%, rgba(68, 108, 61, 0.05) 100%);
	color: var(--color-forest, var(--color-forest));
}

.artify-toast--error .artify-toast__icon {
	background: linear-gradient(135deg, rgba(82, 183, 136, 0.12) 0%, rgba(82, 183, 136, 0.06) 100%);
	color: var(--color-ember-red, var(--brand-purple));
}

/* Message text */
.artify-toast__message {
	flex: 1;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-ink, var(--brand-black-soft));
	word-break: break-word;
	padding-top: 2px;
}

/* Close button */
.artify-toast__close {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--color-graphite, var(--color-graphite));
	font-size: 13px;
	cursor: pointer;
	opacity: 0.8;
	transition: all 0.2s ease;
	margin-top: 1px;
}

.artify-toast__close:hover {
	opacity: 1;
	background: rgba(37, 34, 30, 0.08);
	color: var(--color-ink, var(--brand-black-soft));
}

.artify-toast__close:active {
	transform: scale(0.92);
}

/* Animations */
@keyframes artifyToastSlideIn {
	from {
		opacity: 0;
		transform: translateX(420px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Responsive */
@media (max-width: 768px) {
	.artify-toasts {
		top: 92px;
		right: 16px;
		left: 16px;
		width: auto;
	}
}

@media (max-width: 480px) {
	.artify-toasts {
		top: 80px;
		right: 12px;
		left: 12px;
		gap: 10px;
	}

	.artify-toast {
		padding: 14px 15px;
		gap: 12px;
		border-radius: 10px;
		font-size: 13px;
	}

	.artify-toast__icon {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	.artify-toast__message {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.artify-toast {
		animation: none;
	}
}

/* ===================== page-about-us ===================== */
    /* ============================================================
       ABOUT PAGE — mosaic hero, quadrant pillars,
       zig-zag curriculum path, offset brick grid
       ============================================================ */

    /* =========================================
       HERO — copy over a full-bleed image mosaic
       ========================================= */
    .page-about-us .abthero-section{
        position: relative;
        overflow: hidden;
        padding-top: 72px;
        background:
            radial-gradient(820px 420px at 92% 0%, rgba(116, 198, 157, .12), transparent 62%),
            linear-gradient(180deg, var(--color-cream, #eef8f1) 0%, #ffffff 60%, var(--color-cream, #eef8f1) 100%);
    }

    .page-about-us .abthero{
        position: relative;
        border-radius: 32px;
        overflow: hidden;
        min-height: 620px;
        display: flex;
        align-items: center;
        background: #0b2018;
        box-shadow: 0 40px 90px rgba(26, 20, 48, .28);
    }

    .page-about-us .abthero__mosaic{
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .page-about-us .abthero__tile{
        position: relative;
        overflow: hidden;
        display: block;
    }

    .page-about-us .abthero__tile img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.02);
        transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
    }

    .page-about-us .abthero:hover .abthero__tile img{
        transform: scale(1.08);
    }

    /* dark wash so the copy stays readable over any photo */
    .page-about-us .abthero__veil{
        position: absolute;
        inset: 0;
        background:
            linear-gradient(100deg, rgba(9, 7, 18, .97) 0%, rgba(9, 7, 18, .9) 34%, rgba(9, 7, 18, .55) 58%, rgba(9, 7, 18, .35) 100%),
            linear-gradient(to top, rgba(9, 7, 18, .7), transparent 55%);
        pointer-events: none;
    }

    .page-about-us .abthero__content{
        position: relative;
        z-index: 2;
        max-width: 620px;
        padding: 72px 56px;
    }

    .page-about-us .abthero__eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 7px 16px 7px 12px;
        border-radius: 999px;
        border: 1px solid rgba(149, 213, 178, .32);
        background: rgba(82, 183, 136, .16);
        font-family: var(--font-inter);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--brand-purple-light, #95d5b2);
    }

    .page-about-us .abthero__eyebrow-dot{
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand-purple, #2d6a4f);
        box-shadow: 0 0 0 4px rgba(82, 183, 136, .24);
    }

    .page-about-us .abthero__title{
        font-family: var(--font-graphik);
        font-size: clamp(32px, 3.8vw, 52px);
        line-height: 1.06;
        letter-spacing: -.03em;
        font-weight: 800;
        color: #fff;
        margin: 22px 0 0;
    }

    .page-about-us .abthero__desc{
        font-family: var(--font-inter);
        font-size: 15.5px;
        line-height: 1.8;
        color: rgba(255, 255, 255, .62);
        margin: 18px 0 0;
    }

    .page-about-us .abthero__points{
        list-style: none;
        margin: 34px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .page-about-us .abthero__point{
        display: grid;
        grid-template-columns: 42px 1fr;
        gap: 16px;
        padding: 18px 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .page-about-us .abthero__point:last-child{
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .page-about-us .abthero__point-num{
        font-family: var(--font-inter);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .12em;
        color: var(--brand-purple-light, #95d5b2);
        padding-top: 3px;
    }

    .page-about-us .abthero__point-body strong{
        display: block;
        font-family: var(--font-graphik);
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: #fff;
    }

    .page-about-us .abthero__point-body span{
        display: block;
        margin-top: 5px;
        font-family: var(--font-inter);
        font-size: 14px;
        line-height: 1.65;
        color: rgba(255, 255, 255, .5);
    }

    .page-about-us .abthero__tags{
        position: absolute;
        right: 32px;
        bottom: 32px;
        z-index: 2;
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
        max-width: 46%;
    }

    .page-about-us .abthero__tag{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .26);
        background: rgba(255, 255, 255, .12);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        font-family: var(--font-inter);
        font-size: 12.5px;
        font-weight: 600;
        color: #fff;
        transition: background-color .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
    }

    .page-about-us .abthero__tag:hover{
        background: linear-gradient(120deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        border-color: transparent;
        transform: translateY(-3px);
    }

    .page-about-us .abthero__tag i{
        font-size: 11px;
        opacity: .9;
    }

    /* =========================================
       PILLARS — 2x2 quadrants around a gradient cross
       ========================================= */
    .page-about-us .abtquad-section{
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(760px 420px at 4% 8%, rgba(82, 183, 136, .1), transparent 62%),
            linear-gradient(180deg, var(--color-cream, #eef8f1) 0%, #ffffff 55%, var(--color-cream, #eef8f1) 100%);
    }

    .page-about-us .abtquad{
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 0;
        row-gap: 0;
    }

    .page-about-us .abtquad__axis{
        position: absolute;
        background: linear-gradient(var(--axis-dir, to bottom), transparent, var(--color-stone, #cbe8d7) 12%, var(--color-stone, #cbe8d7) 88%, transparent);
        pointer-events: none;
    }

    .page-about-us .abtquad__axis--v{
        --axis-dir: to bottom;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        transform: translateX(-.5px);
    }

    .page-about-us .abtquad__axis--h{
        --axis-dir: to right;
        left: 0;
        right: 0;
        top: 50%;
        height: 1px;
        transform: translateY(-.5px);
    }

    .page-about-us .abtquad__hub{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 14px;
        margin: -7px 0 0 -7px;
        border-radius: 50%;
        background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        box-shadow: 0 0 0 6px rgba(82, 183, 136, .12);
        pointer-events: none;
    }

    .page-about-us .abtquad__cell{
        position: relative;
        padding: 48px 56px;
        transition: background-color .4s ease;
    }

    .page-about-us .abtquad__cell:hover{
        background: rgba(82, 183, 136, .04);
    }

    /* each quadrant leans away from the hub */
    .page-about-us .abtquad__cell--0{ padding-left: 0;   padding-top: 0; }
    .page-about-us .abtquad__cell--1{ padding-right: 0;  padding-top: 0; }
    .page-about-us .abtquad__cell--2{ padding-left: 0;   padding-bottom: 0; }
    .page-about-us .abtquad__cell--3{ padding-right: 0;  padding-bottom: 0; }

    .page-about-us .abtquad__num{
        position: absolute;
        top: 10px;
        right: 26px;
        font-family: var(--font-graphik);
        font-size: 92px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.05em;
        color: rgba(26, 26, 36, .05);
        transition: color .45s ease;
        pointer-events: none;
    }
    .page-about-us .abtquad__cell:hover .abtquad__num{
        color: rgba(82, 183, 136, .14);
    }

    .page-about-us .abtquad__icon{
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid var(--color-stone, #cbe8d7);
        color: var(--brand-purple, #2d6a4f);
        font-size: 19px;
        box-shadow: 0 8px 22px rgba(26, 20, 48, .07);
        transition: background .4s ease, color .4s ease, border-color .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
    }

    .page-about-us .abtquad__cell:hover .abtquad__icon{
        background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        border-color: transparent;
        color: #fff;
        transform: translateY(-4px);
    }

    .page-about-us .abtquad__title{
        position: relative;
        z-index: 1;
        font-family: var(--font-graphik);
        font-size: 22px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -.015em;
        color: var(--color-ink, #10241a);
        margin: 22px 0 0;
    }

    .page-about-us .abtquad__desc{
        position: relative;
        z-index: 1;
        font-family: var(--font-inter);
        font-size: 15px;
        line-height: 1.75;
        color: var(--color-pencil, #3d5a4b);
        margin: 10px 0 0;
        max-width: 42ch;
    }

    /* =========================================
       CURRICULUM PATH — dark zig-zag timeline
       ========================================= */
    .page-about-us .abtpath-section{
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(880px 460px at 8% 0%, rgba(82, 183, 136, .26), transparent 62%),
            radial-gradient(820px 460px at 94% 100%, rgba(116, 198, 157, .22), transparent 62%),
            linear-gradient(155deg, #16111f 0%, var(--brand-black-soft, #0b2018) 52%, #0a0e19 100%);
    }

    .page-about-us .abtpath__glow{
        position: absolute;
        border-radius: 50%;
        filter: blur(110px);
        opacity: .4;
        pointer-events: none;
    }
    .page-about-us .abtpath__glow--a{
        width: 380px; height: 380px;
        top: -130px; left: 10%;
        background: var(--brand-purple, #2d6a4f);
    }
    .page-about-us .abtpath__glow--b{
        width: 340px; height: 340px;
        bottom: -150px; right: 8%;
        background: var(--brand-blue, #52b788);
    }

    .page-about-us .abtpath-section .auto-container{
        position: relative;
        z-index: 2;
    }

    .page-about-us .abtpath__head{
        text-align: center;
        max-width: 720px;
        margin: 0 auto 66px;
    }

    .page-about-us .abtpath__eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 7px 16px 7px 12px;
        border-radius: 999px;
        border: 1px solid rgba(149, 213, 178, .28);
        background: rgba(82, 183, 136, .12);
        font-family: var(--font-inter);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--brand-purple-light, #95d5b2);
    }

    .page-about-us .abtpath__eyebrow-dot{
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand-purple, #2d6a4f);
        box-shadow: 0 0 0 4px rgba(82, 183, 136, .22);
    }

    .page-about-us .abtpath__title{
        font-family: var(--font-graphik);
        font-size: clamp(30px, 3.8vw, 48px);
        line-height: 1.08;
        letter-spacing: -.03em;
        font-weight: 800;
        color: #fff;
        margin: 20px 0 0;
    }

    .page-about-us .abtpath__lede{
        font-family: var(--font-inter);
        font-size: 16px;
        line-height: 1.75;
        color: rgba(255, 255, 255, .55);
        margin: 14px 0 0;
    }

    .page-about-us .abtpath{
        position: relative;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .page-about-us .abtpath__spine{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        transform: translateX(-1px);
        background: linear-gradient(to bottom, transparent, rgba(149, 213, 178, .45) 8%, rgba(163, 212, 253, .45) 92%, transparent);
    }

    .page-about-us .abtpath__step{
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        margin-bottom: 34px;
    }
    .page-about-us .abtpath__step:last-child{
        margin-bottom: 0;
    }

    .page-about-us .abtpath__node{
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        margin: -26px 0 0 -26px;
        border-radius: 50%;
        background: #14111d;
        border: 2px solid rgba(149, 213, 178, .4);
        font-family: var(--font-inter);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .06em;
        color: var(--brand-purple-light, #95d5b2);
        transition: background .4s ease, color .4s ease, border-color .4s ease, transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
    }

    .page-about-us .abtpath__step:hover .abtpath__node{
        background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        border-color: transparent;
        color: #fff;
        transform: scale(1.1);
        box-shadow: 0 12px 30px rgba(82, 183, 136, .4);
    }

    .page-about-us .abtpath__card{
        position: relative;
        padding: 30px 32px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, .1);
        background: rgba(255, 255, 255, .04);
        overflow: hidden;
        transition: transform .45s cubic-bezier(.22,.61,.36,1), background-color .4s ease, border-color .4s ease;
    }

    .page-about-us .abtpath__card::before{
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(150deg, rgba(82, 183, 136, .22), transparent 62%);
        opacity: 0;
        transition: opacity .45s ease;
        pointer-events: none;
    }

    .page-about-us .abtpath__step:hover .abtpath__card{
        background: rgba(255, 255, 255, .07);
        border-color: rgba(149, 213, 178, .3);
    }
    .page-about-us .abtpath__step:hover .abtpath__card::before{
        opacity: 1;
    }

    /* alternate sides, each card pulling away from the spine */
    .page-about-us .abtpath__step--left .abtpath__card{
        grid-column: 1;
        margin-right: 56px;
        text-align: right;
    }
    .page-about-us .abtpath__step--right .abtpath__card{
        grid-column: 2;
        margin-left: 56px;
    }
    .page-about-us .abtpath__step--left:hover .abtpath__card{
        transform: translateX(-8px);
    }
    .page-about-us .abtpath__step--right:hover .abtpath__card{
        transform: translateX(8px);
    }

    .page-about-us .abtpath__card-num{
        position: relative;
        z-index: 1;
        display: block;
        font-family: var(--font-inter);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .16em;
        color: var(--brand-purple-light, #95d5b2);
        margin-bottom: 10px;
    }

    .page-about-us .abtpath__topic{
        position: relative;
        z-index: 1;
        font-family: var(--font-graphik);
        font-size: 21px;
        font-weight: 700;
        line-height: 1.28;
        letter-spacing: -.015em;
        color: #fff;
        margin: 0;
    }

    .page-about-us .abtpath__desc{
        position: relative;
        z-index: 1;
        font-family: var(--font-inter);
        font-size: 14.5px;
        line-height: 1.72;
        color: rgba(255, 255, 255, .55);
        margin: 10px 0 0;
    }

    /* =========================================
       WHY CHOOSE — offset brick grid
       ========================================= */
    .page-about-us .abtbricks-section{
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(820px 440px at 96% 4%, rgba(116, 198, 157, .12), transparent 62%),
            radial-gradient(760px 440px at 2% 96%, rgba(82, 183, 136, .12), transparent 62%),
            linear-gradient(180deg, var(--color-cream, #eef8f1) 0%, #ffffff 50%, var(--color-cream, #eef8f1) 100%);
    }

    .page-about-us .abtbricks__head{
        text-align: center;
        max-width: 720px;
        margin: 0 auto 58px;
    }

    .page-about-us .abtbricks__eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 14px;
        font-family: var(--font-inter);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--brand-purple, #2d6a4f);
    }

    .page-about-us .abtbricks__eyebrow-line{
        width: 46px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
    }

    .page-about-us .abtbricks__title{
        font-family: var(--font-graphik);
        font-size: clamp(30px, 3.8vw, 48px);
        line-height: 1.08;
        letter-spacing: -.03em;
        font-weight: 800;
        color: var(--color-ink, #10241a);
        margin: 20px 0 0;
    }

    .page-about-us .abtbricks__lede{
        font-family: var(--font-inter);
        font-size: 16px;
        line-height: 1.75;
        color: var(--color-pencil, #3d5a4b);
        margin: 14px 0 0;
    }

    .page-about-us .abtbricks{
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        align-items: start;
    }

    /* middle column drops to break the flat row rhythm */
    .page-about-us .abtbrick:nth-child(3n + 2){
        margin-top: 44px;
    }

    .page-about-us .abtbrick{
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        /* extra right padding keeps the label clear of the ghost index */
        padding: 28px 66px 28px 26px;
        border-radius: 20px;
        background: #fff;
        border: 1px solid var(--color-stone, #cbe8d7);
        overflow: hidden;
        transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease;
    }

    .page-about-us .abtbrick:hover{
        transform: translateY(-6px);
        border-color: transparent;
        box-shadow: 0 20px 44px rgba(26, 20, 48, .14);
    }

    .page-about-us .abtbrick__check{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex: none;
        border-radius: 14px;
        background: var(--color-cream, #eef8f1);
        border: 1px solid var(--color-stone, #cbe8d7);
        color: var(--brand-purple, #2d6a4f);
        font-size: 13px;
        transition: background .35s ease, color .35s ease, border-color .35s ease;
    }

    .page-about-us .abtbrick:hover .abtbrick__check{
        background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        border-color: transparent;
        color: #fff;
    }

    .page-about-us .abtbrick__label{
        font-family: var(--font-inter);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.6;
        color: var(--color-ink, #10241a);
        padding-top: 8px;
    }

    .page-about-us .abtbrick__index{
        position: absolute;
        right: 14px;
        bottom: 4px;
        font-family: var(--font-graphik);
        font-size: 46px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.04em;
        color: rgba(26, 26, 36, .04);
        transition: color .35s ease;
        pointer-events: none;
    }

    .page-about-us .abtbrick:hover .abtbrick__index{
        color: rgba(82, 183, 136, .12);
    }

    /* =========================================
       RESPONSIVE
       ========================================= */
    @media (max-width: 1199px){
        .page-about-us .abthero__content{
            padding: 60px 44px;
            max-width: 560px;
        }
        .page-about-us .abtquad__cell{
            padding: 40px 40px;
        }
        .page-about-us .abtquad__cell--0{ padding-left: 0; padding-top: 0; }
        .page-about-us .abtquad__cell--1{ padding-right: 0; padding-top: 0; }
        .page-about-us .abtquad__cell--2{ padding-left: 0; padding-bottom: 0; }
        .page-about-us .abtquad__cell--3{ padding-right: 0; padding-bottom: 0; }
        .page-about-us .abtpath__card{
            padding: 26px 26px;
        }
    }

    @media (max-width: 991px){
        .page-about-us .abthero{
            min-height: 0;
            border-radius: 26px;
        }
        .page-about-us .abthero__veil{
            background: linear-gradient(to top, rgba(9, 7, 18, .97) 42%, rgba(9, 7, 18, .82) 72%, rgba(9, 7, 18, .6) 100%);
        }
        .page-about-us .abthero__content{
            padding: 320px 32px 40px;
            max-width: none;
        }
        .page-about-us .abthero__tags{
            position: static;
            max-width: none;
            justify-content: flex-start;
            padding: 0 32px 36px;
            z-index: 2;
        }

        /* quadrants collapse to a single stacked column */
        .page-about-us .abtquad{
            grid-template-columns: 1fr;
        }
        .page-about-us .abtquad__axis--v,
        .page-about-us .abtquad__hub{
            display: none;
        }
        .page-about-us .abtquad__axis--h{
            display: none;
        }
        .page-about-us .abtquad__cell,
        .page-about-us .abtquad__cell--0,
        .page-about-us .abtquad__cell--1,
        .page-about-us .abtquad__cell--2,
        .page-about-us .abtquad__cell--3{
            padding: 30px 0;
            border-top: 1px solid var(--color-stone, #cbe8d7);
        }
        .page-about-us .abtquad__cell--0{
            border-top: none;
            padding-top: 0;
        }
        .page-about-us .abtquad__num{
            right: 0;
            font-size: 72px;
        }

        /* path becomes a single left-anchored rail */
        .page-about-us .abtpath__head{
            margin-bottom: 44px;
        }
        .page-about-us .abtpath__spine{
            left: 26px;
            transform: none;
        }
        .page-about-us .abtpath__step{
            grid-template-columns: 1fr;
            margin-bottom: 20px;
        }
        .page-about-us .abtpath__node{
            top: 34px;
            left: 26px;
            width: 44px;
            height: 44px;
            margin: -22px 0 0 -22px;
            font-size: 12px;
        }
        .page-about-us .abtpath__step--left .abtpath__card,
        .page-about-us .abtpath__step--right .abtpath__card{
            grid-column: 1;
            margin: 0 0 0 68px;
            text-align: left;
        }
        .page-about-us .abtpath__step--left:hover .abtpath__card,
        .page-about-us .abtpath__step--right:hover .abtpath__card{
            transform: translateX(6px);
        }

        .page-about-us .abtbricks{
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .page-about-us .abtbrick:nth-child(3n + 2){
            margin-top: 0;
        }
        .page-about-us .abtbrick:nth-child(2n){
            margin-top: 32px;
        }
    }

    @media (max-width: 575px){
        .page-about-us .abthero__content{
            padding: 240px 22px 32px;
        }
        .page-about-us .abthero__tags{
            padding: 0 22px 28px;
            gap: 8px;
        }
        .page-about-us .abthero__tag{
            padding: 7px 13px;
            font-size: 11.5px;
        }
        .page-about-us .abthero__point{
            grid-template-columns: 34px 1fr;
            gap: 12px;
            padding: 15px 0;
        }
        .page-about-us .abtquad__title{
            font-size: 20px;
        }
        .page-about-us .abtquad__desc{
            font-size: 14px;
        }
        .page-about-us .abtpath__spine{
            left: 20px;
        }
        .page-about-us .abtpath__node{
            left: 20px;
            width: 38px;
            height: 38px;
            margin: -19px 0 0 -19px;
            font-size: 11px;
        }
        .page-about-us .abtpath__step--left .abtpath__card,
        .page-about-us .abtpath__step--right .abtpath__card{
            margin-left: 52px;
            padding: 22px 20px;
        }
        .page-about-us .abtpath__topic{
            font-size: 18px;
        }
        .page-about-us .abtbricks{
            grid-template-columns: 1fr;
            gap: 14px;
        }
        .page-about-us .abtbrick:nth-child(2n){
            margin-top: 0;
        }
        .page-about-us .abtbrick{
            padding: 22px 58px 22px 20px;
        }
        .page-about-us .abtbrick__label{
            font-size: 14.5px;
        }
    }

    @media (prefers-reduced-motion: reduce){
        .page-about-us .abthero__tile img,
        .page-about-us .abthero__tag,
        .page-about-us .abtquad__icon,
        .page-about-us .abtquad__num,
        .page-about-us .abtpath__node,
        .page-about-us .abtpath__card,
        .page-about-us .abtpath__card::before,
        .page-about-us .abtbrick,
        .page-about-us .abtbrick__check,
        .page-about-us .abtbrick__index{
            transition: none;
        }
    }

/* ===================== page-cart ===================== */
    /* =========================================
       CART PAGE REDESIGN — Warm Editorial Theme
       ========================================= */
    .page-cart .cart-redesign{
        position: relative;
        overflow: hidden;
        background-color: var(--surface-paper-canvas, var(--color-paper));
        padding: var(--spacing-48, 48px) 0 var(--spacing-80, 80px);
        font-family: var(--font-inter, sans-serif);
        min-height: 60vh;
    }
    
    /* Background Pattern & Glow Blobs */
    .page-cart .cart-pattern{
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(37, 34, 30, 0.03) 1.2px, transparent 1.2px);
        background-size: 24px 24px;
        pointer-events: none;
        z-index: 0;
    }
    .page-cart .cart-glow{
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        pointer-events: none;
        z-index: 0;
        opacity: 0.65;
        mix-blend-mode: multiply;
    }
    .page-cart .cart-glow-mint{ 
        width: 450px; 
        height: 450px; 
        background: radial-gradient(circle, var(--color-mint-wash, var(--color-cream)) 0%, rgba(240, 246, 223, 0.2) 70%, transparent 100%); 
        top: -150px; 
        left: -100px; 
        animation: page-cart-cartRedesignDrift 22s ease-in-out infinite; 
    }
    .page-cart .cart-glow-sky{ 
        width: 400px; 
        height: 400px; 
        background: radial-gradient(circle, var(--color-sky-wash, var(--color-sky-wash)) 0%, rgba(220, 234, 255, 0.2) 70%, transparent 100%); 
        bottom: 8%; 
        right: -100px; 
        animation: page-cart-cartRedesignDrift 28s ease-in-out infinite reverse; 
    }
    @keyframes page-cart-cartRedesignDrift { 
        0%, 100% { transform: translate(0, 0) scale(1); } 
        50% { transform: translate(40px, -30px) scale(1.08); } 
    }
    
    .page-cart .cart-redesign .container{ 
        position: relative; 
        z-index: 1; 
    }

    /* ---- ITEMS CONTAINER & CARDS ---- */
    .page-cart .cart-items-section{
        background: var(--color-paper, var(--color-paper));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: var(--radius-xl, 15px);
        padding: var(--spacing-32, 32px);
        box-shadow: 0 4px 20px rgba(37, 34, 30, 0.02);
    }
    .page-cart .cart-section-header{
        display: flex; 
        align-items: center; 
        justify-content: space-between;
        padding-bottom: var(--spacing-20, 20px); 
        margin-bottom: var(--spacing-24, 24px);
        border-bottom: 1px solid var(--color-stone, var(--color-stone));
    }
    .page-cart .cart-section-title{
        display: flex; 
        align-items: center; 
        gap: 12px;
        font-family: var(--font-graphik, sans-serif);
        font-size: 20px; 
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft)); 
        margin: 0;
    }
    .page-cart .cart-section-title i{ 
        color: var(--color-ember-red, var(--brand-purple)); 
        font-size: 20px; 
    }
    .page-cart .cart-section-count{
        background: var(--color-cream); 
        color: var(--color-deep-ember, var(--brand-purple-dark));
        font-size: 13px; 
        font-weight: 700;
        padding: 4px 12px; 
        border-radius: 999px;
    }

    /* Modern List of Cart Items */
    .page-cart .cart-items-list{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-16, 16px);
    }

    /* Horizontal Cart Card Redesign */
    .page-cart .cart-item-card{
        display: flex;
        align-items: center;
        gap: var(--spacing-20, 20px);
        background: var(--color-paper, var(--color-paper));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: var(--radius-lg, 8px);
        padding: var(--spacing-16, 16px);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
    }
    .page-cart .cart-item-card:hover{
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(37, 34, 30, 0.06);
        border-color: rgba(82, 183, 136, 0.25);
    }
    
    /* Card media/thumbnail */
    .page-cart .cart-item-card__media{
        position: relative;
        width: 140px;
        height: 84px;
        flex-shrink: 0;
        border-radius: 6px;
        overflow: hidden;
        background: linear-gradient(135deg, var(--color-cream, var(--color-cream)), var(--color-mint-wash, var(--color-cream)));
        border: 1px solid rgba(0, 0, 0, 0.05);
    }
    .page-cart .cart-item-card__media img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .page-cart .cart-item-card:hover .cart-item-card__media img{
        transform: scale(1.05);
    }
    
    /* Badges positioned on images */
    .page-cart .cart-item-card__badge{
        position: absolute;
        bottom: 6px;
        left: 6px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border-radius: var(--radius-sm, 2.5px);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.02em;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        text-transform: uppercase;
    }
    .page-cart .cart-item-card__badge--course{
        background: rgba(254, 253, 252, 0.95);
        color: var(--color-forest, var(--color-forest));
        border: 1px solid var(--color-stone, var(--color-stone));
    }
    .page-cart .cart-item-card__badge--topup{
        background: rgba(254, 253, 252, 0.95);
        color: var(--color-deep-ember, var(--brand-purple-dark));
        border: 1px solid var(--color-stone, var(--color-stone));
    }

    /* Credits Visual (in place of top-up images) */
    .page-cart .cart-item-card__credits-visual{
        width: 140px;
        height: 84px;
        flex-shrink: 0;
        border-radius: 6px;
        background: linear-gradient(135deg, var(--color-cream) 0%, rgba(255, 160, 32, 0.08) 100%);
        border: 1px solid rgba(82, 183, 136, 0.15);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--color-ember-red, var(--brand-purple));
        gap: 2px;
        box-shadow: inset 0 2px 6px rgba(82, 183, 136, 0.02);
    }
    .page-cart .cart-item-card__credits-visual i{
        font-size: 20px;
        animation: page-cart-ccCoinPulse 2s ease-in-out infinite;
    }
    .page-cart .cart-item-card__credits-amount{
        font-family: var(--font-graphik, sans-serif);
        font-size: 15px;
        font-weight: 800;
        color: var(--color-ink, var(--brand-black-soft));
        line-height: 1.1;
        margin-top: 2px;
    }
    .page-cart .cart-item-card__credits-unit{
        font-size: 9px;
        font-weight: 700;
        color: var(--color-deep-ember, var(--brand-purple-dark));
        letter-spacing: 0.05em;
    }
    
    @keyframes page-cart-ccCoinPulse {
        0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
        50% { transform: scale(1.1); filter: drop-shadow(0 2px 4px rgba(82, 183, 136, 0.2)); }
    }

    /* Details styling */
    .page-cart .cart-item-card__details{
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0; /* Prevents overflow with flex */
    }
    .page-cart .cart-item-card__title{
        font-family: var(--font-graphik, sans-serif);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.35;
        color: var(--color-ink, var(--brand-black-soft));
        text-decoration: none;
        transition: color 0.2s ease;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .page-cart .cart-item-card__title:hover{
        color: var(--color-deep-ember, var(--brand-purple-dark));
        text-decoration: none;
    }
    .page-cart .cart-item-card__meta{
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 12px;
        color: var(--color-pencil, var(--color-pencil));
    }
    .page-cart .cart-item-card__type{
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .page-cart .cart-item-card__type i{
        font-size: 11px;
    }

    /* Price alignment */
    .page-cart .cart-item-card__price{
        text-align: right;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        padding-left: var(--spacing-16, 16px);
        border-left: 1px solid var(--color-stone, var(--color-stone));
        min-width: 130px;
    }
    .page-cart .cart-item-card__price-label{
        font-size: 11px;
        color: var(--color-pencil, var(--color-pencil));
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
    }
    .page-cart .cart-item-card__price-value{
        font-family: var(--font-graphik, sans-serif);
        font-size: 18px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .page-cart .cart-item-card__price-value i{
        color: var(--color-ember-red, var(--brand-purple));
        font-size: 14px;
        margin-right: 2px;
    }
    .page-cart .cart-item-card__price-value .price-creds{
        display: flex;
        align-items: baseline;
        gap: 3px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
    }
    .page-cart .cart-item-card__price-value .price-unit{
        font-size: 11px;
        font-weight: 700;
        color: var(--color-pencil, var(--color-pencil));
    }
    .page-cart .cart-item-card__price-value .price-main{
        font-size: 17px;
        color: var(--color-ink, var(--brand-black-soft));
        font-weight: 700;
    }

    /* Action (Remove button) */
    .page-cart .cart-item-card__action{
        flex-shrink: 0;
    }
    .page-cart .cart-item-card__remove{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: transparent;
        color: var(--color-graphite, var(--color-graphite));
        font-size: 14px;
        transition: all 0.2s ease;
        border: 1px solid transparent;
        text-decoration: none;
    }
    .page-cart .cart-item-card__remove:hover{
        background: var(--color-cream);
        border-color: rgba(82, 183, 136, 0.1);
        color: var(--color-ember-red, var(--brand-purple));
        transform: scale(1.08);
        text-decoration: none;
    }

    .page-cart .cart-continue-link{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 24px;
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-deep-ember, var(--brand-purple-dark));
        text-decoration: none;
        transition: gap 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
    }
    .page-cart .cart-continue-link:hover{
        gap: 12px;
        color: var(--color-deep-ember, var(--brand-purple-dark));
        text-decoration: none;
        transform: translateX(-2px);
    }

    /* ---- STICKY ORDER SUMMARY SIDEBAR ---- */
    .page-cart .cart-sidebar{
        position: -webkit-sticky;
        position: sticky;
        top: 110px;
        background: linear-gradient(180deg, var(--color-paper, var(--color-paper)) 0%, var(--surface-cream-wash, var(--color-cream)) 100%);
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: var(--radius-xl, 15px);
        padding: var(--spacing-28, 28px);
        box-shadow: 0 10px 30px rgba(37, 34, 30, 0.04);
        animation: page-cart-cartFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
    }
    .page-cart .cart-sidebar__header{
        border-bottom: 1px solid var(--color-stone, var(--color-stone));
        padding-bottom: var(--spacing-16, 16px);
        margin-bottom: var(--spacing-20, 20px);
    }
    .page-cart .cart-sidebar__title{
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-graphik, sans-serif);
        font-size: 18px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
        margin: 0;
    }
    .page-cart .cart-sidebar__title i{
        color: var(--color-ember-red, var(--brand-purple));
        font-size: 16px;
    }
    
    .page-cart .cart-sidebar__rows{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-12, 12px);
        margin-bottom: var(--spacing-24, 24px);
    }
    .page-cart .cart-sidebar__row{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
    }
    .page-cart .cart-sidebar__row-label{
        color: var(--color-pencil, var(--color-pencil));
    }
    .page-cart .cart-sidebar__row-value{
        font-weight: 600;
        color: var(--color-ink, var(--brand-black-soft));
    }
    
    /* Total cost indicator */
    .page-cart .cart-sidebar__row--total{
        padding-top: var(--spacing-16, 16px);
        border-top: 1px solid var(--color-stone, var(--color-stone));
        align-items: baseline;
    }
    .page-cart .cart-sidebar__row--total .cart-sidebar__row-label{
        font-size: 15px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
    }
    .page-cart .cart-sidebar__row--total .cart-sidebar__row-value{
        font-family: var(--font-graphik, sans-serif);
        font-size: 24px;
        font-weight: 800;
        color: var(--color-ember-red, var(--brand-purple));
        display: flex;
        align-items: baseline;
        gap: 4px;
    }
    .page-cart .cart-sidebar__row--total .cart-sidebar__row-value i{
        font-size: 16px;
    }
    .page-cart .cart-sidebar__row--total .total-unit{
        font-size: 12px;
        font-weight: 700;
        color: var(--color-pencil, var(--color-pencil));
    }

    /* Reusable Cart Action Button */
    .page-cart .cart-action-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 13px 24px;
        border-radius: var(--radius-buttons, 8px);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: none;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        text-align: center;
    }
    .page-cart .cart-action-btn:hover{
        text-decoration: none;
    }
    .page-cart .cart-action-btn--primary{
        background: var(--color-ember-red, var(--brand-purple));
        color: var(--color-paper, var(--color-paper));
        box-shadow: 0 4px 14px rgba(82, 183, 136, 0.25);
    }
    .page-cart .cart-action-btn--primary:hover{
        background: var(--color-deep-ember, var(--brand-purple-dark));
        color: var(--color-paper, var(--color-paper));
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(82, 183, 136, 0.35);
    }
    .page-cart .cart-action-btn--checkout{
        background: var(--color-ember-red, var(--brand-purple));
        color: var(--color-paper, var(--color-paper));
        box-shadow: 0 4px 14px rgba(82, 183, 136, 0.2);
    }
    .page-cart .cart-action-btn--checkout:hover{
        background: var(--color-deep-ember, var(--brand-purple-dark));
        color: var(--color-paper, var(--color-paper));
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(82, 183, 136, 0.3);
    }
    .page-cart .cart-action-btn--checkout i{
        transition: transform 0.25s ease;
    }
    .page-cart .cart-action-btn--checkout:hover i{
        transform: translateX(4px);
    }
    .page-cart .cart-action-btn--block{
        display: flex;
        width: 100%;
        margin-bottom: var(--spacing-12, 12px);
    }
    .page-cart .cart-action-btn--block:last-child{
        margin-bottom: 0;
    }

    /* Trust section */
    .page-cart .cart-sidebar__trust{
        list-style: none;
        margin: var(--spacing-24, 24px) 0 0;
        padding: var(--spacing-16, 16px);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-12, 12px);
        background-color: rgba(37, 34, 30, 0.02);
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: var(--radius-lg, 8px);
    }
    .page-cart .cart-sidebar__trust li{
        display: flex;
        align-items: center;
        gap: var(--spacing-12, 12px);
        font-size: 13px;
        font-weight: 600;
        color: var(--color-pencil, var(--color-pencil));
    }
    .page-cart .cart-sidebar__trust li:not(:last-child){
        padding-bottom: var(--spacing-8, 8px);
        border-bottom: 1px solid rgba(37, 34, 30, 0.05);
    }
    .page-cart .cart-sidebar__trust-icon-wrap{
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .page-cart .cart-sidebar__trust-icon-wrap--security{
        background-color: rgba(15, 102, 174, 0.08);
        color: var(--color-cobalt-link, var(--brand-blue));
        border: 1px solid rgba(15, 102, 174, 0.12);
    }
    .page-cart .cart-sidebar__trust-icon-wrap--access{
        background-color: rgba(68, 108, 61, 0.08);
        color: var(--color-forest, var(--color-forest));
        border: 1px solid rgba(68, 108, 61, 0.12);
    }
    .page-cart .cart-sidebar__trust i{
        font-size: 12px;
    }
    
    .page-cart .cart-sidebar__pay{
        margin-top: var(--spacing-20, 20px);
        padding-top: var(--spacing-16, 16px);
        border-top: 1px solid var(--color-stone, var(--color-stone));
        text-align: center;
    }
    .page-cart .cart-sidebar__pay img{
        height: 24px;
        width: auto;
        opacity: 0.85;
    }

    /* Empty State for Summary */
    .page-cart .cart-sidebar__empty{
        text-align: center;
        padding: var(--spacing-24, 24px) var(--spacing-16, 16px);
        background: rgba(37, 34, 30, 0.02);
        border: 1px dashed var(--color-stone, var(--color-stone));
        border-radius: var(--radius-lg, 8px);
    }
    .page-cart .cart-sidebar__empty i{
        font-size: 24px;
        color: var(--color-graphite, var(--color-graphite));
        margin-bottom: 8px;
        display: block;
    }
    .page-cart .cart-sidebar__empty p{
        font-size: 13px;
        color: var(--color-pencil, var(--color-pencil));
        margin: 0;
        line-height: 1.4;
    }

    /* ---- EMPTY STATE ---- */
    .page-cart .cart-empty-state{
        text-align: center;
        padding: var(--spacing-48, 48px) var(--spacing-24, 24px);
    }
    .page-cart .cart-empty-state__icon-wrap{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--color-cream, var(--color-cream));
        border: 1px solid var(--color-stone, var(--color-stone));
        color: var(--color-graphite, var(--color-graphite));
        font-size: 32px;
        margin-bottom: var(--spacing-20, 20px);
        box-shadow: inset 0 2px 8px rgba(0,0,0,0.02);
    }
    .page-cart .cart-empty-state__title{
        font-family: var(--font-graphik, sans-serif);
        font-size: 22px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
        margin: 0 0 var(--spacing-20, 20px);
    }

    /* ---- Animations ---- */
    @keyframes page-cart-cartFadeUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .page-cart .cart-items-section{
        animation: page-cart-cartFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
    }

    /* ---- Responsive Adaptations ---- */
    @media (max-width: 991px) {
        .page-cart .cart-sidebar{
            position: static;
            top: auto;
            margin-top: var(--spacing-16, 16px);
        }
    }
    @media (max-width: 767px) {
        .page-cart .cart-item-card{
            flex-direction: column;
            align-items: stretch;
            gap: var(--spacing-16, 16px);
        }
        .page-cart .cart-item-card__media{
            width: 100%;
            height: 180px;
        }
        .page-cart .cart-item-card__credits-visual{
            width: 100%;
            height: 120px;
        }
        .page-cart .cart-item-card__price{
            border-left: none;
            border-top: 1px solid var(--color-stone, var(--color-stone));
            padding-left: 0;
            padding-top: var(--spacing-12, 12px);
            align-items: flex-start;
            text-align: left;
            min-width: 0;
        }
        .page-cart .cart-item-card__price-value{
            align-items: flex-start;
            flex-direction: row;
            gap: 8px;
        }
        .page-cart .cart-item-card__remove{
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
    }
    @media (max-width: 575px) {
        .page-cart .cart-redesign{
            padding: var(--spacing-32, 32px) 0 var(--spacing-64, 64px);
        }
        .page-cart .cart-items-section{
            padding: var(--spacing-20, 20px);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-cart .cart-glow, .page-cart .cart-items-section, .page-cart .cart-sidebar{
            animation: none !important;
        }
    }

/* ===================== page-checkout ===================== */
    /* =============================================================
       CHECKOUT — "Receipt first"
       The order receipt is a dark sticky panel on the left and the
       form is one continuous sheet on the right, split by rules
       instead of stacked cards. No decorative stepper.
       ============================================================= */

    .page-checkout {
        --pay-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
        --pay-night: #07070e;
        --pay-line: rgba(82, 183, 136, 0.20);
        --pay-line-soft: rgba(82, 183, 136, 0.11);
        --pay-ink: var(--color-ink, #10241a);
        --pay-dim: var(--color-pencil, #3d5a4b);
        --pay-mute: var(--color-graphite, #6e8b7c);
        --pay-accent: linear-gradient(135deg, var(--brand-purple, #2d6a4f) 0%, var(--brand-blue, #52b788) 100%);
        --pay-danger: #d6335a;
    }

    .page-checkout .pay-mono {
        font-family: var(--pay-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .page-checkout .pay {
        padding: 56px 0 96px;
        background: var(--color-paper, #ffffff);
    }
    .page-checkout .pay__shell {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 var(--spacing-20, 20px);
    }
    .page-checkout .pay__grid {
        display: grid;
        grid-template-columns: 360px minmax(0, 1fr);
        gap: 64px;
        align-items: start;
    }

    /* ---- Receipt ---- */
    .page-checkout .pay__receipt {
        position: sticky;
        top: 96px;
    }
    .page-checkout .pay__receipt-inner {
        position: relative;
        overflow: hidden;
        padding: 30px 30px 26px;
        border-radius: 20px;
        background: var(--pay-night);
        color: #ffffff;
        box-shadow: 0 30px 60px -40px rgba(7, 7, 14, 0.9);
    }
    .page-checkout .pay__receipt-inner::before {
        content: "";
        position: absolute;
        top: -160px;
        right: -120px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        filter: blur(60px);
        pointer-events: none;
        background: radial-gradient(circle, rgba(82, 183, 136, 0.40) 0%, rgba(116, 198, 157, 0.14) 45%, transparent 70%);
    }
    .page-checkout .pay__receipt-label {
        position: relative;
        display: block;
        margin-bottom: 22px;
        color: rgba(255, 255, 255, 0.45);
    }
    .page-checkout .pay__lines {
        position: relative;
        margin: 0 0 4px;
        padding: 0;
        list-style: none;
    }
    .page-checkout .pay__line {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 13px 0;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    }
    .page-checkout .pay__line-name {
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
    }
    .page-checkout .pay__line-name .pay-mono {
        margin-left: 4px;
        color: rgba(255, 255, 255, 0.45);
    }
    .page-checkout .pay__line-value {
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        font-weight: 600;
        color: #ffffff;
        white-space: nowrap;
    }
    .page-checkout .pay__total {
        position: relative;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 0 4px;
    }
    .page-checkout .pay__total-label {
        color: rgba(255, 255, 255, 0.45);
    }
    .page-checkout .pay__total-value {
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 30px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
        color: #ffffff;
    }

    .page-checkout .pay__captcha {
        position: relative;
        margin-top: 24px;
        padding-top: 22px;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }
    .page-checkout .pay__captcha .kv-label {
        color: rgba(255, 255, 255, 0.5);
    }
    .page-checkout .kv-captcha-wrapper {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
    }
    .page-checkout .kv-captcha-display {
        display: inline-flex;
        align-items: center;
        padding: 4px;
        border-radius: 10px;
        background: #ffffff;
    }
    .page-checkout .kv-captcha-display img {
        display: block;
        max-height: 44px;
        border-radius: 6px;
    }

    .page-checkout .pay__submit {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        margin-top: 24px;
        padding: 16px 24px;
        border: 0;
        border-radius: 12px;
        background: var(--pay-accent);
        color: #ffffff;
        font-family: var(--font-inter, sans-serif);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 16px 32px -18px rgba(82, 183, 136, 1);
        transition: transform 200ms ease, box-shadow 200ms ease;
    }
    .page-checkout .pay__submit:hover {
        background: var(--pay-accent);
        transform: translateY(-2px);
        box-shadow: 0 20px 38px -18px rgba(82, 183, 136, 1);
    }
    .page-checkout .pay__submit i {
        font-size: 12px;
    }
    .page-checkout .pay__back {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 12px;
        padding: 13px 20px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 12px;
        color: rgba(255, 255, 255, 0.72);
        text-decoration: none;
        transition: border-color 200ms ease, color 200ms ease;
    }
    .page-checkout .pay__back:hover {
        border-color: rgba(255, 255, 255, 0.4);
        color: #ffffff;
    }
    .page-checkout .pay__back i {
        font-size: 10px;
    }
    .page-checkout .pay__assure {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 20px 0 0;
        font-size: 12.5px;
        color: rgba(255, 255, 255, 0.5);
    }
    .page-checkout .pay__assure i {
        font-size: 11px;
        color: var(--brand-blue-light, #b7e4c7);
    }
    .page-checkout .pay__methods {
        position: relative;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
        text-align: center;
    }
    .page-checkout .pay__methods img {
        max-width: 100%;
        height: auto;
        opacity: 0.85;
    }

    /* ---- Form sheet ---- */
    .page-checkout .pay__block {
        padding: 0 0 40px;
        margin-bottom: 40px;
        border-bottom: 1px solid var(--pay-line-soft);
    }
    .page-checkout .pay__block--last {
        padding: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }
    .page-checkout .pay__block-head {
        display: flex;
        align-items: baseline;
        gap: 16px;
        margin-bottom: 26px;
    }
    .page-checkout .pay__block-num {
        color: var(--brand-purple, #2d6a4f);
    }
    .page-checkout .pay__block-title {
        margin: 0;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: clamp(20px, 2.2vw, 26px);
        font-weight: 800;
        letter-spacing: -0.025em;
        color: var(--pay-ink);
    }

    .page-checkout .pay__fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 24px;
    }
    .page-checkout .pay__field {
        display: flex;
        flex-direction: column;
    }
    .page-checkout .pay__field--full {
        grid-column: 1 / -1;
    }

    .page-checkout .kv-label {
        display: block;
        margin-bottom: 8px;
        font-family: var(--pay-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--pay-mute);
    }
    .page-checkout .kv-input {
        width: 100%;
        padding: 13px 16px;
        border: 1px solid var(--pay-line-soft);
        border-radius: 10px;
        background: #ffffff;
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        color: var(--pay-ink);
        transition: border-color 180ms ease, box-shadow 180ms ease;
    }
    .page-checkout .kv-input::placeholder {
        color: var(--pay-mute);
    }
    .page-checkout .kv-input:focus {
        outline: none;
        border-color: var(--brand-purple, #2d6a4f);
        box-shadow: 0 0 0 3px var(--brand-purple-wash, rgba(82, 183, 136, 0.10));
    }
    .page-checkout .kv-textarea {
        min-height: 130px;
        resize: vertical;
    }
    .page-checkout .kv-select {
        appearance: none;
        background-image: linear-gradient(45deg, transparent 50%, var(--pay-mute) 50%), linear-gradient(135deg, var(--pay-mute) 50%, transparent 50%);
        background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        padding-right: 40px;
    }
    .page-checkout .kv-card-expiry {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .page-checkout .kv-card-separator {
        color: var(--pay-mute);
    }
    .page-checkout .kv-error {
        display: block;
        margin-top: 6px;
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        font-weight: 500;
        color: var(--pay-danger);
    }
    .page-checkout .kv-input.error {
        border-color: var(--pay-danger);
    }

    .page-checkout .pay__note {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin: 22px 0 0;
        padding: 14px 18px;
        border-radius: 12px;
        background: var(--color-cream, #eef8f1);
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--pay-dim);
    }
    .page-checkout .pay__note i {
        margin-top: 3px;
        font-size: 12px;
        color: var(--brand-purple, #2d6a4f);
    }

    /* ---- Agreements ---- */
    .page-checkout .pay__agreements {
        display: grid;
        gap: 14px;
    }
    .page-checkout .kv-terms-group {
        padding: 14px 18px;
        border: 1px solid var(--pay-line-soft);
        border-radius: 12px;
        transition: border-color 180ms ease, background 180ms ease;
    }
    .page-checkout .kv-terms-group:hover {
        border-color: var(--pay-line);
        background: var(--color-cream, #eef8f1);
    }
    .page-checkout .kv-terms-row {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }
    .page-checkout .kv-checkbox {
        flex: none;
        width: 18px;
        height: 18px;
        margin-top: 2px;
        accent-color: var(--brand-purple, #2d6a4f);
        cursor: pointer;
    }
    .page-checkout .kv-terms-row label {
        margin: 0;
        font-family: var(--font-inter, sans-serif);
        font-size: 14px;
        line-height: 1.55;
        color: var(--pay-dim);
        cursor: pointer;
    }
    .page-checkout .kv-terms-row label a {
        color: var(--brand-purple-dark, #1b4332);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .page-checkout .pay__dba {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-top: 26px;
        padding-top: 24px;
        border-top: 1px solid var(--pay-line-soft);
    }
    .page-checkout .pay__dba img {
    flex: none;
    height: auto;
    padding: 0px;
    border: 0px solid var(--pay-line-soft);
    border-radius: 0px;
    background: transparent;
    position: relative;
    top: -1px;
    width: 113px;
    }
    .page-checkout .pay__dba-title {
        margin: 0 0 6px;
        color: var(--pay-mute);
    }
    .page-checkout .pay__dba-text {
        margin: 0;
        font-size: 13px;
        line-height: 1.6;
        color: var(--pay-dim);
    }

    /* ---- Focus ---- */
    .page-checkout .pay__submit:focus-visible,
    .page-checkout .pay__back:focus-visible,
    .page-checkout .kv-checkbox:focus-visible,
    .page-checkout .kv-input:focus-visible {
        outline: 2px solid var(--brand-blue, #52b788);
        outline-offset: 3px;
    }

    /* ---- Responsive ---- */
    @media (max-width: 1199px) {
        .page-checkout .pay__grid {
            grid-template-columns: 320px minmax(0, 1fr);
            gap: 40px;
        }
    }
    @media (max-width: 991px) {
        .page-checkout .pay {
            padding: 40px 0 80px;
        }
        .page-checkout .pay__grid {
            grid-template-columns: minmax(0, 1fr);
            gap: 36px;
        }
        /* Receipt drops below the form on smaller screens */
        .page-checkout .pay__receipt {
            position: static;
            order: 2;
        }
        .page-checkout .pay__form {
            order: 1;
        }
    }
    @media (max-width: 767px) {
        .page-checkout .pay__fields {
            grid-template-columns: minmax(0, 1fr);
        }
        .page-checkout .pay__receipt-inner {
            padding: 24px 20px 22px;
        }
        .page-checkout .pay__block {
            padding: 0 0 32px;
            margin-bottom: 32px;
        }
        .page-checkout .pay__dba {
            flex-direction: column;
            align-items: flex-start;
        }
        .page-checkout .kv-captcha-wrapper {
            grid-template-columns: minmax(0, 1fr);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-checkout .pay__submit,
        .page-checkout .kv-input,
        .page-checkout .kv-terms-group,
        .page-checkout .pay__back {
            transition: none !important;
        }
        .page-checkout .pay__submit:hover {
            transform: none;
        }
    }

/* ===================== page-contact ===================== */
    /* ============================================================
       CONTACT — split desk: dark identity panel + form panel
       ============================================================ */

    .page-contact .ctdesk-section{
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(880px 460px at 4% 0%, rgba(82, 183, 136, .12), transparent 62%),
            radial-gradient(820px 440px at 98% 100%, rgba(116, 198, 157, .12), transparent 62%),
            linear-gradient(180deg, var(--color-cream, #eef8f1) 0%, #ffffff 52%, var(--color-cream, #eef8f1) 100%);
    }

    .page-contact .ctdesk__glow{
        position: absolute;
        border-radius: 50%;
        filter: blur(110px);
        opacity: .3;
        pointer-events: none;
    }
    .page-contact .ctdesk__glow--a{
        width: 400px; height: 400px;
        top: -150px; left: -90px;
        background: var(--brand-purple, #2d6a4f);
    }
    .page-contact .ctdesk__glow--b{
        width: 360px; height: 360px;
        bottom: -160px; right: -80px;
        background: var(--brand-blue, #52b788);
    }

    .page-contact .ctdesk{
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
        border-radius: 32px;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--color-stone, #cbe8d7);
        box-shadow: 0 40px 90px rgba(26, 20, 48, .16);
    }

    /* =========================================
       LEFT — dark identity panel
       ========================================= */
    .page-contact .ctdesk__aside{
        position: relative;
        padding: 56px 48px;
        background:
            radial-gradient(620px 340px at 8% 4%, rgba(82, 183, 136, .38), transparent 64%),
            radial-gradient(560px 320px at 96% 98%, rgba(116, 198, 157, .3), transparent 62%),
            linear-gradient(160deg, #16111f 0%, var(--brand-black-soft, #0b2018) 54%, #0a0e19 100%);
        display: flex;
        flex-direction: column;
    }

    .page-contact .ctaside__wash{
        position: absolute;
        right: -90px;
        bottom: -90px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: var(--brand-purple, #2d6a4f);
        filter: blur(90px);
        opacity: .3;
        pointer-events: none;
    }

    /* must exclude the decorative blur — it stays absolutely positioned
       and would otherwise become a 300px flex item */
    .page-contact .ctdesk__aside > :not(.ctaside__wash){
        position: relative;
        z-index: 1;
    }

    /* brand lockup */
    .page-contact .ctaside__brand{
        display: flex;
        align-items: center;
        gap: 14px;
        padding-bottom: 30px;
        margin-bottom: 34px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .page-contact .ctaside__brand-mark{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        flex: none;
        border-radius: 15px;
        background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        color: #fff;
        font-size: 17px;
    }

    .page-contact .ctaside__brand-text strong{
        display: block;
        font-family: var(--font-graphik);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: #fff;
    }

    .page-contact .ctaside__brand-text span{
        display: block;
        margin-top: 2px;
        font-family: var(--font-inter);
        font-size: 12.5px;
        color: rgba(255, 255, 255, .5);
    }

    .page-contact .ctaside__eyebrow{
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 7px 16px 7px 12px;
        border-radius: 999px;
        border: 1px solid rgba(149, 213, 178, .3);
        background: rgba(82, 183, 136, .14);
        font-family: var(--font-inter);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--brand-purple-light, #95d5b2);
    }

    .page-contact .ctaside__eyebrow-dot{
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand-purple, #2d6a4f);
        box-shadow: 0 0 0 4px rgba(82, 183, 136, .24);
    }

    .page-contact .ctaside__title{
        font-family: var(--font-graphik);
        font-size: clamp(30px, 3vw, 42px);
        line-height: 1.08;
        letter-spacing: -.03em;
        font-weight: 800;
        color: #fff;
        margin: 20px 0 0;
    }

    .page-contact .ctaside__lede{
        font-family: var(--font-inter);
        font-size: 15.5px;
        line-height: 1.75;
        color: rgba(255, 255, 255, .55);
        margin: 14px 0 0;
    }

    /* contact rows */
    .page-contact .ctaside__list{
        list-style: none;
        margin: auto 0 0;
        padding: 40px 0 0;
    }

    .page-contact .ctaside__row{
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .page-contact .ctaside__row:last-child{
        padding-bottom: 0;
    }

    .page-contact .ctaside__row-icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        flex: none;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .05);
        color: rgba(255, 255, 255, .62);
        font-size: 14px;
        transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
    }

    .page-contact .ctaside__row:hover .ctaside__row-icon{
        background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        border-color: transparent;
        color: #fff;
        transform: translateY(-3px);
    }

    .page-contact .ctaside__row-body{
        min-width: 0;
    }

    .page-contact .ctaside__row-label{
        display: block;
        font-family: var(--font-inter);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--brand-purple-light, #95d5b2);
    }

    .page-contact .ctaside__row-value{
        display: block;
        margin-top: 6px;
        font-family: var(--font-inter);
        font-size: 15px;
        line-height: 1.55;
        font-weight: 500;
        color: rgba(255, 255, 255, .88);
        word-break: break-word;
    }

    .page-contact .ctaside__row-value--link{
        text-decoration: none;
        transition: color .3s ease;
    }
    .page-contact .ctaside__row-value--link:hover{
        color: var(--brand-purple-light, #95d5b2);
    }

    /* =========================================
       RIGHT — form panel
       ========================================= */
    .page-contact .ctdesk__main{
        padding: 56px 52px;
        background: #fff;
    }

    .page-contact .ctmain__head{
        margin-bottom: 32px;
    }

    .page-contact .ctmain__title{
        font-family: var(--font-graphik);
        font-size: clamp(24px, 2.4vw, 32px);
        line-height: 1.15;
        letter-spacing: -.025em;
        font-weight: 800;
        color: var(--color-ink, #10241a);
        margin: 0;
    }

    .page-contact .ctmain__sub{
        font-family: var(--font-inter);
        font-size: 15px;
        line-height: 1.7;
        color: var(--color-pencil, #3d5a4b);
        margin: 10px 0 0;
    }

    .page-contact .ctform__row{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    /* each field is a bordered slot holding its own label */
    .page-contact .ctfield{
        position: relative;
        margin-bottom: 16px;
        padding: 14px 18px 12px;
        border-radius: 16px;
        border: 1px solid var(--color-stone, #cbe8d7);
        background: var(--color-cream, #eef8f1);
        transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
    }

    .page-contact .ctform__row .ctfield{
        margin-bottom: 0;
    }

    .page-contact .ctfield:focus-within{
        border-color: var(--brand-purple, #2d6a4f);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(82, 183, 136, .12);
    }

    .page-contact .ctfield__label{
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 4px;
        font-family: var(--font-inter);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--color-graphite, #6e8b7c);
        transition: color .3s ease;
    }

    .page-contact .ctfield:focus-within .ctfield__label{
        color: var(--brand-purple, #2d6a4f);
    }

    .page-contact .ctfield__label i{
        font-size: 11px;
        color: var(--brand-purple, #2d6a4f);
    }

    .page-contact .ctfield__input{
        display: block;
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        padding: 0;
        font-family: var(--font-inter);
        font-size: 15.5px;
        line-height: 1.6;
        color: var(--color-ink, #10241a);
        box-shadow: none;
    }

    .page-contact .ctfield__input::placeholder{
        color: var(--color-graphite, #6e8b7c);
        opacity: .62;
    }

    .page-contact .ctfield__input:focus{
        outline: none;
        box-shadow: none;
        background: transparent;
    }

    .page-contact .ctfield__textarea{
        resize: vertical;
        min-height: 130px;
    }

    /* invalid state — the slot is flagged directly (by blade or by the
       validation script) rather than via :has(), for browser support */
    .page-contact .ctfield.is-invalid{
        border-color: #e2544a;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(226, 84, 74, .1);
    }
    .page-contact .ctfield.is-invalid .ctfield__label,
    .page-contact .ctfield.is-invalid .ctfield__label i{
        color: #e2544a;
    }

    .page-contact .ctfield__error{
        display: flex;
        align-items: flex-start;
        gap: 7px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed rgba(226, 84, 74, .35);
        font-family: var(--font-inter);
        font-size: 12.5px;
        line-height: 1.5;
        color: #e2544a;
    }

    .page-contact .ctfield__error i{
        margin-top: 2px;
        font-size: 11px;
        flex: none;
    }

    /* captcha */
    .page-contact .ctfield__captcha{
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .page-contact .ctfield__captcha .ctfield__input{
        flex: 1 1 auto;
        min-width: 0;
    }

    .page-contact .ctfield__captcha-img{
        flex: none;
        line-height: 0;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid var(--color-stone, #cbe8d7);
        background: #fff;
    }

    .page-contact .ctfield__captcha-img img{
        display: block;
        height: 42px;
        width: auto;
    }

    /* submit */
    .page-contact .ctform__submit{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        width: 100%;
        margin-top: 8px;
        padding: 15px 15px 15px 30px;
        border: none;
        border-radius: 999px;
        background: var(--color-ink, #10241a);
        color: #fff;
        font-family: var(--font-inter);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: background .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
    }

    .page-contact .ctform__submit:hover{
        background: linear-gradient(120deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        transform: translateY(-3px);
        box-shadow: 0 14px 34px rgba(82, 183, 136, .32);
    }

    .page-contact .ctform__submit-ico{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #fff;
        color: var(--color-ink, #10241a);
        font-size: 12px;
        transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    }

    .page-contact .ctform__submit:hover .ctform__submit-ico{
        transform: translateX(3px);
    }

    /* =========================================
       RESPONSIVE
       ========================================= */
    @media (max-width: 1199px){
        .page-contact .ctdesk__aside{
            padding: 46px 36px;
        }
        .page-contact .ctdesk__main{
            padding: 46px 38px;
        }
    }

    @media (max-width: 991px){
        .page-contact .ctdesk{
            grid-template-columns: 1fr;
            border-radius: 26px;
        }
        .page-contact .ctaside__list{
            margin-top: 34px;
            padding-top: 0;
        }
        .page-contact .ctaside__row:last-child{
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, .12);
        }
    }

    @media (max-width: 575px){
        .page-contact .ctdesk__aside,
        .page-contact .ctdesk__main{
            padding: 34px 22px;
        }
        .page-contact .ctform__row{
            grid-template-columns: 1fr;
            gap: 16px;
        }
        .page-contact .ctform__row .ctfield{
            margin-bottom: 0;
        }
        .page-contact .ctfield{
            padding: 12px 15px 11px;
            border-radius: 14px;
        }
        .page-contact .ctfield__input{
            font-size: 15px;
        }
        .page-contact .ctfield__captcha{
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }
        .page-contact .ctfield__captcha-img{
            align-self: flex-start;
        }
        .page-contact .ctaside__title{
            font-size: 28px;
        }
    }

    @media (prefers-reduced-motion: reduce){
        .page-contact .ctaside__row-icon,
        .page-contact .ctfield,
        .page-contact .ctfield__label,
        .page-contact .ctform__submit,
        .page-contact .ctform__submit-ico{
            transition: none;
        }
    }

/* ===================== page-coursecart ===================== */
    /* =============================================================
       COURSE BAG — "Wallet ledger"
       A credit meter at the top, the basket as a numbered ledger,
       and one action bar. No thumbnails, no side summary card.
       ============================================================= */

    .page-coursecart {
        --wlt-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
        --wlt-night: #07070e;
        --wlt-line: rgba(82, 183, 136, 0.20);
        --wlt-line-soft: rgba(82, 183, 136, 0.11);
        --wlt-ink: var(--color-ink, #10241a);
        --wlt-dim: var(--color-pencil, #3d5a4b);
        --wlt-mute: var(--color-graphite, #6e8b7c);
        --wlt-accent: linear-gradient(135deg, var(--brand-purple, #2d6a4f) 0%, var(--brand-blue, #52b788) 100%);
    }

    .page-coursecart .wlt-mono {
        font-family: var(--wlt-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }
    .page-coursecart .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .page-coursecart .wlt {
        padding: 56px 0 96px;
        background: var(--color-paper, #ffffff);
    }
    .page-coursecart .wlt__shell {
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        padding: 0 var(--spacing-20, 20px);
    }

    /* ---- Wallet meter ---- */
    .page-coursecart .wlt__wallet {
        position: relative;
        overflow: hidden;
        padding: 30px 34px 26px;
        border-radius: 20px;
        background: var(--wlt-night);
        color: #ffffff;
        box-shadow: 0 30px 60px -40px rgba(7, 7, 14, 0.9);
    }
    .page-coursecart .wlt__wallet::before {
        content: "";
        position: absolute;
        top: -180px;
        right: -120px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        filter: blur(60px);
        background: radial-gradient(circle, rgba(82, 183, 136, 0.42) 0%, rgba(116, 198, 157, 0.16) 45%, transparent 70%);
        pointer-events: none;
    }
    .page-coursecart .wlt__wallet.is-short::before {
        background: radial-gradient(circle, rgba(249, 86, 116, 0.34) 0%, rgba(82, 183, 136, 0.16) 45%, transparent 70%);
    }
    .page-coursecart .wlt__figures {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        margin-bottom: 24px;
    }
    .page-coursecart .wlt__figure {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .page-coursecart .wlt__figure + .wlt__figure {
        padding-left: 24px;
        border-left: 1px solid rgba(255, 255, 255, 0.10);
    }
    .page-coursecart .wlt__figure-label {
        color: rgba(255, 255, 255, 0.45);
    }
    .page-coursecart .wlt__figure-value {
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: clamp(26px, 3.4vw, 38px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
        color: #ffffff;
    }
    .page-coursecart .wlt__figure-value--cost {
        color: var(--brand-purple-light, #95d5b2);
    }
    .page-coursecart .wlt__figure-value.is-negative {
        color: #ff8b9e;
    }

    .page-coursecart .wlt__meter {
        position: relative;
        height: 6px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.10);
        overflow: hidden;
    }
    .page-coursecart .wlt__meter-fill {
        display: block;
        height: 100%;
        border-radius: 6px;
        background: var(--wlt-accent);
        transition: width 400ms ease;
    }
    .page-coursecart .wlt__wallet.is-short .wlt__meter-fill {
        background: linear-gradient(135deg, #f95674 0%, #f9a156 100%);
    }

    .page-coursecart .wlt__wallet-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 20px;
    }
    .page-coursecart .wlt__wallet-note {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.62);
    }
    .page-coursecart .wlt__wallet-note i {
        font-size: 13px;
        color: var(--brand-blue-light, #b7e4c7);
    }
    .page-coursecart .wlt__wallet.is-short .wlt__wallet-note i {
        color: #ff8b9e;
    }
    .page-coursecart .wlt__topup {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 10px 18px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        color: #ffffff;
        text-decoration: none;
        transition: background 200ms ease, border-color 200ms ease;
    }
    .page-coursecart .wlt__topup:hover {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.4);
        background: rgba(255, 255, 255, 0.08);
    }
    .page-coursecart .wlt__topup i {
        font-size: 10px;
    }

    /* ---- Ledger ---- */
    .page-coursecart .wlt__ledger {
        margin-top: 40px;
    }
    .page-coursecart .wlt__ledger-head,
    .page-coursecart .wlt__row {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 130px 150px 44px;
        align-items: center;
        gap: 18px;
    }
    .page-coursecart .wlt__ledger-head {
        grid-template-columns: 40px minmax(0, 1fr) 130px 150px 44px;
        padding: 0 8px 12px;
        border-bottom: 1px solid var(--wlt-line);
        color: var(--wlt-mute);
    }
    .page-coursecart .wlt__ledger-head > span:first-child {
        grid-column: 2;
    }
    .page-coursecart .wlt__col-right {
        text-align: right;
    }
    .page-coursecart .wlt__rows {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .page-coursecart .wlt__row {
        padding: 22px 8px;
        border-bottom: 1px solid var(--wlt-line-soft);
        transition: background 200ms ease;
    }
    .page-coursecart .wlt__row:hover {
        background: var(--color-cream, #eef8f1);
    }
    .page-coursecart .wlt__row-index {
        color: var(--wlt-mute);
    }
    .page-coursecart .wlt__row-item {
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-width: 0;
    }
    .page-coursecart .wlt__row-title {
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 17px;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: -0.015em;
        color: var(--wlt-ink);
        text-decoration: none;
    }
    a.page-coursecart .wlt__row-title:hover,
    .page-coursecart a.wlt__row-title:hover {
        color: var(--brand-purple-dark, #1b4332);
    }
    .page-coursecart .wlt__row-type {
        color: var(--wlt-mute);
    }
    .page-coursecart .wlt__tag {
        display: inline-flex;
        align-items: center;
        padding: 5px 12px;
        border: 1px solid rgba(116, 198, 157, 0.30);
        border-radius: 999px;
        background: var(--brand-blue-wash, rgba(116, 198, 157, 0.10));
        font-family: var(--font-inter, sans-serif);
        font-size: 12px;
        font-weight: 600;
        color: var(--brand-blue-dark, #40916c);
    }
    .page-coursecart .wlt__row-dash {
        color: var(--wlt-mute);
        opacity: 0.5;
    }
    .page-coursecart .wlt__row-cost {
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        gap: 6px;
        text-align: right;
    }
    .page-coursecart .wlt__row-cost-num {
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 21px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--wlt-ink);
    }
    .page-coursecart .wlt__row-cost-unit {
        color: var(--wlt-mute);
    }
    .page-coursecart .wlt__row-remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--wlt-line-soft);
        border-radius: 10px;
        color: var(--wlt-mute);
        font-size: 13px;
        transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
    }
    .page-coursecart .wlt__row-remove:hover {
        color: #d6335a;
        border-color: rgba(214, 51, 90, 0.35);
        background: rgba(214, 51, 90, 0.07);
    }

    /* ---- Action bar ---- */
    .page-coursecart .wlt__hidden-form {
        display: none;
    }
    .page-coursecart .wlt__bar {
        /* Static: a sticky bar would cover the last ledger rows on short carts. */
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: 32px;
        padding: 20px 26px;
        border: 1px solid var(--wlt-line);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(12px);
        box-shadow: 0 24px 50px -30px rgba(37, 34, 60, 0.5);
    }
    .page-coursecart .wlt__bar-total {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .page-coursecart .wlt__bar-label {
        color: var(--wlt-mute);
    }
    .page-coursecart .wlt__bar-value {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 30px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--wlt-ink);
    }
    .page-coursecart .wlt__bar-value .wlt-mono {
        color: var(--wlt-mute);
    }
    .page-coursecart .wlt__bar-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }
    .page-coursecart .wlt__btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 26px;
        border: 1px solid transparent;
        border-radius: 12px;
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
    }
    .page-coursecart .wlt__btn--go {
        background: var(--wlt-accent);
        color: #ffffff;
        box-shadow: 0 14px 28px -16px rgba(82, 183, 136, 0.95);
    }
    .page-coursecart .wlt__btn--go:hover {
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 18px 34px -16px rgba(82, 183, 136, 1);
    }
    .page-coursecart .wlt__btn--ghost {
        border-color: var(--wlt-line);
        background: transparent;
        color: var(--wlt-dim);
    }
    .page-coursecart .wlt__btn--ghost:hover {
        border-color: var(--brand-purple, #2d6a4f);
        color: var(--brand-purple-dark, #1b4332);
    }
    .page-coursecart .wlt__btn i {
        font-size: 12px;
    }

    /* ---- Empty / guest panel ---- */
    .page-coursecart .wlt__panel {
        margin-top: 40px;
        padding: 56px 40px 60px;
        border: 1px solid var(--wlt-line-soft);
        border-radius: 20px;
        background: var(--color-cream, #eef8f1);
        text-align: center;
    }
    .page-coursecart .wlt__panel-label {
        display: block;
        margin-bottom: 16px;
        color: var(--brand-purple-dark, #1b4332);
    }
    .page-coursecart .wlt__panel-title {
        margin: 0 0 12px;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: clamp(24px, 3vw, 32px);
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--wlt-ink);
    }
    .page-coursecart .wlt__panel-text {
        max-width: 46ch;
        margin: 0 auto 28px;
        font-size: 15.5px;
        line-height: 1.65;
        color: var(--wlt-dim);
    }

    /* ---- Focus ---- */
    .page-coursecart .wlt__btn:focus-visible,
    .page-coursecart .wlt__topup:focus-visible,
    .page-coursecart .wlt__row-remove:focus-visible,
    .page-coursecart .wlt__row-title:focus-visible {
        outline: 2px solid var(--brand-blue, #52b788);
        outline-offset: 3px;
    }

    /* ---- Responsive ---- */
    @media (max-width: 991px) {
        .page-coursecart .wlt {
            padding: 40px 0 80px;
        }
        .page-coursecart .wlt__wallet {
            padding: 26px 24px 22px;
        }
        .page-coursecart .wlt__figures {
            gap: 16px;
        }
        .page-coursecart .wlt__figure + .wlt__figure {
            padding-left: 16px;
        }
        .page-coursecart .wlt__ledger-head {
            display: none;
        }
        .page-coursecart .wlt__row {
            grid-template-columns: 34px minmax(0, 1fr) 40px;
            grid-template-areas:
                "idx item remove"
                ".   meta meta";
            row-gap: 12px;
            padding: 20px 4px;
        }
        .page-coursecart .wlt__row-index { grid-area: idx; align-self: start; padding-top: 4px; }
        .page-coursecart .wlt__row-item  { grid-area: item; }
        .page-coursecart .wlt__row-remove{ grid-area: remove; }
        .page-coursecart .wlt__row-level,
        .page-coursecart .wlt__row-cost {
            grid-area: meta;
            justify-content: flex-start;
        }
        .page-coursecart .wlt__row-level {
            display: none;
        }
        .page-coursecart .wlt__row-cost {
            justify-content: flex-start;
        }
    }
    @media (max-width: 767px) {
        .page-coursecart .wlt__figures {
            grid-template-columns: minmax(0, 1fr);
            gap: 18px;
        }
        .page-coursecart .wlt__figure + .wlt__figure {
            padding-left: 0;
            padding-top: 18px;
            border-left: 0;
            border-top: 1px solid rgba(255, 255, 255, 0.10);
        }
        .page-coursecart .wlt__bar {
            flex-direction: column;
            align-items: stretch;
            gap: 18px;
        }
        .page-coursecart .wlt__bar-actions {
            flex-direction: column-reverse;
            align-items: stretch;
        }
        .page-coursecart .wlt__btn {
            justify-content: center;
        }
        .page-coursecart .wlt__panel {
            padding: 40px 22px 44px;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-coursecart .wlt__meter-fill,
        .page-coursecart .wlt__btn,
        .page-coursecart .wlt__row,
        .page-coursecart .wlt__row-remove {
            transition: none !important;
        }
        .page-coursecart .wlt__btn--go:hover {
            transform: none;
        }
    }

/* ===================== page-database ===================== */
    /* =============================================================
       COURSE DATABASE — "Records table"
       The whole catalogue as one dense, filterable table instead of
       a grid of picture cards. Built for scanning, not browsing.
       ============================================================= */

    .page-database {
        --dbx-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
        --dbx-line: rgba(82, 183, 136, 0.20);
        --dbx-line-soft: rgba(82, 183, 136, 0.11);
        --dbx-ink: var(--color-ink, #10241a);
        --dbx-dim: var(--color-pencil, #3d5a4b);
        --dbx-mute: var(--color-graphite, #6e8b7c);
        --dbx-accent: linear-gradient(135deg, var(--brand-purple, #2d6a4f) 0%, var(--brand-blue, #52b788) 100%);
    }

    .page-database .dbx-mono {
        font-family: var(--dbx-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .page-database .dbx {
        padding: 48px 0 96px;
        background: var(--color-paper, #ffffff);
    }
    .page-database .dbx__shell {
        width: 100%;
        max-width: 1160px;
        margin: 0 auto;
        padding: 0 var(--spacing-20, 20px);
    }

    /* ---- Toolbar ---- */
    .page-database .dbx__bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding-bottom: 22px;
    }
    .page-database .dbx__count {
        display: flex;
        align-items: baseline;
        gap: 9px;
        margin: 0;
    }
    .page-database .dbx__count-num {
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 30px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--dbx-ink);
    }
    .page-database .dbx__count .dbx-mono {
        color: var(--dbx-mute);
    }
    .page-database .dbx__search {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 280px;
        padding: 11px 18px;
        border: 1px solid var(--dbx-line-soft);
        border-radius: 999px;
        background: #ffffff;
        transition: border-color 180ms ease, box-shadow 180ms ease;
    }
    .page-database .dbx__search:focus-within {
        border-color: var(--brand-purple, #2d6a4f);
        box-shadow: 0 0 0 3px var(--brand-purple-wash, rgba(82, 183, 136, 0.10));
    }
    .page-database .dbx__search i {
        font-size: 12px;
        color: var(--dbx-mute);
    }
    .page-database .dbx__search input {
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        font-family: var(--font-inter, sans-serif);
        font-size: 14.5px;
        color: var(--dbx-ink);
    }
    .page-database .dbx__search input:focus {
        outline: none;
        box-shadow: none;
    }

    /* ---- Table ---- */
    .page-database .dbx__head,
    .page-database .dbx__row {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) 120px 150px;
        align-items: center;
        gap: 20px;
    }
    .page-database .dbx__head {
        position: sticky;
        top: 71px;                 /* under the fixed site header */
        z-index: 5;
        padding: 14px 10px;
        border-top: 1px solid var(--dbx-line);
        border-bottom: 1px solid var(--dbx-line);
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(10px);
        color: var(--dbx-mute);
    }
    .page-database .dbx__right {
        text-align: right;
    }
    .page-database .dbx__row {
        padding: 16px 10px;
        border-bottom: 1px solid var(--dbx-line-soft);
        transition: background 180ms ease;
    }
    .page-database .dbx__row:hover {
        background: var(--color-cream, #eef8f1);
    }
    .page-database .dbx__row[hidden] {
        display: none;
    }
    .page-database .dbx__row-index {
        color: var(--dbx-mute);
    }
    .page-database .dbx__row-main {
        display: flex;
        align-items: center;
        gap: 16px;
        min-width: 0;
    }
    .page-database .dbx__row-thumb {
        flex: none;
        display: block;
        width: 64px;
        height: 44px;
        overflow: hidden;
        border: 1px solid var(--dbx-line-soft);
        border-radius: 8px;
    }
    .page-database .dbx__row-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .page-database .dbx__row-copy {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }
    .page-database .dbx__row-title {
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: -0.015em;
        color: var(--dbx-ink);
        text-decoration: none;
    }
    .page-database .dbx__row-title:hover {
        color: var(--brand-purple-dark, #1b4332);
    }
    .page-database .dbx__row-summary {
        font-family: var(--font-inter, sans-serif);
        font-size: 13px;
        line-height: 1.5;
        color: var(--dbx-mute);
    }
    .page-database .dbx__row-price {
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.02em;
        text-align: right;
        color: var(--dbx-ink);
    }
    .page-database .dbx__row-action {
        margin: 0;
        justify-self: end;
    }
    .page-database .dbx__add {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 11px 20px;
        border: 1px solid var(--dbx-line);
        border-radius: 10px;
        background: transparent;
        font-family: var(--font-inter, sans-serif);
        font-size: 13.5px;
        font-weight: 600;
        color: var(--brand-purple-dark, #1b4332);
        cursor: pointer;
        transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    }
    .page-database .dbx__add:hover {
        border-color: transparent;
        background: var(--dbx-accent);
        color: #ffffff;
    }
    .page-database .dbx__add i {
        font-size: 11px;
    }

    .page-database .dbx__none {
        margin: 0;
        padding: 48px 10px;
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        text-align: center;
        color: var(--dbx-mute);
    }
    .page-database .dbx__none[hidden] {
        display: none;
    }

    .page-database .dbx__pager {
        margin-top: 32px;
    }
    .page-database .dbx__pager .pagination {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .page-database .dbx__pager .page-link {
        display: inline-flex;
        padding: 9px 15px;
        border: 1px solid var(--dbx-line-soft);
        border-radius: 10px;
        color: var(--dbx-dim);
        text-decoration: none;
        font-size: 14px;
    }
    .page-database .dbx__pager .active .page-link {
        border-color: transparent;
        background: var(--dbx-accent);
        color: #ffffff;
    }

    /* ---- Empty panel ---- */
    .page-database .dbx__panel {
        margin-top: 32px;
        padding: 60px 40px;
        border: 1px solid var(--dbx-line-soft);
        border-radius: 20px;
        background: var(--color-cream, #eef8f1);
        text-align: center;
    }
    .page-database .dbx__panel-label {
        display: block;
        margin-bottom: 14px;
        color: var(--brand-purple-dark, #1b4332);
    }
    .page-database .dbx__panel-title {
        margin: 0 0 26px;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: clamp(22px, 2.6vw, 30px);
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--dbx-ink);
    }
    .page-database .dbx__panel-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 26px;
        border-radius: 12px;
        background: var(--dbx-accent);
        color: #ffffff;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }
    .page-database .dbx__panel-cta:hover {
        color: #ffffff;
    }

    /* ---- Focus ---- */
    .page-database .dbx__add:focus-visible,
    .page-database .dbx__row-title:focus-visible,
    .page-database .dbx__panel-cta:focus-visible {
        outline: 2px solid var(--brand-blue, #52b788);
        outline-offset: 3px;
    }

    /* ---- Responsive ---- */
    @media (max-width: 991px) {
        .page-database .dbx__head,
        .page-database .dbx__row {
            grid-template-columns: 48px minmax(0, 1fr) 110px;
            gap: 14px;
        }
        .page-database .dbx__head > span:last-child,
        .page-database .dbx__row-action {
            display: none;
        }
        .page-database .dbx__row-summary {
            display: none;
        }
    }
    @media (max-width: 767px) {
        .page-database .dbx {
            padding: 32px 0 72px;
        }
        .page-database .dbx__bar {
            flex-direction: column;
            align-items: stretch;
        }
        .page-database .dbx__search {
            min-width: 0;
        }
        .page-database .dbx__head {
            display: none;
        }
        .page-database .dbx__row {
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 12px;
        }
        .page-database .dbx__row-index {
            display: none;
        }
        .page-database .dbx__row-thumb {
            width: 52px;
            height: 38px;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-database .dbx__row,
        .page-database .dbx__add,
        .page-database .dbx__search {
            transition: none !important;
        }
    }

/* ===================== page-dashboard ===================== */
    /* ============================================================
       USER DASHBOARD - REDESIGNED CREATIVE STUDIO CANVAS GRID
       ============================================================ */

    .page-dashboard .account-section{
        background-color: var(--surface-paper-canvas, var(--color-paper));
        position: relative;
        overflow: hidden;
        min-height: 75vh;
    }

    /* Ambient background glows */
    .page-dashboard .account-bg-blob{
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        -webkit-filter: blur(120px);
        pointer-events: none;
        opacity: 0.65;
        z-index: 0;
        mix-blend-mode: multiply;
    }
    .page-dashboard .blob-mint{
        width: 420px;
        height: 420px;
        background-color: var(--color-mint-wash, var(--color-cream));
        top: -100px;
        left: -100px;
        animation: page-dashboard-dbFloat 20s ease-in-out infinite;
    }
    .page-dashboard .blob-sky{
        width: 360px;
        height: 360px;
        background-color: var(--color-sky-wash, var(--color-sky-wash));
        bottom: -80px;
        right: -80px;
        animation: page-dashboard-dbFloat 24s ease-in-out infinite reverse;
    }
    .page-dashboard .blob-peach{
        width: 300px;
        height: 300px;
        background-color: var(--surface-cream-wash, var(--color-cream));
        top: 40%;
        left: 45%;
        animation: page-dashboard-dbFloat 28s ease-in-out infinite;
    }

    @keyframes page-dashboard-dbFloat {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%      { transform: translate(24px, -28px) scale(1.06); }
    }

    .page-dashboard .account-container{
        position: relative;
        z-index: 1;
    }

    /* ---- LEFT PANEL: SIDEBAR ---- */
    .page-dashboard .db-profile-sidebar{
        display: flex;
        flex-direction: column;
        height: 100%;
        animation: page-dashboard-dbFadeInLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* Course Management A Member Card (Credit Card / Glassmorphic look) */
    .page-dashboard .artify-member-card{
        background: linear-gradient(135deg, #1e1b18 0%, #2f2b27 100%);
        border: 1px solid rgba(254, 253, 252, 0.08);
        border-radius: 20px;
        padding: 24px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 14px 32px rgba(30, 27, 24, 0.18);
        margin-bottom: 24px;
        color: #fff;
    }
    .page-dashboard .member-card-glow{
        position: absolute;
        top: -50px;
        right: -50px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(82, 183, 136, 0.4) 0%, transparent 70%);
        filter: blur(10px);
        pointer-events: none;
    }
    .page-dashboard .member-card-inner{
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 150px;
    }
    .page-dashboard .member-card-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .page-dashboard .member-logo{
        font-family: var(--font-graphik), sans-serif;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.15em;
        opacity: 0.8;
    }
    .page-dashboard .coin-icon{
        font-size: 20px;
        color: #ffb830;
        text-shadow: 0 0 10px rgba(255, 184, 48, 0.5);
    }
    .page-dashboard .member-card-body{
        margin: 16px 0;
    }
    .page-dashboard .balance-label{
        font-family: var(--font-inter), sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
        opacity: 0.6;
        text-transform: uppercase;
        display: block;
        margin-bottom: 4px;
    }
    .page-dashboard .balance-value{
        font-family: var(--font-graphik), sans-serif;
        font-size: 32px;
        font-weight: 800;
        color: #fff;
        margin: 0;
        display: flex;
        align-items: baseline;
        gap: 6px;
    }
    .page-dashboard .balance-value small{
        font-size: 14px;
        font-weight: 600;
        color: var(--color-ember-red, var(--brand-purple));
    }
    .page-dashboard .member-card-footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .page-dashboard .member-name{
        font-family: var(--font-inter), sans-serif;
        font-size: 13px;
        font-weight: 600;
        opacity: 0.9;
        letter-spacing: 0.02em;
    }
    .page-dashboard .member-topup-btn{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 6px 12px;
        border-radius: 8px;
        font-family: var(--font-inter), sans-serif;
        font-size: 11px;
        font-weight: 700;
        color: #fff;
        text-decoration: none;
        transition: all 0.2s ease;
    }
    .page-dashboard .member-topup-btn:hover{
        background: #fff;
        color: #1e1b18;
    }

    /* Greeting Overview */
    .page-dashboard .db-profile-overview{
        background: var(--color-cream, var(--color-cream));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 18px;
        padding: 22px;
        box-shadow: var(--shadow-subtle);
    }
    .page-dashboard .greeting-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
        margin: 0 0 6px 0;
    }
    .page-dashboard .greeting-text{
        font-family: var(--font-inter), sans-serif;
        font-size: 13px;
        line-height: 1.5;
        color: var(--color-pencil, var(--color-pencil));
        margin: 0 0 18px 0;
    }
    .page-dashboard .db-mini-stats{
        display: flex;
        align-items: center;
        background: var(--color-paper, var(--color-paper));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 12px;
        padding: 12px 6px;
    }
    .page-dashboard .mini-stat-item{
        flex: 1;
        text-align: center;
    }
    .page-dashboard .mini-stat-value{
        display: block;
        font-family: var(--font-graphik), sans-serif;
        font-size: 20px;
        font-weight: 800;
        color: var(--color-ink, var(--brand-black-soft));
        line-height: 1.1;
    }
    .page-dashboard .mini-stat-label{
        font-family: var(--font-inter), sans-serif;
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--color-graphite, var(--color-graphite));
        letter-spacing: 0.05em;
        margin-top: 4px;
        display: block;
    }
    .page-dashboard .mini-stat-divider{
        width: 1px;
        height: 24px;
        background-color: var(--color-stone, var(--color-stone));
    }

    /* Vertical Navigation tabs */
    .page-dashboard .db-side-tabs{
        background: var(--color-paper, var(--color-paper));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 18px;
        padding: 10px;
        gap: 4px;
        box-shadow: var(--shadow-subtle);
    }
    .page-dashboard .db-side-tabs .nav-link{
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 10px;
        padding: 12px 16px;
        background: transparent;
        border: none;
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-pencil, var(--color-pencil));
        text-align: left;
        width: 100%;
        transition: all 0.25s ease;
    }
    .page-dashboard .db-side-tabs .nav-link i{
        font-size: 14px;
        opacity: 0.8;
    }
    .page-dashboard .db-side-tabs .nav-link:hover{
        color: var(--color-deep-ember, var(--brand-purple-dark));
        background: var(--surface-cream-wash, var(--color-cream));
    }
    .page-dashboard .db-side-tabs .nav-link.active{
        color: var(--color-ember-red, var(--brand-purple));
        background: var(--color-cream, var(--color-cream));
        position: relative;
    }
    .page-dashboard .db-side-tabs .nav-link.active::after{
        content: '';
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--color-ember-red, var(--brand-purple));
    }
    .page-dashboard .db-side-logout{
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 10px;
        padding: 12px 16px;
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: var(--color-ember-red, var(--brand-purple));
        text-decoration: none;
        transition: all 0.2s ease;
    }
    .page-dashboard .db-side-logout:hover{
        background: rgba(82, 183, 136, 0.06);
        color: var(--color-deep-ember, var(--brand-purple-dark));
    }

    /* ---- RIGHT PANEL: MAIN CONTENT ---- */
    .page-dashboard .db-main-content{
        animation: page-dashboard-dbFadeInRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .page-dashboard .db-content-card{
        background: var(--color-paper, var(--color-paper));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 18px;
        padding: 36px clamp(18px, 4vw, 44px);
        box-shadow: var(--shadow-subtle);
        height: 100%;
    }
    .page-dashboard .db-content-card__title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
        margin-bottom: 28px;
        display: flex;
        align-items: center;
    }
    .page-dashboard .db-content-card__title i{
        color: var(--color-ember-red, var(--brand-purple));
    }

    /* ---- TABLE DESIGN ---- */
    .page-dashboard .db-table{
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
    }
    .page-dashboard .db-table thead th{
        background: var(--surface-cream-wash, var(--color-cream)) !important;
        border-bottom: 1.5px solid var(--color-stone, var(--color-stone)) !important;
        color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
        font-family: var(--font-inter), sans-serif;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 14px 16px;
    }
    .page-dashboard .db-table tbody tr{
        border-bottom: 1px solid rgba(37,34,30,0.06) !important;
        transition: background-color 0.2s ease;
    }
    .page-dashboard .db-table tbody tr:hover{
        background-color: var(--color-cream, var(--color-cream)) !important;
    }
    .page-dashboard .db-table tbody td{
        padding: 16px;
        vertical-align: middle;
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        color: var(--color-pencil, var(--color-pencil));
    }
    .page-dashboard .db-table__highlight{
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft)) !important;
    }
    .page-dashboard .db-table__course-title{
        color: var(--color-ink, var(--brand-black-soft)) !important;
        font-weight: 600;
    }
    .page-dashboard .db-table__price{
        font-family: var(--font-graphik), sans-serif;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
    }
    .page-dashboard .db-table__date{
        color: var(--color-graphite, var(--color-graphite));
    }

    /* ---- BADGES & PILLS ---- */
    .page-dashboard .db-points-badge{
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 700;
        border: 1px solid transparent;
    }
    .page-dashboard .db-points-badge--amber{
        background: var(--color-cream, var(--color-cream));
        border-color: rgba(82, 183, 136, 0.15);
        color: var(--color-ember-red, var(--brand-purple));
    }
    .page-dashboard .db-points-badge--teal{
        background: var(--color-sky-wash, var(--color-sky-wash));
        border-color: rgba(73, 125, 126, 0.15);
        color: var(--color-teal-dusk, var(--color-teal-dusk));
    }

    .page-dashboard .db-status-pill{
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .page-dashboard .db-status-pill--success{ background: var(--color-mint-wash, var(--color-cream)); color: var(--color-forest, var(--color-forest)); }
    .page-dashboard .db-status-pill--warning{ background: var(--surface-cream-wash, var(--color-cream)); color: #cf7820; }
    .page-dashboard .db-status-pill--danger{ background: #ffebeb; color: #cf3220; }
    .page-dashboard .db-status-pill--teal{ background: var(--color-sky-wash, var(--color-sky-wash)); color: var(--color-teal-dusk, var(--color-teal-dusk)); }
    .page-dashboard .db-status-pill--neutral{ background: #f1f0ef; color: var(--color-pencil, var(--color-pencil)); }

    /* ---- ACTION BUTTONS ---- */
    .page-dashboard .db-action-btn{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: transparent;
        border: 1px solid var(--color-stone, var(--color-stone));
        color: var(--color-pencil, var(--color-pencil));
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.25s ease;
    }
    .page-dashboard .db-action-btn:hover{
        border-color: rgba(82, 183, 136, 0.3);
        background: var(--color-cream, var(--color-cream));
        color: var(--color-deep-ember, var(--brand-purple-dark));
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(37,34,30,0.03);
    }

    /* ---- FORMS ---- */
    .page-dashboard .db-form{
        display: grid;
        gap: 20px;
    }
    .page-dashboard .db-form-group{
        display: flex;
        flex-direction: column;
    }
    .page-dashboard .db-label{
        font-family: var(--font-inter), sans-serif;
        font-size: 12px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
    }
    .page-dashboard .db-label i{
        color: var(--color-ember-red, var(--brand-purple));
    }
    .page-dashboard .db-input{
        width: 100%;
        padding: 12px 15px;
        background: var(--surface-paper-canvas, var(--color-paper));
        border: 1.5px solid var(--color-stone, var(--color-stone));
        border-radius: var(--radius-lg, 8px);
        color: var(--color-ink, var(--brand-black-soft));
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .page-dashboard .db-input:focus{
        outline: none;
        background: #fff;
        border-color: var(--color-ember-red, var(--brand-purple));
        box-shadow: 0 0 0 4px rgba(82, 183, 136, 0.12);
        transform: translateY(-1px);
    }
    .page-dashboard .db-submit-btn{
        background: var(--color-ember-red, var(--brand-purple));
        color: var(--color-paper, var(--color-paper));
        border: none;
        border-radius: var(--radius-buttons, 8px);
        padding: 14px 20px;
        font-family: var(--font-inter), sans-serif;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 4px 14px rgba(82, 183, 136, 0.2);
    }
    .page-dashboard .db-submit-btn:hover{
        background: var(--color-deep-ember, var(--brand-purple-dark));
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(82, 183, 136, 0.35);
    }

    /* ---- ENTRANCE ANIMATIONS ---- */
    @keyframes page-dashboard-dbFadeInLeft {
        from { opacity: 0; transform: translateX(-32px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes page-dashboard-dbFadeInRight {
        from { opacity: 0; transform: translateX(32px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* ---- RESPONSIVE ---- */
    @media (max-width: 991px) {
        .page-dashboard .db-profile-sidebar{ margin-bottom: 32px; }
        .page-dashboard .db-content-card{ padding: 24px 20px; }
    }
    @media (max-width: 575px) {
        .page-dashboard .db-mini-stats{ padding: 12px 4px; }
        .page-dashboard .db-side-tabs{ padding: 6px; }
        .page-dashboard .db-side-tabs .nav-link{ padding: 10px 12px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-dashboard .db-profile-sidebar,
        .page-dashboard .db-main-content,
        .page-dashboard .account-bg-blob{ animation: none !important; }
    }

    .page-dashboard .db-input.is-invalid{
        border-color: var(--color-ember-red, var(--brand-purple)) !important;
        background-color: #fffaf9 !important;
    }

    /* ============================================================
       DASHBOARD — EDITORIAL REDESIGN (dash-* classes)
       ============================================================ */

    /* Shared eyebrow */
    .page-dashboard .dash-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--color-deep-ember, var(--brand-purple-dark));
        margin-bottom: 14px;
    }
    .page-dashboard .dash-eyebrow--dark { color: #f5b74a; }
    .page-dashboard .dash-eyebrow__dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-ember-red, var(--brand-blue-light));
        box-shadow: 0 0 10px rgba(193, 148, 13, 0.55);
        animation: dashPulse 1.8s ease-in-out infinite;
    }
    @keyframes dashPulse {
        0%,100% { transform: scale(1); opacity: 1; }
        50%     { transform: scale(1.25); opacity: 0.75; }
    }

    /* ============================================================
       HERO
       ============================================================ */
    .page-dashboard .dash-hero {
        position: relative;
        overflow: hidden;
        padding: 48px 0 44px;
        background: linear-gradient(180deg, #fff9f1 0%, var(--color-paper) 100%);
    }
    .page-dashboard .dash-hero__blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0;
    }
    .page-dashboard .dash-hero__blob--a {
        top: -160px; right: -120px;
        width: 380px; height: 380px;
        background: rgba(193, 148, 13, 0.15);
    }
    .page-dashboard .dash-hero__blob--b {
        bottom: -180px; left: -100px;
        width: 340px; height: 340px;
        background: rgba(15, 102, 174, 0.10);
    }
    .page-dashboard .dash-hero__inner {
        position: relative;
        z-index: 1;
    }
    .page-dashboard .dash-hero__grid {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: 40px;
        align-items: stretch;
    }

    /* Welcome (left) */
    .page-dashboard .dash-hero__welcome {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }
    .page-dashboard .dash-hero__avatar {
        flex-shrink: 0;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--color-ember-red, var(--brand-blue-light)), var(--color-deep-ember, var(--brand-purple-dark)));
        color: #ffffff;
        font-family: var(--font-graphik, sans-serif);
        font-size: 22px;
        font-weight: 800;
        box-shadow: 0 12px 26px rgba(193, 148, 13, 0.35),
                    inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    .page-dashboard .dash-hero__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: clamp(28px, 3.6vw, 40px);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: var(--color-ink, var(--brand-black-soft));
        margin: 0 0 10px 0;
    }
    .page-dashboard .dash-hero__lede {
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        line-height: 1.6;
        color: var(--color-pencil, var(--color-pencil));
        margin: 0 0 16px 0;
        max-width: 480px;
    }
    .page-dashboard .dash-hero__logout {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(220, 53, 69, 0.08);
        border: 1px solid rgba(220, 53, 69, 0.25);
        color: #dc3545;
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-decoration: none;
        transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }
    .page-dashboard .dash-hero__logout:hover {
        background: rgba(220, 53, 69, 0.14);
        border-color: rgba(220, 53, 69, 0.45);
        color: #b91c1c;
        transform: translateY(-1px);
    }
    .page-dashboard .dash-hero__logout i { font-size: 11px; }

    /* Dark balance card (right) */
    .page-dashboard .dash-hero__balance {
        position: relative;
        background: linear-gradient(160deg, var(--brand-black) 0%, var(--brand-black) 100%);
        border-radius: 22px;
        color: rgba(255, 255, 255, 0.85);
        overflow: hidden;
        box-shadow: 0 22px 50px rgba(22, 19, 15, 0.28);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .page-dashboard .dash-hero__balance-glow {
        position: absolute;
        top: -100px; right: -60px;
        width: 260px; height: 260px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(193, 148, 13, 0.35) 0%, transparent 65%);
        filter: blur(50px);
        pointer-events: none;
    }
    .page-dashboard .dash-hero__balance-inner {
        position: relative;
        z-index: 1;
        padding: 26px 28px 24px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .page-dashboard .dash-hero__balance-label {
        display: block;
        font-family: var(--font-inter, sans-serif);
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        margin-bottom: 8px;
    }
    .page-dashboard .dash-hero__balance-value {
        font-family: var(--font-graphik, sans-serif);
        font-size: 44px;
        font-weight: 800;
        color: #ffffff;
        line-height: 1;
        letter-spacing: -0.03em;
        margin-bottom: 20px;
    }
    .page-dashboard .dash-hero__balance-value small {
        font-family: var(--font-inter, sans-serif);
        font-size: 13px;
        font-weight: 700;
        color: #f5b74a;
        margin-left: 8px;
        letter-spacing: 0.05em;
    }
    .page-dashboard .dash-hero__balance-foot {
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px dashed rgba(255, 255, 255, 0.14);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }
    .page-dashboard .dash-hero__balance-name {
        font-family: var(--font-graphik, sans-serif);
        font-size: 14.5px;
        font-weight: 700;
        color: #ffffff;
    }
    .page-dashboard .dash-hero__topup {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 16px;
        border-radius: 999px;
        background: var(--color-ember-red, var(--brand-blue-light));
        color: #ffffff;
        font-family: var(--font-inter, sans-serif);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-decoration: none;
        box-shadow: 0 8px 18px rgba(193, 148, 13, 0.4);
        transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    }
    .page-dashboard .dash-hero__topup:hover {
        background: var(--color-deep-ember, var(--brand-purple-dark));
        transform: translateY(-2px);
        color: #ffffff;
        box-shadow: 0 12px 24px rgba(193, 148, 13, 0.55);
    }
    .page-dashboard .dash-hero__topup i { font-size: 10px; }

    /* Stats row */
    .page-dashboard .dash-hero__stats {
        margin-top: 32px;
        padding: 22px 26px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        background: var(--color-paper, var(--color-paper));
        border: 1px solid rgba(215, 214, 212, 0.6);
        border-radius: 20px;
        box-shadow: 0 10px 26px rgba(37, 34, 30, 0.05);
    }
    .page-dashboard .dash-stat {
        display: flex;
        flex-direction: column;
        gap: 6px;
        border-left: 3px solid transparent;
        padding-left: 14px;
    }
    .page-dashboard .dash-stat:first-child { border-left-color: var(--color-ember-red, var(--brand-blue-light)); }
    .page-dashboard .dash-stat:nth-child(2) { border-left-color: var(--color-forest, var(--color-forest)); }
    .page-dashboard .dash-stat:nth-child(3) { border-left-color: var(--color-cobalt-link, var(--brand-blue)); }
    .page-dashboard .dash-stat__num {
        font-family: var(--font-graphik, sans-serif);
        font-size: 34px;
        font-weight: 800;
        color: var(--color-ink, var(--brand-black-soft));
        line-height: 1;
        letter-spacing: -0.02em;
    }
    .page-dashboard .dash-stat__label {
        font-family: var(--font-inter, sans-serif);
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--color-graphite, var(--color-graphite));
    }

    /* ============================================================
       CONTENT SECTION
       ============================================================ */
    .page-dashboard .dash-content {
        padding: 40px 0 96px;
        background: var(--color-paper);
    }

    /* Editorial tab bar (dark pill container) */
    .page-dashboard .dash-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 8px !important;
        background: linear-gradient(180deg, #1c1812 0%, var(--brand-black) 100%) !important;
        border-radius: 999px !important;
        box-shadow:
            0 20px 40px rgba(22, 19, 15, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            inset 0 0 0 1px rgba(255, 255, 255, 0.04);
        margin-bottom: 32px !important;
        list-style: none !important;
        overflow: hidden;
    }
    .page-dashboard .dash-tabs .nav-item {
        display: flex;
    }
    .page-dashboard .dash-tab,
    .page-dashboard .dash-tabs .nav-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 13px 18px !important;
        border-radius: 999px !important;
        background: transparent !important;
        border: 0 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        cursor: pointer;
        transition: background 0.28s ease, color 0.28s ease, transform 0.28s ease;
        white-space: nowrap;
        text-decoration: none !important;
    }
    .page-dashboard .dash-tab__num {
        font-family: var(--font-graphik, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.06em;
        color: #f5b74a !important;
        padding: 3px 7px;
        border-radius: 999px;
        background: rgba(245, 197, 24, 0.14);
        border: 1px solid rgba(245, 197, 24, 0.22);
        line-height: 1;
        transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
    }
    .page-dashboard .dash-tab__label {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: inherit;
    }
    .page-dashboard .dash-tab__label i {
        font-size: 13px;
        color: inherit;
        opacity: 0.85;
    }
    .page-dashboard .dash-tab:hover,
    .page-dashboard .dash-tabs .nav-link:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
    }
    .page-dashboard .dash-tab:hover .dash-tab__num,
    .page-dashboard .dash-tabs .nav-link:hover .dash-tab__num {
        background: rgba(245, 197, 24, 0.22);
        border-color: rgba(245, 197, 24, 0.38);
        color: #ffd166 !important;
    }
    .page-dashboard .dash-tab.active,
    .page-dashboard .dash-tabs .nav-link.active {
        background: linear-gradient(135deg, var(--brand-blue-light) 0%, var(--brand-purple-dark) 100%) !important;
        color: #ffffff !important;
        box-shadow:
            0 10px 24px rgba(193, 148, 13, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.30),
            inset 0 0 0 1px rgba(255, 255, 255, 0.10);
        transform: translateY(-1px);
    }
    .page-dashboard .dash-tab.active .dash-tab__num,
    .page-dashboard .dash-tabs .nav-link.active .dash-tab__num {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.26);
        border-color: rgba(255, 255, 255, 0.24);
    }
    .page-dashboard .dash-tab.active .dash-tab__label i,
    .page-dashboard .dash-tabs .nav-link.active .dash-tab__label i {
        opacity: 1;
    }

    /* Panels */
    .page-dashboard .dash-panels {}
    .page-dashboard .dash-panel {
        position: relative;
        background: var(--color-paper, var(--color-paper));
        border: 1px solid rgba(215, 214, 212, 0.6);
        border-radius: 22px;
        padding: 32px 34px 34px;
        box-shadow: 0 18px 40px rgba(37, 34, 30, 0.06);
    }
    .page-dashboard .dash-panel__head {
        display: flex;
        align-items: center;
        gap: 16px;
        padding-bottom: 20px;
        margin-bottom: 22px;
        border-bottom: 1px dashed rgba(215, 214, 212, 0.7);
    }
    .page-dashboard .dash-panel__ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--brand-blue-light) 0%, var(--brand-purple-dark) 100%);
        color: #ffffff;
        font-size: 18px;
        box-shadow: 0 8px 18px rgba(193, 148, 13, 0.32);
        flex-shrink: 0;
    }
    .page-dashboard .dash-panel__title {
        font-family: var(--font-graphik, sans-serif);
        font-size: 22px;
        font-weight: 800;
        color: var(--color-ink, var(--brand-black-soft));
        margin: 0 0 4px 0;
        letter-spacing: -0.01em;
    }
    .page-dashboard .dash-panel__sub {
        font-family: var(--font-inter, sans-serif);
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-graphite, var(--color-graphite));
        margin: 0;
    }

    /* Table */
    .page-dashboard .dash-table {
        width: 100%;
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
    }
    .page-dashboard .dash-table thead th {
        background: #fff9f1;
        color: var(--color-deep-ember, var(--brand-purple-dark));
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 12px 14px;
        border: 0;
        border-bottom: 1px solid rgba(215, 214, 212, 0.7);
    }
    .page-dashboard .dash-table thead th:first-child {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }
    .page-dashboard .dash-table thead th:last-child {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    .page-dashboard .dash-table tbody td {
        padding: 16px 14px;
        border-top: 1px dashed rgba(215, 214, 212, 0.6);
        vertical-align: middle;
        font-family: var(--font-inter, sans-serif);
        font-size: 13.5px;
        color: var(--color-ink, var(--brand-black-soft));
    }
    .page-dashboard .dash-table tbody tr:hover {
        background: rgba(193, 148, 13, 0.03);
    }
    .page-dashboard .dash-table__ref {
        font-family: var(--font-graphik, sans-serif);
        font-weight: 800;
        color: var(--color-deep-ember, var(--brand-purple-dark));
        letter-spacing: 0.02em;
    }
    .page-dashboard .dash-table__price {
        font-family: var(--font-graphik, sans-serif);
        font-weight: 800;
        color: var(--color-ink, var(--brand-black-soft));
    }
    .page-dashboard .dash-table__date {
        color: var(--color-graphite, var(--color-graphite));
        font-weight: 600;
    }
    .page-dashboard .dash-table__course {
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
    }

    /* Chip */
    .page-dashboard .dash-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: 999px;
        font-family: var(--font-inter, sans-serif);
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
    .page-dashboard .dash-chip i { font-size: 10px; }
    .page-dashboard .dash-chip--ember {
        background: rgba(193, 148, 13, 0.10);
        color: var(--color-deep-ember, var(--brand-purple-dark));
        border: 1px solid rgba(193, 148, 13, 0.22);
    }

    /* Status pills */
    .page-dashboard .dash-status {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 999px;
        font-family: var(--font-inter, sans-serif);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .page-dashboard .dash-status--success {
        background: rgba(68, 108, 61, 0.12);
        color: var(--color-forest, var(--color-forest));
        border: 1px solid rgba(68, 108, 61, 0.25);
    }
    .page-dashboard .dash-status--warning {
        background: rgba(245, 158, 11, 0.12);
        color: #b45309;
        border: 1px solid rgba(245, 158, 11, 0.25);
    }
    .page-dashboard .dash-status--danger {
        background: rgba(220, 53, 69, 0.10);
        color: #b91c1c;
        border: 1px solid rgba(220, 53, 69, 0.25);
    }
    .page-dashboard .dash-status--info {
        background: rgba(15, 102, 174, 0.10);
        color: var(--color-cobalt-link, var(--brand-blue));
        border: 1px solid rgba(15, 102, 174, 0.22);
    }
    .page-dashboard .dash-status--neutral {
        background: rgba(37, 34, 30, 0.06);
        color: var(--color-pencil, var(--color-pencil));
        border: 1px solid rgba(37, 34, 30, 0.10);
    }

    /* Action button */
    .page-dashboard .dash-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border-radius: 999px;
        background: transparent;
        border: 1px solid rgba(215, 214, 212, 0.7);
        color: var(--color-ink, var(--brand-black-soft));
        font-family: var(--font-inter, sans-serif);
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        letter-spacing: 0.02em;
        transition: all 0.22s ease;
    }
    .page-dashboard .dash-btn:hover {
        background: var(--color-ember-red, var(--brand-blue-light));
        border-color: var(--color-ember-red, var(--brand-blue-light));
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(193, 148, 13, 0.28);
    }
    .page-dashboard .dash-btn i { font-size: 10px; }

    /* Empty state */
    .page-dashboard .dash-empty {
        text-align: center;
        padding: 40px 20px;
        color: var(--color-pencil, var(--color-pencil));
        font-family: var(--font-inter, sans-serif);
        font-size: 14px;
    }
    .page-dashboard .dash-empty__ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: rgba(193, 148, 13, 0.08);
        color: var(--color-deep-ember, var(--brand-purple-dark));
        font-size: 26px;
        margin-bottom: 12px;
    }
    .page-dashboard .dash-empty p {
        margin: 0;
        font-weight: 600;
    }

    /* Password form — fills the full panel width, ember locked */
    .page-dashboard .dash-form {
        display: flex;
        flex-direction: column;
        gap: 22px;
        width: 100%;
        max-width: none;
    }
    .page-dashboard .dash-form__row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
    }
    .page-dashboard .dash-field {
        display: flex;
        flex-direction: column;
    }
    .page-dashboard .dash-label {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        color: var(--brand-purple-dark) !important;
        margin-bottom: 8px !important;
    }
    .page-dashboard .dash-label i {
        color: var(--brand-blue-light) !important;
        font-size: 11px !important;
    }
    .page-dashboard .dash-input {
        width: 100% !important;
        padding: 14px 18px !important;
        background: #fff9f2 !important;
        border: 1.5px solid rgba(215, 214, 212, 0.7) !important;
        border-radius: 12px !important;
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 15px !important;
        line-height: 1.5;
        color: var(--color-ink, var(--brand-black-soft)) !important;
        transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
        outline: none !important;
        box-shadow: none;
    }
    .page-dashboard .dash-input::placeholder {
        color: var(--color-graphite, var(--color-graphite));
    }
    .page-dashboard .dash-input:hover {
        border-color: rgba(193, 148, 13, 0.35) !important;
    }
    .page-dashboard .dash-input:focus {
        background: #ffffff !important;
        border-color: var(--brand-blue-light) !important;
        box-shadow: 0 0 0 4px rgba(193, 148, 13, 0.12) !important;
    }
    .page-dashboard .dash-input.is-invalid {
        border-color: #dc3545 !important;
        background: rgba(220, 53, 69, 0.04) !important;
    }
    .page-dashboard .dash-submit {
        margin-top: 10px !important;
        align-self: flex-start;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 15px 34px !important;
        min-width: 260px;
        background: var(--brand-blue-light) !important;
        color: #ffffff !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        cursor: pointer;
        box-shadow: 0 12px 26px rgba(193, 148, 13, 0.38) !important;
        transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease !important;
    }
    .page-dashboard .dash-submit:hover {
        background: var(--brand-purple-dark) !important;
        transform: translateY(-2px);
        box-shadow: 0 16px 32px rgba(193, 148, 13, 0.5) !important;
    }
    .page-dashboard .dash-submit i {
        font-size: 12px;
        transition: transform 0.25s ease;
    }
    .page-dashboard .dash-submit:hover i {
        transform: translateX(3px);
    }

    /* Responsive */
    @media (max-width: 991px) {
        .page-dashboard .dash-hero__grid {
            grid-template-columns: 1fr;
            gap: 28px;
        }
        .page-dashboard .dash-hero__stats {
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            padding: 18px 20px;
        }
        .page-dashboard .dash-panel {
            padding: 28px 24px 26px;
        }
        .page-dashboard .dash-tabs {
            grid-template-columns: 1fr;
            border-radius: 22px;
        }
    }
    @media (max-width: 575px) {
        .page-dashboard .dash-hero {
            padding: 32px 0 32px;
        }
        .page-dashboard .dash-hero__welcome {
            gap: 14px;
        }
        .page-dashboard .dash-hero__avatar {
            width: 52px; height: 52px; font-size: 18px;
        }
        .page-dashboard .dash-hero__balance-inner {
            padding: 22px 22px 20px;
        }
        .page-dashboard .dash-hero__balance-value { font-size: 36px; }
        .page-dashboard .dash-hero__stats {
            grid-template-columns: 1fr;
        }
        .page-dashboard .dash-panel__head {
            gap: 12px;
        }
        .page-dashboard .dash-panel__title { font-size: 18px; }
        .page-dashboard .dash-form__row {
            grid-template-columns: 1fr;
        }
        .page-dashboard .dash-submit {
            width: 100%;
            justify-content: center;
        }
    }

/* ===================== page-forget-pwd-form ===================== */
    /* ============================================================
       AUTH (login / register / forgot password)
       Centred focus card on a dark ambient stage.
       Shared by .page-login, .page-register, .page-forget-pwd-form
       ============================================================ */

    .authx-section{
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(900px 480px at 10% 0%, rgba(82, 183, 136, .3), transparent 62%),
            radial-gradient(860px 460px at 92% 100%, rgba(116, 198, 157, .24), transparent 62%),
            linear-gradient(160deg, #17121f 0%, var(--brand-black-soft, #0b2018) 52%, #0a0e19 100%);
    }

    .authx__glow{
        position: absolute;
        border-radius: 50%;
        filter: blur(110px);
        opacity: .4;
        pointer-events: none;
    }
    .authx__glow--a{
        width: 380px; height: 380px;
        top: -140px; left: 8%;
        background: var(--brand-purple, #2d6a4f);
    }
    .authx__glow--b{
        width: 340px; height: 340px;
        bottom: -150px; right: 6%;
        background: var(--brand-blue, #52b788);
    }

    .authx{
        position: relative;
        z-index: 2;
        max-width: 620px;
        margin: 0 auto;
    }

    /* ---------- Head ---------- */
    .authx__head{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 34px;
    }

    .authx__badge{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 66px;
        height: 66px;
        border-radius: 22px;
        background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        color: #fff;
        font-size: 24px;
        box-shadow: 0 18px 40px rgba(82, 183, 136, .42);
    }

    .authx__eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-top: 22px;
        padding: 7px 16px 7px 12px;
        border-radius: 999px;
        border: 1px solid rgba(149, 213, 178, .3);
        background: rgba(82, 183, 136, .14);
        font-family: var(--font-inter);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--brand-purple-light, #95d5b2);
    }

    .authx__eyebrow-dot{
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand-purple, #2d6a4f);
        box-shadow: 0 0 0 4px rgba(82, 183, 136, .24);
    }

    .authx__title{
        font-family: var(--font-graphik);
        font-size: clamp(27px, 3vw, 38px);
        line-height: 1.12;
        letter-spacing: -.03em;
        font-weight: 800;
        color: #fff;
        margin: 18px 0 0;
    }

    .authx__lede{
        font-family: var(--font-inter);
        font-size: 15.5px;
        line-height: 1.7;
        color: rgba(255, 255, 255, .55);
        margin: 12px auto 0;
        max-width: 480px;
    }

    /* ---------- Focus card ---------- */
    .authx__card{
        padding: 40px 44px 34px;
        border-radius: 28px;
        background: #fff;
        border: 1px solid rgba(255, 255, 255, .16);
        box-shadow: 0 40px 90px rgba(6, 4, 16, .5);
    }

    .authx__card-head{
        margin-bottom: 28px;
        padding-bottom: 22px;
        border-bottom: 1px solid var(--color-stone, #cbe8d7);
    }

    .authx__card-title{
        font-family: var(--font-graphik);
        font-size: 24px;
        line-height: 1.2;
        letter-spacing: -.025em;
        font-weight: 800;
        color: var(--color-ink, #10241a);
        margin: 0;
    }

    .authx__card-sub{
        font-family: var(--font-inter);
        font-size: 14.5px;
        line-height: 1.65;
        color: var(--color-pencil, #3d5a4b);
        margin: 8px 0 0;
    }

    /* ---------- Fields: underline style ---------- */
    .authx__field{
        margin-bottom: 24px;
    }

    .authx__row{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .authx__label{
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 6px;
        font-family: var(--font-inter);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--color-graphite, #6e8b7c);
        transition: color .3s ease;
    }

    .authx__label i{
        font-size: 11px;
        color: var(--brand-purple, #2d6a4f);
    }

    /* the control owns the animated underline */
    .authx__control{
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 2px solid var(--color-stone, #cbe8d7);
        transition: border-color .3s ease;
    }

    .authx__control::after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 2px;
        background: linear-gradient(90deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .4s cubic-bezier(.22,.61,.36,1);
    }

    .authx__control:focus-within::after{
        transform: scaleX(1);
    }

    .authx__field:focus-within .authx__label{
        color: var(--brand-purple, #2d6a4f);
    }

    .authx__input,
    .page-login .premium-form-input,
    .page-register .premium-form-input,
    .page-forget-pwd-form .premium-form-input{
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        border-radius: 0;
        padding: 11px 0;
        font-family: var(--font-inter);
        font-size: 15.5px;
        line-height: 1.5;
        color: var(--color-ink, #10241a);
        box-shadow: none;
    }

    .authx__input::placeholder{
        color: var(--color-graphite, #6e8b7c);
        opacity: .6;
    }

    .authx__input:focus{
        outline: none;
        box-shadow: none;
        background: transparent;
    }

    /* password reveal */
    .authx__eye{
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--color-graphite, #6e8b7c);
        font-size: 13px;
        cursor: pointer;
        transition: background-color .25s ease, color .25s ease;
    }

    .authx__eye:hover{
        background: var(--color-cream, #eef8f1);
        color: var(--brand-purple, #2d6a4f);
    }

    /* captcha */
    .authx__captcha{
        display: flex;
        align-items: flex-end;
        gap: 14px;
    }

    .authx__captcha .authx__control{
        flex: 1 1 auto;
        min-width: 0;
    }

    .authx__captcha-img{
        flex: none;
        line-height: 0;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid var(--color-stone, #cbe8d7);
        background: #fff;
    }

    .authx__captcha-img img{
        display: block;
        height: 44px;
        width: auto;
    }

    /* invalid state — flagged explicitly by blade and by the validator */
    .authx__control.is-invalid{
        border-bottom-color: #e2544a;
    }
    .authx__control.is-invalid::after{
        background: #e2544a;
        transform: scaleX(1);
    }
    .authx__field.is-invalid .authx__label,
    .authx__field.is-invalid .authx__label i{
        color: #e2544a;
    }

    /* server-rendered errors and jquery-validate labels share one look */
    .authx__error,
    .authx__field label.error,
    .authx__field .text-danger{
        display: flex;
        align-items: flex-start;
        gap: 7px;
        margin-top: 8px;
        font-family: var(--font-inter);
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.5;
        color: #e2544a;
    }

    .authx__error i{
        margin-top: 2px;
        font-size: 11px;
        flex: none;
    }

    /* ---------- Inline row (forgot password link) ---------- */
    .authx__inline{
        display: flex;
        justify-content: flex-end;
        margin: -8px 0 24px;
    }

    .authx__link{
        font-family: var(--font-inter);
        font-size: 13.5px;
        font-weight: 600;
        color: var(--brand-purple, #2d6a4f);
        text-decoration: none;
        transition: color .25s ease;
    }
    .authx__link:hover{
        color: var(--brand-purple-dark, #1b4332);
        text-decoration: underline;
    }

    /* ---------- Submit ---------- */
    .authx-section .authx__submit{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        width: 100%;
        padding: 15px 15px 15px 30px;
        border: none;
        border-radius: 999px;
        background: var(--color-ink, #10241a);
        color: #fff;
        font-family: var(--font-inter);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: background .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
    }

    .authx-section .authx__submit:hover{
        background: linear-gradient(120deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        transform: translateY(-3px);
        box-shadow: 0 14px 34px rgba(82, 183, 136, .32);
    }

    .authx-section .authx__submit-ico{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #fff;
        color: var(--color-ink, #10241a);
        font-size: 12px;
        transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    }
    .authx-section .authx__submit:hover .authx__submit-ico{
        transform: translateX(3px);
    }

    /* ---------- Divider + switch ---------- */
    .authx__divider{
        position: relative;
        text-align: center;
        margin: 26px 0 18px;
    }

    .authx__divider::before{
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--color-stone, #cbe8d7);
    }

    .authx__divider span{
        position: relative;
        padding: 0 14px;
        background: #fff;
        font-family: var(--font-inter);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--color-graphite, #6e8b7c);
    }

    .authx__switch{
        text-align: center;
        font-family: var(--font-inter);
        font-size: 14.5px;
        color: var(--color-pencil, #3d5a4b);
        margin: 0;
    }

    .authx__switch a{
        font-weight: 700;
        color: var(--brand-purple, #2d6a4f);
        text-decoration: none;
        transition: color .25s ease;
    }
    .authx__switch a:hover{
        color: var(--brand-purple-dark, #1b4332);
        text-decoration: underline;
    }

    /* ---------- Points strip below the card ---------- */
    .authx__points{
        list-style: none;
        margin: 34px 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .authx__point{
        padding: 20px 18px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .045);
        transition: background-color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
    }

    .authx__point:hover{
        background: rgba(255, 255, 255, .08);
        border-color: rgba(149, 213, 178, .3);
        transform: translateY(-4px);
    }

    .authx__point-mark{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 32px;
        padding: 0 9px;
        border-radius: 11px;
        background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        color: #fff;
        font-family: var(--font-inter);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
    }

    .authx__point-title{
        display: block;
        margin-top: 14px;
        font-family: var(--font-graphik);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: #fff;
    }

    .authx__point-desc{
        display: block;
        margin-top: 6px;
        font-family: var(--font-inter);
        font-size: 13px;
        line-height: 1.6;
        color: rgba(255, 255, 255, .5);
    }

    /* ---------- Brand footer ---------- */
    .authx__brand{
        margin-top: 28px;
        text-align: center;
    }

    .authx__brand-name{
        display: block;
        font-family: var(--font-graphik);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: rgba(255, 255, 255, .82);
    }

    .authx__brand-tagline{
        display: block;
        margin-top: 3px;
        font-family: var(--font-inter);
        font-size: 12.5px;
        color: rgba(255, 255, 255, .42);
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 767px){
        .authx__card{
            padding: 30px 24px 26px;
            border-radius: 22px;
        }
        .authx__row{
            grid-template-columns: 1fr;
            gap: 0;
        }
        .authx__points{
            grid-template-columns: 1fr;
            gap: 12px;
        }
        .authx__point{
            padding: 16px 16px;
        }
        .authx__head{
            margin-bottom: 26px;
        }
        .authx__badge{
            width: 56px;
            height: 56px;
            border-radius: 18px;
            font-size: 20px;
        }
    }

    @media (max-width: 575px){
        .authx__captcha{
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }
        .authx__captcha-img{
            align-self: flex-start;
        }
        .authx__card-title{
            font-size: 21px;
        }
        .authx__lede{
            font-size: 14.5px;
        }
    }

    @media (prefers-reduced-motion: reduce){
        .authx__control,
        .authx__control::after,
        .authx__label,
        .authx__eye,
        .authx__submit,
        .authx__submit-ico,
        .authx__point{
            transition: none;
        }
    }

/* ===================== page-index ===================== */

    /* =========================================
       ARTIFY HERO — Arch Layout (Elegant Portrait)
       ========================================= */

    .artify-hero--arch {
        position: relative;
        background:
            radial-gradient(120% 120% at 85% 30%, #f3ecdd 0%, #efe6d4 45%, #ece2ce 100%) !important;
        padding: 96px 0 88px;
        overflow: hidden;
    }
    .artify-hero--arch__container {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        align-items: center;
        gap: 56px;
    }

    /* Decorative botanical corners */
    .artify-hero--arch__leaf {
        position: absolute;
        z-index: 1;
        pointer-events: none;
        opacity: 0.5;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .artify-hero--arch__leaf--left {
        left: -30px;
        bottom: -20px;
        width: 260px;
        height: 340px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260' fill='none' stroke='%23c9b98f' stroke-width='1.1'%3E%3Cpath d='M40 260 C40 180 55 110 110 40'/%3E%3Cpath d='M78 150 C40 140 20 160 8 190 C48 196 74 182 78 150 Z'/%3E%3Cpath d='M92 110 C58 96 34 110 20 138 C60 150 88 140 92 110 Z'/%3E%3Cpath d='M104 74 C74 58 48 70 34 96 C72 112 100 104 104 74 Z'/%3E%3Cpath d='M96 132 C126 120 150 132 164 158 C126 172 100 162 96 132 Z'/%3E%3Cpath d='M110 92 C138 78 162 88 178 112 C142 128 116 120 110 92 Z'/%3E%3C/svg%3E");
    }
    .artify-hero--arch__leaf--right {
        right: 24px;
        top: 40px;
        width: 200px;
        height: 240px;
        opacity: 0.4;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 220' fill='none' stroke='%23c9b98f' stroke-width='1.1'%3E%3Ccircle cx='118' cy='58' r='46'/%3E%3Ccircle cx='118' cy='58' r='20'/%3E%3Cpath d='M118 12 L118 104 M72 58 L164 58 M86 26 L150 90 M150 26 L86 90'/%3E%3Cpath d='M60 220 C70 170 90 140 130 118'/%3E%3Cpath d='M92 176 C70 168 54 180 46 200 C74 206 90 196 92 176 Z'/%3E%3C/svg%3E");
    }

    .artify-hero--arch__left {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        padding-left: 8px;
    }

    /* Headline */
    .artify-hero--arch__title {
        margin: 0 0 26px;
        line-height: 0.95;
    }
    .artify-hero--arch__title-serif {
        display: block;
        font-family: 'Playfair Display', Georgia, serif;
        font-weight: 500;
        font-size: clamp(44px, 6.4vw, 96px);
        letter-spacing: -0.01em;
        color: var(--brand-black-soft);
    }
    .artify-hero--arch__title-script {
        display: block;
        font-family: 'Great Vibes', cursive;
        font-weight: 400;
        font-size: clamp(52px, 8vw, 118px);
        line-height: 0.9;
        color: var(--brand-blue-dark);
        margin-top: -4px;
    }

    /* Tagline with rule */
    .artify-hero--arch__tagline {
        display: flex;
        align-items: center;
        gap: 18px;
        margin: 6px 0 34px;
    }
    .artify-hero--arch__rule {
        width: 96px;
        height: 1px;
        background: #7b7566;
        flex-shrink: 0;
    }
    .artify-hero--arch__tagline-text {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: clamp(16px, 1.6vw, 21px);
        font-style: italic;
        color: #3f3b33;
        letter-spacing: 0.01em;
    }

    /* Play + description */
    .artify-hero--arch__intro {
        margin-bottom: 34px;
        max-width: 520px;
    }
    .artify-hero--arch__desc {
        margin: 0;
        font-size: clamp(15px, 1.4vw, 17px);
        line-height: 1.75;
        color: #625c50;
        font-weight: 450;
    }

    /* CTA buttons */
    .artify-hero--arch__buttons {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }
    .artify-hero--arch__btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 32px;
        border-radius: 50px;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: 1.5px solid transparent;
        transition: all 0.25s ease;
        white-space: nowrap;
    }
    .artify-hero--arch__btn--primary {
        background: var(--brand-black-soft);
        color: #f3ecdd;
        border-color: var(--brand-black-soft);
    }
    .artify-hero--arch__btn--primary:hover {
        background: var(--brand-blue-dark);
        border-color: var(--brand-blue-dark);
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 10px 26px rgba(116, 198, 157, 0.35);
    }
    .artify-hero--arch__btn--secondary {
        background: transparent;
        color: #3f3b33;
        border-color: #b8ab8c;
    }
    .artify-hero--arch__btn--secondary:hover {
        border-color: var(--brand-black-soft);
        color: var(--brand-black-soft);
        transform: translateY(-3px);
    }

    /* Arched portrait */
    .artify-hero--arch__right {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .artify-hero--arch__frame {
        position: relative;
        width: 100%;
        max-width: 500px;
        aspect-ratio: 5 / 6.4;
        border-radius: 260px 260px 18px 18px;
        overflow: hidden;
        background: #ddd3bf;
        box-shadow:
            0 30px 70px rgba(13, 13, 18, 0.22),
            0 0 0 12px rgba(255, 255, 255, 0.5);
    }
    .artify-hero--arch__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .artify-hero--arch__frame:hover .artify-hero--arch__img {
        transform: scale(1.04);
    }

    @media (max-width: 992px) {
        .artify-hero--arch { padding: 72px 0 72px; }
        .artify-hero--arch__container {
            grid-template-columns: 1fr;
            gap: 48px;
            text-align: center;
        }
        .artify-hero--arch__left { align-items: center; padding-left: 0; }
        .artify-hero--arch__tagline { justify-content: center; }
        .artify-hero--arch__intro { flex-direction: column; text-align: center; gap: 18px; }
        .artify-hero--arch__buttons { justify-content: center; }
        .artify-hero--arch__right { order: -1; }
        .artify-hero--arch__frame { max-width: 380px; }
        .artify-hero--arch__leaf--right { display: none; }
    }
    @media (max-width: 640px) {
        .artify-hero--arch { padding: 48px 0 56px; }
        .artify-hero--arch__frame { max-width: 300px; border-radius: 170px 170px 14px 14px; }
        .artify-hero--arch__rule { width: 56px; }
        .artify-hero--arch__leaf--left { width: 150px; height: 200px; opacity: 0.35; }
        .artify-hero--arch__buttons { width: 100%; justify-content: center; }
    }

    /* --- Carousel: stacked fade slides + dots --- */
    .artify-hero--arch__stage {
        position: relative;
        z-index: 2;
    }
    .artify-hero--arch__slides {
        display: grid;
    }
    .artify-hero--arch__slide {
        grid-area: 1 / 1;           /* stack every slide in the same cell */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(12px);
        transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s linear 0.7s;
    }
    .artify-hero--arch__slide.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s;
    }
    /* Gentle staggered entrance for the active slide's content */
    .artify-hero--arch__slide.is-active .artify-hero--arch__title { animation: heroFadeUp 0.7s 0.05s both; }
    .artify-hero--arch__slide.is-active .artify-hero--arch__tagline { animation: heroFadeUp 0.7s 0.15s both; }
    .artify-hero--arch__slide.is-active .artify-hero--arch__intro { animation: heroFadeUp 0.7s 0.25s both; }
    .artify-hero--arch__slide.is-active .artify-hero--arch__buttons { animation: heroFadeUp 0.7s 0.35s both; }
    .artify-hero--arch__slide.is-active .artify-hero--arch__frame { animation: heroFadeUp 0.8s 0.1s both; }
    @keyframes heroFadeUp {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .artify-hero--arch__dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 40px;
    }
    .artify-hero--arch__dot {
        width: 10px;
        height: 10px;
        padding: 0;
        border-radius: 50%;
        border: 1.5px solid #a99c7e;
        background: transparent;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .artify-hero--arch__dot:hover { border-color: var(--brand-blue-dark); transform: scale(1.15); }
    .artify-hero--arch__dot.is-active {
        width: 30px;
        border-radius: 6px;
        background: var(--brand-blue-dark);
        border-color: var(--brand-blue-dark);
    }
    @media (prefers-reduced-motion: reduce) {
        .artify-hero--arch__slide,
        .artify-hero--arch__slide.is-active * { animation: none !important; transition: opacity 0.3s ease !important; }
    }
    @media (max-width: 992px) {
        .artify-hero--arch__dots { margin-top: 28px; }
    }

    /* =========================================
       ARTIFY HERO — Background Image Layout
       ========================================= */

    .artify-hero--bg {
        position: relative;
        overflow: hidden;
        padding: 0 !important;
    }
    .artify-hero--bg__slides {
        display: grid;
    }
    .artify-hero--bg__slide {
        grid-area: 1 / 1;
        position: relative;
        min-height: 760px;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: scale(1.02);
        transition: opacity 0.9s ease, transform 0.9s ease, visibility 0s linear 0.9s;
    }
    .artify-hero--bg__slide.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: scale(1);
        transition: opacity 0.9s ease, transform 0.9s ease, visibility 0s;
    }
    /* Left-to-right gradient overlay — text-safe on left side */
    .artify-hero--bg__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            100deg,
            rgba(8, 8, 12, 0.78) 0%,
            rgba(8, 8, 12, 0.60) 42%,
            rgba(8, 8, 12, 0.18) 70%,
            rgba(8, 8, 12, 0.04) 100%
        );
        z-index: 1;
    }
    .artify-hero--bg__container {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        padding-top: 88px;
        padding-bottom: 88px;
    }
    /* Content panel — left 55% max */
    .artify-hero--bg__content {
        max-width: 620px;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    /* Badge row */
    .artify-hero--bg__badge {
        display: none;
        align-items: center;
        gap: 14px;
        margin-bottom: 22px;
    }
    .artify-hero--bg__badge-line {
        display: block;
        width: 48px;
        height: 2px;
        background: var(--brand-blue);
        flex-shrink: 0;
        border-radius: 2px;
    }
    .artify-hero--bg__badge-text {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: clamp(14px, 1.4vw, 18px);
        font-style: italic;
        letter-spacing: 0.04em;
        color: var(--brand-blue);
        text-transform: uppercase;
    }
    /* Headline */
    .artify-hero--bg__title {
        margin: 0 0 28px;
        line-height: 1;
    }
    .artify-hero--bg__title-main {
        display: block;
        font-family: 'Playfair Display', Georgia, serif;
        font-weight: 700;
        font-size: clamp(40px, 6vw, 88px);
        letter-spacing: -0.02em;
        color: #ffffff;
        line-height: 1;
    }
    .artify-hero--bg__title-accent {
        display: block;
        font-family: 'Great Vibes', cursive;
        font-weight: 400;
        font-size: clamp(48px, 7.5vw, 108px);
        line-height: 0.9;
        color: var(--brand-blue);
        margin-top: -2px;
    }
    /* Description */
    .artify-hero--bg__desc {
        margin: 0 0 36px;
        font-size: clamp(14px, 1.35vw, 17px);
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.82);
        font-weight: 400;
        max-width: 560px;
    }
    /* CTA Buttons */
    .artify-hero--bg__buttons {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }
    .artify-hero--bg__btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 34px;
        border-radius: 50px;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: 1.5px solid transparent;
        transition: all 0.28s ease;
        white-space: nowrap;
        letter-spacing: 0.02em;
    }
    .artify-hero--bg__btn--primary {
        background: var(--brand-purple);
        color: #ffffff;
        border-color: var(--brand-purple);
    }
    .artify-hero--bg__btn--primary:hover {
        background: var(--brand-purple);
        border-color: var(--brand-purple);
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 12px 30px var(--brand-purple-glow);
    }
    .artify-hero--bg__btn--secondary {
        background: transparent;
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.55);
    }
    .artify-hero--bg__btn--secondary:hover {
        border-color: var(--brand-blue);
        color: var(--brand-blue);
        transform: translateY(-3px);
    }
    /* Navigation dots */
    .artify-hero--bg__dots {
        position: absolute;
        bottom: 28px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 10;
    }
    .artify-hero--bg__dot {
        width: 10px;
        height: 10px;
        padding: 0;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.6);
        background: transparent;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .artify-hero--bg__dot:hover {
        border-color: var(--brand-blue);
        transform: scale(1.15);
    }
    .artify-hero--bg__dot.is-active {
        width: 30px;
        border-radius: 6px;
        background: var(--brand-blue);
        border-color: var(--brand-blue);
    }
    /* Entrance animations for active slide */
    .artify-hero--bg__slide.is-active .artify-hero--bg__badge  { animation: bgHeroUp 0.7s 0.1s  both; }
    .artify-hero--bg__slide.is-active .artify-hero--bg__title  { animation: bgHeroUp 0.7s 0.2s  both; }
    .artify-hero--bg__slide.is-active .artify-hero--bg__desc   { animation: bgHeroUp 0.7s 0.32s both; }
    .artify-hero--bg__slide.is-active .artify-hero--bg__buttons { animation: bgHeroUp 0.7s 0.44s both; }
    @keyframes bgHeroUp {
        from { opacity: 0; transform: translateY(22px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    /* Responsive */
    @media (max-width: 992px) {
        .artify-hero--bg__slide { min-height: 520px; }
        .artify-hero--bg__container { padding-top: 72px; padding-bottom: 72px; }
        .artify-hero--bg__content { max-width: 90%; }
        .artify-hero--bg__overlay {
            background: linear-gradient(
                180deg,
                rgba(8, 8, 12, 0.70) 0%,
                rgba(8, 8, 12, 0.55) 60%,
                rgba(8, 8, 12, 0.40) 100%
            );
        }
    }
    @media (max-width: 640px) {
        .artify-hero--bg__slide { min-height: 440px; }
        .artify-hero--bg__container { padding-top: 56px; padding-bottom: 72px; }
        .artify-hero--bg__content { max-width: 100%; }
        .artify-hero--bg__buttons { flex-direction: column; align-items: flex-start; }
        .artify-hero--bg__btn { width: 100%; justify-content: center; }
    }
    @media (prefers-reduced-motion: reduce) {
        .artify-hero--bg__slide,
        .artify-hero--bg__slide.is-active * { animation: none !important; transition: opacity 0.3s ease !important; }
    }

    /* =========================================
       ARTIFY HERO — Professional Gallery
       ========================================= */
    .artify-hero{
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0px auto;
    background: transparent !important;
    }
    .artify-hero__bg{
        position:absolute; inset:0; z-index:0;
        display: none;
        background-image:radial-gradient(ellipse 800px 600px at 20% 0%, rgba(220,234,255,.4) 0%, transparent 40%),
                          radial-gradient(ellipse 600px 700px at 80% 100%, rgba(227,68,50,.25) 0%, transparent 45%);
        pointer-events:none;
    }

    .artify-hero__container{
        position: relative;
    z-index: 1;
    /* overflow: hidden; */
    /* display: grid; */
    /* grid-template-columns: 1fr 1.2fr; */
    gap: 64px;
    align-items: start;
    margin: 0px auto;
    padding: 0px 0 0px 0;
    border-radius: 36px;
    /* max-width: 100%; */
    }
.artify-hero__container video {
    width: 100%;
    height: auto;
    border-radius: 36px;
}
    /* Left: Content */
.artify-hero__content {
    padding-top: 20px;
    position: absolute;
    z-index: 8;
    top: 0px;
    text-align: center;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.artify-hero__content::before {
    background: rgba(255, 255, 255, .7);
    position: absolute;
    z-index: -1;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
    .artify-hero__badge{
        display:inline-flex; align-items:center; gap:8px; padding:8px 16px; margin-bottom:28px;
        border-radius:999px; background:var(--color-paper,#fff); border:1px solid var(--color-stone,var(--color-stone));
        font-size:13px; font-weight:var(--font-weight-semibold,600); color:var(--color-ink,var(--brand-black-soft));
        box-shadow:0 1px 3px rgba(37,34,30,.05);
    }
    .artify-hero__badge i{ color:var(--color-ember-red,var(--brand-purple)); }

    .artify-hero__title{
        font-family:var(--font-graphik); font-size:clamp(36px,5vw,52px);
        line-height:1.1; font-weight:var(--font-weight-bold,700); letter-spacing:-.02em;
        color:var(--color-ink,var(--brand-black-soft)); margin:0 0 16px;
    }

    .artify-hero__subtitle{
        font-family:var(--font-inter); font-size:clamp(16px,1.8vw,21px); line-height:1.6;
        color:var(--color-pencil,var(--color-pencil)); margin:0 0 36px; max-width:550px; font-weight:var(--font-weight-w475,475);
    }

    .artify-hero__buttons{
        display:flex; gap:14px; margin-bottom:48px; flex-wrap:wrap;
    }
    .artify-hero__btn{
        display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:8px;
        font-family:var(--font-inter); font-size:16px; font-weight:var(--font-weight-semibold,600);
        text-decoration:none; cursor:pointer; border:none; transition:all .25s cubic-bezier(.34,1.56,.64,1);
    }
    .artify-hero__btn--primary{
        background:var(--color-ember-red,var(--brand-purple)); color:#fff; box-shadow:0 8px 24px rgba(227,68,50,.3);
    }
    .artify-hero__btn--primary:hover{
        background:var(--color-deep-ember,var(--brand-purple-dark)); transform:translateY(-3px); box-shadow:0 12px 32px rgba(227,68,50,.4);
        color: #ffffff;
    }
    .artify-hero__btn--secondary{
        background:#fff; color:var(--color-ink,var(--brand-black-soft)); border:1.5px solid var(--color-stone,var(--color-stone));
        box-shadow:0 1px 3px rgba(37,34,30,.05);
    }
    .artify-hero__btn--secondary:hover{
        border-color:var(--color-ink,var(--brand-black-soft)); background:var(--color-paper,#fff); transform:translateY(-3px);
    }

    .artify-hero__meta{
        display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    }
    .artify-hero__avatars{
        display:flex;
    }
    .artify-hero__avatars img{
        width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid #fff;
        box-shadow:0 2px 8px rgba(37,34,30,.12); margin-right:-12px;
    }
    .artify-hero__avatars img:first-child{ margin-right:-8px; }
    .artify-hero__text{
        font-family:var(--font-inter); font-size:14px; color:var(--color-ink,var(--brand-black-soft)); line-height:1.4;
    }
    .artify-hero__text strong{ font-weight:var(--font-weight-semibold,600); }

    /* Right: Gallery */
    .artify-hero__gallery{}

    .artify-hero__grid{
        display:grid; grid-template-columns:2fr 1.4fr 1fr; gap:14px;
    }

    .artify-hero__card{
        position:relative; border-radius:12px; overflow:hidden; cursor:pointer; background:#f5f5f5;
        box-shadow:0 8px 24px rgba(37,34,30,.1); transition:all .35s cubic-bezier(.34,1.56,.64,1);
        border:1px solid rgba(255,255,255,.6);
    }
    .artify-hero__card:hover{
        transform:translateY(-6px); box-shadow:0 14px 40px rgba(37,34,30,.15);
    }

    .artify-hero__card img,
    .artify-hero__card video{
        width:100%; height:100%; object-fit:cover; object-position:center; display:block;
    }

    .artify-hero__play{
        position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
        width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.95);
        display:flex; align-items:center; justify-content:center; font-size:24px;
        color:var(--color-ember-red,var(--brand-purple)); z-index:2; box-shadow:0 8px 24px rgba(0,0,0,.25);
        transition:all .35s cubic-bezier(.34,1.56,.64,1);
    }
    .artify-hero__card--large:hover .artify-hero__play{
        transform:translate(-50%,-50%) scale(1.2); background:rgba(227,68,50,.95); color:#fff;
    }

    /* Responsive */
    @media (max-width: 1200px){
        .artify-hero__container{ grid-template-columns:1fr; gap:48px; }
    }
    @media (max-width: 768px){
        .artify-hero{ padding:60px 0 80px; }
        .artify-hero__title{ font-size:32px; margin-bottom:12px; }
        .artify-hero__subtitle{ font-size:16px; margin-bottom:28px; }
        .artify-hero__buttons{ flex-wrap:wrap; margin-bottom:36px; }
        .artify-hero__btn{ width:100%; justify-content:center; }
        .artify-hero__grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
    }
    @media (max-width: 640px){
        .artify-hero__title{ font-size:26px; }
        .artify-hero__subtitle{ font-size:15px; margin-bottom:20px; }
        .artify-hero__badge{ margin-bottom:20px; }
        .artify-hero__grid{ grid-template-columns:1fr; gap:10px; }
        .artify-hero__play{ width:50px; height:50px; font-size:18px; }
    }

    /* =========================================
       REDESIGNED LEARNING CREDITS PROGRESSION
       ========================================= */

    .page-index .points-topup-section{
        /* background-color: var(--color-paper, var(--color-paper)) !important; */
        border-top: 0px solid var(--color-stone, var(--color-stone));
        font-family: var(--font-inter), sans-serif;
    }

    /* Benefits Row */
    .page-index .learning-benefit-card{
        background: transparent;
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: var(--radius-lg, 12px);
        padding: 18px 16px;
        text-align: center;
        height: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .page-index .learning-benefit-card:hover{
        transform: translateY(-2px);
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-index .benefit-emoji{
        font-size: 26px;
        display: block;
        margin-bottom: 10px;
    }
    .page-index .benefit-title{
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, var(--brand-black-soft));
        margin: 0;
    }

    /* Pathway Card */
    .page-index .learning-pathway-card{
        background: transparent;
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: var(--radius-xl, 20px);
        padding: 32px;
    }
    .page-index .pathway-header{
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .page-index .header-icon-modern{
        width: 46px;
        height: 46px;
        background: var(--color-paper, var(--color-paper));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--color-ember-red, var(--brand-purple));
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-index .pathway-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
        margin: 0;
    }
    .page-index .pathway-subtitle{
        font-size: 13px;
        color: var(--color-pencil, var(--color-pencil));
        margin: 4px 0 0 0;
    }

    /* Calculator Redesign */
    .page-index .luxury-calculator-wrapper{
        background: transparent;
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: var(--radius-xl, 20px);
        padding: 32px;
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-index .calc-header-premium{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .page-index .calc-title-premium{
        font-family: var(--font-graphik), sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
        margin: 0;
    }
    .page-index .calc-tagline{
        font-size: 13px;
        color: var(--color-pencil, var(--color-pencil));
        margin: 4px 0 0 0;
    }
    .page-index .calc-currency-badge{
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: transparent;
        border: 1px solid var(--color-stone, var(--color-stone));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
    }

    /* Calculator inputs styling */
    .page-index .input-label-premium{
        font-size: 13px;
        font-weight: 600;
        color: var(--color-pencil, var(--color-pencil));
        margin-bottom: 8px;
        display: block;
    }
    .page-index .premium-amount-input-wrapper{
        position: relative;
        display: flex;
        align-items: center;
    }
    .page-index .premium-amount-input{
        width: 100%;
        background: transparent !important;
        border: 1px solid var(--color-stone, var(--color-stone)) !important;
        border-radius: var(--radius-buttons, 10px) !important;
        padding: 14px 44px 14px 20px !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        color: var(--color-ink, var(--brand-black-soft)) !important;
        transition: all 0.25s ease;
    }
    .page-index .premium-amount-input:focus{
        background: var(--color-paper, var(--color-paper)) !important;
        border-color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
        outline: none;
        box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.08);
    }
    .page-index .input-currency{
        position: absolute;
        right: 20px;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-graphite, var(--color-graphite));
        pointer-events: none;
    }

    /* Breakdown card styling */
    .page-index .points-breakdown-card{
        background: transparent;
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 12px;
        padding: 20px;
    }
    .page-index .breakdown-row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }
    .page-index .breakdown-row:last-child{
        margin-bottom: 0;
    }
    .page-index .breakdown-label{
        font-size: 13px;
        font-weight: 500;
        color: var(--color-pencil, var(--color-pencil));
    }
    .page-index .breakdown-value{
        font-size: 14px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
    }
    .page-index .bonus-badge{
        padding: 3px 8px;
        background: transparent;
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 6px;
        font-size: 12px;
        color: var(--color-ember-red, var(--brand-purple)) !important;
    }
    .page-index .breakdown-divider{
        height: 1px;
        background: var(--color-stone, var(--color-stone));
        margin: 16px 0;
    }
    .page-index .breakdown-total .breakdown-label{
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
    }
    .page-index .breakdown-value-total{
        font-size: 20px;
        font-weight: 800;
        color: var(--color-ember-red, var(--brand-purple));
    }

    /* Large display */
    .page-index .points-display-premium{
        background: transparent;
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 12px;
        padding: 24px;
        text-align: center;
        box-shadow: inset 0 2px 4px rgba(37,34,30,0.02);
    }
    .page-index .points-number{
        display: block;
        font-family: var(--font-graphik), sans-serif;
        font-size: 40px;
        font-weight: 800;
        color: var(--color-ink, var(--brand-black-soft));
        line-height: 1.1;
        margin-bottom: 4px;
    }
    .page-index .points-unit{
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-graphite, var(--color-graphite));
    }

    /* Buttons & Indicators */
    .page-index .btn-premium-checkout{
        background: var(--color-ember-red, var(--brand-purple));
        color: var(--color-paper, var(--color-paper));
        border: none;
        border-radius: var(--radius-buttons, 10px);
        padding: 14px 28px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: all 0.25s cubic-bezier(.34,1.56,.64,1);
        box-shadow: 0 4px 14px rgba(82, 183, 136, 0.2);
    }
    .page-index .btn-premium-checkout:hover{
        background: var(--color-deep-ember, var(--brand-purple-dark));
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(82, 183, 136, 0.3);
    }
    .page-index .btn-premium-checkout:active{
        transform: translateY(1px);
    }
    .page-index .trust-indicator{
        font-size: 12px;
        color: var(--color-pencil, var(--color-pencil));
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .page-index .trust-indicator i{
        color: var(--color-cobalt-link, var(--brand-blue));
    }

    /* Milestone reward card */
    .page-index .reward-milestone-card{
        background: var(--color-cream, var(--color-cream));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 16px;
        padding: 24px 20px;
        height: 100%;
        transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-index .reward-milestone-card:hover{
        transform: translateY(-4px) scale(1.02);
        box-shadow: var(--shadow-lg, 0 12px 28px rgba(37,34,30,0.08));
        border-color: var(--color-deep-ember, var(--brand-purple-dark));
    }
    .page-index .reward-milestone-card--popular{
        background: var(--color-paper, var(--color-paper));
        border-color: var(--color-ember-red, var(--brand-purple));
        border-width: 2px;
        position: relative;
    }
    .page-index .reward-milestone-card--popular::after{
        content: 'RECOMMENDED';
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--color-ember-red, var(--brand-purple));
        color: var(--color-paper, var(--color-paper));
        font-size: 9px;
        font-weight: 800;
        padding: 3px 10px;
        border-radius: 999px;
        letter-spacing: 0.06em;
    }
    .page-index .milestone-credits{
        font-size: 12px;
        font-weight: 800;
        color: var(--color-ember-red, var(--brand-purple));
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 8px;
    }
    .page-index .milestone-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
        margin: 0 0 10px 0;
    }
    .page-index .milestone-desc{
        font-size: 13px;
        color: var(--color-pencil, var(--color-pencil));
        line-height: 1.5;
        margin: 0 0 16px 0;
    }
    .page-index .milestone-lock-status{
        font-size: 12px;
        font-weight: 600;
        color: var(--color-graphite, var(--color-graphite));
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: auto;
    }
    .page-index .milestone-lock-status i{
        font-size: 11px;
    }
    .page-index .reward-milestone-card--popular .milestone-lock-status{
        color: var(--color-ember-red, var(--brand-purple));
    }

    /* Responsive */
    @media (max-width: 991px) {
        .page-index .learning-pathway-card, .page-index .luxury-calculator-wrapper{
            padding: 24px;
        }
    }
    @media (max-width: 768px) {
        .page-index .visual-progression-timeline::before{
            left: 21px;
        }
        .page-index .step-badge{
            width: 20px;
            height: 20px;
            font-size: 10px;
        }
    }

    /* =========================================
       HERO — modern creative-studio redesign
       ========================================= */
    .page-index .af-hero{
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background:
            radial-gradient(60% 50% at 85% 8%, rgba(220,234,255,0.55) 0%, transparent 60%),
            radial-gradient(55% 55% at 8% 92%, rgba(240,246,223,0.70) 0%, transparent 60%),
            linear-gradient(180deg, #fffdfb 0%, var(--color-cream) 100%);
        padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 9vw, 120px);
    }

    /* Animated background */
    .page-index .af-hero__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
    .page-index .af-hero__blob{
        position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; will-change:transform;
    }
    .page-index .af-hero__blob--ember{
        width:440px; height:440px; top:-130px; right:-70px;
        background:radial-gradient(circle, rgba(227,68,50,.45), transparent 70%);
        animation: idHeroFloat 16s ease-in-out infinite;
    }
    .page-index .af-hero__blob--teal{
        width:380px; height:380px; bottom:-150px; left:-90px;
        background:radial-gradient(circle, rgba(73,125,126,.40), transparent 70%);
        animation: idHeroFloat 20s ease-in-out infinite reverse;
    }
    .page-index .af-hero__blob--sky{
        width:320px; height:320px; top:42%; left:46%;
        background:radial-gradient(circle, rgba(15,102,174,.22), transparent 70%);
        animation: idHeroFloat 24s ease-in-out infinite;
    }
    .page-index .af-hero__grid{
        position:absolute; inset:0;
        background-image: radial-gradient(rgba(37,34,30,.05) 1px, transparent 1px);
        background-size: 26px 26px;
        -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 75%);
                mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 75%);
        opacity:.7;
    }
    @keyframes idHeroFloat{
        0%,100%{ transform:translate(0,0) scale(1); }
        33%{ transform:translate(30px,-40px) scale(1.06); }
        66%{ transform:translate(-25px,25px) scale(.96); }
    }

    /* Layout */
    .page-index .af-hero__inner{
        position:relative; z-index:1;
        display:grid; grid-template-columns:1.05fr 1fr;
        align-items:center; gap:clamp(32px,5vw,72px);
    }

    /* Copy */
    .page-index .af-hero__eyebrow{
        display:inline-flex; align-items:center; gap:9px;
        padding:7px 15px 7px 12px; border-radius:999px;
        background:var(--color-paper,var(--color-paper)); border:1px solid var(--color-stone,var(--color-stone));
        box-shadow:var(--shadow-subtle,0 1px 0 rgba(37,34,30,.04));
        font-family:var(--font-inter); font-size:13px; font-weight:var(--font-weight-semibold,600);
        letter-spacing:.02em; color:var(--color-ink,var(--brand-black-soft)); margin-bottom:22px;
    }
    .page-index .af-hero__eyebrow i{ color:var(--color-ember-red,var(--brand-purple)); }
    .page-index .af-hero__eyebrow-dot{
        width:8px; height:8px; border-radius:50%; background:var(--color-ember-red,var(--brand-purple));
        box-shadow:0 0 0 0 rgba(227,68,50,.55); animation: idHeroPulse 1.8s infinite;
    }
    .page-index .af-hero__title{
        font-family:var(--font-graphik); font-size:clamp(36px,5.2vw,58px);
        line-height:1.07; font-weight:var(--font-weight-bold,700); letter-spacing:-.025em;
        color:var(--color-ink,var(--brand-black-soft)); margin:0 0 20px;
    }
    .page-index .af-hero__subtitle{
        font-family:var(--font-inter); font-size:clamp(16px,1.5vw,19px); line-height:1.6;
        color:var(--color-pencil,var(--color-pencil)); max-width:520px; margin:0 0 28px;
    }

    /* Actions */
    .page-index .af-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px; }
    .page-index .af-hero__btn{
        display:inline-flex; align-items:center; gap:10px; padding:14px 28px;
        border-radius:var(--radius-buttons,8px); font-family:var(--font-inter); font-size:16px;
        font-weight:var(--font-weight-semibold,600); text-decoration:none; cursor:pointer;
        transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .25s ease, color .25s ease;
    }
    .page-index .af-hero__btn--primary{
        background:var(--color-ember-red,var(--brand-purple)); color:var(--color-paper,#fff);
        box-shadow:0 8px 22px rgba(227,68,50,.30);
    }
    .page-index .af-hero__btn--primary:hover{
        background:var(--color-deep-ember,var(--brand-purple-dark)); color:var(--color-paper,#fff);
        transform:translateY(-2px); box-shadow:0 12px 28px rgba(227,68,50,.40);
    }
    .page-index .af-hero__btn--primary i{ transition:transform .25s ease; }
    .page-index .af-hero__btn--primary:hover i{ transform:translateX(4px); }
    .page-index .af-hero__btn--ghost{
        background:var(--color-paper,#fff); color:var(--color-ink,var(--brand-black-soft));
        border:1px solid var(--color-stone,var(--color-stone)); box-shadow:var(--shadow-subtle,0 1px 0 rgba(37,34,30,.04));
    }
    .page-index .af-hero__btn--ghost:hover{ border-color:var(--color-ink,var(--brand-black-soft)); transform:translateY(-2px); }
    .page-index .af-hero__btn-play{
        display:inline-flex; align-items:center; justify-content:center;
        width:26px; height:26px; border-radius:50%; background:var(--color-ember-red,var(--brand-purple));
        color:#fff; font-size:10px;
    }

    /* Trust row */
    .page-index .af-hero__trust{ display:flex; align-items:center; gap:14px; margin-bottom:26px; flex-wrap:wrap; }
    .page-index .af-hero__avatars{ display:flex; }
    .page-index .af-hero__avatars img{
        width:42px; height:42px; border-radius:50%; object-fit:cover;
        border:2px solid var(--color-paper,#fff); margin-left:-12px; box-shadow:var(--shadow-subtle,0 1px 3px rgba(37,34,30,.1));
    }
    .page-index .af-hero__avatars img:first-child{ margin-left:0; }
    .page-index .af-hero__trust-meta{ display:flex; flex-direction:column; gap:2px; }
    .page-index .af-hero__stars{ color:#e8a020; font-size:13px; letter-spacing:2px; }
    .page-index .af-hero__trust-text{
        font-family:var(--font-inter); font-size:13px; font-weight:var(--font-weight-medium,500); color:var(--color-pencil,var(--color-pencil));
    }

    /* Disciplines — quick browse chips */
    .page-index .af-hero__disciplines{
        display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:26px;
    }
    .page-index .af-hero__disciplines-label{
        font-family:var(--font-inter); font-size:13px; font-weight:var(--font-weight-semibold,600);
        color:var(--color-pencil,var(--color-pencil)); letter-spacing:.02em;
    }
    .page-index .af-hero__chip{
        display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
        background:var(--color-paper,var(--color-paper)); border:1px solid var(--color-stone,var(--color-stone));
        font-family:var(--font-inter); font-size:13px; font-weight:var(--font-weight-medium,500);
        color:var(--color-ink,var(--brand-black-soft)); text-decoration:none;
        transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
    }
    .page-index .af-hero__chip i{ color:var(--color-ember-red,var(--brand-purple)); font-size:12px; }
    .page-index .af-hero__chip:hover{
        border-color:var(--color-ember-red,var(--brand-purple)); color:var(--color-deep-ember,var(--brand-purple-dark));
        background:#fff6f3; transform:translateY(-2px);
    }

    /* Tile discipline tag */
    .page-index .af-hero__tiletag{
        position:absolute; left:12px; bottom:12px; z-index:2;
        display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
        background:rgba(254,253,252,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
        font-family:var(--font-inter); font-size:11px; font-weight:var(--font-weight-semibold,600);
        color:var(--color-ink,var(--brand-black-soft)); box-shadow:var(--shadow-subtle,0 1px 3px rgba(37,34,30,.12));
    }
    .page-index .af-hero__tiletag i{ color:var(--color-ember-red,var(--brand-purple)); font-size:10px; }

    /* Media collage */
    .page-index .af-hero__media{ position:relative; }
    .page-index .af-hero__collage{
        display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr;
        gap:16px; align-items:stretch;
    }
    .page-index .af-hero__tile{
        position:relative; margin:0; overflow:hidden;
        border-radius:var(--radius-images,15px); background:var(--color-ink,var(--brand-black-soft));
        border:5px solid var(--color-paper,#fff); box-shadow:var(--shadow-lg,0 14px 40px rgba(37,34,30,.18));
    }
    .page-index .af-hero__tile img,
    .page-index .af-hero__tile video{
        width:100%; height:100%; object-fit:cover; display:block;
    }
    .page-index .af-hero__tile--video{
        grid-row:span 2; aspect-ratio:auto; z-index:1;
    }
    .page-index .af-hero__tile--a,
    .page-index .af-hero__tile--b{ aspect-ratio:4/3; }
    .page-index .af-hero__tile--a{ animation: idHeroTileFloat 14s ease-in-out infinite; }
    .page-index .af-hero__tile--b{ animation: idHeroTileFloat 17s ease-in-out infinite reverse; }

    /* Live tag */
    .page-index .af-hero__livetag{
        position:absolute; top:14px; left:14px; z-index:2;
        display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
        background:rgba(37,34,30,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
        color:#fff; font-family:var(--font-inter); font-size:12px; font-weight:var(--font-weight-semibold,600); letter-spacing:.02em;
    }
    .page-index .af-hero__live-dot{
        width:8px; height:8px; border-radius:50%; background:var(--color-ember-red,var(--brand-purple));
        box-shadow:0 0 0 0 rgba(227,68,50,.55); animation: idHeroPulse 1.8s infinite; flex:0 0 auto;
    }
    .page-index .af-hero__caption{
        position:absolute; left:0; right:0; bottom:0; z-index:2; padding:34px 16px 14px;
        background:linear-gradient(180deg, transparent, rgba(37,34,30,.72));
        color:#fff; font-family:var(--font-caecilia,Georgia,serif); font-size:14px; line-height:1.45;
    }

    /* Floating glass "live class" card */
    .page-index .af-hero__floatcard{
        position:absolute; left:-18px; bottom:34px; z-index:5;
        display:flex; align-items:center; gap:12px; padding:10px 16px 10px 10px;
        border-radius:var(--radius-lg,16px); background:rgba(254,253,252,.85);
        -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
        border:1px solid var(--color-stone,var(--color-stone)); box-shadow:var(--shadow-lg,0 14px 40px rgba(37,34,30,.18));
        animation: idHeroCardFloat 6s ease-in-out infinite;
    }
    .page-index .af-hero__floatcard-thumb{ width:46px; height:46px; border-radius:10px; overflow:hidden; flex:0 0 auto; }
    .page-index .af-hero__floatcard-thumb img{ width:100%; height:100%; object-fit:cover; }
    .page-index .af-hero__floatcard-body{ display:flex; flex-direction:column; }
    .page-index .af-hero__floatcard-body strong{
        font-family:var(--font-inter); font-size:14px; font-weight:var(--font-weight-semibold,600); color:var(--color-ink,var(--brand-black-soft));
    }
    .page-index .af-hero__floatcard-body span{
        display:inline-flex; align-items:center; gap:6px;
        font-family:var(--font-inter); font-size:12px; color:var(--color-pencil,var(--color-pencil)); margin-top:2px;
    }

    @keyframes idHeroPulse{
        0%{ box-shadow:0 0 0 0 rgba(227,68,50,.55); }
        70%{ box-shadow:0 0 0 8px rgba(227,68,50,0); }
        100%{ box-shadow:0 0 0 0 rgba(227,68,50,0); }
    }
    @keyframes idHeroTileFloat{
        0%,100%{ transform:translateY(0); }
        50%{ transform:translateY(-12px); }
    }
    @keyframes idHeroCardFloat{
        0%,100%{ transform:translateY(0); }
        50%{ transform:translateY(-9px); }
    }

    /* Responsive */
    @media (max-width: 991px){
        .page-index .af-hero__inner{ grid-template-columns:1fr; text-align:center; }
        .page-index .af-hero__content{ display:flex; flex-direction:column; align-items:center; }
        .page-index .af-hero__subtitle{ margin-left:auto; margin-right:auto; }
        .page-index .af-hero__actions,
        .page-index .af-hero__disciplines,
        .page-index .af-hero__trust{ justify-content:center; }
        .page-index .af-hero__media{ max-width:620px; margin:8px auto 0; }
        .page-index .af-hero__floatcard{ left:8px; }
    }
    @media (max-width: 575px){
        .page-index .af-hero__collage{ grid-template-columns:1fr 1fr; gap:12px; }
        .page-index .af-hero__tile--video{ grid-column:1 / -1; grid-row:auto; aspect-ratio:16/11; }
        .page-index .af-hero__tile--a,
        .page-index .af-hero__tile--b{ aspect-ratio:1/1; }
        .page-index .af-hero__floatcard{ left:50%; bottom:-22px; transform:translateX(-50%); padding:8px 14px 8px 8px; }
        .page-index .af-hero__floatcard-thumb{ width:40px; height:40px; }
    }
    @media (prefers-reduced-motion: reduce){
        .page-index .af-hero__blob,
        .page-index .af-hero__tile--a,
        .page-index .af-hero__tile--b,
        .page-index .af-hero__floatcard,
        .page-index .af-hero__live-dot,
        .page-index .af-hero__eyebrow-dot{ animation:none !important; }
    }

    /* =========================================
       BENTO CATEGORY GRID
       ========================================= */

    .page-index .modern-badge{
        display: inline-flex !important;
        align-items: center !important;
        font-family: var(--font-inter) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0.08em !important;
        padding: 6px 12px !important;
        border-radius: var(--radius-badges, 8px) !important;
        background-color: var(--color-mint-wash, var(--color-cream)) !important;
        color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
        border: 1px solid var(--color-stone, var(--color-stone)) !important;
        text-transform: uppercase !important;
        box-shadow: var(--shadow-subtle) !important;
        margin-bottom: 15px !important;
    }

    /* =========================================
       CATEGORY INDEX — dark hover-preview directory
       ========================================= */

    .page-index .category-index-section{
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(1100px 620px at 12% -12%, rgba(82, 183, 136, .28), transparent 64%),
            radial-gradient(900px 540px at 92% 112%, rgba(116, 198, 157, .22), transparent 62%),
            linear-gradient(160deg, #0b2018 0%, var(--brand-black-soft, #0b2018) 48%, #0a0f1a 100%) !important;
    }

    .page-index .cat-idx__aura{
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        opacity: .5;
    }
    .page-index .cat-idx__aura--one{
        width: 420px; height: 420px;
        top: -140px; left: -120px;
        background: var(--brand-purple, #2d6a4f);
    }
    .page-index .cat-idx__aura--two{
        width: 380px; height: 380px;
        bottom: -160px; right: -100px;
        background: var(--brand-blue, #52b788);
    }

    .page-index .category-index-section .auto-container{
        position: relative;
        z-index: 2;
    }

    /* ---------- Heading ---------- */
    .page-index .cat-idx__head{
        max-width: 720px;
        margin-bottom: 58px;
    }

    .page-index .cat-idx__eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 7px 16px 7px 12px;
        border-radius: 999px;
        border: 1px solid rgba(149, 213, 178, .28);
        background: rgba(82, 183, 136, .12);
        font-family: var(--font-inter);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--brand-purple-light, #95d5b2);
    }

    .page-index .cat-idx__eyebrow-dot{
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand-purple, #2d6a4f);
        box-shadow: 0 0 0 4px rgba(82, 183, 136, .22);
    }

    .page-index .cat-idx__title{
        font-family: var(--font-graphik);
        font-size: clamp(32px, 4vw, 50px);
        line-height: 1.08;
        letter-spacing: -.02em;
        font-weight: 700;
        color: #fff;
        margin: 20px 0 0;
    }

    .page-index .cat-idx__subtitle{
        font-family: var(--font-inter);
        font-size: 17px;
        line-height: 1.65;
        color: rgba(255, 255, 255, .58);
        margin: 16px 0 0;
        max-width: 560px;
    }

    /* ---------- Split layout ---------- */
    .page-index .cat-idx{
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: 56px;
        align-items: start;
    }

    /* ---------- Preview stage ---------- */
    .page-index .cat-idx__stage{
        position: sticky;
        top: 110px;
    }

    .page-index .cat-idx__frame{
        position: relative;
        border-radius: 26px;
        overflow: hidden;
        aspect-ratio: 4 / 5;
        background: #0b2018;
        box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
    }

    .page-index .cat-idx__slide{
        position: absolute;
        inset: 0;
        margin: 0;
        opacity: 0;
        transform: scale(1.08);
        transition: opacity .6s ease, transform 1.2s cubic-bezier(.22,.61,.36,1);
        will-change: opacity, transform;
    }

    .page-index .cat-idx__slide.is-active{
        opacity: 1;
        transform: scale(1);
    }

    .page-index .cat-idx__slide img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .page-index .cat-idx__slide-fallback{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
    }
    .page-index .cat-idx__slide-fallback i{
        font-size: 68px;
        color: rgba(255, 255, 255, .85);
    }

    .page-index .cat-idx__frame-veil{
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(8, 8, 14, .92) 4%, rgba(8, 8, 14, .35) 42%, rgba(8, 8, 14, .05) 72%);
        pointer-events: none;
    }

    .page-index .cat-idx__frame-ring{
        position: absolute;
        inset: 0;
        border-radius: 26px;
        border: 1px solid rgba(255, 255, 255, .12);
        pointer-events: none;
    }

    .page-index .cat-idx__caption{
        position: absolute;
        left: 26px;
        right: 26px;
        bottom: 26px;
        min-height: 62px;
    }

    .page-index .cat-idx__caption-item{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: baseline;
        gap: 12px;
        font-family: var(--font-graphik);
        font-size: 24px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -.01em;
        color: #fff;
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .45s ease, transform .45s ease;
    }

    .page-index .cat-idx__caption-item.is-active{
        opacity: 1;
        transform: translateY(0);
    }

    .page-index .cat-idx__caption-index{
        font-family: var(--font-inter);
        font-style: normal;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .12em;
        color: var(--brand-purple-light, #95d5b2);
    }

    /* ---------- Index list ---------- */
    .page-index .cat-idx__list{
        list-style: none;
        margin: 0;
        padding: 0;
        border-top: 1px solid rgba(255, 255, 255, .09);
    }

    .page-index .cat-idx__item{
        border-bottom: 1px solid rgba(255, 255, 255, .09);
    }

    .page-index .cat-idx__row{
        position: relative;
        display: grid;
        grid-template-columns: 44px auto 1fr auto;
        align-items: center;
        gap: 20px;
        padding: 22px 22px 22px 6px;
        text-decoration: none;
        transition: padding .35s cubic-bezier(.22,.61,.36,1), background-color .35s ease;
    }

    .page-index .cat-idx__row::before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        transform: scaleY(0);
        transform-origin: top;
        transition: transform .4s cubic-bezier(.22,.61,.36,1);
    }

    .page-index .cat-idx__row:hover,
    .page-index .cat-idx__row:focus-visible,
    .page-index .cat-idx__row.is-active{
        background: rgba(255, 255, 255, .04);
        padding-left: 20px;
        outline: none;
    }

    .page-index .cat-idx__row:hover::before,
    .page-index .cat-idx__row:focus-visible::before,
    .page-index .cat-idx__row.is-active::before{
        transform: scaleY(1);
    }

    .page-index .cat-idx__num{
        font-family: var(--font-inter);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .12em;
        color: rgba(255, 255, 255, .3);
        transition: color .3s ease;
    }

    .page-index .cat-idx__row:hover .cat-idx__num,
    .page-index .cat-idx__row.is-active .cat-idx__num{
        color: var(--brand-purple-light, #95d5b2);
    }

    /* thumb: only used on small screens, glyph takes over on desktop */
    .page-index .cat-idx__thumb{
        display: none;
    }

    .page-index .cat-idx__glyph{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, .1);
        background: rgba(255, 255, 255, .04);
        color: rgba(255, 255, 255, .62);
        font-size: 17px;
        transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
    }

    .page-index .cat-idx__row:hover .cat-idx__glyph,
    .page-index .cat-idx__row.is-active .cat-idx__glyph{
        background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        border-color: transparent;
        color: #fff;
        transform: translateY(-2px);
    }

    .page-index .cat-idx__text{
        display: block;
        min-width: 0;
    }

    .page-index .cat-idx__name{
        display: block;
        font-family: var(--font-graphik);
        font-size: 20px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -.01em;
        color: rgba(255, 255, 255, .88);
        transition: color .3s ease;
    }

    .page-index .cat-idx__row:hover .cat-idx__name,
    .page-index .cat-idx__row.is-active .cat-idx__name{
        color: #fff;
    }

    .page-index .cat-idx__desc{
        display: block;
        margin-top: 5px;
        font-family: var(--font-inter);
        font-size: 14px;
        line-height: 1.5;
        color: rgba(255, 255, 255, .42);
    }

    .page-index .cat-idx__go{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
    }

    .page-index .cat-idx__go-label{
        font-family: var(--font-inter);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--brand-purple-light, #95d5b2);
        opacity: 0;
        transform: translateX(8px);
        transition: opacity .35s ease, transform .35s ease;
    }

    .page-index .cat-idx__row:hover .cat-idx__go-label,
    .page-index .cat-idx__row.is-active .cat-idx__go-label{
        opacity: 1;
        transform: translateX(0);
    }

    .page-index .cat-idx__go-icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .14);
        color: rgba(255, 255, 255, .6);
        font-size: 12px;
        transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .35s ease;
    }

    .page-index .cat-idx__row:hover .cat-idx__go-icon,
    .page-index .cat-idx__row.is-active .cat-idx__go-icon{
        background: #fff;
        border-color: #fff;
        color: var(--brand-black-soft, #0b2018);
        transform: rotate(-45deg);
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1199px){
        .page-index .cat-idx{
            gap: 36px;
        }
        .page-index .cat-idx__row{
            grid-template-columns: 36px auto 1fr auto;
            gap: 16px;
            padding: 20px 16px 20px 6px;
        }
        .page-index .cat-idx__name{
            font-size: 18px;
        }
        .page-index .cat-idx__go-label{
            display: none;
        }
    }

    @media (max-width: 991px){
        .page-index .cat-idx{
            grid-template-columns: 1fr;
            gap: 0;
        }
        .page-index .cat-idx__stage{
            display: none;
        }
        .page-index .cat-idx__head{
            margin-bottom: 38px;
        }
        .page-index .cat-idx__glyph{
            display: none;
        }
        .page-index .cat-idx__thumb{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 74px;
            height: 74px;
            border-radius: 16px;
            overflow: hidden;
            flex: none;
            background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
            color: #fff;
            font-size: 22px;
        }
        .page-index .cat-idx__thumb img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .page-index .cat-idx__row{
            grid-template-columns: 34px 74px 1fr auto;
        }
    }

    @media (max-width: 575px){
        .page-index .cat-idx__row{
            grid-template-columns: 60px 1fr;
            grid-template-areas:
                "thumb body"
                "thumb go";
            column-gap: 14px;
            row-gap: 2px;
            padding: 18px 6px;
            align-items: center;
        }
        .page-index .cat-idx__row:hover,
        .page-index .cat-idx__row.is-active{
            padding-left: 14px;
        }
        .page-index .cat-idx__num{
            display: none;
        }
        .page-index .cat-idx__thumb{
            grid-area: thumb;
            width: 60px;
            height: 60px;
            border-radius: 14px;
        }
        .page-index .cat-idx__text{
            grid-area: body;
        }
        .page-index .cat-idx__go{
            grid-area: go;
            justify-self: start;
        }
        .page-index .cat-idx__go-icon{
            width: 30px;
            height: 30px;
            font-size: 11px;
        }
        .page-index .cat-idx__name{
            font-size: 17px;
        }
        .page-index .cat-idx__desc{
            font-size: 13px;
        }
        .page-index .cat-idx__title{
            font-size: 30px;
        }
        .page-index .cat-idx__subtitle{
            font-size: 15px;
        }
    }

    @media (prefers-reduced-motion: reduce){
        .page-index .cat-idx__slide,
        .page-index .cat-idx__caption-item,
        .page-index .cat-idx__row,
        .page-index .cat-idx__glyph,
        .page-index .cat-idx__go-icon,
        .page-index .cat-idx__go-label{
            transition: none;
        }
    }

    /* =========================================
       REVAMPED COURSE CARDS & CAROUSEL
       ========================================= */

    .page-index .courses-carousel{
        position: relative;
        padding: 0 10px;
    }

    .page-index .courses-carousel .owl-item{
        padding: 15px;
    }

    .page-index .courses-carousel .owl-stage-outer{
        padding-top: 15px !important;
        padding-bottom: 25px !important;
        /* margin-top: -15px !important;
        margin-bottom: -25px !important; */
    }

    .page-index .courses-carousel .owl-nav{
        position: absolute;
        top: 50%;
        left: -60px;
        right: -60px;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        pointer-events: none;
        z-index: 10 !important;
    }

    .page-index .courses-carousel .owl-nav .owl-prev,
    .page-index .courses-carousel .owl-nav .owl-next{
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: var(--color-paper, var(--color-paper)) !important;
        border: 1px solid var(--color-stone, var(--color-stone)) !important;
        color: var(--color-ink, var(--brand-black-soft)) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        box-shadow: 0 4px 10px rgba(37, 34, 30, 0.06) !important;
        transition: all 0.3s ease !important;
        pointer-events: auto !important;
    }

    .page-index .courses-carousel .owl-nav .owl-prev:hover,
    .page-index .courses-carousel .owl-nav .owl-next:hover{
        background: var(--color-cream, var(--color-cream)) !important;
        color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
        border-color: rgba(82, 183, 136, 0.35) !important;
        box-shadow: 0 6px 15px rgba(37, 34, 30, 0.1) !important;
        transform: translateY(-2px);
    }

    .page-index .courses-carousel .owl-dots{
        text-align: center;
        margin-top: 20px;
    }

    .page-index .courses-carousel .owl-dots .owl-dot{
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background-color: var(--color-stone, var(--color-stone)) !important;
        margin: 0 5px !important;
        display: inline-block !important;
        transition: all 0.3s ease !important;
    }

    .page-index .courses-carousel .owl-dots .owl-dot.active{
        background-color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
        transform: scale(1.3);
    }

    @media (max-width: 1300px) {
        .page-index .courses-carousel .owl-nav{
            position: static;
            transform: none;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
            pointer-events: auto;
        }
    }

    /* Course Card Overrides */
    .page-index .modern-course-card{
        background: var(--color-paper, var(--color-paper)) !important;
        border: 1px solid var(--color-stone, var(--color-stone)) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: var(--shadow-subtle, rgba(37, 34, 30, 0.04) 0px 1px 0px 0px) !important;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .page-index .modern-course-card:hover{
        transform: translateY(-6px) !important;
        box-shadow: rgba(37, 34, 30, 0.08) 0px 14px 28px, rgba(37, 34, 30, 0.04) 0px 4px 10px !important;
        border-color: rgba(82, 183, 136, 0.35) !important;
    }

    .page-index .course-img-container{
        border-radius: 0 !important;
        border-bottom: 1px solid var(--color-stone, var(--color-stone)) !important;
    }

    .page-index .course-content{
        padding: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
    }

    .page-index .course-title{
        font-family: var(--font-graphik, sans-serif) !important;
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    .page-index .course-title a{
        color: var(--color-ink, var(--brand-black-soft)) !important;
        transition: color 0.3s ease !important;
    }

    .page-index .course-title a:hover{
        color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
    }

    .page-index .course-summary{
        color: var(--color-pencil, var(--color-pencil)) !important;
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    .page-index .course-footer{
        border-top: 1px solid var(--color-stone, var(--color-stone)) !important;
        margin-top: auto !important;
        padding-top: 15px !important;
    }

    .page-index .course-enroll-link{
        color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
        font-family: var(--font-inter) !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
    }

    .page-index .course-enroll-link:hover{
        color: var(--color-ink, var(--brand-black-soft)) !important;
        transform: translateX(3px) !important;
    }

    /* =========================================
       ABOUT STORY — editorial masthead + staggered
       image band + numbered ledger
       ========================================= */

    .page-index .about-story-section{
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(760px 460px at 2% 0%, rgba(116, 198, 157, .10), transparent 60%),
            radial-gradient(680px 420px at 100% 96%, rgba(82, 183, 136, .10), transparent 62%),
            #ffffff;
    }

    /* ---------- Row 1 — masthead ---------- */
    .page-index .astory__masthead{
        display: grid;
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
        align-items: end;
        column-gap: 64px;
        row-gap: 28px;
        padding-bottom: 40px;
        border-bottom: 1px solid var(--color-stone, #cbe8d7);
    }

    .page-index .astory__eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 14px;
        font-family: var(--font-inter);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--brand-purple, #2d6a4f);
    }

    .page-index .astory__eyebrow-line{
        width: 46px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        flex: none;
    }

    .page-index .astory__title{
        font-family: var(--font-graphik);
        font-size: clamp(32px, 4.2vw, 56px);
        line-height: 1.05;
        letter-spacing: -.03em;
        font-weight: 800;
        color: var(--color-ink, #10241a);
        margin: 22px 0 0;
        max-width: 15ch;
    }

    .page-index .astory__desc{
        font-family: var(--font-inter);
        font-size: 17px;
        line-height: 1.68;
        color: var(--color-pencil, #3d5a4b);
        margin: 0 0 28px;
        max-width: 52ch;
    }

    .page-index .astory__cta{
        display: inline-flex;
        align-items: center;
        gap: 14px;
        padding: 12px 12px 12px 28px;
        border-radius: 999px;
        background: var(--color-ink, #10241a);
        color: #fff;
        font-family: var(--font-inter);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
    }

    .page-index .astory__cta:hover{
        color: #fff;
        background: linear-gradient(120deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(82, 183, 136, .3);
    }

    .page-index .astory__cta-icon{
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #fff;
        color: var(--color-ink, #10241a);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        flex: none;
        transition: transform .3s ease;
    }

    .page-index .astory__cta:hover .astory__cta-icon{
        transform: translateX(4px);
    }

    /* ---------- Row 2 — staggered image band ---------- */
    .page-index .astory__band{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        align-items: start;
        gap: 24px;
        margin: 72px 0 0;
    }

    .page-index .astory__shot{
        position: relative;
        margin: 0;
        border-radius: 24px;
        overflow: hidden;
        background: var(--color-cream, #eef8f1);
        box-shadow: 0 18px 44px rgba(26, 20, 48, .12);
        transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease;
    }

    .page-index .astory__shot:hover{
        transform: translateY(-8px);
        box-shadow: 0 30px 62px rgba(26, 20, 48, .2);
    }

    .page-index .astory__shot img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .9s cubic-bezier(.22,.61,.36,1);
    }

    .page-index .astory__shot:hover img{
        transform: scale(1.07);
    }

    /* brand veil — lifts on hover */
    .page-index .astory__shot-veil{
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg,
            rgba(26, 20, 48, 0) 42%,
            rgba(26, 20, 48, .34) 100%);
        transition: opacity .5s ease;
    }

    .page-index .astory__shot:hover .astory__shot-veil{
        opacity: .55;
    }

    /* each shot gets its own span, ratio and vertical offset */
    .page-index .astory__shot--tall{
        grid-column: span 3;
        aspect-ratio: 3 / 4;
    }

    .page-index .astory__shot--round{
        grid-column: span 3;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        margin-top: 72px;
    }

    .page-index .astory__shot--wide{
        grid-column: span 4;
        aspect-ratio: 4 / 3;
        margin-top: 26px;
    }

    .page-index .astory__shot--short{
        grid-column: span 2;
        aspect-ratio: 2 / 3;
        margin-top: 104px;
    }

    /* ---------- Row 3 — numbered ledger ---------- */
    .page-index .astory__ledger{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 48px;
        margin-top: 96px;
    }

    .page-index .astory__pillar{
        position: relative;
        padding-top: 26px;
    }

    .page-index .astory__pillar-rule{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        border-radius: 2px;
        background: var(--color-stone, #cbe8d7);
        overflow: hidden;
    }

    /* gradient segment that sweeps the full rule on hover */
    .page-index .astory__pillar-rule::after{
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        transform: scaleX(.18);
        transform-origin: left center;
        transition: transform .55s cubic-bezier(.22,.61,.36,1);
    }

    .page-index .astory__pillar:hover .astory__pillar-rule::after{
        transform: scaleX(1);
    }

    .page-index .astory__pillar-num{
        display: block;
        font-family: var(--font-graphik);
        font-size: 46px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.04em;
        background: linear-gradient(120deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .page-index .astory__pillar-title{
        font-family: var(--font-graphik);
        font-size: 21px;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: -.01em;
        color: var(--color-ink, #10241a);
        margin: 18px 0 0;
    }

    .page-index .astory__pillar-desc{
        font-family: var(--font-inter);
        font-size: 15px;
        line-height: 1.7;
        color: var(--color-pencil, #3d5a4b);
        margin: 12px 0 0;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1199px){
        .page-index .astory__masthead{
            column-gap: 44px;
        }
        .page-index .astory__band{
            gap: 20px;
            margin-top: 60px;
        }
        /* even spans at this width — span 2 gets too thin to read */
        .page-index .astory__shot--tall,
        .page-index .astory__shot--round,
        .page-index .astory__shot--wide,
        .page-index .astory__shot--short{
            grid-column: span 3;
        }
        .page-index .astory__shot--wide{ aspect-ratio: 4 / 3; }
        .page-index .astory__shot--short{ aspect-ratio: 3 / 4; }
        .page-index .astory__shot--round{ margin-top: 52px; }
        .page-index .astory__shot--wide{ margin-top: 20px; }
        .page-index .astory__shot--short{ margin-top: 76px; }
        .page-index .astory__ledger{
            gap: 36px;
            margin-top: 76px;
        }
    }

    @media (max-width: 991px){
        .page-index .astory__masthead{
            grid-template-columns: minmax(0, 1fr);
            align-items: start;
            padding-bottom: 34px;
        }
        .page-index .astory__title{ max-width: 20ch; }
        .page-index .astory__desc{ max-width: none; }

        /* 2 x 2 band — keeps the stagger, halves the width */
        .page-index .astory__band{
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-top: 48px;
        }
        .page-index .astory__shot--tall,
        .page-index .astory__shot--round,
        .page-index .astory__shot--wide,
        .page-index .astory__shot--short{
            grid-column: span 1;
        }
        .page-index .astory__shot--tall{ aspect-ratio: 4 / 5; }
        .page-index .astory__shot--wide{ aspect-ratio: 4 / 3; margin-top: 0; }
        .page-index .astory__shot--round{ margin-top: 40px; }
        .page-index .astory__shot--short{ aspect-ratio: 4 / 5; margin-top: 40px; }

        .page-index .astory__ledger{
            grid-template-columns: minmax(0, 1fr);
            gap: 34px;
            margin-top: 60px;
        }
    }

    @media (max-width: 575px){
        .page-index .astory__band{
            grid-template-columns: minmax(0, 1fr);
            gap: 18px;
        }
        .page-index .astory__shot{
            border-radius: 18px;
        }
        .page-index .astory__shot--tall,
        .page-index .astory__shot--short{ aspect-ratio: 4 / 3; }
        .page-index .astory__shot--round{
            width: 74%;
            margin: 0 auto;
            border-radius: 50%;
        }
        .page-index .astory__pillar-num{ font-size: 38px; }
        .page-index .astory__pillar-title{ font-size: 19px; }
    }

    @media (prefers-reduced-motion: reduce){
        .page-index .astory__shot,
        .page-index .astory__shot img,
        .page-index .astory__shot-veil,
        .page-index .astory__cta,
        .page-index .astory__cta-icon,
        .page-index .astory__pillar-rule::after{
            transition: none !important;
        }
        .page-index .astory__shot:hover{ transform: none; }
        .page-index .astory__shot:hover img{ transform: none; }
    }

    /* =========================================
       PROGRAMS RAIL — snap-scrolling poster deck
       ========================================= */

    .page-index .programs-rail-section{
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(820px 420px at 96% 4%, rgba(82, 183, 136, .10), transparent 62%),
            linear-gradient(180deg, var(--color-cream, #eef8f1) 0%, #ffffff 55%, var(--color-cream, #eef8f1) 100%) !important;
    }

    /* ---------- Head ---------- */
    .page-index .prail__head{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 32px;
        margin-bottom: 46px;
    }

    .page-index .prail__eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 14px;
        font-family: var(--font-inter);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--brand-purple, #2d6a4f);
    }

    .page-index .prail__eyebrow-line{
        width: 46px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
    }

    .page-index .prail__title{
        font-family: var(--font-graphik);
        font-size: clamp(30px, 3.8vw, 50px);
        line-height: 1.06;
        letter-spacing: -.03em;
        font-weight: 800;
        color: var(--color-ink, #10241a);
        margin: 20px 0 0;
    }

    .page-index .prail__sub{
        font-family: var(--font-inter);
        font-size: 16px;
        line-height: 1.6;
        color: var(--color-pencil, #3d5a4b);
        margin: 12px 0 0;
    }

    .page-index .prail__controls{
        display: flex;
        align-items: center;
        gap: 12px;
        flex: none;
        padding-bottom: 6px;
    }

    .page-index .prail__nav{
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid var(--color-stone, #cbe8d7);
        background: #fff;
        color: var(--color-ink, #10241a);
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color .28s ease, color .28s ease, border-color .28s ease, transform .28s ease, opacity .28s ease;
    }

    .page-index .prail__nav:hover:not(:disabled){
        background: linear-gradient(120deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        border-color: transparent;
        color: #fff;
        transform: translateY(-2px);
    }

    .page-index .prail__nav:disabled{
        opacity: .35;
        cursor: default;
    }

    .page-index .prail__all{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 26px;
        border-radius: 999px;
        background: var(--color-ink, #10241a);
        color: #fff;
        font-family: var(--font-inter);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
    }

    .page-index .prail__all:hover{
        color: #fff;
        background: linear-gradient(120deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(82, 183, 136, .3);
    }

    .page-index .prail__all i{
        font-size: 11px;
        transition: transform .3s ease;
    }
    .page-index .prail__all:hover i{
        transform: translateX(4px);
    }

    /* ---------- Rail ---------- */
    .page-index .prail{
        position: relative;
        margin: 0 -12px;
    }

    .page-index .prail::after{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: -1px;
        width: 90px;
        background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
        pointer-events: none;
        opacity: .85;
    }

    .page-index .prail__track{
        display: flex;
        column-gap: 24px;
        padding: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* keep the 12px gutter visible at rest — without this the snapport
           starts at the padding box and swallows it */
        scroll-padding: 0 12px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .page-index .prail__track::-webkit-scrollbar{
        display: none;
    }

    /* fixed basis + no shrink, so the track overflows and becomes scrollable */
    .page-index .prail__poster{
        flex: 0 0 calc((100% - 48px) / 3);
        min-width: 0;
        scroll-snap-align: start;
    }

    .page-index .prail__poster-link{
        position: relative;
        display: block;
        aspect-ratio: 3 / 4;
        border-radius: 24px;
        overflow: hidden;
        background: #0b2018;
        text-decoration: none;
        box-shadow: 0 16px 44px rgba(26, 20, 48, .16);
        transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
    }

    .page-index .prail__poster-link:hover{
        transform: translateY(-8px);
        box-shadow: 0 28px 64px rgba(26, 20, 48, .26);
    }

    .page-index .prail__poster-img{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .8s cubic-bezier(.22,.61,.36,1);
    }

    .page-index .prail__poster-link:hover .prail__poster-img{
        transform: scale(1.08);
    }

    .page-index .prail__poster-scrim{
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(9, 7, 18, .94) 6%, rgba(9, 7, 18, .55) 40%, rgba(9, 7, 18, .05) 74%);
    }

    .page-index .prail__poster-index{
        position: absolute;
        top: 18px;
        left: 20px;
        font-family: var(--font-inter);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .14em;
        color: rgba(255, 255, 255, .72);
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .24);
        background: rgba(255, 255, 255, .08);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .page-index .prail__poster-panel{
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 20px;
        display: block;
    }

    .page-index .prail__poster-title{
        display: block;
        font-family: var(--font-graphik);
        font-size: 21px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -.01em;
        color: #fff;
    }

    .page-index .prail__poster-summary{
        display: block;
        margin-top: 8px;
        font-family: var(--font-inter);
        font-size: 13.5px;
        line-height: 1.6;
        color: rgba(255, 255, 255, .62);
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height .45s ease, opacity .35s ease, margin-top .45s ease;
    }

    .page-index .prail__poster-link:hover .prail__poster-summary{
        max-height: 90px;
        opacity: 1;
    }

    .page-index .prail__poster-cta{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 16px;
        font-family: var(--font-inter);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #fff;
    }

    .page-index .prail__poster-cta-ico{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: linear-gradient(120deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        font-size: 10px;
        transition: transform .35s cubic-bezier(.34,1.56,.64,1);
    }

    .page-index .prail__poster-link:hover .prail__poster-cta-ico{
        transform: rotate(-45deg);
    }

    /* ---------- Progress ---------- */
    .page-index .prail__progress{
        position: relative;
        height: 3px;
        border-radius: 3px;
        background: var(--color-stone, #cbe8d7);
        margin-top: 34px;
        overflow: hidden;
    }

    .page-index .prail__progress-bar{
        position: absolute;
        inset: 0;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        transform: scaleX(.08);
        transform-origin: left;
        transition: transform .25s ease;
    }

    .page-index .prail__all-mobile{
        display: none;
        margin-top: 32px;
        text-align: center;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 991px){
        .page-index .prail__head{
            flex-direction: column;
            align-items: flex-start;
            gap: 22px;
            margin-bottom: 34px;
        }
        .page-index .prail__controls .prail__all{
            display: none;
        }
        .page-index .prail__all-mobile{
            display: block;
        }
        .page-index .prail__poster{
            flex-basis: calc((100% - 24px) / 2);
        }
    }

    @media (max-width: 575px){
        .page-index .prail__track{
            column-gap: 16px;
        }
        .page-index .prail__poster{
            flex-basis: 80%;
        }
        .page-index .prail__poster-summary{
            max-height: 90px;
            opacity: 1;
        }
        .page-index .prail__poster-title{
            font-size: 19px;
        }
    }

    @media (prefers-reduced-motion: reduce){
        .page-index .prail__poster-link,
        .page-index .prail__poster-img,
        .page-index .prail__poster-summary,
        .page-index .prail__poster-cta-ico,
        .page-index .prail__nav,
        .page-index .prail__all{
            transition: none;
        }
    }

    /* =========================================
       REVAMPED ABOUT SECTION
       ========================================= */
    .page-index .about-feature-item{
        background: var(--color-paper, var(--color-paper)) !important;
        border: 1px solid var(--color-stone, var(--color-stone)) !important;
        border-radius: 12px !important;
        padding: 20px !important;
        display: flex !important;
        align-items: start !important;
        gap: 16px !important;
        transition: all 0.3s ease !important;
        box-shadow: var(--shadow-subtle) !important;
    }

    .page-index .about-feature-item:hover{
        transform: translateY(-3px) !important;
        box-shadow: rgba(37, 34, 30, 0.06) 0px 8px 16px !important;
        border-color: rgba(82, 183, 136, 0.25) !important;
    }

    .page-index .about-feature-icon{
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        flex-shrink: 0 !important;
        background-color: var(--color-cream, var(--color-cream)) !important;
        color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
        border: 1px solid rgba(82, 183, 136, 0.15) !important;
    }

    .page-index .about-feature-icon.icon-forest{
        background-color: var(--color-mint-wash, var(--color-cream)) !important;
        color: var(--color-forest, var(--color-forest)) !important;
        border: 1px solid rgba(68, 108, 61, 0.15) !important;
    }

    .page-index .about-feature-title{
        font-family: var(--font-graphik, sans-serif) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--color-ink, var(--brand-black-soft)) !important;
        margin-bottom: 6px !important;
    }

    .page-index .about-feature-desc{
        font-family: var(--font-inter, sans-serif) !important;
        font-size: 13.5px !important;
        color: var(--color-pencil, var(--color-pencil)) !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
    }

    .page-index .modern-img-wrapper:hover img{
        transform: scale(1.03) !important;
    }

    .page-index .modern-video-wrapper{
        position: relative;
        transition: transform 0.4s ease, box-shadow 0.4s ease !important;
    }

    .page-index .modern-video-wrapper:hover{
        transform: scale(1.02) translateY(-4px) !important;
        box-shadow: rgba(37, 34, 30, 0.12) 0px 20px 40px !important;
    }

    /* =========================================
       WHY CHOOSE — dark expanding panel accordion
       ========================================= */

    .page-index .why-panels-section{
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(880px 460px at 6% 0%, rgba(82, 183, 136, .26), transparent 62%),
            radial-gradient(820px 460px at 96% 100%, rgba(116, 198, 157, .22), transparent 62%),
            linear-gradient(155deg, #16111f 0%, var(--brand-black-soft, #0b2018) 52%, #0a0e19 100%) !important;
    }

    .page-index .wpanels__glow{
        position: absolute;
        border-radius: 50%;
        filter: blur(100px);
        opacity: .45;
        pointer-events: none;
    }
    .page-index .wpanels__glow--a{
        width: 360px; height: 360px;
        top: -120px; right: 12%;
        background: var(--brand-purple, #2d6a4f);
    }
    .page-index .wpanels__glow--b{
        width: 320px; height: 320px;
        bottom: -140px; left: 8%;
        background: var(--brand-blue, #52b788);
    }

    .page-index .why-panels-section .auto-container{
        position: relative;
        z-index: 2;
    }

    /* ---------- Head ---------- */
    .page-index .wpanels__head{
        max-width: 720px;
        margin-bottom: 52px;
    }

    .page-index .wpanels__eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 7px 16px 7px 12px;
        border-radius: 999px;
        border: 1px solid rgba(149, 213, 178, .28);
        background: rgba(82, 183, 136, .12);
        font-family: var(--font-inter);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--brand-purple-light, #95d5b2);
    }

    .page-index .wpanels__eyebrow-dot{
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand-purple, #2d6a4f);
        box-shadow: 0 0 0 4px rgba(82, 183, 136, .22);
    }

    .page-index .wpanels__title{
        font-family: var(--font-graphik);
        font-size: clamp(30px, 4vw, 50px);
        line-height: 1.08;
        letter-spacing: -.025em;
        font-weight: 800;
        color: #fff;
        margin: 20px 0 0;
    }

    /* ---------- Panels ---------- */
    .page-index .wpanels{
        display: flex;
        gap: 18px;
        min-height: 420px;
    }

    .page-index .wpanel{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        flex: 1 1 0;
        min-width: 0;
        padding: 32px;
        border-radius: 24px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .1);
        background: rgba(255, 255, 255, .035);
        transition: flex-grow .55s cubic-bezier(.22,.61,.36,1), background-color .45s ease, border-color .45s ease;
    }

    /* first panel is open by default; hovering the group hands control to the cursor */
    .page-index .wpanel:first-child{
        flex-grow: 2.4;
        background: rgba(255, 255, 255, .07);
        border-color: rgba(149, 213, 178, .3);
    }

    .page-index .wpanels:hover .wpanel{
        flex-grow: 1;
        background: rgba(255, 255, 255, .035);
        border-color: rgba(255, 255, 255, .1);
    }

    .page-index .wpanels:hover .wpanel:hover{
        flex-grow: 2.4;
        background: rgba(255, 255, 255, .07);
        border-color: rgba(149, 213, 178, .3);
    }

    /* gradient wash that fades in with the open state */
    .page-index .wpanel::before{
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(160deg, rgba(82, 183, 136, .3) 0%, rgba(116, 198, 157, .12) 48%, transparent 78%);
        opacity: 0;
        transition: opacity .55s ease;
        pointer-events: none;
    }
    .page-index .wpanel:first-child::before{ opacity: 1; }
    .page-index .wpanels:hover .wpanel::before{ opacity: 0; }
    .page-index .wpanels:hover .wpanel:hover::before{ opacity: 1; }

    .page-index .wpanel > *{
        position: relative;
        z-index: 1;
    }

    .page-index .wpanel__ghost{
        position: absolute;
        top: -18px;
        right: 10px;
        z-index: 0;
        font-family: var(--font-graphik);
        font-size: 140px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.05em;
        color: rgba(255, 255, 255, .05);
        transition: color .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
        pointer-events: none;
    }
    .page-index .wpanel:first-child .wpanel__ghost{
        color: rgba(255, 255, 255, .12);
        transform: translateY(8px);
    }
    .page-index .wpanels:hover .wpanel .wpanel__ghost{
        color: rgba(255, 255, 255, .05);
        transform: none;
    }
    .page-index .wpanels:hover .wpanel:hover .wpanel__ghost{
        color: rgba(255, 255, 255, .12);
        transform: translateY(8px);
    }

    .page-index .wpanel__icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        flex: none;
        border-radius: 18px;
        margin-bottom: auto;
        font-size: 20px;
        color: rgba(255, 255, 255, .6);
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .05);
        transition: background .5s ease, color .5s ease, border-color .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
    }
    .page-index .wpanel:first-child .wpanel__icon{
        background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        border-color: transparent;
        color: #fff;
        transform: translateY(-3px);
    }
    .page-index .wpanels:hover .wpanel .wpanel__icon{
        background: rgba(255, 255, 255, .05);
        border-color: rgba(255, 255, 255, .12);
        color: rgba(255, 255, 255, .6);
        transform: none;
    }
    .page-index .wpanels:hover .wpanel:hover .wpanel__icon{
        background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        border-color: transparent;
        color: #fff;
        transform: translateY(-3px);
    }

    .page-index .wpanel__body{
        margin-top: 28px;
        min-width: 220px;
    }

    .page-index .wpanel__title{
        font-family: var(--font-graphik);
        font-size: 23px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -.015em;
        color: #fff;
        margin: 0;
    }

    .page-index .wpanel__desc{
        font-family: var(--font-inter);
        font-size: 15px;
        line-height: 1.7;
        color: rgba(255, 255, 255, .55);
        margin: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height .55s cubic-bezier(.22,.61,.36,1), opacity .4s ease, margin-top .55s ease;
    }
    .page-index .wpanel:first-child .wpanel__desc{
        max-height: 160px;
        opacity: 1;
        margin-top: 12px;
    }
    .page-index .wpanels:hover .wpanel .wpanel__desc{
        max-height: 0;
        opacity: 0;
        margin-top: 0;
    }
    .page-index .wpanels:hover .wpanel:hover .wpanel__desc{
        max-height: 160px;
        opacity: 1;
        margin-top: 12px;
    }

    .page-index .wpanel__rule{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .6s cubic-bezier(.22,.61,.36,1);
    }
    .page-index .wpanel:first-child .wpanel__rule{ transform: scaleX(1); }
    .page-index .wpanels:hover .wpanel .wpanel__rule{ transform: scaleX(0); }
    .page-index .wpanels:hover .wpanel:hover .wpanel__rule{ transform: scaleX(1); }

    /* ---------- Responsive ---------- */
    @media (max-width: 991px){
        .page-index .wpanels{
            flex-direction: column;
            min-height: 0;
            gap: 14px;
        }
        /* every panel reads as open once stacked */
        .page-index .wpanel,
        .page-index .wpanels:hover .wpanel,
        .page-index .wpanels:hover .wpanel:hover{
            flex-grow: 0;
            padding: 26px;
            background: rgba(255, 255, 255, .06);
            border-color: rgba(255, 255, 255, .12);
        }
        .page-index .wpanel::before,
        .page-index .wpanels:hover .wpanel::before,
        .page-index .wpanels:hover .wpanel:hover::before{
            opacity: 1;
        }
        .page-index .wpanel__desc,
        .page-index .wpanels:hover .wpanel .wpanel__desc,
        .page-index .wpanels:hover .wpanel:hover .wpanel__desc{
            max-height: 200px;
            opacity: 1;
            margin-top: 10px;
        }
        .page-index .wpanel__icon,
        .page-index .wpanels:hover .wpanel .wpanel__icon,
        .page-index .wpanels:hover .wpanel:hover .wpanel__icon{
            background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
            border-color: transparent;
            color: #fff;
            transform: none;
            margin-bottom: 0;
        }
        .page-index .wpanel__ghost,
        .page-index .wpanels:hover .wpanel .wpanel__ghost,
        .page-index .wpanels:hover .wpanel:hover .wpanel__ghost{
            font-size: 96px;
            top: -10px;
            color: rgba(255, 255, 255, .08);
            transform: none;
        }
        .page-index .wpanel__body{
            margin-top: 20px;
            min-width: 0;
        }
        .page-index .wpanel__rule,
        .page-index .wpanels:hover .wpanel .wpanel__rule,
        .page-index .wpanels:hover .wpanel:hover .wpanel__rule{
            transform: scaleX(1);
        }
    }

    @media (max-width: 575px){
        .page-index .wpanels__head{
            margin-bottom: 34px;
        }
        .page-index .wpanel__title{
            font-size: 20px;
        }
        .page-index .wpanel__desc{
            font-size: 14px;
        }
    }

    @media (prefers-reduced-motion: reduce){
        .page-index .wpanel,
        .page-index .wpanel::before,
        .page-index .wpanel__ghost,
        .page-index .wpanel__icon,
        .page-index .wpanel__desc,
        .page-index .wpanel__rule{
            transition: none;
        }
    }

    /* =========================================
       TOPUP CONSOLE — converter deck + tier track
       (shared by index and the top-up page)
       ========================================= */

    .topup-console-section{
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(900px 460px at 4% 2%, rgba(82, 183, 136, .12), transparent 62%),
            radial-gradient(880px 460px at 98% 98%, rgba(116, 198, 157, .12), transparent 62%),
            linear-gradient(180deg, #ffffff 0%, var(--color-cream, #eef8f1) 46%, #ffffff 100%);
    }

    .topup-console-section .tconsole__glow{
        position: absolute;
        border-radius: 50%;
        filter: blur(110px);
        opacity: .3;
        pointer-events: none;
    }
    .topup-console-section .tconsole__glow--a{
        width: 400px; height: 400px;
        top: -150px; left: -80px;
        background: var(--brand-purple, #2d6a4f);
    }
    .topup-console-section .tconsole__glow--b{
        width: 360px; height: 360px;
        bottom: -160px; right: -70px;
        background: var(--brand-blue, #52b788);
    }

    .tconsole{
        position: relative;
        z-index: 2;
    }

    /* ---------- Head ---------- */
    .tconsole__head{
        text-align: center;
        max-width: 740px;
        margin: 0 auto 46px;
    }

    .tconsole__eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 7px 18px;
        border-radius: 999px;
        border: 1px solid var(--color-stone, #cbe8d7);
        background: #fff;
        font-family: var(--font-inter);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--brand-purple, #2d6a4f);
        box-shadow: 0 4px 14px rgba(26, 20, 48, .06);
    }

    .tconsole__title{
        font-family: var(--font-graphik);
        font-size: clamp(30px, 4vw, 50px);
        line-height: 1.08;
        letter-spacing: -.03em;
        font-weight: 800;
        color: var(--color-ink, #10241a);
        margin: 20px 0 0;
    }

    .tconsole__lede{
        font-family: var(--font-inter);
        font-size: 16px;
        line-height: 1.75;
        color: var(--color-pencil, #3d5a4b);
        margin: 14px 0 0;
    }

    /* ---------- Converter deck ---------- */
    .tconsole__deck{
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) auto minmax(0, .8fr) auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 22px;
        padding: 22px 24px;
        border-radius: 26px;
        background: #fff;
        border: 1px solid var(--color-stone, #cbe8d7);
        box-shadow: 0 26px 60px rgba(26, 20, 48, .12);
    }

    .tconsole__cell{
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }

    .tconsole__cell-label{
        font-family: var(--font-inter);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--color-graphite, #6e8b7c);
        margin: 0;
    }

    .tconsole__input{
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .tconsole__sym{
        font-family: var(--font-graphik);
        font-size: 28px;
        font-weight: 700;
        color: var(--brand-purple, #2d6a4f);
        line-height: 1;
    }

    .tconsole__amount{
        width: 100%;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        font-family: var(--font-graphik);
        font-size: 32px;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--color-ink, #10241a);
        padding: 0;
        -moz-appearance: textfield;
    }
    .tconsole__amount::-webkit-outer-spin-button,
    .tconsole__amount::-webkit-inner-spin-button{
        -webkit-appearance: none;
        margin: 0;
    }
    .tconsole__amount::placeholder{
        color: var(--color-stone, #cbe8d7);
    }

    .tconsole__op{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--color-cream, #eef8f1);
        color: var(--color-graphite, #6e8b7c);
        font-family: var(--font-graphik);
        font-size: 13px;
        font-weight: 700;
        flex: none;
        align-self: end;
        margin-bottom: 4px;
    }

    .tconsole__multi,
    .tconsole__out{
        font-family: var(--font-graphik);
        font-size: 32px;
        font-weight: 800;
        letter-spacing: -.02em;
        line-height: 1.1;
    }

    .tconsole__multi{
        background: linear-gradient(120deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .tconsole__out{
        color: var(--color-ink, #10241a);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tconsole__go{
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 14px 14px 14px 26px;
        border: none;
        border-radius: 999px;
        background: var(--color-ink, #10241a);
        color: #fff;
        font-family: var(--font-inter);
        font-size: 14.5px;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        transition: background .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
    }

    .tconsole__go:hover{
        background: linear-gradient(120deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        transform: translateY(-3px);
        box-shadow: 0 14px 34px rgba(82, 183, 136, .32);
    }

    .tconsole__go:disabled{
        opacity: .7;
        cursor: default;
        transform: none;
    }

    .tconsole__go-ico{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #fff;
        color: var(--color-ink, #10241a);
        font-size: 12px;
        transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    }
    .tconsole__go:hover .tconsole__go-ico{
        transform: rotate(-45deg);
    }

    /* ---------- Readout strip ---------- */
    .tconsole__readout{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 28px;
        padding: 20px 6px 0;
        font-family: var(--font-inter);
        font-size: 13px;
        color: var(--color-pencil, #3d5a4b);
    }

    .tconsole__readout-item{
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .tconsole__readout-item strong{
        font-family: var(--font-graphik);
        font-size: 15px;
        font-weight: 700;
        color: var(--color-ink, #10241a);
    }

    .tconsole__readout-item--note,
    .tconsole__readout-item--trust{
        color: var(--color-graphite, #6e8b7c);
        font-size: 12.5px;
    }

    .tconsole__readout-item--trust i{
        color: var(--brand-purple, #2d6a4f);
        font-size: 11px;
    }

    /* ---------- Tier track ---------- */
    .tconsole__track-wrap{
        margin-top: 68px;
    }

    .tconsole__track-head{
        text-align: center;
        margin-bottom: 40px;
    }

    .tconsole__track-title{
        font-family: var(--font-graphik);
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: var(--color-ink, #10241a);
        margin: 0;
    }

    .tconsole__track-sub{
        font-family: var(--font-inter);
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--color-pencil, #3d5a4b);
        margin: 8px 0 0;
    }

    .tconsole__track{
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
    }

    .tconsole__node{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 14px;
        transition: transform .45s cubic-bezier(.22,.61,.36,1);
    }

    .tconsole__node-multi{
        display: inline-flex;
        align-items: center;
        height: 30px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid var(--color-stone, #cbe8d7);
        background: #fff;
        font-family: var(--font-inter);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--color-pencil, #3d5a4b);
        white-space: nowrap;
        transition: background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
    }

    /* the mark row doubles as the connecting rail */
    .tconsole__node-mark{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 52px;
        margin: 18px 0 16px;
    }

    .tconsole__node-mark::before,
    .tconsole__node-mark::after{
        content: "";
        position: absolute;
        top: 50%;
        height: 2px;
        background: var(--color-stone, #cbe8d7);
        transform: translateY(-50%);
    }
    .tconsole__node-mark::before{
        right: 50%;
        left: -14px;
    }
    .tconsole__node-mark::after{
        left: 50%;
        right: -14px;
    }
    .tconsole__node:first-child .tconsole__node-mark::before,
    .tconsole__node:last-child .tconsole__node-mark::after{
        display: none;
    }

    .tconsole__node-dot{
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--color-stone, #cbe8d7);
        font-family: var(--font-inter);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .06em;
        color: var(--color-graphite, #6e8b7c);
        transition: background .4s ease, border-color .4s ease, color .4s ease, transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
    }

    .tconsole__node-name{
        font-family: var(--font-graphik);
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: var(--color-ink, #10241a);
    }

    .tconsole__node-range{
        margin-top: 5px;
        font-family: var(--font-inter);
        font-size: 12.5px;
        font-weight: 600;
        color: var(--brand-purple, #2d6a4f);
    }

    .tconsole__node-desc{
        margin-top: 8px;
        font-family: var(--font-inter);
        font-size: 13px;
        line-height: 1.6;
        color: var(--color-pencil, #3d5a4b);
    }

    /* active tier — driven by the calculator script */
    .timeline-step-highlight .tconsole__node-dot,
    .tconsole__node.timeline-step-highlight .tconsole__node-dot{
        background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        border-color: transparent;
        color: #fff;
        transform: scale(1.12);
        box-shadow: 0 12px 28px rgba(82, 183, 136, .38);
    }

    .tconsole__node.timeline-step-highlight .tconsole__node-multi{
        background: linear-gradient(120deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        border-color: transparent;
        color: #fff;
        box-shadow: 0 8px 20px rgba(82, 183, 136, .28);
    }

    .tconsole__node.timeline-step-highlight .tconsole__node-mark::before{
        background: linear-gradient(90deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
    }

    /* ---------- Perks ---------- */
    .tconsole__perks{
        list-style: none;
        margin: 62px 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .tconsole__perk{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 18px;
        border-radius: 16px;
        background: #fff;
        border: 1px solid var(--color-stone, #cbe8d7);
        font-family: var(--font-inter);
        font-size: 13.5px;
        font-weight: 600;
        color: var(--color-ink, #10241a);
        transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease;
    }

    .tconsole__perk:hover{
        transform: translateY(-4px);
        border-color: transparent;
        box-shadow: 0 14px 32px rgba(26, 20, 48, .12);
    }

    .tconsole__perk-ico{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex: none;
        border-radius: 12px;
        background: linear-gradient(140deg, var(--brand-purple, #2d6a4f), var(--brand-blue, #52b788));
        color: #fff;
        font-size: 14px;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1199px){
        .tconsole__deck{
            grid-template-columns: minmax(0, 1fr) auto minmax(0, .75fr) auto minmax(0, 1fr);
            row-gap: 20px;
        }
        .tconsole__go{
            grid-column: 1 / -1;
            justify-content: center;
        }
        .tconsole__node-desc{
            display: none;
        }
    }

    @media (max-width: 991px){
        .tconsole__deck{
            grid-template-columns: 1fr;
            gap: 18px;
            padding: 24px 22px;
        }
        .tconsole__op{
            display: none;
        }
        .tconsole__cell{
            padding-bottom: 16px;
            border-bottom: 1px dashed var(--color-stone, #cbe8d7);
        }
        .tconsole__cell--out{
            border-bottom: none;
            padding-bottom: 0;
        }
        .tconsole__go{
            grid-column: auto;
        }
        .tconsole__track{
            grid-template-columns: repeat(2, minmax(0, 1fr));
            row-gap: 34px;
        }
        .tconsole__node-mark::before,
        .tconsole__node-mark::after{
            display: none;
        }
        .tconsole__node:first-child .tconsole__node-mark::before,
        .tconsole__node:last-child .tconsole__node-mark::after{
            display: none;
        }
        .tconsole__node-desc{
            display: block;
        }
        .tconsole__perks{
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-top: 46px;
        }
        .tconsole__track-wrap{
            margin-top: 54px;
        }
    }

    @media (max-width: 575px){
        .tconsole__amount,
        .tconsole__multi,
        .tconsole__out{
            font-size: 27px;
        }
        .tconsole__track{
            grid-template-columns: 1fr;
            row-gap: 28px;
        }
        .tconsole__node{
            padding: 0;
        }
        .tconsole__node-mark{
            height: 46px;
            margin: 14px 0 12px;
        }
        .tconsole__perks{
            grid-template-columns: 1fr;
        }
        .tconsole__readout{
            gap: 8px 18px;
        }
    }

    @media (prefers-reduced-motion: reduce){
        .tconsole__go,
        .tconsole__go-ico,
        .tconsole__node,
        .tconsole__node-dot,
        .tconsole__node-multi,
        .tconsole__perk{
            transition: none;
        }
    }

/* ===================== page-order-failed ===================== */
    /* =============================================================
       ORDER RESULT — "Transaction record"
       Shared by the success and failure pages: a dark status band,
       then the record as ledger rows, then actions. Accent colour is
       the only difference between the two outcomes.
       ============================================================= */

    .page-order-success,
    .page-order-failed {
        --ordr-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
        --ordr-night: #07070e;
        --ordr-line: rgba(82, 183, 136, 0.20);
        --ordr-line-soft: rgba(82, 183, 136, 0.11);
        --ordr-ink: var(--color-ink, #10241a);
        --ordr-dim: var(--color-pencil, #3d5a4b);
        --ordr-mute: var(--color-graphite, #6e8b7c);
        --ordr-accent: var(--brand-purple, #2d6a4f);
        --ordr-accent-soft: rgba(82, 183, 136, 0.16);
        --ordr-gradient: linear-gradient(135deg, var(--brand-purple, #2d6a4f) 0%, var(--brand-blue, #52b788) 100%);
    }
    .page-order-failed .ordr--fail {
        --ordr-accent: #f95674;
        --ordr-accent-soft: rgba(249, 86, 116, 0.16);
        --ordr-gradient: linear-gradient(135deg, #f95674 0%, #f9a156 100%);
    }

    .page-order-success .ordr-mono,
    .page-order-failed .ordr-mono {
        font-family: var(--ordr-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .page-order-success .ordr,
    .page-order-failed .ordr {
        padding: 56px 0 96px;
        background: var(--color-paper, #ffffff);
    }
    .page-order-success .ordr__shell,
    .page-order-failed .ordr__shell {
        width: 100%;
        max-width: 880px;
        margin: 0 auto;
        padding: 0 var(--spacing-20, 20px);
    }

    /* ---- Status band ---- */
    .page-order-success .ordr__band,
    .page-order-failed .ordr__band {
        position: relative;
        overflow: hidden;
        padding: 44px 44px 46px;
        border-radius: 22px;
        background: var(--ordr-night);
        color: #ffffff;
        box-shadow: 0 34px 64px -44px rgba(7, 7, 14, 0.95);
    }
    .page-order-success .ordr__band-glow,
    .page-order-failed .ordr__band-glow {
        position: absolute;
        top: -220px;
        right: -140px;
        width: 480px;
        height: 480px;
        border-radius: 50%;
        filter: blur(64px);
        pointer-events: none;
        background: radial-gradient(circle, var(--ordr-accent-soft) 0%, transparent 70%);
    }
    .page-order-success .ordr__band-inner,
    .page-order-failed .ordr__band-inner {
        position: relative;
        z-index: 1;
    }
    .page-order-success .ordr__band-label,
    .page-order-failed .ordr__band-label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        color: rgba(255, 255, 255, 0.55);
    }
    .page-order-success .ordr__dot,
    .page-order-failed .ordr__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--ordr-accent);
        box-shadow: 0 0 12px var(--ordr-accent);
    }
    .page-order-success .ordr__band-title,
    .page-order-failed .ordr__band-title {
        max-width: 18ch;
        margin: 0 0 16px;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: clamp(30px, 4.6vw, 50px);
        font-weight: 800;
        line-height: 1.04;
        letter-spacing: -0.035em;
        color: #ffffff;
    }
    .page-order-success .ordr__band-text,
    .page-order-failed .ordr__band-text {
        max-width: 54ch;
        margin: 0;
        font-size: 16px;
        line-height: 1.7;
        color: rgba(255, 255, 255, 0.66);
    }

    /* ---- Record ---- */
    .page-order-success .ordr__record {
        margin: 40px 0 0;
    }
    .page-order-success .ordr__row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px 24px;
        padding: 18px 8px;
        border-bottom: 1px solid var(--ordr-line-soft);
    }
    .page-order-success .ordr__row dt {
        color: var(--ordr-mute);
    }
    .page-order-success .ordr__value {
        margin: 0;
        font-family: var(--font-inter, sans-serif);
        font-size: 16px;
        font-weight: 600;
        color: var(--ordr-ink);
        word-break: break-word;
    }
    .page-order-success .ordr__value--code {
        font-family: var(--ordr-mono);
        font-size: 14px;
        letter-spacing: 0.02em;
    }
    .page-order-success .ordr__row--total {
        border-bottom: 0;
        border-top: 1px solid var(--ordr-line);
        margin-top: 4px;
        padding-top: 24px;
    }
    .page-order-success .ordr__value--total {
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 32px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
    }
    .page-order-success .ordr__pill {
        display: inline-flex;
        align-items: center;
        padding: 6px 14px;
        border: 1px solid rgba(116, 198, 157, 0.30);
        border-radius: 999px;
        background: var(--brand-blue-wash, rgba(116, 198, 157, 0.10));
        font-size: 13px;
        font-weight: 600;
        color: var(--brand-blue-dark, #40916c);
    }

    /* ---- Steps (failure) ---- */
    .page-order-failed .ordr__steps {
        margin-top: 40px;
    }
    .page-order-failed .ordr__steps-label {
        margin: 0 0 18px;
        color: var(--ordr-mute);
    }
    .page-order-failed .ordr__steps-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .page-order-failed .ordr__steps-list li {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 16px;
        align-items: baseline;
        padding: 18px 8px;
        border-bottom: 1px solid var(--ordr-line-soft);
        font-family: var(--font-inter, sans-serif);
        font-size: 16px;
        line-height: 1.65;
        color: var(--ordr-dim);
    }
    .page-order-failed .ordr__steps-num {
        color: var(--ordr-accent);
    }

    /* ---- Actions ---- */
    .page-order-success .ordr__actions,
    .page-order-failed .ordr__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 36px;
    }
    .page-order-success .ordr__btn,
    .page-order-failed .ordr__btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 26px;
        border: 1px solid transparent;
        border-radius: 12px;
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, color 200ms ease;
    }
    .page-order-success .ordr__btn--go,
    .page-order-failed .ordr__btn--go {
        background: var(--ordr-gradient);
        color: #ffffff;
        box-shadow: 0 14px 28px -16px var(--ordr-accent);
    }
    .page-order-success .ordr__btn--go:hover,
    .page-order-failed .ordr__btn--go:hover {
        color: #ffffff;
        transform: translateY(-2px);
    }
    .page-order-success .ordr__btn--ghost,
    .page-order-failed .ordr__btn--ghost {
        border-color: var(--ordr-line);
        color: var(--ordr-dim);
    }
    .page-order-success .ordr__btn--ghost:hover,
    .page-order-failed .ordr__btn--ghost:hover {
        border-color: var(--ordr-accent);
        color: var(--ordr-ink);
    }
    .page-order-success .ordr__btn i,
    .page-order-failed .ordr__btn i {
        font-size: 12px;
    }

    /* ---- Notes ---- */
    .page-order-success .ordr__note {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin: 28px 0 0;
        padding: 16px 20px;
        border-radius: 12px;
        background: var(--color-cream, #eef8f1);
        font-size: 14px;
        line-height: 1.6;
        color: var(--ordr-dim);
    }
    .page-order-success .ordr__note i {
        margin-top: 3px;
        color: var(--ordr-accent);
    }
    .page-order-success .ordr__note a {
        color: var(--brand-purple-dark, #1b4332);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .page-order-failed .ordr__support {
        margin-top: 36px;
        padding: 24px 26px;
        border: 1px solid var(--ordr-line-soft);
        border-radius: 16px;
        background: var(--color-cream, #eef8f1);
    }
    .page-order-failed .ordr__support-label {
        margin: 0 0 8px;
        color: var(--ordr-mute);
    }
    .page-order-failed .ordr__support-text {
        margin: 0;
        font-size: 15px;
        line-height: 1.65;
        color: var(--ordr-dim);
    }
    .page-order-failed .ordr__support-text a {
        color: var(--brand-purple-dark, #1b4332);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* ---- Focus ---- */
    .page-order-success .ordr__btn:focus-visible,
    .page-order-failed .ordr__btn:focus-visible {
        outline: 2px solid var(--brand-blue, #52b788);
        outline-offset: 3px;
    }

    /* ---- Responsive ---- */
    @media (max-width: 767px) {
        .page-order-success .ordr,
        .page-order-failed .ordr {
            padding: 40px 0 72px;
        }
        .page-order-success .ordr__band,
        .page-order-failed .ordr__band {
            padding: 32px 24px 34px;
            border-radius: 18px;
        }
        .page-order-success .ordr__row {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }
        .page-order-success .ordr__value--total {
            font-size: 28px;
        }
        .page-order-failed .ordr__steps-list li {
            grid-template-columns: 34px minmax(0, 1fr);
            gap: 12px;
            font-size: 15px;
        }
        .page-order-success .ordr__actions,
        .page-order-failed .ordr__actions {
            flex-direction: column;
            align-items: stretch;
        }
        .page-order-success .ordr__btn,
        .page-order-failed .ordr__btn {
            justify-content: center;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-order-success .ordr__btn,
        .page-order-failed .ordr__btn {
            transition: none !important;
        }
        .page-order-success .ordr__btn--go:hover,
        .page-order-failed .ordr__btn--go:hover {
            transform: none;
        }
    }

/* ===================== page-order-show ===================== */
    /* ============================================================
       ORDER SHOW / INVOICE CANVAS - REDESIGNED EDITORIAL THEMING
       ============================================================ */

    .page-order-show .invoice-section{
        background-color: var(--surface-paper-canvas, var(--color-paper));
        position: relative;
        overflow: hidden;
        min-height: 80vh;
    }

    /* Background artistic glows */
    .page-order-show .account-bg-blob{
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        -webkit-filter: blur(120px);
        pointer-events: none;
        opacity: 0.65;
        z-index: 0;
        mix-blend-mode: multiply;
    }
    .page-order-show .blob-mint{
        width: 450px;
        height: 450px;
        background-color: var(--color-mint-wash, var(--color-cream));
        top: -100px;
        left: -100px;
        animation: page-order-show-invoiceFloat 22s ease-in-out infinite;
    }
    .page-order-show .blob-sky{
        width: 380px;
        height: 380px;
        background-color: var(--color-sky-wash, var(--color-sky-wash));
        bottom: -80px;
        right: -80px;
        animation: page-order-show-invoiceFloat 26s ease-in-out infinite reverse;
    }
    .page-order-show .blob-peach{
        width: 320px;
        height: 320px;
        background-color: var(--surface-cream-wash, var(--color-cream));
        top: 35%;
        left: 40%;
        animation: page-order-show-invoiceFloat 30s ease-in-out infinite;
    }

    @keyframes page-order-show-invoiceFloat {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%      { transform: translate(28px, -32px) scale(1.08); }
    }

    .page-order-show .invoice-container{
        position: relative;
        z-index: 2;
    }

    /* ---- INVOICE CARD CONTAINER ---- */
    .page-order-show .invoice-card{
        background: var(--color-paper, var(--color-paper));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 20px;
        padding: clamp(20px, 5vw, 50px);
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 1px 3px -1px rgba(0, 0, 0, 0.03);
    }

    /* ---- BRANDING & HEADER ---- */
    .page-order-show .invoice-card__header{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 24px;
        border-bottom: 1.5px dashed var(--color-stone, var(--color-stone));
        padding-bottom: 30px;
    }

    .page-order-show .invoice-brand__logo{
        font-family: var(--font-graphik), sans-serif;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.18em;
        color: var(--color-pencil, var(--color-pencil));
        text-transform: uppercase;
        display: block;
    }

    .page-order-show .invoice-brand__title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 24px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
    }

    .page-order-show .order-number-badge{
        font-family: var(--font-graphik), sans-serif;
        font-size: 13px;
        font-weight: 700;
        background: var(--color-cream, var(--color-cream));
        border: 1px solid var(--color-stone, var(--color-stone));
        color: var(--color-ink, var(--brand-black-soft));
        padding: 4px 10px;
        border-radius: 6px;
    }

    .page-order-show .invoice-actions{
        display: flex;
        gap: 12px;
    }

    /* Action Buttons */
    .page-order-show .invoice-btn{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        font-family: var(--font-inter), sans-serif;
        font-size: 13px;
        font-weight: 700;
        border-radius: 10px;
        text-decoration: none;
        transition: all 0.25s ease;
        cursor: pointer;
    }

    .page-order-show .invoice-btn--primary{
        background: var(--color-ember-red, var(--brand-purple));
        color: #fff !important;
        border: 1px solid var(--color-ember-red, var(--brand-purple));
        box-shadow: 0 4px 12px rgba(82, 183, 136, 0.18);
    }
    .page-order-show .invoice-btn--primary:hover{
        background: var(--color-deep-ember, var(--brand-purple-dark));
        border-color: var(--color-deep-ember, var(--brand-purple-dark));
        transform: translateY(-1.5px);
        box-shadow: 0 6px 16px rgba(82, 183, 136, 0.25);
    }

    .page-order-show .invoice-btn--secondary{
        background: transparent;
        color: var(--color-pencil, var(--color-pencil)) !important;
        border: 1px solid var(--color-stone, var(--color-stone));
    }
    .page-order-show .invoice-btn--secondary:hover{
        background: var(--color-cream, var(--color-cream));
        color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
        border-color: rgba(82, 183, 136, 0.3);
        transform: translateY(-1.5px);
    }

    /* ---- PROGRESS TIMELINE STEPPER ---- */
    .page-order-show .invoice-progress-container{
        background: var(--surface-cream-wash, var(--color-cream));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 16px;
        padding: 24px;
    }

    .page-order-show .invoice-stepper{
        display: flex;
        justify-content: space-between;
        position: relative;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }

    .page-order-show .stepper-line{
        position: absolute;
        top: 20px;
        left: 40px;
        right: 40px;
        height: 4px;
        background: var(--color-stone, var(--color-stone));
        z-index: 1;
        border-radius: 2px;
    }
    .page-order-show .stepper-line-fill{
        height: 100%;
        background: var(--color-teal-dusk, var(--color-teal-dusk));
        border-radius: 2px;
        transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .page-order-show .stepper-step{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
        width: 120px;
        text-align: center;
    }

    .page-order-show .step-icon{
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--color-paper, var(--color-paper));
        border: 2px solid var(--color-stone, var(--color-stone));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: var(--color-graphite, var(--color-graphite));
        transition: all 0.3s ease;
    }

    .page-order-show .step-label{
        margin-top: 10px;
        font-family: var(--font-inter), sans-serif;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-graphite, var(--color-graphite));
    }

    .page-order-show .step-date{
        font-family: var(--font-inter), sans-serif;
        font-size: 10.5px;
        color: var(--color-pencil, var(--color-pencil));
        margin-top: 2px;
    }

    /* Stepper Status States */
    .page-order-show .stepper-step.completed .step-icon{
        background: var(--color-teal-dusk, var(--color-teal-dusk));
        border-color: var(--color-teal-dusk, var(--color-teal-dusk));
        color: #fff;
        box-shadow: 0 0 10px rgba(73, 125, 126, 0.25);
    }
    .page-order-show .stepper-step.completed .step-label{
        color: var(--color-teal-dusk, var(--color-teal-dusk));
    }

    .page-order-show .stepper-step.cancelled .step-icon{
        background: var(--color-ember-red, var(--brand-purple));
        border-color: var(--color-ember-red, var(--brand-purple));
        color: #fff;
    }
    .page-order-show .stepper-step.cancelled .step-label{
        color: var(--color-ember-red, var(--brand-purple));
    }

    .page-order-show .stepper-step.pending .step-icon{
        background: var(--color-paper, var(--color-paper));
        border-color: var(--color-stone, var(--color-stone));
        animation: page-order-show-stepperPulse 2s infinite ease-in-out;
    }

    @keyframes page-order-show-stepperPulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
        50% { transform: scale(1.04); box-shadow: 0 0 8px rgba(37,34,30,0.06); }
    }

    /* ---- METADATA DETAILS GRID ---- */
    .page-order-show .invoice-details-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
    }

    .page-order-show .details-card{
        background: var(--color-paper, var(--color-paper));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 14px;
        padding: 24px;
        transition: transform 0.2s ease;
    }
    .page-order-show .details-card:hover{
        transform: translateY(-2px);
    }

    .page-order-show .details-card__title{
        font-family: var(--font-graphik), sans-serif;
        font-weight: 700;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-deep-ember, var(--brand-purple-dark));
        border-bottom: 1px solid var(--color-stone, var(--color-stone));
        padding-bottom: 12px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .page-order-show .detail-row{
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid rgba(37,34,30,0.03);
        font-family: var(--font-inter), sans-serif;
        font-size: 13.5px;
    }
    .page-order-show .detail-row:last-child{
        border-bottom: none;
    }

    .page-order-show .detail-label{
        color: var(--color-pencil, var(--color-pencil));
        font-weight: 500;
    }
    .page-order-show .detail-value{
        color: var(--color-ink, var(--brand-black-soft));
        font-weight: 700;
        text-align: right;
    }

    /* ---- TABLE AND ITEMS LIST ---- */
    .page-order-show .invoice-section-title{
        font-family: var(--font-graphik), sans-serif;
        font-weight: 700;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-ink, var(--brand-black-soft));
    }

    .page-order-show .db-table{
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 12px;
        overflow: hidden;
    }
    .page-order-show .db-table thead th{
        background: var(--surface-cream-wash, var(--color-cream)) !important;
        border-bottom: 1.5px solid var(--color-stone, var(--color-stone)) !important;
        color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
        font-family: var(--font-inter), sans-serif;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 14px 16px;
    }
    .page-order-show .db-table tbody tr{
        border-bottom: 1px solid var(--color-stone, rgba(215, 214, 212, 0.5)) !important;
        transition: background-color 0.2s ease;
    }
    .page-order-show .db-table tbody tr:last-child{
        border-bottom: none !important;
    }
    .page-order-show .db-table tbody tr:hover{
        background-color: var(--surface-cream-wash, var(--color-cream)) !important;
    }
    .page-order-show .db-table tbody td{
        padding: 16px;
        vertical-align: middle;
        font-family: var(--font-inter), sans-serif;
        font-size: 13.5px;
        color: var(--color-pencil, var(--color-pencil));
    }
    .page-order-show .db-table__course-title{
        color: var(--color-ink, var(--brand-black-soft)) !important;
        font-weight: 700;
    }
    .page-order-show .db-table__price{
        font-family: var(--font-graphik), sans-serif;
        font-weight: 800;
        color: var(--color-ink, var(--brand-black-soft));
    }

    /* Badges & Status Pills */
    .page-order-show .db-points-badge{
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 11.5px;
        font-weight: 700;
        border: 1px solid transparent;
    }
    .page-order-show .db-points-badge--amber{
        background: var(--color-cream, var(--color-cream));
        border-color: rgba(82, 183, 136, 0.15);
        color: var(--color-ember-red, var(--brand-purple));
    }
    .page-order-show .db-status-pill{
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .page-order-show .db-status-pill--success{ background: var(--color-mint-wash, var(--color-cream)); color: var(--color-forest, var(--color-forest)); }
    .page-order-show .db-status-pill--warning{ background: var(--surface-cream-wash, var(--color-cream)); color: #cf7820; }
    .page-order-show .db-status-pill--danger{ background: #ffebeb; color: #cf3220; }
    .page-order-show .db-status-pill--teal{ background: var(--color-sky-wash, var(--color-sky-wash)); color: var(--color-teal-dusk, var(--color-teal-dusk)); }
    .page-order-show .db-status-pill--neutral{ background: #f1f0ef; color: var(--color-pencil, var(--color-pencil)); }

    /* Summary / Total Row */
    .page-order-show .invoice-summary-row td{
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        font-family: var(--font-graphik), sans-serif;
        font-size: 15px;
        color: var(--color-ink, var(--brand-black-soft));
    }
    .page-order-show .grand-total-value{
        font-size: 20px !important;
        font-weight: 800 !important;
        color: var(--color-ember-red, var(--brand-purple)) !important;
    }

    /* ---- RESPONSIVE LAYOUTS ---- */
    @media (max-width: 768px) {
        .page-order-show .invoice-card__header{
            flex-direction: column;
            align-items: stretch;
        }
        .page-order-show .invoice-actions{
            justify-content: flex-start;
        }
        .page-order-show .invoice-actions .invoice-btn{
            flex: 1;
            justify-content: center;
        }
        .page-order-show .invoice-stepper{
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
            padding-left: 20px;
        }
        .page-order-show .stepper-line{
            left: 31px;
            top: 20px;
            bottom: 20px;
            width: 4px;
            height: auto;
        }
        .page-order-show .stepper-line-fill{
            width: 100%;
            height: 50%;
            transition: height 0.6s ease;
        }
        .page-order-show .stepper-step{
            flex-direction: row;
            text-align: left;
            width: 100%;
            gap: 16px;
        }
        .page-order-show .step-label{
            margin-top: 0;
        }
    }

/* ===================== page-order-success ===================== */
    /* Styled together with page-order-failed in the order result block above. */

/* ===================== page-page ===================== */
    /* =============================================================
       STATIC / POLICY PAGES — "Numbered record"
       Content first: a single reading column with clause numbers in
       the margin, a live contents rail on the right, and a reading
       progress bar. Labels are monospace, the text column is not.
       ============================================================= */

    .page-page {
        --doc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
        --doc-line: rgba(82, 183, 136, 0.18);
        --doc-line-soft: rgba(82, 183, 136, 0.10);
        --doc-ink: var(--color-ink, #10241a);
        --doc-dim: var(--color-pencil, #3d5a4b);
        --doc-mute: var(--color-graphite, #6e8b7c);
        --doc-accent: linear-gradient(90deg, var(--brand-purple, #2d6a4f) 0%, var(--brand-blue, #52b788) 100%);
    }

    .page-page .doc-mono {
        font-family: var(--doc-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    /* ---- Reading progress ---- */
    .page-page .doc-progress {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1201;            /* the site header is fixed at 1200 */
        height: 3px;
        background: rgba(255, 255, 255, 0.10);
        pointer-events: none;
    }
    .page-page .doc-progress__bar {
        display: block;
        width: 100%;
        height: 100%;
        transform: scaleX(0);
        transform-origin: 0 50%;
        background: var(--doc-accent);
    }

    /* ---- Sheet ---- */
    .page-page .doc {
        position: relative;
        padding: 0 0 96px;
        background: var(--color-paper, #ffffff);
    }
    .page-page .doc__shell {
        width: 100%;
        max-width: 1160px;
        margin: 0 auto;
        padding: 0 var(--spacing-20, 20px);
    }

    /* ---- Meta strip ---- */
    .page-page .doc__bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 26px 0 22px;
        border-bottom: 1px solid var(--doc-line);
    }
    .page-page .doc__facts {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 48px;
        margin: 0;
    }
    .page-page .doc__fact dt {
        margin-bottom: 6px;
        color: var(--doc-mute);
    }
    .page-page .doc__fact dd {
        margin: 0;
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--doc-ink);
    }
    .page-page .doc__print {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 10px 18px;
        border: 1px solid var(--doc-line);
        border-radius: 999px;
        background: transparent;
        color: var(--brand-purple-dark, #1b4332);
        cursor: pointer;
        transition: background 200ms ease, border-color 200ms ease;
    }
    .page-page .doc__print:hover {
        border-color: var(--brand-purple, #2d6a4f);
        background: var(--brand-purple-wash, rgba(82, 183, 136, 0.10));
    }
    .page-page .doc__print i {
        font-size: 12px;
    }

    /* ---- Layout: text column left, contents rail right ---- */
    .page-page .doc__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 250px;
        gap: 80px;
        align-items: start;
        padding-top: 56px;
    }
    .page-page .doc__body {
        grid-column: 1;
        grid-row: 1;
        padding-left: 68px;
    }
    .page-page .doc__toc {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 96px;
    }
    .page-page .doc__toc[hidden] {
        display: none;
    }
    .page-page .doc__toc-label {
        margin: 0 0 16px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--doc-line);
        color: var(--doc-mute);
    }
    .page-page .doc__toc-list {
        margin: 0;
        padding: 0;
        list-style: none;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
    .page-page .doc__toc-list a {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 8px;
        padding: 9px 0 9px 12px;
        border-left: 2px solid transparent;
        font-family: var(--font-inter, sans-serif);
        font-size: 13.5px;
        line-height: 1.45;
        font-weight: 500;
        color: var(--doc-mute);
        text-decoration: none;
        transition: color 180ms ease, border-color 180ms ease;
    }
    .page-page .doc__toc-list a:hover {
        color: var(--doc-ink);
        border-left-color: var(--doc-line);
    }
    .page-page .doc__toc-list a.is-current {
        color: var(--brand-purple-dark, #1b4332);
        border-left-color: var(--brand-purple, #2d6a4f);
        font-weight: 600;
    }
    .page-page .doc__toc-num {
        font-family: var(--doc-mono);
        font-size: 10.5px;
        letter-spacing: 0.06em;
        color: var(--doc-mute);
        padding-top: 2px;
    }
    .page-page .doc__toc-list a.is-current .doc__toc-num {
        color: var(--brand-purple, #2d6a4f);
    }

    /* ---- Document text ---- */
    .page-page .doc__body .doc__dupe {
        display: none;
    }
    .page-page .doc__body > *:first-child {
        margin-top: 0;
    }
    .page-page .doc__body p {
        max-width: 68ch;
        margin: 0 0 20px;
        font-family: var(--font-inter, sans-serif);
        font-size: 16.5px;
        line-height: 1.8;
        color: var(--doc-dim);
    }
    .page-page .doc__body h1,
    .page-page .doc__body h2,
    .page-page .doc__body h3,
    .page-page .doc__body h4 {
        font-family: var(--font-graphik, 'Inter', sans-serif);
        color: var(--doc-ink);
        letter-spacing: -0.02em;
    }
    .page-page .doc__body h1 { font-size: 30px; }
    .page-page .doc__body h2 { font-size: 26px; }
    .page-page .doc__body h3 { font-size: 21px; }
    .page-page .doc__body h4 { font-size: 17px; }

    /* Clause numbers sit in the left margin of the reading column */
    .page-page .doc__body .doc__section-head {
        position: relative;
        margin: 52px 0 16px;
        padding-top: 22px;
        border-top: 1px solid var(--doc-line-soft);
        font-weight: 800;
        line-height: 1.25;
        scroll-margin-top: 90px;
    }
    .page-page .doc__body .doc__section-head::before {
        content: attr(data-num);
        position: absolute;
        left: -68px;
        top: 22px;
        width: 44px;
        font-family: var(--doc-mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.06em;
        line-height: 1.9;
        text-align: right;
        color: var(--brand-purple, #2d6a4f);
    }
    .page-page .doc__body .doc__section-head:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
    .page-page .doc__body .doc__section-head:first-child::before {
        top: 0;
    }

    .page-page .doc__body ul,
    .page-page .doc__body ol {
        max-width: 68ch;
        margin: 0 0 22px;
        padding: 0;
        list-style: none;
    }
    .page-page .doc__body li {
        position: relative;
        margin-bottom: 10px;
        padding-left: 26px;
        font-family: var(--font-inter, sans-serif);
        font-size: 16px;
        line-height: 1.75;
        color: var(--doc-dim);
    }
    .page-page .doc__body ul li::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 12px;
        width: 7px;
        height: 7px;
        border-radius: 2px;
        background: var(--brand-blue, #52b788);
    }
    .page-page .doc__body ol {
        counter-reset: doc-item;
    }
    .page-page .doc__body ol li {
        counter-increment: doc-item;
    }
    .page-page .doc__body ol li::before {
        content: counter(doc-item) ".";
        position: absolute;
        left: 0;
        top: 0;
        font-family: var(--doc-mono);
        font-size: 12px;
        line-height: 2.2;
        color: var(--brand-purple, #2d6a4f);
    }
    .page-page .doc__body strong,
    .page-page .doc__body b {
        font-weight: 650;
        color: var(--doc-ink);
    }
    .page-page .doc__body a {
        color: var(--brand-purple-dark, #1b4332);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
    }
    .page-page .doc__body a:hover {
        color: var(--brand-blue-dark, #40916c);
    }
    .page-page .doc__body blockquote {
        max-width: 68ch;
        margin: 0 0 24px;
        padding: 4px 0 4px 24px;
        border-left: 2px solid var(--brand-purple, #2d6a4f);
        font-size: 16.5px;
        line-height: 1.75;
        color: var(--doc-ink);
    }
    .page-page .doc__body img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
        margin-bottom: 22px;
    }
    .page-page .doc__body table {
        width: 100%;
        margin: 0 0 26px;
        border-collapse: collapse;
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
    }
    .page-page .doc__body table th,
    .page-page .doc__body table td {
        padding: 12px 14px;
        border: 1px solid var(--doc-line-soft);
        text-align: left;
        color: var(--doc-dim);
    }
    .page-page .doc__body table th {
        background: var(--color-cream, #eef8f1);
        color: var(--doc-ink);
        font-weight: 600;
    }

    /* ---- Footer prompt ---- */
    .page-page .doc__foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin-top: 72px;
        padding: 30px 34px;
        border: 1px solid var(--doc-line-soft);
        border-radius: 16px;
        background: var(--color-cream, #eef8f1);
    }
    .page-page .doc__foot-title {
        margin: 0 0 6px;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--doc-ink);
    }
    .page-page .doc__foot-text {
        margin: 0;
        font-size: 15px;
        line-height: 1.6;
        color: var(--doc-dim);
    }
    .page-page .doc__foot-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 13px 24px;
        border-radius: 12px;
        background: var(--brand-purple, #2d6a4f);
        color: #ffffff;
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        transition: background 200ms ease, transform 200ms ease;
    }
    .page-page .doc__foot-cta:hover {
        background: var(--brand-purple-dark, #1b4332);
        color: #ffffff;
        transform: translateY(-2px);
    }
    .page-page .doc__foot-cta i {
        font-size: 12px;
    }

    /* ---- Back to top ---- */
    .page-page .doc__top {
        position: fixed;
        right: 28px;
        bottom: 28px;
        z-index: 30;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 12px 18px;
        border: 1px solid var(--doc-line);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(8px);
        color: var(--brand-purple-dark, #1b4332);
        cursor: pointer;
        box-shadow: 0 14px 30px -18px rgba(37, 34, 60, 0.6);
        transition: transform 200ms ease, background 200ms ease;
    }
    .page-page .doc__top[hidden] {
        display: none;
    }
    .page-page .doc__top:hover {
        transform: translateY(-2px);
        background: #ffffff;
    }
    .page-page .doc__top i {
        font-size: 11px;
    }

    /* ---- Focus ---- */
    .page-page .doc__toc-list a:focus-visible,
    .page-page .doc__print:focus-visible,
    .page-page .doc__foot-cta:focus-visible,
    .page-page .doc__top:focus-visible {
        outline: 2px solid var(--brand-blue, #52b788);
        outline-offset: 3px;
    }

    /* ---- Responsive ---- */
    @media (max-width: 1199px) {
        .page-page .doc__grid {
            grid-template-columns: minmax(0, 1fr) 220px;
            gap: 48px;
        }
        .page-page .doc__body {
            padding-left: 56px;
        }
        .page-page .doc__body .doc__section-head::before {
            left: -56px;
            width: 36px;
        }
    }
    @media (max-width: 991px) {
        .page-page .doc {
            padding-bottom: 72px;
        }
        .page-page .doc__grid {
            grid-template-columns: minmax(0, 1fr);
            gap: 36px;
            padding-top: 36px;
        }
        /* Contents move above the text and stop sticking */
        .page-page .doc__body,
        .page-page .doc__toc {
            grid-column: 1;
        }
        .page-page .doc__toc {
            grid-row: 1;
            position: static;
            padding: 20px 22px;
            border: 1px solid var(--doc-line-soft);
            border-radius: 14px;
            background: var(--color-cream, #eef8f1);
        }
        .page-page .doc__body {
            grid-row: 2;
            padding-left: 0;
        }
        .page-page .doc__toc-list {
            max-height: none;
            overflow: visible;
        }
        .page-page .doc__body .doc__section-head {
            padding-left: 48px;
        }
        .page-page .doc__body .doc__section-head::before {
            left: 0;
            width: 36px;
            text-align: left;
        }
    }
    @media (max-width: 767px) {
        .page-page .doc__bar {
            gap: 18px;
        }
        .page-page .doc__facts {
            gap: 12px 28px;
        }
        .page-page .doc__body p {
            font-size: 16px;
        }
        .page-page .doc__body h1 { font-size: 26px; }
        .page-page .doc__body h2 { font-size: 23px; }
        .page-page .doc__body h3 { font-size: 19px; }
        .page-page .doc__foot {
            padding: 24px 22px;
        }
        .page-page .doc__foot-cta {
            width: 100%;
            justify-content: center;
        }
        .page-page .doc__top {
            right: 16px;
            bottom: 16px;
            padding: 11px 14px;
        }
        .page-page .doc__top span {
            display: none;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-page .doc-progress__bar,
        .page-page .doc__foot-cta,
        .page-page .doc__top,
        .page-page .doc__toc-list a {
            transition: none !important;
        }
        .page-page .doc__foot-cta:hover,
        .page-page .doc__top:hover {
            transform: none;
        }
    }

    /* ---- Print: the document only ---- */
    @media print {
        .page-page .doc-progress,
        .page-page .doc__toc,
        .page-page .doc__print,
        .page-page .doc__top,
        .page-page .doc__foot,
        .page-page .artf-crumb,
        .page-page header.main-header,
        .page-page footer {
            display: none !important;
        }
        .page-page .doc {
            padding: 0 !important;
        }
        .page-page .doc__grid {
            display: block !important;
            padding-top: 0 !important;
        }
        .page-page .doc__body {
            padding-left: 0 !important;
        }
        .page-page .doc__body p,
        .page-page .doc__body li {
            color: #000 !important;
        }
        .page-page .doc__body .doc__section-head {
            page-break-after: avoid;
        }
    }

/* ===================== page-product-lists ===================== */
    /* =============================================================
       COURSE INDEX — "Wide rows"
       Light and typographic: an editorial header, a real category
       rail, then every course as a full width row. No card grid,
       no banner image card, no dead filter buttons.
       ============================================================= */

    .page-product-lists {
        --idx-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
        --idx-line: rgba(82, 183, 136, 0.20);
        --idx-line-soft: rgba(82, 183, 136, 0.11);
        --idx-ink: var(--color-ink, #10241a);
        --idx-dim: var(--color-pencil, #3d5a4b);
        --idx-mute: var(--color-graphite, #6e8b7c);
        --idx-accent: linear-gradient(135deg, var(--brand-purple, #2d6a4f) 0%, var(--brand-blue, #52b788) 100%);
    }

    .page-product-lists .idx-mono {
        font-family: var(--idx-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .page-product-lists .idx {
        padding: 56px 0 96px;
        background: var(--color-paper, #ffffff);
    }
    .page-product-lists .idx__shell {
        width: 100%;
        max-width: 1120px;
        margin: 0 auto;
        padding: 0 var(--spacing-20, 20px);
    }

    /* ---- Header ---- */
    .page-product-lists .idx__head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 28px;
        padding-bottom: 30px;
        border-bottom: 1px solid var(--idx-line);
    }
    .page-product-lists .idx__head-copy {
        max-width: 62ch;
    }
    .page-product-lists .idx__eyebrow {
        display: block;
        margin-bottom: 16px;
        color: var(--brand-purple-dark, #1b4332);
    }
    .page-product-lists .idx__title {
        margin: 0 0 14px;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: clamp(32px, 4.6vw, 52px);
        font-weight: 800;
        line-height: 1.04;
        letter-spacing: -0.035em;
        color: var(--idx-ink);
    }
    .page-product-lists .idx__lede {
        margin: 0;
        font-size: 16.5px;
        line-height: 1.7;
        color: var(--idx-dim);
    }
    .page-product-lists .idx__count {
        display: flex;
        align-items: baseline;
        gap: 9px;
        margin: 0;
    }
    .page-product-lists .idx__count-num {
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 42px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.04em;
        color: var(--brand-purple, #2d6a4f);
    }
    .page-product-lists .idx__count .idx-mono {
        color: var(--idx-mute);
    }

    /* ---- Category rail ---- */
    .page-product-lists .idx__rail {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 24px 0 8px;
    }
    .page-product-lists .idx__chip {
        display: inline-flex;
        align-items: center;
        padding: 9px 18px;
        border: 1px solid var(--idx-line-soft);
        border-radius: 999px;
        font-family: var(--font-inter, sans-serif);
        font-size: 13.5px;
        font-weight: 500;
        color: var(--idx-dim);
        text-decoration: none;
        transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
    }
    .page-product-lists .idx__chip:hover {
        border-color: var(--brand-purple, #2d6a4f);
        color: var(--brand-purple-dark, #1b4332);
    }
    .page-product-lists .idx__chip.is-active {
        border-color: transparent;
        background: var(--idx-accent);
        color: #ffffff;
        font-weight: 600;
    }

    /* ---- Rows ---- */
    .page-product-lists .idx__list {
        margin: 24px 0 0;
        padding: 0;
        list-style: none;
    }
    .page-product-lists .idx__row {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr) auto;
        align-items: center;
        gap: 32px;
        padding: 26px 0;
        border-bottom: 1px solid var(--idx-line-soft);
    }
    .page-product-lists .idx__media {
        display: block;
        overflow: hidden;
        height: 140px;
        border: 1px solid var(--idx-line-soft);
        border-radius: 14px;
        background: var(--color-cream, #eef8f1);
    }
    .page-product-lists .idx__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 500ms ease;
    }
    .page-product-lists .idx__row:hover .idx__media img {
        transform: scale(1.04);
    }
    .page-product-lists .idx__media-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 26px;
        color: var(--brand-purple-light, #95d5b2);
    }
    .page-product-lists .idx__body {
        min-width: 0;
    }
    .page-product-lists .idx__course {
        margin: 0 0 10px;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: clamp(19px, 2.1vw, 24px);
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: -0.025em;
    }
    .page-product-lists .idx__course a {
        color: var(--idx-ink);
        text-decoration: none;
    }
    .page-product-lists .idx__course a:hover {
        color: var(--brand-purple-dark, #1b4332);
    }
    .page-product-lists .idx__desc {
        max-width: 62ch;
        margin: 0 0 14px;
        font-size: 15px;
        line-height: 1.65;
        color: var(--idx-dim);
    }
    .page-product-lists .idx__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 12px;
    }
    .page-product-lists .idx__meta-item {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        border: 1px solid var(--idx-line-soft);
        border-radius: 999px;
        color: var(--idx-mute);
    }
    .page-product-lists .idx__go {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 13px 24px;
        border: 1px solid var(--idx-line);
        border-radius: 12px;
        font-family: var(--font-inter, sans-serif);
        font-size: 14.5px;
        font-weight: 600;
        color: var(--brand-purple-dark, #1b4332);
        text-decoration: none;
        white-space: nowrap;
        transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
    }
    .page-product-lists .idx__go:hover {
        border-color: transparent;
        background: var(--idx-accent);
        color: #ffffff;
        transform: translateY(-2px);
    }
    .page-product-lists .idx__go i {
        font-size: 11px;
    }

    /* ---- Pager ---- */
    .page-product-lists .idx__pager {
        margin-top: 40px;
    }
    .page-product-lists .idx__pager .pagination {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .page-product-lists .idx__pager .page-link {
        display: inline-flex;
        padding: 10px 16px;
        border: 1px solid var(--idx-line-soft);
        border-radius: 10px;
        font-size: 14px;
        color: var(--idx-dim);
        text-decoration: none;
    }
    .page-product-lists .idx__pager .page-item.active .page-link {
        border-color: transparent;
        background: var(--idx-accent);
        color: #ffffff;
    }
    .page-product-lists .idx__pager .page-item.disabled .page-link {
        opacity: 0.45;
    }

    /* ---- Empty ---- */
    .page-product-lists .idx__panel {
        margin-top: 36px;
        padding: 60px 40px;
        border: 1px solid var(--idx-line-soft);
        border-radius: 20px;
        background: var(--color-cream, #eef8f1);
        text-align: center;
    }
    .page-product-lists .idx__panel-label {
        display: block;
        margin-bottom: 14px;
        color: var(--brand-purple-dark, #1b4332);
    }
    .page-product-lists .idx__panel-title {
        margin: 0 0 26px;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: clamp(22px, 2.6vw, 30px);
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--idx-ink);
    }
    .page-product-lists .idx__panel-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 26px;
        border-radius: 12px;
        background: var(--idx-accent);
        color: #ffffff;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }
    .page-product-lists .idx__panel-cta:hover {
        color: #ffffff;
    }

    /* ---- Focus ---- */
    .page-product-lists .idx__chip:focus-visible,
    .page-product-lists .idx__go:focus-visible,
    .page-product-lists .idx__course a:focus-visible,
    .page-product-lists .idx__panel-cta:focus-visible {
        outline: 2px solid var(--brand-blue, #52b788);
        outline-offset: 3px;
    }

    /* ---- Responsive ---- */
    @media (max-width: 991px) {
        .page-product-lists .idx {
            padding: 40px 0 80px;
        }
        .page-product-lists .idx__row {
            grid-template-columns: 170px minmax(0, 1fr);
            gap: 22px;
        }
        .page-product-lists .idx__media {
            height: 118px;
        }
        .page-product-lists .idx__go {
            grid-column: 2;
            justify-self: start;
        }
        .page-product-lists .idx__desc {
            margin-bottom: 12px;
        }
    }
    @media (max-width: 767px) {
        .page-product-lists .idx__head {
            align-items: flex-start;
        }
        .page-product-lists .idx__count-num {
            font-size: 34px;
        }
        .page-product-lists .idx__row {
            grid-template-columns: minmax(0, 1fr);
            gap: 16px;
        }
        .page-product-lists .idx__media {
            height: 180px;
        }
        .page-product-lists .idx__go {
            grid-column: 1;
            width: 100%;
            justify-content: center;
        }
        .page-product-lists .idx__panel {
            padding: 40px 22px;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-product-lists .idx__media img,
        .page-product-lists .idx__go,
        .page-product-lists .idx__chip {
            transition: none !important;
        }
        .page-product-lists .idx__row:hover .idx__media img,
        .page-product-lists .idx__go:hover {
            transform: none;
        }
    }

/* ===================== page-product_detail ===================== */
    /* =============================================================
       COURSE DOSSIER — masthead spec card → brief → level ladder
       Direction: technical/editorial. Monospace field labels carry
       the data, one continuous ladder replaces hidden tabs so every
       level (and its price) is readable without a click.
       ============================================================= */

    .page-product_detail {
        --cdx-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
        --cdx-night: #07070e;
        --cdx-line: rgba(82, 183, 136, 0.20);
        --cdx-line-soft: rgba(82, 183, 136, 0.11);
        --cdx-dim: var(--color-pencil, #3d5a4b);
        --cdx-mute: var(--color-graphite, #6e8b7c);
        --cdx-accent: linear-gradient(135deg, var(--brand-purple, #2d6a4f) 0%, var(--brand-blue, #52b788) 100%);
    }

    /* Global: hide the stray palette icon (kept from the previous sheet) */
    i.fas.fa-palette {
        display: none;
    }

    /* Layout shell — page-owned so the theme's `section > .container`
       vertical padding doesn't fight these sections' own rhythm */
    .page-product_detail .cdx-shell {
        width: 100%;
        max-width: var(--page-max-width, 1200px);
        margin: 0 auto;
        padding: 0 var(--spacing-20, 20px);
    }

    /* -------------------------------------------------------------
       Shared utility voice — every label on this page is monospace
       ------------------------------------------------------------- */
    .page-product_detail .cdx-mono {
        font-family: var(--cdx-mono);
        font-size: 11px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    /* =============================================================
       MASTHEAD
       ============================================================= */
    .page-product_detail .cdx-mast {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: 40px 0 96px;
        background: var(--cdx-night);
        color: #fff;
    }
    .page-product_detail .cdx-mast__bg {
        position: absolute;
        inset: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.32;
    }
    .page-product_detail .cdx-mast__veil {
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            linear-gradient(104deg, rgba(7, 7, 14, 0.97) 0%, rgba(7, 7, 14, 0.90) 46%, rgba(7, 7, 14, 0.52) 100%),
            linear-gradient(180deg, rgba(7, 7, 14, 0.88) 0%, rgba(7, 7, 14, 0) 34%, rgba(7, 7, 14, 0.82) 100%);
    }
    .page-product_detail .cdx-mast__aurora {
        position: absolute;
        top: -240px;
        right: -140px;
        z-index: -1;
        width: 620px;
        height: 620px;
        border-radius: 50%;
        pointer-events: none;
        filter: blur(60px);
        background: radial-gradient(circle, rgba(82, 183, 136, 0.40) 0%, rgba(116, 198, 157, 0.16) 46%, transparent 70%);
    }
    .page-product_detail .cdx-mast__inner {
        position: relative;
        z-index: 1;
    }

    /* ---- Breadcrumb trail (lives inside the masthead) ---- */
    .page-product_detail .cdx-trail ol {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin: 0 0 56px;
        padding: 0;
        list-style: none;
        font-family: var(--cdx-mono);
        font-size: 10.5px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }
    .page-product_detail .cdx-trail a {
        color: rgba(255, 255, 255, 0.55);
        font-weight: 500;
        text-decoration: none;
        transition: color 200ms ease;
    }
    .page-product_detail .cdx-trail a:hover {
        color: #ffffff;
    }
    .page-product_detail .cdx-trail__sep {
        color: rgba(255, 255, 255, 0.22);
    }
    .page-product_detail .cdx-trail__current {
        max-width: 38ch;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--brand-purple-light, #95d5b2);
    }

    /* ---- Masthead layout ---- */
    .page-product_detail .cdx-mast__grid {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
        gap: 72px;
        align-items: end;
    }
    .page-product_detail .cdx-mast__kicker {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 22px;
        color: var(--brand-purple-light, #95d5b2);
    }
    .page-product_detail .cdx-mast__kicker::before {
        content: "";
        display: inline-block;
        width: 28px;
        height: 1px;
        background: var(--brand-purple-light, #95d5b2);
    }
    .page-product_detail .cdx-mast__title {
        max-width: 18ch;
        margin: 0 0 24px;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: clamp(34px, 5vw, 60px);
        font-weight: 800;
        line-height: 1.03;
        letter-spacing: -0.035em;
        color: #ffffff;
    }
    .page-product_detail .cdx-mast__lede {
        max-width: 56ch;
        margin: 0;
        font-family: var(--font-inter, sans-serif);
        font-size: 16.5px;
        line-height: 1.7;
        color: rgba(255, 255, 255, 0.68);
    }

    /* ---- Spec card ---- */
    .page-product_detail .cdx-spec-card {
        position: relative;
        padding: 26px 28px 28px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
    }
    .page-product_detail .cdx-spec-card::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 28px;
        right: 28px;
        height: 2px;
        border-radius: 2px;
        background: var(--cdx-accent);
    }
    .page-product_detail .cdx-spec-card__title {
        display: block;
        margin-bottom: 20px;
        color: rgba(255, 255, 255, 0.42);
    }
    .page-product_detail .cdx-spec-card__rows {
        margin: 0;
    }
    .page-product_detail .cdx-spec-card__row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 20px;
        padding: 13px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .page-product_detail .cdx-spec-card__row:first-child {
        padding-top: 0;
        border-top: 0;
    }
    .page-product_detail .cdx-spec-card__row dt {
        color: rgba(255, 255, 255, 0.42);
    }
    .page-product_detail .cdx-spec-card__row dd {
        margin: 0;
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.01em;
        text-align: right;
        color: #ffffff;
    }
    .page-product_detail .cdx-spec-card__row dd .cdx-mono {
        margin-left: 3px;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.5);
    }
    .page-product_detail .cdx-spec-card__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 26px;
        padding: 15px 22px;
        border-radius: 12px;
        background: var(--cdx-accent);
        color: #ffffff;
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 14px 30px -14px rgba(82, 183, 136, 0.9);
        transition: transform 220ms ease, box-shadow 220ms ease;
    }
    .page-product_detail .cdx-spec-card__cta:hover {
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 18px 36px -14px rgba(82, 183, 136, 1);
    }
    .page-product_detail .cdx-spec-card__cta i {
        font-size: 12px;
        transition: transform 220ms ease;
    }
    .page-product_detail .cdx-spec-card__cta:hover i {
        transform: translateX(4px);
    }

    /* =============================================================
       BRIEF — sticky label rail + reading column
       ============================================================= */
    .page-product_detail .cdx-brief {
        padding: 96px 0 88px;
        background: var(--color-paper, #ffffff);
    }
    .page-product_detail .cdx-brief__grid {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 72px;
        align-items: start;
    }
    .page-product_detail .cdx-brief__rail {
        position: sticky;
        top: 110px;
    }
    .page-product_detail .cdx-brief__label {
        display: block;
        color: var(--brand-purple-dark, #1b4332);
    }
    .page-product_detail .cdx-brief__rule {
        display: block;
        width: 100%;
        height: 1px;
        margin: 16px 0 24px;
        background: var(--cdx-line);
    }
    .page-product_detail .cdx-brief__figure {
        margin: 0;
        overflow: hidden;
        border: 1px solid var(--cdx-line);
        border-radius: 14px;
    }
    .page-product_detail .cdx-brief__figure img {
        display: block;
        width: 100%;
        height: 210px;
        object-fit: cover;
    }
    .page-product_detail .cdx-brief__thumbs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 10px;
    }
    .page-product_detail .cdx-brief__thumbs img {
        width: 100%;
        height: 78px;
        object-fit: cover;
        border: 1px solid var(--cdx-line);
        border-radius: 10px;
    }
    .page-product_detail .cdx-brief__body p {
        max-width: 68ch;
        margin: 0 0 22px;
        font-family: var(--font-inter, sans-serif);
        font-size: 17px;
        line-height: 1.78;
        color: var(--cdx-dim);
    }
    .page-product_detail .cdx-brief__body p:last-child {
        margin-bottom: 0;
    }
    .page-product_detail .cdx-brief__body p:first-child::first-letter {
        float: left;
        margin: 6px 14px 0 0;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 62px;
        font-weight: 800;
        line-height: 0.82;
        color: var(--brand-purple, #2d6a4f);
    }

    /* =============================================================
       PATH — the ladder of levels
       ============================================================= */
    .page-product_detail .cdx-path {
        padding: 100px 0 108px;
        background: var(--color-cream, #eef8f1);
        border-top: 1px solid var(--cdx-line-soft);
        scroll-margin-top: 90px;
    }
    .page-product_detail .cdx-path__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
        gap: 48px;
        align-items: end;
        margin-bottom: 56px;
    }
    .page-product_detail .cdx-path__badge {
        display: block;
        margin-bottom: 14px;
        color: var(--brand-purple-dark, #1b4332);
    }
    .page-product_detail .cdx-path__title {
        margin: 0;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: clamp(30px, 3.4vw, 44px);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -0.03em;
        color: var(--color-ink, #10241a);
    }
    .page-product_detail .cdx-path__lede {
        margin: 0;
        padding-left: 24px;
        border-left: 2px solid var(--cdx-line);
        font-family: var(--font-inter, sans-serif);
        font-size: 15.5px;
        line-height: 1.7;
        color: var(--cdx-dim);
    }

    .page-product_detail .cdx-ladder {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .page-product_detail .cdx-rung {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 28px;
        padding-bottom: 26px;
    }
    .page-product_detail .cdx-rung--last {
        padding-bottom: 0;
    }
    .page-product_detail .cdx-rung__rail {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .page-product_detail .cdx-rung__num {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border: 1px solid var(--cdx-line);
        border-radius: 50%;
        background: #ffffff;
        font-size: 12px;
        letter-spacing: 0.06em;
        color: var(--brand-purple-dark, #1b4332);
        box-shadow: 0 8px 18px -12px rgba(82, 183, 136, 0.8);
    }
    .page-product_detail .cdx-rung__spine {
        flex: 1;
        width: 2px;
        margin-top: 12px;
        border-radius: 2px;
        background: linear-gradient(180deg, rgba(82, 183, 136, 0.45) 0%, rgba(116, 198, 157, 0.10) 100%);
    }
    .page-product_detail .cdx-rung--last .cdx-rung__spine {
        display: none;
    }

    .page-product_detail .cdx-rung__card {
        padding: 28px 30px 24px;
        border: 1px solid var(--cdx-line-soft);
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 18px 40px -34px rgba(37, 34, 60, 0.55);
        transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
    }
    .page-product_detail .cdx-rung__card:hover {
        border-color: var(--cdx-line);
        box-shadow: 0 26px 50px -32px rgba(82, 183, 136, 0.55);
        transform: translateY(-2px);
    }
    .page-product_detail .cdx-rung__head {
        margin-bottom: 22px;
    }
    .page-product_detail .cdx-rung__step {
        display: block;
        margin-bottom: 8px;
        color: var(--brand-blue-dark, #40916c);
    }
    .page-product_detail .cdx-rung__name {
        margin: 0;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: clamp(21px, 2.2vw, 27px);
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -0.025em;
        color: var(--color-ink, #10241a);
    }
    .page-product_detail .cdx-rung__specs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px;
        padding-top: 22px;
        border-top: 1px dashed var(--cdx-line);
    }
    .page-product_detail .cdx-field__label {
        display: block;
        margin-bottom: 9px;
        color: var(--cdx-mute);
    }
    .page-product_detail .cdx-field__text {
        margin: 0;
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        line-height: 1.65;
        color: var(--cdx-dim);
    }
    .page-product_detail .cdx-rung__learn {
        margin-top: 26px;
        padding-top: 22px;
        border-top: 1px dashed var(--cdx-line);
    }
    .page-product_detail .cdx-checks {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 28px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .page-product_detail .cdx-checks li {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        font-family: var(--font-inter, sans-serif);
        font-size: 14.5px;
        line-height: 1.55;
        color: var(--cdx-dim);
    }
    .page-product_detail .cdx-checks i {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        margin-top: 3px;
        border: 1px solid rgba(116, 198, 157, 0.28);
        border-radius: 6px;
        background: var(--brand-blue-wash, rgba(116, 198, 157, 0.10));
        font-size: 9px;
        color: var(--brand-blue-dark, #40916c);
    }
    .page-product_detail .cdx-rung__foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin-top: 26px;
        padding-top: 22px;
        border-top: 1px solid var(--cdx-line-soft);
    }
    .page-product_detail .cdx-rung__foot form {
        margin: 0;
    }
    .page-product_detail .cdx-rung__price {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin: 0;
    }
    .page-product_detail .cdx-rung__price-num {
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 30px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--color-ink, #10241a);
    }
    .page-product_detail .cdx-rung__price-unit {
        color: var(--cdx-mute);
    }
    .page-product_detail .cdx-enroll {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        padding: 14px 26px;
        border: 0;
        border-radius: 12px;
        background: var(--cdx-accent);
        color: #ffffff;
        font-family: var(--font-inter, sans-serif);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0;
        cursor: pointer;
        box-shadow: 0 14px 28px -16px rgba(82, 183, 136, 0.95);
        transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
    }
    .page-product_detail .cdx-enroll:hover:not(:disabled) {
        background: var(--cdx-accent);
        filter: saturate(1.12);
        transform: translateY(-2px);
        box-shadow: 0 18px 34px -16px rgba(82, 183, 136, 1);
    }
    .page-product_detail .cdx-enroll:active:not(:disabled) {
        background: var(--cdx-accent);
        transform: translateY(0);
    }
    .page-product_detail .cdx-enroll:disabled {
        opacity: 0.65;
        cursor: progress;
    }
    .page-product_detail .cdx-enroll i {
        font-size: 12px;
        transition: transform 220ms ease;
    }
    .page-product_detail .cdx-enroll:hover:not(:disabled) i {
        transform: translateX(4px);
    }

    /* =============================================================
       MORE — sibling courses
       ============================================================= */
    .page-product_detail .cdx-more {
        padding: 84px 0 92px;
        background: var(--cdx-night);
        color: #ffffff;
    }
    .page-product_detail .cdx-more__head {
        margin-bottom: 40px;
    }
    .page-product_detail .cdx-more__badge {
        display: block;
        margin-bottom: 12px;
        color: rgba(255, 255, 255, 0.42);
    }
    .page-product_detail .cdx-more__title {
        margin: 0;
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: clamp(24px, 2.6vw, 34px);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: #ffffff;
    }
    .page-product_detail .cdx-more__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }
    .page-product_detail .cdx-more__card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.04);
        text-decoration: none;
        transition: border-color 240ms ease, background 240ms ease, transform 240ms ease;
    }
    .page-product_detail .cdx-more__card:hover {
        border-color: rgba(82, 183, 136, 0.55);
        background: rgba(255, 255, 255, 0.07);
        transform: translateY(-3px);
    }
    .page-product_detail .cdx-more__shot {
        display: block;
        height: 150px;
        overflow: hidden;
    }
    .page-product_detail .cdx-more__shot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 500ms ease;
    }
    .page-product_detail .cdx-more__card:hover .cdx-more__shot img {
        transform: scale(1.05);
    }
    .page-product_detail .cdx-more__body {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 20px 22px 22px;
    }
    .page-product_detail .cdx-more__name {
        font-family: var(--font-graphik, 'Inter', sans-serif);
        font-size: 17px;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: -0.01em;
        color: #ffffff;
    }
    .page-product_detail .cdx-more__go {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--brand-purple-light, #95d5b2);
    }
    .page-product_detail .cdx-more__go i {
        font-size: 10px;
        transition: transform 220ms ease;
    }
    .page-product_detail .cdx-more__card:hover .cdx-more__go i {
        transform: translateX(4px);
    }

    /* =============================================================
       FOCUS
       ============================================================= */
    .page-product_detail .cdx-trail a:focus-visible,
    .page-product_detail .cdx-spec-card__cta:focus-visible,
    .page-product_detail .cdx-enroll:focus-visible,
    .page-product_detail .cdx-more__card:focus-visible {
        outline: 2px solid var(--brand-blue, #52b788);
        outline-offset: 3px;
    }

    /* =============================================================
       RESPONSIVE
       ============================================================= */
    @media (max-width: 1199px) {
        .page-product_detail .cdx-mast__grid {
            gap: 48px;
        }
        .page-product_detail .cdx-brief__grid {
            grid-template-columns: 250px minmax(0, 1fr);
            gap: 48px;
        }
    }
    @media (max-width: 991px) {
        .page-product_detail .cdx-mast {
            padding: 32px 0 72px;
        }
        .page-product_detail .cdx-trail ol {
            margin-bottom: 40px;
        }
        .page-product_detail .cdx-mast__grid {
            grid-template-columns: minmax(0, 1fr);
            gap: 40px;
            align-items: start;
        }
        .page-product_detail .cdx-mast__title {
            max-width: 22ch;
        }
        .page-product_detail .cdx-spec-card {
            max-width: 520px;
        }
        .page-product_detail .cdx-brief {
            padding: 72px 0 68px;
        }
        .page-product_detail .cdx-brief__grid {
            grid-template-columns: minmax(0, 1fr);
            gap: 36px;
        }
        .page-product_detail .cdx-brief__rail {
            position: static;
        }
        .page-product_detail .cdx-brief__figure img {
            height: 240px;
        }
        .page-product_detail .cdx-brief__thumbs {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .page-product_detail .cdx-path {
            padding: 76px 0 84px;
        }
        .page-product_detail .cdx-path__head {
            grid-template-columns: minmax(0, 1fr);
            gap: 20px;
            margin-bottom: 40px;
        }
        .page-product_detail .cdx-path__lede {
            padding-left: 0;
            border-left: 0;
        }
        .page-product_detail .cdx-more {
            padding: 68px 0 72px;
        }
        .page-product_detail .cdx-more__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 767px) {
        .page-product_detail .cdx-mast__lede {
            font-size: 15.5px;
        }
        .page-product_detail .cdx-rung {
            grid-template-columns: 40px minmax(0, 1fr);
            gap: 16px;
        }
        .page-product_detail .cdx-rung__num {
            width: 38px;
            height: 38px;
            font-size: 11px;
        }
        .page-product_detail .cdx-rung__card {
            padding: 22px 20px 20px;
            border-radius: 14px;
        }
        .page-product_detail .cdx-rung__specs {
            grid-template-columns: minmax(0, 1fr);
            gap: 18px;
        }
        .page-product_detail .cdx-checks {
            grid-template-columns: minmax(0, 1fr);
        }
        .page-product_detail .cdx-rung__foot {
            flex-direction: column;
            align-items: stretch;
            gap: 16px;
        }
        .page-product_detail .cdx-enroll {
            width: 100%;
            justify-content: center;
        }
        .page-product_detail .cdx-brief__body p {
            font-size: 16px;
        }
        .page-product_detail .cdx-brief__body p:first-child::first-letter {
            font-size: 50px;
        }
        .page-product_detail .cdx-more__grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }
    @media (max-width: 480px) {
        .page-product_detail .cdx-mast {
            padding: 26px 0 60px;
        }
        .page-product_detail .cdx-trail ol {
            gap: 8px;
            margin-bottom: 32px;
        }
        .page-product_detail .cdx-trail__current,
        .page-product_detail .cdx-trail li:nth-last-child(2) {
            display: none;
        }
        .page-product_detail .cdx-spec-card {
            padding: 22px 20px 24px;
        }
        .page-product_detail .cdx-spec-card::before {
            left: 20px;
            right: 20px;
        }
        .page-product_detail .cdx-rung__price-num {
            font-size: 26px;
        }
        .page-product_detail .cdx-brief__thumbs {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .page-product_detail .cdx-mast__bg,
        .page-product_detail .cdx-spec-card__cta,
        .page-product_detail .cdx-spec-card__cta i,
        .page-product_detail .cdx-rung__card,
        .page-product_detail .cdx-enroll,
        .page-product_detail .cdx-enroll i,
        .page-product_detail .cdx-more__card,
        .page-product_detail .cdx-more__shot img,
        .page-product_detail .cdx-more__go i {
            transition: none !important;
        }
        .page-product_detail .cdx-spec-card__cta:hover,
        .page-product_detail .cdx-rung__card:hover,
        .page-product_detail .cdx-enroll:hover:not(:disabled),
        .page-product_detail .cdx-more__card:hover,
        .page-product_detail .cdx-more__card:hover .cdx-more__shot img {
            transform: none;
        }
    }

/* ===================== page-topup ===================== */
    /* =========================================
       REDESIGNED LEARNING CREDITS PROGRESSION
       ========================================= */

    .page-topup .points-topup-section{
        background-color: var(--color-paper, var(--color-paper)) !important;
        border-top: 1px solid var(--color-stone, var(--color-stone));
        font-family: var(--font-inter), sans-serif;
    }

    /* Benefits Row */
    .page-topup .learning-benefit-card{
        background: var(--surface-cream-wash, #fffaf6);
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: var(--radius-lg, 12px);
        padding: 18px 16px;
        text-align: center;
        height: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .page-topup .learning-benefit-card:hover{
        transform: translateY(-2px);
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-topup .benefit-emoji{
        font-size: 26px;
        display: block;
        margin-bottom: 10px;
    }
    .page-topup .benefit-title{
        font-family: var(--font-inter), sans-serif;
        font-size: 14px;
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-ink, var(--brand-black-soft));
        margin: 0;
    }

    /* Pathway Card */
    .page-topup .learning-pathway-card{
        background: var(--color-cream, var(--color-cream));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: var(--radius-xl, 20px);
        padding: 32px;
    }
    .page-topup .pathway-header{
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .page-topup .header-icon-modern{
        width: 46px;
        height: 46px;
        background: var(--color-paper, var(--color-paper));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--color-ember-red, var(--brand-purple));
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-topup .pathway-title{
        font-family: var(--font-graphik), sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
        margin: 0;
    }
    .page-topup .pathway-subtitle{
        font-size: 13px;
        color: var(--color-pencil, var(--color-pencil));
        margin: 4px 0 0 0;
    }

    /* Calculator Redesign */
    .page-topup .luxury-calculator-wrapper{
        background: var(--color-paper, var(--color-paper));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: var(--radius-xl, 20px);
        padding: 32px;
        box-shadow: var(--shadow-subtle, 0 4px 12px rgba(37,34,30,0.04));
    }
    .page-topup .calc-header-premium{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .page-topup .calc-title-premium{
        font-family: var(--font-graphik), sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
        margin: 0;
    }
    .page-topup .calc-tagline{
        font-size: 13px;
        color: var(--color-pencil, var(--color-pencil));
        margin: 4px 0 0 0;
    }
    .page-topup .calc-currency-badge{
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--color-cream, var(--color-cream));
        border: 1px solid var(--color-stone, var(--color-stone));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
    }

    /* Calculator inputs styling */
    .page-topup .input-label-premium{
        font-size: 13px;
        font-weight: 600;
        color: var(--color-pencil, var(--color-pencil));
        margin-bottom: 8px;
        display: block;
    }
    .page-topup .premium-amount-input-wrapper{
        position: relative;
        display: flex;
        align-items: center;
    }
    .page-topup .premium-amount-input{
        width: 100%;
        background: var(--surface-cream-wash, #fffaf6) !important;
        border: 1px solid var(--color-stone, var(--color-stone)) !important;
        border-radius: var(--radius-buttons, 10px) !important;
        padding: 14px 44px 14px 20px !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        color: var(--color-ink, var(--brand-black-soft)) !important;
        transition: all 0.25s ease;
    }
    .page-topup .premium-amount-input:focus{
        background: var(--color-paper, var(--color-paper)) !important;
        border-color: var(--color-deep-ember, var(--brand-purple-dark)) !important;
        outline: none;
        box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.08);
    }
    .page-topup .input-currency{
        position: absolute;
        right: 20px;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-graphite, var(--color-graphite));
        pointer-events: none;
    }

    /* Breakdown card styling */
    .page-topup .points-breakdown-card{
        background: var(--color-cream, var(--color-cream));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 12px;
        padding: 20px;
    }
    .page-topup .breakdown-row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }
    .page-topup .breakdown-row:last-child{
        margin-bottom: 0;
    }
    .page-topup .breakdown-label{
        font-size: 13px;
        font-weight: 500;
        color: var(--color-pencil, var(--color-pencil));
    }
    .page-topup .breakdown-value{
        font-size: 14px;
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
    }
    .page-topup .bonus-badge{
        padding: 3px 8px;
        background: var(--color-paper, var(--color-paper));
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 6px;
        font-size: 12px;
        color: var(--color-ember-red, var(--brand-purple)) !important;
    }
    .page-topup .breakdown-divider{
        height: 1px;
        background: var(--color-stone, var(--color-stone));
        margin: 16px 0;
    }
    .page-topup .breakdown-total .breakdown-label{
        font-weight: 700;
        color: var(--color-ink, var(--brand-black-soft));
    }
    .page-topup .breakdown-value-total{
        font-size: 20px;
        font-weight: 800;
        color: var(--color-ember-red, var(--brand-purple));
    }

    /* Large display */
    .page-topup .points-display-premium{
        background: var(--surface-cream-wash, #fffaf6);
        border: 1px solid var(--color-stone, var(--color-stone));
        border-radius: 12px;
        padding: 24px;
        text-align: center;
        box-shadow: inset 0 2px 4px rgba(37,34,30,0.02);
    }
    .page-topup .points-number{
        display: block;
        font-family: var(--font-graphik), sans-serif;
        font-size: 40px;
        font-weight: 800;
        color: var(--color-ink, var(--brand-black-soft));
        line-height: 1.1;
        margin-bottom: 4px;
    }
    .page-topup .points-unit{
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-graphite, var(--color-graphite));
    }

    /* Buttons & Indicators */
    .page-topup .btn-premium-checkout{
        background: var(--color-ember-red, var(--brand-purple));
        color: var(--color-paper, var(--color-paper));
        border: none;
        border-radius: var(--radius-buttons, 10px);
        padding: 14px 28px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: all 0.25s cubic-bezier(.34,1.56,.64,1);
        box-shadow: 0 4px 14px rgba(82, 183, 136, 0.2);
    }
    .page-topup .btn-premium-checkout:hover{
        background: var(--color-deep-ember, var(--brand-purple-dark));
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(82, 183, 136, 0.3);
    }
    .page-topup .btn-premium-checkout:active{
        transform: translateY(1px);
    }
    .page-topup .trust-indicator{
        font-size: 12px;
        color: var(--color-pencil, var(--color-pencil));
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .page-topup .trust-indicator i{
        color: var(--color-cobalt-link, var(--brand-blue));
    }

    /* Responsive */
    @media (max-width: 991px) {
        .page-topup .learning-pathway-card, .page-topup .luxury-calculator-wrapper{
            padding: 24px;
        }
    }
    @media (max-width: 768px) {
        .page-topup .visual-progression-timeline::before{
            left: 21px;
        }
        .page-topup .step-badge{
            width: 20px;
            height: 20px;
            font-size: 10px;
        }
    }
    @media (max-width: 480px) {
        .page-topup .points-number{
            font-size: 32px;
        }
        .page-topup .luxury-calculator-wrapper,
        .page-topup .learning-pathway-card{
            padding: 20px 16px;
        }
        .page-topup .benefit-title{
            font-size: 12px;
        }
    }