/**
 * Marketing section styles.
 *
 * One block per section type, in roughly the order a visitor meets them.
 * Sections own their internal composition; the layout layer owns their
 * outer spacing.
 */

/* -- Hero ----------------------------------------------------------------- */

.lg-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--lg-border);
}

.lg-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: var(--lg-space-20) var(--lg-space-24);
	text-align: center;
}

@media (min-width: 640px) {
	.lg-hero__inner {
		padding-block: 7rem 8rem;
	}
}

/*
 * Two decorative layers behind the hero copy: a dot grid faded out with a
 * radial mask, and a soft brand glow. Both are pointer-transparent and hidden
 * from assistive tech.
 */
.lg-hero__grid,
.lg-hero__glow {
	position: absolute;
	pointer-events: none;
}

.lg-hero__grid {
	inset: 0;
	background-image: radial-gradient(var(--lg-border) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
}

.lg-hero__glow {
	top: -12rem;
	left: 50%;
	width: 36rem;
	height: 36rem;
	transform: translateX(-50%);
	border-radius: var(--lg-radius-full);
	background-color: rgb(var(--lg-primary-rgb) / 0.15);
	filter: blur(64px);
}

.lg-hero__title {
	max-width: 48rem;
	margin-top: var(--lg-space-6);
}

.lg-hero__lead {
	max-width: 36rem;
	margin-top: var(--lg-space-6);
	font-size: var(--lg-text-base);
	line-height: var(--lg-leading-relaxed);
	color: var(--lg-muted-fg);
}

@media (min-width: 640px) {
	.lg-hero__lead {
		font-size: var(--lg-text-lg);
	}
}

.lg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--lg-space-3);
	margin-top: 2.25rem;
}

.lg-hero__note {
	margin-top: var(--lg-space-4);
	font-family: var(--lg-font-mono);
	font-size: var(--lg-text-xs);
	color: var(--lg-muted-fg);
}

.lg-hero__note a {
	color: var(--lg-primary);
	text-underline-offset: 4px;
}

.lg-hero__note a:hover {
	text-decoration: underline;
}

.lg-hero__pills {
	margin-top: var(--lg-space-8);
}

/* Dark hero variant — used by the "coming soon" product page. */
.lg-hero--dark {
	border-bottom: 0;
	background-color: var(--lg-inverse);
	color: var(--lg-inverse-fg);
}

.lg-hero--dark .lg-hero__grid {
	background-image: radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1px);
	background-size: 24px 24px;
}

.lg-hero--dark .lg-hero__glow {
	background-color: rgb(var(--lg-primary-rgb) / 0.3);
}

.lg-hero--dark .lg-hero__lead {
	color: var(--lg-inverse-muted);
}

/* -- Section heading ------------------------------------------------------ */

.lg-heading {
	max-width: 42rem;
}

.lg-heading--center {
	margin-inline: auto;
	text-align: center;
}

.lg-heading__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--lg-space-2);
	font-family: var(--lg-font-mono);
	font-size: var(--lg-text-xs);
	font-weight: 500;
	letter-spacing: var(--lg-tracking-label);
	text-transform: uppercase;
	color: var(--lg-primary);
}

.lg-heading--center .lg-heading__eyebrow {
	justify-content: center;
}

.lg-heading__title {
	margin-top: var(--lg-space-3);
}

.lg-heading__description {
	margin-top: var(--lg-space-4);
	font-size: var(--lg-text-base);
	line-height: var(--lg-leading-relaxed);
	color: var(--lg-muted-fg);
}

@media (min-width: 640px) {
	.lg-heading__description {
		font-size: var(--lg-text-lg);
	}
}

/* Spacing between a section heading and the content it introduces. */
.lg-heading + * {
	margin-top: var(--lg-space-12);
}

/* -- Logo / trust strip --------------------------------------------------- */

.lg-logos__inner {
	padding-block: var(--lg-space-8);
}

