/*
 * Lumovex 2.0 Studio — the Content Machine site (studio.lumovexeurope.com).
 * Loaded last in the cascade. Only what the studio variant adds: the "Back to
 * LUMOVEX" bar, the header Sign In button, the hero actions, the How It Works and
 * What's Included grids, the FAQ, and the footer back link. Everything reuses the
 * main theme's tokens so it reads as the same site.
 */

/* --- Back bar: a quiet strip above the masthead ------------------------- */
.lvx-backbar {
	border-bottom: 1px solid color-mix(in srgb, var(--lvx-line) 55%, transparent);
	background: color-mix(in srgb, var(--lvx-ink) 85%, transparent);
}
.lvx-backbar__inner {
	max-width: var(--lvx-wide);
	margin-inline: auto;
	padding: 0.45rem var(--lvx-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lvx-sp-30);
	font-family: var(--lvx-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.lvx-backbar__link {
	color: var(--lvx-text);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding-block: 0.2rem;
	transition: color var(--lvx-speed) var(--lvx-ease);
}
.lvx-backbar__link:hover {
	color: var(--lvx-accent);
}
.lvx-backbar__link span {
	transition: transform var(--lvx-speed) var(--lvx-ease);
}
.lvx-backbar__link:hover span {
	transform: translateX(-3px);
}
.lvx-backbar__note {
	color: var(--lvx-muted);
}
@media (max-width: 680px) {
	.lvx-backbar__note {
		display: none;
	}
}

/* --- Header: Sign In button beside the menu ----------------------------- */
.lvx-site-header__inner {
	gap: var(--lvx-sp-40);
}
.lvx-primary-nav {
	margin-left: auto;
}
a.lvx-header-cta {
	flex: 0 0 auto;
	padding: 0.7em 1.3em;
	font-size: 0.72rem;
}
@media (max-width: 680px) {
	html.lvx-js a.lvx-header-cta {
		display: none; /* The drawer carries it on phones. */
	}
}
.lvx-mobile-drawer__extra {
	margin: 0;
	padding: 0 var(--lvx-gutter) var(--lvx-sp-40);
}

/* --- Hero: eyebrow pill, two actions, a quiet note ---------------------- */
.lvx-hero__eyebrow {
	margin-bottom: var(--lvx-sp-30);
}
.lvx-hero__title,
.lvx-hero__sub {
	text-align: center;
}
.lvx-hero__title {
	max-width: 18ch;
}
.lvx-hero__actions {
	justify-content: center;
	gap: var(--lvx-sp-30);
	margin-top: var(--lvx-sp-40);
}
.lvx-hero__note {
	margin-top: var(--lvx-sp-40);
	color: var(--lvx-muted);
	font-size: 0.92rem;
	text-align: center;
}
.lvx-hero__note a {
	color: var(--lvx-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.lvx-hero__note a:hover {
	color: var(--lvx-accent);
}

/* Menu anchors land below the sticky header and back bar, not under them. */
.lvx-scene[id] {
	scroll-margin-top: calc(var(--lvx-header-h) + 3rem);
}

/* --- Section ledes ------------------------------------------------------ */
.lvx-scene__lede {
	color: var(--lvx-muted);
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	max-width: 60ch;
	margin-top: var(--lvx-sp-30);
}
.lvx-scene__lede a {
	color: var(--lvx-text);
	white-space: nowrap;
}
.lvx-scene__lede a:hover {
	color: var(--lvx-accent);
}

/* Centered section heads, like the founders and closing sections. */
.lvx-scene--how .lvx-scene__content > :is(.lvx-eyebrow, .lvx-scene__title, .lvx-scene__lede),
.lvx-scene--included .lvx-scene__content > :is(.lvx-eyebrow, .lvx-scene__title, .lvx-scene__lede),
.lvx-scene--faq .lvx-scene__content > :is(.lvx-eyebrow, .lvx-scene__title) {
	text-align: center;
	margin-inline: auto;
}
.lvx-scene--how .lvx-scene__title,
.lvx-scene--included .lvx-scene__title {
	max-width: 22ch;
}

/* --- How It Works: numbered steps with a thin connecting line ----------- */
.lvx-steps .lvx-why-tile__title {
	letter-spacing: 0.01em;
}
.lvx-scene--how .lvx-why-tile {
	position: relative;
}
@media (min-width: 901px) {
	.lvx-scene--how .lvx-why-tile::after {
		content: "";
		position: absolute;
		top: calc(var(--lvx-sp-30) + 22px);
		right: -10px;
		width: 20px;
		height: 1px;
		background: var(--lvx-gradient);
		opacity: 0.6;
	}
	.lvx-scene--how .lvx-why-tile:last-child::after {
		display: none;
	}
}

/* --- What's Included: two rows of four, with row spacing ---------------- */
.lvx-included-grid {
	row-gap: var(--lvx-sp-50);
}
.lvx-included-grid .lvx-why-tile:nth-child(4n + 1) {
	border-left: 0;
}
@media (max-width: 1100px) and (min-width: 641px) {
	.lvx-included-grid .lvx-why-tile:nth-child(odd) {
		border-left: 0;
	}
}

/* --- The studio behind it ----------------------------------------------- */
.lvx-founders__title,
.lvx-founders__lede {
	text-align: center;
	margin-inline: auto;
}
.lvx-founders__lede {
	margin-bottom: var(--lvx-sp-50);
}

/* --- FAQ: native details, styled like the main site's panels ----------- */
.lvx-scene--faq {
	min-height: auto;
}
.lvx-faq {
	margin: var(--lvx-sp-50) auto 0;
	max-width: 880px;
	border-top: 1px solid color-mix(in srgb, var(--lvx-line) 70%, transparent);
}
.lvx-faq__item {
	border-bottom: 1px solid color-mix(in srgb, var(--lvx-line) 70%, transparent);
}
.lvx-faq__q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lvx-sp-40);
	padding: var(--lvx-sp-40) 0;
	font-size: clamp(1.02rem, 1.6vw, 1.15rem);
	font-weight: 600;
	color: var(--lvx-text);
	transition: color var(--lvx-speed) var(--lvx-ease);
}
.lvx-faq__q::-webkit-details-marker {
	display: none;
}
.lvx-faq__q::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--lvx-font-mono);
	font-size: 1.3rem;
	line-height: 1;
	color: var(--lvx-accent);
	transition: transform var(--lvx-speed) var(--lvx-ease);
}
.lvx-faq__item[open] .lvx-faq__q::after {
	transform: rotate(45deg);
}
.lvx-faq__q:hover {
	color: var(--lvx-white);
}
.lvx-faq__q:focus-visible {
	outline: 2px solid var(--lvx-accent);
	outline-offset: 4px;
	border-radius: 4px;
}
.lvx-faq__a p {
	margin: 0 0 var(--lvx-sp-40);
	color: var(--lvx-muted);
	max-width: 70ch;
}

/* --- Closing band: two actions side by side ----------------------------- */
.lvx-cta-band__actions {
	justify-content: center;
	gap: var(--lvx-sp-30);
}

/* --- Footer: the way back to the main site ------------------------------ */
.lvx-footer-back {
	margin: 0;
	font-family: var(--lvx-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.lvx-footer-back a {
	color: var(--lvx-text);
	text-decoration: none;
}
.lvx-footer-back a:hover {
	color: var(--lvx-accent);
}

/* Visible keyboard focus on everything this file adds. */
.lvx-backbar__link:focus-visible,
a.lvx-header-cta:focus-visible,
.lvx-hero__note a:focus-visible,
.lvx-footer-back a:focus-visible {
	outline: 2px solid var(--lvx-accent);
	outline-offset: 3px;
	border-radius: 4px;
}