/* Lashes.Moscow school — neomorphic UI, palette from school.lashes.moscow */

:root {
	--bg: #fff6ed;
	--bg-deep: #f5e8d8;
	--surface: #fffaf4;
	--text: #2f1e18;
	--text-soft: #4a3a33;
	--muted: #666666;
	--accent-dark: #1b1b1b;
	--gold: #b29057;
	--gold-soft: #ccb49b;
	--rose-label: #cc3255;
	--peach: #ffbb6b;
	--shadow-dark: rgba(47, 30, 24, 0.12);
	--shadow-light: rgba(255, 255, 255, 0.95);
	--radius-lg: 28px;
	--radius-md: 20px;
	--radius-sm: 14px;
	--font: "Manrope", "Segoe UI", system-ui, sans-serif;
	--breakpoint-desktop: 768px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font);
	background: var(--bg);
	color: var(--text);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	padding-bottom: 0;
}

@media (max-width: 767px) {
	body {
		padding-bottom: 108px;
	}
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--gold);
}

a:hover {
	text-decoration: underline;
}

/* —— Neomorphic surfaces —— */
.neo {
	background: linear-gradient(145deg, var(--surface), var(--bg));
	box-shadow:
		10px 10px 22px var(--shadow-dark),
		-8px -8px 20px var(--shadow-light);
	border-radius: var(--radius-md);
	border: 1px solid rgba(204, 180, 155, 0.35);
	transition:
		box-shadow 0.35s ease,
		transform 0.35s ease;
}

.neo:hover {
	box-shadow:
		12px 12px 26px var(--shadow-dark),
		-10px -10px 24px var(--shadow-light);
}

.hero-card.neo {
	animation: neoFloat 7s ease-in-out infinite;
}

@keyframes neoFloat {
	0%,
	100% {
		box-shadow:
			10px 10px 22px var(--shadow-dark),
			-8px -8px 20px var(--shadow-light);
	}
	50% {
		box-shadow:
			12px 14px 28px rgba(47, 30, 24, 0.14),
			-10px -10px 26px rgba(255, 255, 255, 1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-card.neo {
		animation: none;
	}
}

.neo-inset {
	background: var(--bg);
	box-shadow:
		inset 5px 5px 12px var(--shadow-dark),
		inset -4px -4px 12px var(--shadow-light);
	border-radius: var(--radius-sm);
}

/* —— Scroll reveal —— */
.reveal {
	opacity: 0;
	transform: translateY(28px) scale(0.98);
	transition:
		opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.neo {
		transition: none;
	}
}

.reveal-delay-1 {
	transition-delay: 0.08s;
}

.reveal-delay-2 {
	transition-delay: 0.16s;
}

.reveal-delay-3 {
	transition-delay: 0.24s;
}

.reveal-delay-4 {
	transition-delay: 0.32s;
}

/* —— Layout: mobile-first; desktop variant from 768px —— */
.shell {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 18px 64px;
}

.view-mobile-only {
	display: block;
}

.view-desktop-only {
	display: none;
}

@media (min-width: 768px) {
	.view-mobile-only {
		display: none;
	}

	.view-desktop-only {
		display: block;
	}
}

.logo-mark {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-soft);
}

.logo-domain {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.04em;
	color: var(--text);
}

.action-link {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	font-weight: 600;
	font-size: inherit;
	color: var(--gold);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	text-align: left;
}

.action-link:hover {
	color: var(--text);
}

.hero-crosslinks {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-soft);
}

.hero-crosslinks-sep {
	margin: 0 8px;
	color: var(--gold-soft);
	font-weight: 400;
}

.block-crosslinks {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

.courses-head .block-crosslinks {
	margin-top: 8px;
}

.footer-crosslinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 10px;
	margin: 0 0 16px;
	text-align: center;
}

.footer-crosslinks .action-link {
	text-align: center;
}