.lg-logos__label {
	text-align: center;
	font-family: var(--lg-font-mono);
	font-size: 0.6875rem;
	letter-spacing: var(--lg-tracking-label);
	text-transform: uppercase;
	color: var(--lg-muted-fg);
}

.lg-logos__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--lg-space-3) var(--lg-space-10);
	margin: var(--lg-space-5) 0 0;
	padding: 0;
	list-style: none;
}

.lg-logos__item {
	font-size: var(--lg-text-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--lg-muted-fg) 70%, transparent);
	user-select: none;
}

/* -- Stats band ----------------------------------------------------------- */

/*
 * Hairline separators are produced by a 1px grid gap over a border-coloured
 * background, so the rule between cells never doubles up at a wrap point.
 */
.lg-stats {
	display: grid;
	gap: 1px;
	margin: 0;
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-xl);
	background-color: var(--lg-border);
	overflow: hidden;
}

/*
 * The label is written before the value in the DOM so <dt> precedes <dd> as
 * the spec requires; `order` puts the number on top where it belongs visually.
 */
.lg-stats__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--lg-space-8) var(--lg-space-6);
	background-color: var(--lg-bg);
	text-align: center;
}

.lg-stats__value {
	order: 1;
	margin: 0;
	font-family: var(--lg-font-mono);
	font-size: var(--lg-text-2xl);
	font-weight: 600;
	letter-spacing: var(--lg-tracking-tight);
	color: var(--lg-primary);
}

.lg-stats__label {
	order: 2;
	margin-top: var(--lg-space-2);
	font-size: var(--lg-text-sm);
	color: var(--lg-muted-fg);
}

@media (min-width: 640px) {
	.lg-stats__value {
		font-size: var(--lg-text-3xl);
	}

	.lg-stats--lead .lg-stats__value {
		font-size: var(--lg-text-4xl);
	}
}

/* Stats rendered inside a dark hero. */
.lg-stats--inverse {
	margin-top: var(--lg-space-16);
	border-color: var(--lg-inverse-border);
	background-color: var(--lg-inverse-border);
}

.lg-stats--inverse .lg-stats__item {
	background-color: var(--lg-inverse);
}

.lg-stats--inverse .lg-stats__value {
	color: var(--lg-inverse-fg);
}

.lg-stats--inverse .lg-stats__label {
	color: var(--lg-inverse-muted);
}

/* -- Steps ---------------------------------------------------------------- */

.lg-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: lg-step;
}

.lg-step__index {
	font-family: var(--lg-font-mono);
	font-size: var(--lg-text-xs);
	font-weight: 500;
	letter-spacing: var(--lg-tracking-label);
	color: var(--lg-primary);
}

.lg-step__title {
	margin-top: var(--lg-space-3);
	font-size: var(--lg-text-lg);
	font-weight: 600;
}

/* -- Testimonials --------------------------------------------------------- */

.lg-quote {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.lg-quote__text {
	margin: 0;
	font-size: var(--lg-text-sm);
	line-height: var(--lg-leading-relaxed);
	color: color-mix(in srgb, var(--lg-fg) 90%, var(--lg-bg));
}

.lg-quote__text--lead {
	font-size: var(--lg-text-lg);
}

.lg-quote__footer {
	margin-top: var(--lg-space-6);
	padding-top: var(--lg-space-4);
	border-top: 1px solid var(--lg-border);
}

.lg-quote__name {
	font-size: var(--lg-text-sm);
	font-weight: 600;
}

.lg-quote__role {
	margin-top: 0.125rem;
	font-size: var(--lg-text-xs);
	color: var(--lg-muted-fg);
}

/* -- Pairs-with strip ------------------------------------------------------ */

.lg-pairs {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--lg-space-5);
	padding-block: var(--lg-space-12);
}

