/**
 * SlowVerb Web - landing page.
 *
 * Scoped entirely under `.svsw-landing` and prefixed `svsw-`, so it can drop
 * into a Rehub page without colliding with theme or WooCommerce styles.
 *
 * Note on the doubled root class (`.svsw-landing.svsw-landing ...`): it exists
 * to win specificity fights, and repeating a class is the cheapest way to do
 * that without `!important`. Two things beat single-class rules otherwise:
 * this file's own element resets (`.svsw-landing p`, 0-1-1) and host-theme
 * content styles such as Rehub's `.fullgutenberg .post p` (0-2-1), which was
 * forcing every paragraph on the page to 20px and collapsing every margin to
 * zero. At 0-3-0 the component rules win, and they keep their order relative
 * to each other exactly as written.
 */

/* --------------------------------------------------------------- full bleed */
/* Break out of whatever container the theme wraps the content in, so the
   section spans the viewport while its own content stays centred. The
   negative margins cancel the parent's centring whatever width it has.

   100vw counts the vertical scrollbar, so the section ends up a scrollbar
   wider than the visible page. That overhang is symmetric, half off each
   edge, so the section still covers the viewport exactly and its content
   still lands on the visible centre; the overhang is clipped by the
   overflow-x rule shipped alongside this file. Deliberately no JavaScript
   here, so the width tracks a resize as fast as the browser lays out. */