.btn-neo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	color: #fff;
	background: linear-gradient(145deg, #2a211c, var(--accent-dark));
	box-shadow:
		6px 6px 14px var(--shadow-dark),
		-3px -3px 10px var(--shadow-light);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-neo:hover {
	transform: translateY(-2px);
}

.btn-neo:active {
	transform: translateY(0);
	box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.35);
}

.btn-neo-ghost {
	background: linear-gradient(145deg, var(--surface), var(--bg));
	color: var(--accent-dark);
	border: 1px solid rgba(47, 30, 24, 0.12);
}

/* Hero */
.hero {
	padding: 8px 0 32px;
}

.hero-card {
	padding: 28px 22px 32px;
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
}

.hero-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 187, 107, 0.35), transparent 55%);
	pointer-events: none;
}

.hero-card > * {
	position: relative;
	z-index: 1;
}

.hero-kicker {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--gold);
	margin-bottom: 10px;
}

.hero h1 {
	margin: 0 0 12px;
	font-size: clamp(1.55rem, 5vw, 2.35rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.hero-lead {
	margin: 0 0 22px;
	font-size: 1.05rem;
	color: var(--text-soft);
	max-width: 36ch;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.hero-note {
	font-size: 13px;
	color: var(--muted);
}

/* Desktop hero grid */
@media (min-width: 768px) {
	.hero-grid {
		display: grid;
		grid-template-columns: 1fr 280px;
		gap: 28px;
		align-items: start;
	}

	.hero-side {
		padding: 20px;
		text-align: center;
	}

	.hero-side img {
		border-radius: var(--radius-md);
		margin: 0 auto 10px;
		box-shadow: 8px 8px 20px var(--shadow-dark);
	}
}

/* Quiz */
.section-title {
	font-size: clamp(1.35rem, 4vw, 1.75rem);
	font-weight: 800;
	margin: 0 0 8px;
	letter-spacing: -0.02em;
}

.section-lead {
	margin: 0 0 22px;
	color: var(--text-soft);
	font-size: 1rem;
}

.quiz {
	padding: 24px 20px 28px;
	margin-bottom: 28px;
}

.quiz-meta {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--gold);
	letter-spacing: 0.02em;
}

.quiz-progress {
	height: 10px;
	padding: 0;
	margin: 0 0 20px;
	overflow: hidden;
	border-radius: 999px;
}

.quiz-progress-fill {
	height: 100%;
	width: 20%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--gold-soft), var(--gold), var(--peach));
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.quiz-panel[hidden] {
	display: none !important;
}

.quiz-step {
	margin-bottom: 0;
}

.quiz-form .quiz-step.neo-inset {
	margin-bottom: 20px;
}

.quiz-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}

.quiz-nav-spacer {
	flex: 1;
	min-width: 8px;
}

.quiz-nav .quiz-icon-btn {
	width: 48px;
	height: 48px;
	min-width: 48px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.quiz-nav-primary {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	justify-content: flex-end;
	flex: 0 0 auto;
	align-items: center;
}

.quiz-step strong {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
}

.quiz-options label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	margin-bottom: 8px;
	border-radius: 12px;
	cursor: pointer;
	font-size: 14px;
	color: var(--text-soft);
	transition: background 0.2s ease;
}

.quiz-options label:hover {
	background: rgba(255, 255, 255, 0.45);
}

.quiz-options input {
	margin-top: 3px;
	accent-color: var(--accent-dark);
}

.quiz-contact-field {
	margin-top: 14px;
}

.quiz-contact-field input {
	width: 100%;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid #c9c9c9;
	font-family: inherit;
	font-size: 15px;
	background: #fff;
}

.quiz-result {
	display: none;
	margin-top: 18px;
	padding: 18px 16px;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.45;
	border-radius: var(--radius-sm);
	background: rgba(255, 250, 244, 0.9);
}

.quiz-result.is-on {
	display: block;
	animation: popIn 0.45s ease;
}

.quiz-result-cta {
	margin: 14px 0 0;
	text-align: center;
}

.quiz-result-cta-link {
	font-size: 15px;
}