@media (min-width: 640px) {
	.lg-pairs {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.lg-pairs__body {
	display: flex;
	align-items: flex-start;
	gap: var(--lg-space-4);
}

.lg-pairs__title {
	font-size: var(--lg-text-base);
	font-weight: 600;
}

.lg-pairs__text {
	max-width: 36rem;
	margin-top: var(--lg-space-1);
	font-size: var(--lg-text-sm);
	line-height: var(--lg-leading-relaxed);
	color: var(--lg-muted-fg);
}

.lg-pairs__text a {
	color: var(--lg-primary);
	font-weight: 500;
	text-underline-offset: 4px;
}

.lg-pairs__text a:hover {
	text-decoration: underline;
}

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

.lg-faq__footnote {
	margin-top: var(--lg-space-6);
	text-align: center;
	font-size: var(--lg-text-sm);
	color: var(--lg-muted-fg);
}

.lg-faq__footnote a {
	color: var(--lg-primary);
	font-weight: 500;
	text-underline-offset: 4px;
}

.lg-faq__footnote a:hover {
	text-decoration: underline;
}

/* -- Closing CTA band ------------------------------------------------------ */

.lg-cta-band {
	padding-block: var(--lg-space-20);
}

.lg-cta-band__inner {
	position: relative;
	overflow: hidden;
	padding: var(--lg-space-14) var(--lg-space-6);
	border-radius: var(--lg-radius-2xl);
	background-color: var(--lg-fg);
	color: var(--lg-bg);
}

@media (min-width: 640px) {
	.lg-cta-band__inner {
		padding-inline: var(--lg-space-12);
	}
}

.lg-cta-band__glow {
	position: absolute;
	width: 18rem;
	height: 18rem;
	border-radius: var(--lg-radius-full);
	filter: blur(64px);
	pointer-events: none;
}

.lg-cta-band__glow--a {
	top: -6rem;
	right: -6rem;
	background-color: rgb(var(--lg-primary-rgb) / 0.4);
}

.lg-cta-band__glow--b {
	bottom: -8rem;
	left: -4rem;
	background-color: rgb(var(--lg-primary-rgb) / 0.25);
}

.lg-cta-band__content {
	position: relative;
	max-width: 42rem;
}

.lg-cta-band__text {
	margin-top: var(--lg-space-4);
	font-size: var(--lg-text-base);
	line-height: var(--lg-leading-relaxed);
	opacity: 0.8;
}

@media (min-width: 640px) {
	.lg-cta-band__text {
		font-size: var(--lg-text-lg);
	}
}

.lg-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lg-space-3);
	margin-top: var(--lg-space-8);
}

/*
 * The band inverts against the page, so its outline button has to invert too
 * — deriving from --lg-bg keeps it correct in both colour schemes.
 */
.lg-cta-band__inner .lg-btn--outline {
	border-color: color-mix(in srgb, var(--lg-bg) 30%, transparent);
	background-color: transparent;
	color: var(--lg-bg);
	box-shadow: none;
}

.lg-cta-band__inner .lg-btn--outline:hover {
	background-color: color-mix(in srgb, var(--lg-bg) 12%, transparent);
	color: var(--lg-bg);
}

/* Always-dark centred variant, used for the waitlist CTA. */
.lg-cta-band__inner--dark {
	background-color: var(--lg-inverse);
	color: var(--lg-inverse-fg);
	text-align: center;
}

.lg-cta-band__inner--dark .lg-cta-band__content {
	max-width: 36rem;
	margin-inline: auto;
}

.lg-cta-band__inner--dark .lg-cta-band__text {
	color: var(--lg-inverse-muted);
	opacity: 1;
}

.lg-cta-band__inner--dark .lg-cta-band__actions {
	justify-content: center;
}

.lg-cta-band__inner--dark .lg-cta-band__glow--a {
	top: -6rem;
	right: auto;
	left: 50%;
	transform: translateX(-50%);
}