.svsw-fullbleed {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.svsw-landing.svsw-landing {
	--svsw-bg: #0B0712;
	--svsw-panel: #15101F;
	--svsw-panel-2: #1D162B;
	--svsw-line: #2C2440;
	--svsw-text: #E8E0FF;
	--svsw-muted: #9F8FC4;
	--svsw-accent: #B46BFF;
	--svsw-accent-2: #7C4BC8;
	--svsw-accent-3: #E56BFF;
	--svsw-font: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	box-sizing: border-box;
	margin: 0 auto;
	background: var(--svsw-bg);
	color: var(--svsw-text);
	font-family: var(--svsw-font);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

.svsw-landing.svsw-landing h1,
.svsw-landing.svsw-landing h2,
.svsw-landing.svsw-landing h3 {
	margin: 0;
	color: var(--svsw-text);
	font-family: inherit;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.svsw-landing.svsw-landing p {
	margin: 0;
}

.svsw-landing.svsw-landing ul,
.svsw-landing.svsw-landing ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------ hero */

.svsw-landing.svsw-landing .svsw-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(88vh, 780px);
	padding: clamp(60px, 10vw, 120px) clamp(20px, 5vw, 60px);
	overflow: hidden;
	isolation: isolate;
}

.svsw-landing.svsw-landing .svsw-hero__wave {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	opacity: 0.5;
}

.svsw-landing.svsw-landing .svsw-hero__glow {
	position: absolute;
	inset: -20%;
	z-index: -1;
	background:
		radial-gradient(ellipse 50% 45% at 20% 25%, rgba(180, 107, 255, 0.35), transparent 65%),
		radial-gradient(ellipse 45% 40% at 82% 30%, rgba(229, 107, 255, 0.28), transparent 65%),
		radial-gradient(ellipse 60% 50% at 50% 100%, rgba(124, 75, 200, 0.22), transparent 70%);
	filter: blur(20px);
	pointer-events: none;
}

.svsw-landing.svsw-landing .svsw-hero__inner {
	max-width: 900px;
	text-align: center;
}

.svsw-landing.svsw-landing .svsw-eyebrow {
	margin-bottom: 22px;
	color: var(--svsw-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.svsw-landing.svsw-landing .svsw-hero__title {
	margin-bottom: 26px;
	font-size: clamp(44px, 9vw, 104px);
	font-weight: 900;
}

.svsw-landing.svsw-landing .svsw-hero__line {
	display: block;
}

.svsw-landing.svsw-landing .svsw-hero__line--accent {
	background: linear-gradient(100deg, var(--svsw-accent) 0%, var(--svsw-accent-3) 55%, var(--svsw-accent-2) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.svsw-landing.svsw-landing .svsw-hero__sub {
	max-width: 640px;
	/* A little room before the call to action below it. */
	margin: 0 auto 38px;
	color: var(--svsw-muted);
	font-size: clamp(17px, 2.2vw, 21px);
}

.svsw-landing.svsw-landing .svsw-hero__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	flex-wrap: wrap;
	margin-bottom: 34px;
}

.svsw-landing.svsw-landing .svsw-hero__price {
	color: var(--svsw-muted);
	font-size: 15px;
	font-weight: 600;
}

.svsw-landing.svsw-landing .svsw-hero__badges {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.svsw-landing.svsw-landing .svsw-hero__badges li {
	padding: 7px 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--svsw-line);
	border-radius: 999px;
	color: var(--svsw-muted);
	font-size: 13px;
	font-weight: 600;
}

/* ------------------------------------------------------------------- CTA */

.svsw-landing.svsw-landing .svsw-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 30px;
	background: linear-gradient(135deg, var(--svsw-accent), var(--svsw-accent-3));
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(180, 107, 255, 0.4);
	color: #0B0712;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.svsw-landing.svsw-landing .svsw-cta:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(180, 107, 255, 0.55);
	color: #0B0712;
	text-decoration: none;
}

.svsw-landing.svsw-landing .svsw-cta--lg {
	padding: 20px 44px;
	font-size: 19px;
}

/* --------------------------------------------------------------- sections */

.svsw-landing.svsw-landing > section:not(.svsw-hero) {
	padding: clamp(60px, 9vw, 110px) clamp(20px, 5vw, 60px);
}

.svsw-landing.svsw-landing .svsw-section-head {
	max-width: 760px;
	margin: 0 auto clamp(40px, 6vw, 64px);
	text-align: center;
}

.svsw-landing.svsw-landing .svsw-section-title {
	margin-bottom: 18px;
	font-size: clamp(30px, 5vw, 50px);
	font-weight: 900;
}

.svsw-landing.svsw-landing .svsw-section-sub {
	color: var(--svsw-muted);
	font-size: clamp(16px, 2vw, 19px);
}

/* ----------------------------------------------------------------- steps */

.svsw-landing.svsw-landing .svsw-steps {
	border-top: 1px solid var(--svsw-line);
	border-bottom: 1px solid var(--svsw-line);
	background: linear-gradient(180deg, rgba(21, 16, 31, 0.6), transparent);
}

.svsw-landing.svsw-landing .svsw-steps__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(24px, 4vw, 48px);
	max-width: 1200px;
	margin: 0 auto;
}

.svsw-landing.svsw-landing .svsw-step__num {
	display: block;
	margin-bottom: 16px;
	background: linear-gradient(135deg, var(--svsw-accent), var(--svsw-accent-3));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-size: 46px;
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
}

.svsw-landing.svsw-landing .svsw-step__title {
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: 800;
}

.svsw-landing.svsw-landing .svsw-step__body {
	color: var(--svsw-muted);
	font-size: 16px;
}

/* -------------------------------------------------------------- voicings */

.svsw-landing.svsw-landing .svsw-voicecards {
	display: grid;
	/* 195px lets all five voicings sit on one row at full width, and wrap
	   to 3 then 2 then 1 as the viewport narrows. */
	grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
	gap: 18px;
	max-width: 1200px;
	margin: 0 auto;
}

.svsw-landing.svsw-landing .svsw-voicecard {
	position: relative;
	padding: 26px 22px;
	background: linear-gradient(160deg, var(--svsw-panel-2), var(--svsw-panel));
	border: 1px solid var(--svsw-line);
	border-radius: 18px;
	overflow: hidden;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.svsw-landing.svsw-landing .svsw-voicecard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--svsw-accent), var(--svsw-accent-3));
	opacity: calc(0.35 + var(--svsw-card-index, 0) * 0.16);
}

.svsw-landing.svsw-landing .svsw-voicecard:hover {
	transform: translateY(-4px);
	border-color: var(--svsw-accent);
}

.svsw-landing.svsw-landing .svsw-voicecard__name {
	margin-bottom: 10px;
	font-size: 19px;
	font-weight: 800;
}

.svsw-landing.svsw-landing .svsw-voicecard__body {
	color: var(--svsw-muted);
	font-size: 14.5px;
	line-height: 1.55;
}

/* ---------------------------------------------------------------- engine */

.svsw-landing.svsw-landing .svsw-engine {
	background: linear-gradient(180deg, transparent, rgba(21, 16, 31, 0.7));
	border-top: 1px solid var(--svsw-line);
}

.svsw-landing.svsw-landing .svsw-engine__copy {
	max-width: 760px;
	margin: 0 auto clamp(36px, 5vw, 56px);
	text-align: center;
}

.svsw-landing.svsw-landing .svsw-engine__note {
	margin-top: 18px;
	color: var(--svsw-accent);
	font-size: 15px;
	font-weight: 600;
}

.svsw-landing.svsw-landing .svsw-chain {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	max-width: 1100px;
	margin: 0 auto;
}

.svsw-landing.svsw-landing .svsw-chain__node {
	display: flex;
	align-items: center;
	padding: 14px 20px;
	background: var(--svsw-panel-2);
	border: 1px solid var(--svsw-line);
	border-radius: 999px;
	color: var(--svsw-muted);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.svsw-landing.svsw-landing .svsw-chain__node--wide {
	background: linear-gradient(135deg, rgba(180, 107, 255, 0.2), rgba(29, 22, 43, 0.9));
	border-color: var(--svsw-accent);
	color: var(--svsw-text);
}

/* ------------------------------------------------------------------- FAQ */

.svsw-landing.svsw-landing .svsw-faq {
	border-top: 1px solid var(--svsw-line);
}

.svsw-landing.svsw-landing .svsw-faq .svsw-section-title {
	max-width: 1100px;
	margin: 0 auto clamp(36px, 5vw, 56px);
	text-align: center;
}

.svsw-landing.svsw-landing .svsw-faq__grid {
	display: grid;
	/* Four questions, so a 2-up grid fills cleanly rather than leaving one
	   stranded on its own row. */
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 28px 44px;
	max-width: 900px;
	margin: 0 auto;
}

.svsw-landing.svsw-landing .svsw-faq__item h3 {
	margin-bottom: 8px;
	font-size: 18px;
	font-weight: 800;
}

.svsw-landing.svsw-landing .svsw-faq__item p {
	color: var(--svsw-muted);
	font-size: 15.5px;
}

/* ------------------------------------------------------------- final CTA */

.svsw-landing.svsw-landing .svsw-final {
	background:
		radial-gradient(ellipse 60% 100% at 50% 100%, rgba(180, 107, 255, 0.25), transparent 70%),
		var(--svsw-bg);
	border-top: 1px solid var(--svsw-line);
	text-align: center;
}

.svsw-landing.svsw-landing .svsw-final__title {
	margin-bottom: 14px;
	font-size: clamp(32px, 6vw, 60px);
	font-weight: 900;
}

.svsw-landing.svsw-landing .svsw-final__sub {
	/* Extra room before the call to action below it. */
	margin-bottom: 44px;
	color: var(--svsw-muted);
	font-size: 18px;
}

/* ------------------------------------------------------------------ logo */
/* The SlowVerb Studio wordmark: SL[planet]WVERB over "S T U D I O".
   Scale the whole lockup by setting font-size on .svsw-logo. */

.svsw-landing.svsw-landing .svsw-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.24em;
	line-height: 1;
}

.svsw-landing.svsw-landing .svsw-logo__lockup {
	display: flex;
	align-items: center;
	color: var(--svsw-text);
	font-family: var(--svsw-font);
	font-size: 1em;
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
}

/* The ring overflows the planet's own slot, exactly as it does in the
   plugin, so negative margins let it overlap the neighbouring letters. */
.svsw-landing.svsw-landing .svsw-logo__planet {
	flex: none;
	width: 1.4em;
	height: 1em;
	margin: 0 -0.11em;
	overflow: visible;
}

.svsw-landing.svsw-landing .svsw-logo__sub {
	color: var(--svsw-muted);
	font-family: var(--svsw-font);
	font-size: 0.27em;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-indent: 0.18em;
}
.svsw-landing.svsw-landing .svsw-hero__logo {
	display: block;
	margin-bottom: 30px;
}

.svsw-landing.svsw-landing .svsw-hero__logo .svsw-logo {
	font-size: clamp(30px, 5vw, 46px);
}

.svsw-landing.svsw-landing .svsw-final__logo {
	display: block;
	margin-bottom: 26px;
}

.svsw-landing.svsw-landing .svsw-final__logo .svsw-logo {
	font-size: clamp(24px, 3.5vw, 34px);
}

/* -------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.svsw-landing.svsw-landing *,
	.svsw-landing.svsw-landing *::before,
	.svsw-landing.svsw-landing *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}