@keyframes popIn {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* About */
.about-block {
	padding: 22px 20px 26px;
	margin-bottom: 24px;
}

.about-block h2 {
	margin: 0 0 6px;
	font-size: 1.25rem;
}

.badge-soft {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rose-label);
	margin-bottom: 10px;
}

.about-block p {
	margin: 0 0 12px;
	font-size: 15px;
	color: var(--text-soft);
}

.about-block p:last-child {
	margin-bottom: 0;
}

.license-callout {
	margin-top: 16px;
	padding: 14px 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-soft);
}

.promo-strip {
	margin-top: 18px;
	padding: 16px 14px;
	font-size: 14px;
	line-height: 1.5;
}

.promo-strip .label {
	font-weight: 700;
	color: var(--rose-label);
	margin-bottom: 6px;
}

/* Intensive 2-day promo (hero) */
.intensive-2day-slider {
	margin: 0 0 18px;
}

.intensive-2day-slider .gallery-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 250, 244, 0.85);
	min-height: min(52vw, 360px);
}

.intensive-2day-slider .gallery-slide-banner {
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.intensive-2day-slider .gallery-slide-banner:hover,
.intensive-2day-slider .gallery-slide-banner:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(47, 30, 24, 0.12);
	outline: none;
}

.intensive-2day-slider .gallery-slide picture {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.intensive-2day-slider .gallery-slide img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(72vh, 620px);
	aspect-ratio: auto;
	object-fit: contain;
}

.intensive-2day-slider-controls {
	padding-top: 10px;
}

.intensive-2day {
	margin-top: 22px;
	padding: 20px 18px 22px;
}

.intensive-2day-title {
	margin: 0 0 12px;
	font-size: clamp(1rem, 3.2vw, 1.35rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.intensive-2day-lead {
	margin: 0 0 18px;
	font-size: 15px;
	color: var(--text-soft);
	line-height: 1.55;
}

.intensive-2day-scroll-block {
	margin-top: 34px;
	overflow: visible;
}

.intensive-2day-scroll-block:first-of-type {
	margin-top: 26px;
}

.intensive-2day-scroll-block-inner {
	padding: 16px 14px 14px;
	border-radius: var(--radius-sm);
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 250, 244, 0.35));
	border: 1px solid rgba(204, 180, 155, 0.28);
	box-shadow:
		6px 6px 14px rgba(47, 30, 24, 0.06),
		-4px -4px 12px rgba(255, 255, 255, 0.65);
}

@media (prefers-reduced-motion: no-preference) {
	.intensive-2day-scroll-block-inner {
		will-change: transform;
	}
}

.intensive-2day-sub {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--text);
}

.intensive-2day-list {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
	font-size: 14px;
	color: var(--text-soft);
	line-height: 1.5;
}

.intensive-2day-list li {
	position: relative;
	padding-left: 1.1em;
	margin-bottom: 6px;
}

.intensive-2day-list-dash li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--gold-soft);
}

.intensive-2day-list-check li::before {
	content: "✔️";
	position: absolute;
	left: 0;
	font-size: 0.85em;
}

.intensive-2day-list-bullets li {
	padding-left: 1em;
}

.intensive-2day-list-bullets li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--rose-label);
	font-weight: 700;
}

.intensive-2day-price {
	margin-top: 18px;
	padding: 16px 14px;
	text-align: center;
}

.intensive-2day-price-hot {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--rose-label);
}

.intensive-2day-price-hot strong {
	font-size: 1.25rem;
	color: var(--text);
}

.intensive-2day-price-old {
	margin: 0 0 8px;
	font-size: 14px;
	text-decoration: line-through;
	color: #999;
}

.intensive-2day-price-scarcity {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--text-soft);
}

.intensive-2day-outro {
	margin: 18px 0 0;
	font-size: 15px;
	color: var(--text-soft);
	line-height: 1.55;
}