/* -- Page header (archives, legal pages, tool index) ----------------------- */

.lg-page-header {
	border-bottom: 1px solid var(--lg-border);
	background-color: color-mix(in srgb, var(--lg-muted) 55%, var(--lg-bg));
}

.lg-page-header__inner {
	padding-block: var(--lg-space-16) var(--lg-space-12);
	text-align: center;
}

.lg-page-header__eyebrow {
	font-family: var(--lg-font-mono);
	font-size: var(--lg-text-xs);
	font-weight: 500;
	letter-spacing: var(--lg-tracking-label);
	text-transform: uppercase;
	color: var(--lg-primary);
}

.lg-page-header__title {
	margin-top: var(--lg-space-3);
	font-size: var(--lg-text-4xl);
}

@media (min-width: 640px) {
	.lg-page-header__title {
		font-size: var(--lg-text-5xl);
	}
}

.lg-page-header__lead {
	max-width: 36rem;
	margin: var(--lg-space-5) auto 0;
	font-size: var(--lg-text-base);
	line-height: var(--lg-leading-relaxed);
	color: var(--lg-muted-fg);
}

@media (min-width: 640px) {
	.lg-page-header__lead {
		font-size: var(--lg-text-lg);
	}
}

/* -- Legal / long-form document ------------------------------------------- */

.lg-doc__meta {
	margin-bottom: var(--lg-space-10);
	font-family: var(--lg-font-mono);
	font-size: var(--lg-text-xs);
	color: var(--lg-muted-fg);
}

/* -- Post list (blog / search results) ------------------------------------- */

.lg-entry__title {
	font-size: var(--lg-text-xl);
	font-weight: 600;
}

.lg-entry__title a:hover {
	color: var(--lg-primary);
}

.lg-entry__meta {
	margin-top: var(--lg-space-2);
	font-family: var(--lg-font-mono);
	font-size: var(--lg-text-xs);
	color: var(--lg-muted-fg);
}

.lg-entry__excerpt {
	margin-top: var(--lg-space-3);
	font-size: var(--lg-text-sm);
	line-height: var(--lg-leading-relaxed);
	color: var(--lg-muted-fg);
}

.lg-entry__thumb {
	margin-bottom: var(--lg-space-5);
	border-radius: var(--lg-radius-lg);
	overflow: hidden;
}

.lg-entry__thumb img {
	width: 100%;
	object-fit: cover;
}

/* -- Pagination ------------------------------------------------------------ */

.lg-pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--lg-space-12);
}

.lg-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lg-space-2);
}

.lg-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: var(--lg-space-2);
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-md);
	font-size: var(--lg-text-sm);
	transition: background-color var(--lg-duration) var(--lg-ease);
}

.lg-pagination .page-numbers:hover {
	background-color: var(--lg-accent);
}

.lg-pagination .page-numbers.current {
	background-color: var(--lg-primary);
	border-color: var(--lg-primary);
	color: var(--lg-primary-fg);
}

.lg-pagination .page-numbers.dots {
	border-color: transparent;
}

/* -- Error / empty states --------------------------------------------------- */

.lg-empty {
	padding-block: var(--lg-space-24);
	text-align: center;
}

.lg-empty__code {
	font-family: var(--lg-font-mono);
	font-size: var(--lg-text-6xl);
	font-weight: 600;
	color: var(--lg-primary);
	line-height: 1;
}

.lg-empty__title {
	margin-top: var(--lg-space-5);
}

.lg-empty__text {
	max-width: 32rem;
	margin: var(--lg-space-4) auto 0;
	color: var(--lg-muted-fg);
	line-height: var(--lg-leading-relaxed);
}

.lg-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lg-space-3);
	margin-top: var(--lg-space-8);
}

.lg-empty__search {
	display: flex;
	gap: var(--lg-space-2);
	max-width: 26rem;
	margin: var(--lg-space-8) auto 0;
}