.intensive-2day-cta {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

@media (min-width: 768px) {
	.intensive-2day {
		margin-top: 26px;
		padding: 22px 22px 24px;
	}

	.intensive-2day-title {
		font-size: 1.4rem;
	}

	.intensive-2day-scroll-block {
		margin-top: 42px;
	}

	.intensive-2day-scroll-block:first-of-type {
		margin-top: 30px;
	}
}

/* Courses */
.courses-head {
	margin-bottom: 16px;
}

.course-grid {
	display: grid;
	gap: 18px;
}

@media (min-width: 768px) {
	.course-grid {
		grid-template-columns: repeat(3, 1fr);
		align-items: stretch;
	}
}

.course-card {
	padding: 20px 18px 22px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.course-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--rose-label);
	margin-bottom: 6px;
}

.course-name {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.course-price {
	font-size: 14px;
	margin-bottom: 8px;
	color: var(--text-soft);
}

.course-price b {
	font-size: 1.15rem;
	color: var(--text);
}

.course-price .old {
	text-decoration: line-through;
	color: #999;
	margin-left: 4px;
}

.course-list {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	font-size: 14px;
	color: var(--text-soft);
}

.course-list li {
	display: flex;
	gap: 8px;
	margin-bottom: 6px;
}

.course-sub {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 8px;
}

.installment {
	margin-top: 4px;
	padding: 10px 10px;
	font-size: 13px;
}

.installment strong {
	display: block;
	margin-bottom: 4px;
}

.installment ul {
	margin: 0;
	padding-left: 18px;
}

.course-cta {
	margin-top: auto;
	padding-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.course-cta .btn-neo {
	width: 100%;
}

.course-footnote {
	font-size: 12px;
	color: var(--muted);
}

/* Gallery */
.gallery {
	padding: 8px 8px 12px;
	margin-bottom: 28px;
}

.gallery-slider {
	position: relative;
}

.gallery-slider-window {
	overflow: hidden;
	border-radius: var(--radius-md);
}

.gallery-slider-track {
	display: flex;
	transition: transform 0.35s ease;
	will-change: transform;
}

.gallery-slide {
	flex: 0 0 100%;
	margin: 0;
}

.gallery-slide img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.gallery-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-top: 12px;
}

.gallery-nav-btn {
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow:
		4px 4px 10px var(--shadow-dark),
		-3px -3px 8px var(--shadow-light);
}

.gallery-nav-btn:active {
	transform: scale(0.97);
}

.gallery-dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.gallery-dot {
	width: 8px;
	height: 8px;
	border: none;
	border-radius: 999px;
	background: rgba(47, 30, 24, 0.25);
	padding: 0;
	cursor: pointer;
}

.gallery-dot.is-active {
	background: var(--gold);
}

.gallery figcaption {
	padding: 12px 8px 4px;
	font-size: 14px;
	font-style: italic;
	color: var(--muted);
	text-align: center;
}

/* Legal */
.legal {
	padding: 22px 20px;
	margin-bottom: 24px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-soft);
}

.legal h2 {
	margin: 0 0 12px;
	font-size: 1.2rem;
	color: var(--text);
}

.legal ul {
	margin: 8px 0 12px;
	padding-left: 18px;
}

/* FAQ */
.faq {
	margin-bottom: 28px;
}

.faq-intro {
	margin-bottom: 18px;
}

.faq-item {
	margin-bottom: 10px;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.faq-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 16px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	color: var(--text);
	background: linear-gradient(145deg, var(--surface), var(--bg));
	border: none;
	border-top: 2px solid var(--gold-soft);
	cursor: pointer;
	box-shadow: 4px 4px 10px var(--shadow-dark);
}

.faq-trigger svg {
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.faq-item.is-open .faq-trigger svg {
	transform: rotate(45deg);
}

.faq-panel {
	display: none;
	padding: 0 16px 16px;
	font-size: 14px;
	color: var(--text-soft);
	line-height: 1.55;
	background: rgba(255, 250, 244, 0.65);
}

.faq-item.is-open .faq-panel {
	display: block;
	animation: popIn 0.35s ease;
}

/* Footer */
.footer {
	padding: 28px 22px 36px;
	border-radius: var(--radius-lg);
	text-align: center;
}

.footer-brand {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
}

.footer a {
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
}

.footer a:hover {
	text-decoration: underline;
}

.footer-row {
	margin: 6px 0;
	font-size: 15px;
}

.footer-muted {
	font-size: 12px;
	color: var(--muted);
	margin-top: 16px;
}

/* Modal */
.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(47, 30, 24, 0.45);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.modal-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.modal {
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 22px 20px 20px;
	border-radius: var(--radius-lg);
	position: relative;
	animation: popIn 0.35s ease;
}

.modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background: var(--accent-dark);
	color: #fff;
	font-size: 22px;
	line-height: 1;
}

.modal h2 {
	margin: 0 0 6px;
	font-size: 1.35rem;
}

.modal-desc {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--text-soft);
}

.modal img.hero-form-img {
	width: 100%;
	border-radius: var(--radius-sm);
	margin-bottom: 14px;
}

.field {
	margin-bottom: 12px;
}

.field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--muted);
}

.field input {
	width: 100%;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid #c9c9c9;
	font-family: inherit;
	font-size: 15px;
	background: #fff;
}

.field-required {
	color: var(--gold);
}

.lead-step-label {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--gold);
	letter-spacing: 0.02em;
}

.lead-progress {
	height: 10px;
	padding: 0;
	margin: 0 0 16px;
	overflow: hidden;
	border-radius: 999px;
}

.lead-progress-fill {
	height: 100%;
	width: 25%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--gold-soft), var(--gold), var(--peach));
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.lead-panel {
	margin-bottom: 16px;
	padding: 16px;
}

.lead-panel[hidden] {
	display: none !important;
}

.lead-course-caption {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.lead-course-display {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--text);
}

.lead-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.lead-nav-spacer {
	flex: 1;
	min-width: 8px;
}

.lead-nav .btn-neo {
	min-width: 120px;
}

.lead-nav .btn-neo[hidden] {
	display: none !important;
}

.lead-panel .field {
	margin-bottom: 0;
}

.lead-panel .field + .field {
	margin-top: 14px;
}

.lead-submit-wrap {
	display: flex;
	justify-content: center;
	margin-top: 4px;
}

.lead-submit-wrap .btn-neo {
	min-width: 160px;
}

.form-bottom {
	text-align: center;
	font-size: 12px;
	color: var(--muted);
	margin-top: 12px;
}

/* Section spacing */
section {
	margin-bottom: 8px;
}

.faq-title-stack {
	line-height: 1.1;
}

.faq-title-stack strong {
	font-size: clamp(1.6rem, 6vw, 2.4rem);
	display: block;
}

/* ————————————————————————————————————————————————————————
   Mobile soft neomorphism (reference: warm nude / soft UI phones)
   Only max-width: 767px — desktop rules above stay unchanged.
   ———————————————————————————————————————————————————————— */
@media (max-width: 767px) {
	:root {
		--bg: #f4ebe4;
		--bg-deep: #e8ddd4;
		--surface: #faf4ef;
		--neo-raised:
			12px 14px 28px rgba(186, 165, 152, 0.45),
			-10px -12px 24px rgba(255, 255, 255, 0.95);
		--neo-raised-hover:
			14px 16px 32px rgba(186, 165, 152, 0.5),
			-11px -13px 28px rgba(255, 255, 255, 1);
		--neo-pressed:
			inset 8px 8px 16px rgba(176, 155, 142, 0.38),
			inset -5px -5px 14px rgba(255, 255, 255, 0.75);
		--neo-inset-soft:
			inset 6px 6px 14px rgba(176, 155, 142, 0.32),
			inset -4px -4px 12px rgba(255, 255, 255, 0.8);
		--radius-lg: 40px;
		--radius-md: 32px;
		--radius-sm: 24px;
		--radius-pill: 999px;
	}

	body {
		background: linear-gradient(180deg, #f7efe8 0%, var(--bg) 38%, #efe4dc 100%);
		font-size: 15px;
	}

	.shell {
		padding-left: 16px;
		padding-right: 16px;
		padding-bottom: 56px;
	}

	.neo {
		background: var(--bg);
		border: none;
		border-radius: var(--radius-md);
		box-shadow: var(--neo-raised);
	}

	.neo:hover {
		box-shadow: var(--neo-raised-hover);
	}

	.neo-inset {
		background: #ebe0d8;
		border-radius: var(--radius-sm);
		box-shadow: var(--neo-inset-soft);
		border: none;
	}

	.hero-card.neo {
		padding: 26px 20px 30px;
		border-radius: var(--radius-lg);
		animation: none;
	}

	.hero-card::before {
		opacity: 0.55;
	}

	.hero h1 {
		font-size: 1.65rem;
		font-weight: 800;
		letter-spacing: -0.04em;
	}

	.hero-lead {
		font-size: 1rem;
		line-height: 1.5;
	}

	.hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-actions .btn-neo,
	.hero-actions .btn-neo-ghost {
		width: 100%;
		justify-content: center;
		padding: 15px 22px;
		border-radius: var(--radius-pill);
	}

	.btn-neo-ghost.neo {
		background: var(--bg);
		color: var(--text);
		border: none;
		font-weight: 600;
		box-shadow: var(--neo-raised);
	}

	.btn-neo-ghost.neo:active {
		box-shadow: var(--neo-pressed);
	}

	.section-title {
		font-size: 1.45rem;
		font-weight: 800;
		letter-spacing: -0.035em;
	}

	.section-lead {
		font-size: 0.95rem;
		line-height: 1.5;
		margin-bottom: 16px;
	}

	.quiz.neo {
		padding: 22px 18px 26px;
		border-radius: var(--radius-lg);
	}

	.quiz-meta {
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.14em;
		color: var(--text-soft);
		font-weight: 700;
	}

	.quiz-progress.neo-inset {
		height: 14px;
		border-radius: var(--radius-pill);
		background: #e4d9d1;
		box-shadow: var(--neo-pressed);
	}

	.quiz-progress-fill {
		border-radius: var(--radius-pill);
		background: linear-gradient(90deg, #c4a882, var(--gold), #d4a574);
		box-shadow: 2px 2px 8px rgba(255, 255, 255, 0.4);
	}

	.quiz-form .quiz-step.neo-inset {
		padding: 20px 16px 22px;
		border-radius: var(--radius-md);
		background: var(--bg);
		box-shadow: var(--neo-raised);
		margin-bottom: 18px;
	}

	.quiz-step strong {
		font-size: 1rem;
		margin-bottom: 14px;
		line-height: 1.35;
	}

	.quiz-options label {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 14px 16px;
		margin-bottom: 12px;
		border-radius: var(--radius-pill);
		background: var(--bg);
		box-shadow: var(--neo-raised);
		border: none;
		font-size: 14px;
		color: var(--text);
		transition: box-shadow 0.2s ease, transform 0.15s ease;
	}

	.quiz-options label:hover {
		background: var(--bg);
	}

	.quiz-options label:active {
		transform: scale(0.99);
	}

	.quiz-options label:has(input:checked) {
		box-shadow: var(--neo-pressed);
		background: #ebe0d8;
		color: var(--text);
	}

	.quiz-options input {
		width: 18px;
		height: 18px;
		margin-top: 0;
		flex-shrink: 0;
		accent-color: #4a3a33;
	}

	.quiz-nav {
		margin-top: 4px;
		gap: 10px;
	}

	.quiz-nav .quiz-icon-btn {
		width: 50px;
		height: 50px;
		min-width: 50px;
		border-radius: 50%;
	}

	.quiz-nav-primary {
		flex: 0 0 auto;
	}

	.quiz-result.neo-inset {
		background: var(--surface);
		box-shadow: var(--neo-raised);
		border-radius: var(--radius-md);
		padding: 20px 18px;
	}

	.about-block.neo,
	.legal.neo,
	.footer.neo {
		border-radius: var(--radius-lg);
		padding: 22px 18px 24px;
	}

	.license-callout.neo-inset,
	.promo-strip.neo-inset {
		background: #ebe0d8;
		border-radius: var(--radius-md);
		box-shadow: var(--neo-inset-soft);
	}

	.course-card.neo {
		border-radius: var(--radius-lg);
		padding: 22px 18px 24px;
	}

	.installment.neo-inset {
		background: #ebe0d8;
		border-radius: var(--radius-sm);
		box-shadow: var(--neo-inset-soft);
	}

	.gallery.neo {
		padding: 12px;
		border-radius: var(--radius-lg);
		overflow: hidden;
	}

	.gallery img {
		border-radius: var(--radius-md);
		box-shadow: var(--neo-pressed);
	}

	.gallery-nav-btn {
		background: var(--bg);
		box-shadow: var(--neo-raised);
	}

	.gallery-nav-btn:active {
		box-shadow: var(--neo-pressed);
	}

	.gallery-dot {
		background: rgba(47, 30, 24, 0.2);
	}

	.gallery-dot.is-active {
		background: var(--text);
	}

	.faq-intro.neo {
		border-radius: var(--radius-lg);
		padding: 22px 18px;
	}

	.faq-item.neo {
		border-radius: var(--radius-md);
		overflow: visible;
		margin-bottom: 14px;
		box-shadow: var(--neo-raised);
		background: var(--bg);
	}

	.faq-trigger {
		border-radius: var(--radius-md);
		border: none;
		padding: 16px 18px;
		background: transparent;
		box-shadow: none;
	}

	.faq-item.is-open .faq-trigger {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.faq-panel {
		border-radius: 0 0 var(--radius-md) var(--radius-md);
		background: #ebe0d8;
		box-shadow: var(--neo-inset-soft);
		padding: 4px 18px 18px;
	}

	.modal {
		border-radius: var(--radius-lg);
		padding: 24px 20px 22px;
		background: var(--bg);
		box-shadow: var(--neo-raised-hover);
	}

	.modal-close {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--bg);
		color: var(--text);
		font-size: 20px;
		box-shadow: var(--neo-raised);
	}

	.modal-close:active {
		box-shadow: var(--neo-pressed);
	}

	.field input {
		border: none;
		border-radius: var(--radius-pill);
		padding: 15px 18px;
		background: #ebe0d8;
		box-shadow: var(--neo-pressed);
		color: var(--text);
	}

	.field input::placeholder {
		color: rgba(47, 30, 24, 0.45);
	}

	.field input:focus {
		outline: none;
		box-shadow:
			var(--neo-pressed),
			0 0 0 2px rgba(178, 144, 87, 0.35);
	}

	.modal .btn-neo {
		border-radius: var(--radius-pill);
		padding: 15px;
	}

	.about-intro {
		display: none;
	}

	.hero.hero-card.neo {
		padding: 0;
		margin-bottom: 24px;
		background: transparent;
		border: none;
		box-shadow: none;
		border-radius: 0;
	}

	.mobile-editorial-hero {
		width: 100vw;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
		min-height: calc(100svh - env(safe-area-inset-top, 0px));
		padding-top: env(safe-area-inset-top, 0px);
		display: flex;
		flex-direction: column;
		overflow: visible;
		border-radius: 0;
	}

	.mhero-visual {
		position: relative;
		flex: 0 0 min(58vh, 500px);
		min-height: 280px;
		overflow: hidden;
		border-radius: 0;
	}

	.mhero-img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 15%;
		border-radius: 0;
	}

	.mhero-visual-overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0.06) 28%,
			rgba(255, 246, 237, 0.45) 62%,
			rgba(255, 246, 237, 0.88) 82%,
			#fff6ed 100%
		);
		pointer-events: none;
	}

	.mhero-visual-copy {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 22px 22px;
		color: var(--text);
		z-index: 2;
	}

	.mhero-pretitle {
		margin: 0 0 8px;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 0.04em;
		color: var(--gold);
	}

	.mhero-display {
		margin: 0 0 12px;
		font-family: "Montserrat", "Manrope", system-ui, sans-serif;
		font-size: clamp(2rem, 9vw, 2.85rem);
		font-weight: 900;
		line-height: 0.98;
		letter-spacing: -0.02em;
		text-transform: uppercase;
		color: var(--text);
	}

	.mhero-rule {
		height: 1px;
		background: rgba(47, 30, 24, 0.15);
		margin: 8px 0;
	}

	.mhero-dateline {
		margin: 0;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--text-soft);
		opacity: 0.95;
	}

	.mhero-body {
		flex: 1 1 auto;
		background: linear-gradient(180deg, rgba(255, 246, 237, 0.92) 0%, #fdf5f0 38%, #f4ebe4 100%);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		color: var(--text-soft);
		padding: 24px 22px 96px;
		display: flex;
		flex-direction: column;
		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
		border: none;
		box-shadow:
			0 10px 28px rgba(186, 165, 152, 0.22),
			0 2px 0 rgba(255, 255, 255, 0.35);
		overflow: hidden;
	}

	@supports not (backdrop-filter: blur(1px)) {
		.mhero-body {
			background: linear-gradient(180deg, #fff6ed 0%, #fdf5f0 40%, #f4ebe4 100%);
		}
	}

	.mhero-accent {
		margin: 0 0 14px;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--rose-label);
	}

	.mhero-lead {
		margin: 0 0 14px;
		font-size: 14px;
		line-height: 1.65;
		color: var(--text-soft);
	}

	.mhero-lead strong {
		color: var(--text);
	}

	.mhero-crosslinks {
		margin: 16px 0 0;
		font-size: 13px;
		line-height: 1.45;
	}

	.mhero-textlink {
		margin: 0;
		padding: 0;
		border: none;
		background: none;
		font: inherit;
		font-weight: 600;
		color: var(--gold);
		text-decoration: underline;
		text-underline-offset: 3px;
		cursor: pointer;
	}

	.mhero-crosssep {
		margin: 0 8px;
		color: var(--gold-soft);
	}

	.mhero-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-top: auto;
		padding-top: 20px;
	}

	.mhero-bar-left {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.mhero-icon-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		color: var(--text);
		text-decoration: none;
		border: 1px solid rgba(255, 255, 255, 0.55);
		background: rgba(255, 255, 255, 0.38);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-radius: 50%;
		box-shadow:
			6px 6px 14px rgba(186, 165, 152, 0.28),
			-4px -4px 10px rgba(255, 255, 255, 0.85);
		padding: 0;
		cursor: pointer;
	}

	.mhero-icon-link:active {
		transform: scale(0.97);
	}

	.mhero-cta {
		flex-shrink: 0;
		background: linear-gradient(145deg, #3d2f28, #2a211c);
		color: #ffffff;
		border: none;
		border-radius: 999px;
		font-family: "Manrope", system-ui, sans-serif;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		padding: 14px 22px;
		cursor: pointer;
		box-shadow:
			6px 8px 16px rgba(47, 30, 24, 0.18),
			-2px -2px 8px rgba(255, 255, 255, 0.35);
	}

	.mhero-cta:active {
		filter: brightness(0.96);
	}

	.mobile-cta-dock {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 40;
		padding: 12px 14px 22px;
		pointer-events: none;
		background: linear-gradient(180deg, transparent, rgba(255, 246, 237, 0.75) 28%, var(--bg) 72%);
	}

	.mobile-cta-dock-inner {
		pointer-events: auto;
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 12px 16px 14px;
		border-radius: var(--radius-md);
		background: rgba(255, 252, 248, 0.72);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border: 1px solid rgba(255, 255, 255, 0.55);
		box-shadow:
			8px 10px 22px rgba(186, 165, 152, 0.35),
			-6px -6px 16px rgba(255, 255, 255, 0.9);
	}

	.mobile-cta-dock-link {
		width: 100%;
		text-align: center;
		font-size: 14px;
		padding: 6px 4px;
		color: var(--gold);
		font-weight: 600;
	}

}