/* =============================================================================
   Fastvue AI marketing site styles.
   Design tokens copied verbatim from the Fastvue Design System
   (handoff bundle, colors_and_type.css). Page layout rules below the tokens.
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

:root {
	/* Brand */
	--fv-brand: #55ba00;
	--fv-brand-ink: #111827;

	/* Green */
	--fv-green-50: #eef9e6;
	--fv-green-100: #d4f0c0;
	--fv-green-200: #b7e596;
	--fv-green-300: #98db69;
	--fv-green-400: #7ed343;
	--fv-green-500: #64ca0d;
	--fv-green-600: #55ba00;
	--fv-green-700: #3aa600;
	--fv-green-800: #1a9200;
	--fv-green-900: #007000;

	/* Gray */
	--fv-gray-50: #f9fafb;
	--fv-gray-100: #f3f4f6;
	--fv-gray-200: #e5e7eb;
	--fv-gray-300: #d1d5db;
	--fv-gray-400: #9ca3af;
	--fv-gray-500: #6b7280;
	--fv-gray-600: #4b5563;
	--fv-gray-700: #374151;
	--fv-gray-800: #1f2937;
	--fv-gray-900: #111827;
	--fv-white: #ffffff;

	/* Semantic */
	--fv-yellow-500: #f59e0b;
	--fv-red-500: #ef4444;
	--fv-red-600: #dc2626;
	--fv-blue-500: #3b82f6;

	--fv-fg: var(--fv-gray-900);
	--fv-fg-muted: var(--fv-gray-600);
	--fv-fg-subtle: var(--fv-gray-500);
	--fv-fg-inverse: var(--fv-white);
	--fv-bg: var(--fv-white);
	--fv-bg-subtle: var(--fv-gray-50);
	--fv-bg-muted: var(--fv-gray-100);
	--fv-bg-dark: var(--fv-gray-800);
	--fv-border: var(--fv-gray-200);
	--fv-accent: var(--fv-green-600);
	--fv-accent-hover: var(--fv-green-700);

	--fv-gradient-hero: linear-gradient(180deg, #f9fafb 0%, #edeef1 100%);

	--fv-font-sans:
		"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
		sans-serif;
	--fv-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--fv-radius: 4px;
	--fv-radius-md: 6px;
	--fv-radius-lg: 8px;
	--fv-radius-full: 9999px;

	--fv-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--fv-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--fv-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--fv-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	--fv-container: 1216px;
	--fv-gutter: 32px;

	--fv-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--fv-duration: 200ms;
}

/* =============================================================================
   Reset + base
   ============================================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: var(--fv-font-sans);
	color: var(--fv-fg);
	background: var(--fv-bg);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
a {
	color: var(--fv-accent-hover);
	text-decoration: none;
}
a:hover {
	color: var(--fv-green-800);
}
img {
	display: block;
	max-width: 100%;
	height: auto;
}
button {
	font-family: inherit;
}

.container {
	max-width: var(--fv-container);
	margin: 0 auto;
	padding: 0 var(--fv-gutter);
}

/* Typography primitives — matches design system `.fv-h1` etc. */
.eyebrow {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fv-green-700);
}
h1,
h2,
h3,
h4 {
	color: var(--fv-fg);
	margin: 0;
}
.h1 {
	font-size: 60px;
	line-height: 60px;
	font-weight: 700;
	letter-spacing: -0.0333em;
}
.h2 {
	font-size: 36px;
	line-height: 40px;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.h4 {
	font-size: 20px;
	font-weight: 700;
}
.lead {
	font-size: 20px;
	line-height: 30px;
	color: var(--fv-fg-muted);
}
.muted {
	color: var(--fv-fg-muted);
}

/* Button — matches design system patterns: filled/outlined, sm/base/lg/xl. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: var(--fv-radius);
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition:
		background var(--fv-duration) var(--fv-ease),
		border-color var(--fv-duration) var(--fv-ease),
		color var(--fv-duration) var(--fv-ease);
}
.btn--base {
	padding: 9px 18px;
	font-size: 14px;
}
.btn--lg {
	padding: 12px 22px;
	font-size: 16px;
}
.btn--xl {
	padding: 14px 28px;
	font-size: 16px;
}
.btn--full {
	width: 100%;
}
.btn--filled {
	background: var(--fv-accent);
	color: var(--fv-fg-inverse);
}
.btn--filled:hover {
	background: var(--fv-accent-hover);
	color: var(--fv-fg-inverse);
}
.btn--outlined {
	background: var(--fv-white);
	color: var(--fv-fg);
	border-color: var(--fv-border);
}
.btn--outlined:hover {
	background: var(--fv-bg-subtle);
}
.btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* =============================================================================
   Navbar
   ============================================================================= */
.navbar {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px var(--fv-gutter);
	background: var(--fv-white);
	box-shadow: var(--fv-shadow);
}
.navbar__left {
	display: flex;
	align-items: center;
	gap: 48px;
}
.navbar__logo {
	height: 28px;
	width: auto;
}
.navbar__links {
	display: flex;
	gap: 28px;
}
.navbar__links a {
	font-size: 16px;
	font-weight: 500;
	color: var(--fv-gray-900);
	text-decoration: none;
}
.navbar__links a:hover {
	color: var(--fv-green-700);
}
.navbar__right {
	display: flex;
	align-items: center;
	gap: 18px;
}

@media (max-width: 760px) {
	.navbar__links {
		display: none;
	}
}

/* =============================================================================
   Hero
   ============================================================================= */
.hero {
	background: var(--fv-gradient-hero);
	padding: 88px 0;
}
.hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 48px;
}
.hero__copy .eyebrow {
	margin-bottom: 16px;
	display: block;
}
.hero__copy .h1 {
	margin: 0;
	max-width: 560px;
}
.hero__copy .lead {
	margin: 24px 0 32px;
	max-width: 560px;
}
.hero__ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.hero__image {
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero__image img {
	max-width: 720px;
	width: 100%;
	height: auto;
}

@media (max-width: 900px) {
	.hero {
		padding: 56px 0;
	}
	.hero__grid {
		grid-template-columns: 1fr;
	}
	.hero__copy .h1 {
		font-size: 44px;
		line-height: 48px;
	}
}

/* =============================================================================
   Section base
   ============================================================================= */
.section {
	padding: 96px 0;
	background: var(--fv-white);
}
.section--subtle {
	background: var(--fv-gray-50);
}
.section__intro {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 64px;
}
.section__intro .eyebrow {
	display: block;
	margin-bottom: 12px;
}
.section__intro .h2 {
	margin: 0;
}
.section__intro p {
	margin: 16px 0 0;
	font-size: 18px;
	line-height: 1.55;
	color: var(--fv-fg-muted);
}

/* =============================================================================
   Feature grid
   ============================================================================= */
.features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.features__card {
	background: var(--fv-white);
	border-radius: var(--fv-radius-md);
	padding: 28px 28px 32px;
	box-shadow: var(--fv-shadow);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.features__card img {
	height: 120px;
	width: auto;
	margin-bottom: 20px;
}
.features__card h4 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 8px;
}
.features__card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--fv-fg-muted);
}
@media (max-width: 760px) {
	.features {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   Pricing — two-card layout
   ============================================================================= */
.pricing {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 980px;
	margin: 0 auto;
}
.pricing__card {
	background: var(--fv-white);
	border-radius: var(--fv-radius-lg);
	padding: 40px;
	box-shadow: var(--fv-shadow-lg);
	text-align: center;
	display: flex;
	flex-direction: column;
}
.pricing__card .eyebrow {
	display: block;
	margin-bottom: 8px;
}
.pricing__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	margin: 8px 0 4px;
}
.pricing__price .amount {
	font-size: 60px;
	font-weight: 700;
	color: var(--fv-gray-900);
	letter-spacing: -0.03em;
	line-height: 1;
}
.pricing__price .unit {
	font-size: 16px;
	color: var(--fv-gray-500);
}
.pricing__sub {
	font-size: 13px;
	color: var(--fv-gray-500);
}
.pricing__features {
	list-style: none;
	padding: 0;
	margin: 24px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
}
.pricing__features li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: var(--fv-gray-700);
}
.pricing__features li::before {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--fv-green-100);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2355BA00'><path d='M16.7 5.3a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 1 1 1.4-1.4L9 11.6l6.3-6.3a1 1 0 0 1 1.4 0z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	flex: 0 0 auto;
}
.pricing__card .btn {
	margin-top: auto;
}
@media (max-width: 760px) {
	.pricing {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   Try-it form
   ============================================================================= */
.try {
	max-width: 760px;
	margin: 0 auto;
	background: var(--fv-white);
	border-radius: var(--fv-radius-lg);
	padding: 36px;
	box-shadow: var(--fv-shadow-lg);
}
/* Top bar of the test card: Suggest button on the left, view toggle on the right. */
.try__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.try__viewtoggle {
	display: inline-flex;
	background: var(--fv-bg-subtle);
	border: 1px solid var(--fv-border);
	border-radius: var(--fv-radius-full);
	padding: 3px;
}
.try__viewtoggle__btn {
	border: 0;
	background: transparent;
	padding: 6px 16px;
	border-radius: var(--fv-radius-full);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--fv-fg-muted);
	cursor: pointer;
	transition:
		background var(--fv-duration) var(--fv-ease),
		color var(--fv-duration) var(--fv-ease);
}
.try__viewtoggle__btn.is-active {
	background: var(--fv-white);
	color: var(--fv-fg);
	box-shadow: var(--fv-shadow-sm);
}

/* API view — request/response JSON blocks. */
.try__code {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.try__code__label {
	margin-top: 12px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fv-fg-subtle);
}
.try__code__block {
	margin: 0;
	padding: 16px;
	background: var(--fv-gray-900);
	color: #e2e8f0;
	border-radius: var(--fv-radius);
	font-family: var(--fv-font-mono);
	font-size: 13px;
	line-height: 1.55;
	overflow-x: auto;
	white-space: pre;
	max-height: 320px;
}
.try__code__block code {
	font-family: inherit;
}

/* Minimal token highlighting applied via JS in test.js. */
.tok-key {
	color: #93c5fd;
}
.tok-string {
	color: #86efac;
}
.tok-number {
	color: #fcd34d;
}
.tok-bool {
	color: #f0abfc;
}
.tok-null {
	color: #94a3b8;
}
.tok-comment {
	color: #64748b;
	font-style: italic;
}

.try__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}
@media (max-width: 600px) {
	.try__row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}
.try__row .try__field {
	margin-bottom: 0;
}
.try__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 20px;
}

/* Per-activity field group — JS toggles the [hidden] attribute. */
.try__dynamic {
	animation: try-fade 200ms var(--fv-ease);
}
@keyframes try-fade {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Optional / collapsible section for rare fields. */
.try__optional {
	margin-top: 4px;
	margin-bottom: 20px;
	border-top: 1px solid var(--fv-border);
	padding-top: 16px;
}
.try__optional__summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: var(--fv-fg-muted);
	user-select: none;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
}
.try__optional__summary::-webkit-details-marker {
	display: none;
}
.try__optional__summary:hover {
	color: var(--fv-fg);
}
.try__optional__chevron {
	display: inline-block;
	transition: transform var(--fv-duration) var(--fv-ease);
	color: var(--fv-fg-subtle);
}
.try__optional[open] .try__optional__chevron {
	transform: rotate(90deg);
}
.try__optional[open] .try__row {
	margin-top: 16px;
}
.try__field label {
	font-size: 14px;
	font-weight: 500;
	color: var(--fv-gray-700);
}
.try__field input,
.try__field textarea,
.try__field select {
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	padding: 10px 12px;
	border: 1px solid var(--fv-border);
	border-radius: var(--fv-radius);
	background: var(--fv-white);
	color: var(--fv-gray-900);
	resize: vertical;
	appearance: none;
}
.try__field select {
	/* Native chevron — embed an SVG arrow so we don't depend on browser styling. */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B7280'><path d='M5 8l5 5 5-5H5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}
.try__field input:focus,
.try__field textarea:focus,
.try__field select:focus {
	outline: none;
	border-color: var(--fv-accent);
	box-shadow: 0 0 0 3px rgba(85, 186, 0, 0.15);
}
.try__field .hint {
	font-size: 12px;
	color: var(--fv-gray-500);
}
.try__captcha {
	display: flex;
	justify-content: center;
	margin: 20px 0;
}
.try__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.try__actions--single {
	justify-content: flex-end;
}
@media (max-width: 480px) {
	.try__actions .btn {
		flex: 1;
	}
}
.try__result {
	margin-top: 24px;
	padding: 20px;
	border-radius: var(--fv-radius);
	background: var(--fv-bg-subtle);
	border: 1px solid var(--fv-border);
	font-size: 14px;
}
.try__result.hidden {
	display: none;
}
.try__result__row {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
}
.try__result__row strong {
	color: var(--fv-fg);
}
.try__result.error {
	background: #fef2f2;
	border-color: #fecaca;
	color: var(--fv-red-600);
}

.badge {
	display: inline-flex;
	padding: 2px 10px;
	border-radius: var(--fv-radius-full);
	font-size: 12px;
	font-weight: 500;
	text-transform: capitalize;
}
.badge--none {
	background: var(--fv-gray-100);
	color: var(--fv-gray-700);
}
.badge--mild {
	background: #fef3c7;
	color: #92400e;
}
.badge--moderate {
	background: #fed7aa;
	color: #9a3412;
}
.badge--serious {
	background: #fecaca;
	color: #991b1b;
}
.badge--severe {
	background: var(--fv-red-600);
	color: var(--fv-white);
}

/* =============================================================================
   CTA band
   ============================================================================= */
.cta {
	padding: 96px 0;
	background: var(--fv-white);
	text-align: center;
}
.cta .container {
	max-width: 800px;
}
.cta h2 {
	margin: 0;
}
.cta p {
	margin: 16px 0 32px;
	font-size: 18px;
	line-height: 1.55;
	color: var(--fv-fg-muted);
}

/* =============================================================================
   Footer
   ============================================================================= */
.footer {
	background: var(--fv-bg-dark);
	color: var(--fv-gray-300);
	padding: 56px 0 32px;
}
.footer__logo {
	height: 28px;
	margin-bottom: 32px;
}
.footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.footer__col h6 {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fv-gray-400);
	margin: 0 0 16px;
}
.footer__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.footer__col a {
	color: var(--fv-gray-300);
	font-size: 15px;
}
.footer__col a:hover {
	color: var(--fv-white);
}
.footer__bottom {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--fv-gray-600);
	font-size: 13px;
	color: var(--fv-gray-400);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
@media (max-width: 760px) {
	.footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =============================================================================
   Doc / legal pages (prose)
   ============================================================================= */
.doc {
	padding: 64px 0 96px;
	background: var(--fv-white);
}
.doc__inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--fv-gutter);
}
.doc .eyebrow {
	display: block;
	margin-bottom: 12px;
}
.doc h1 {
	font-size: 40px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
}
.doc__meta {
	color: var(--fv-fg-subtle);
	font-size: 14px;
	margin: 0 0 8px;
}
.doc h2 {
	font-size: 28px;
	font-weight: 700;
	margin: 56px 0 14px;
	padding-top: 24px;
	border-top: 1px solid var(--fv-border);
	scroll-margin-top: 88px;
}
.doc h2:first-of-type {
	border-top: 0;
	padding-top: 0;
}
.doc h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 28px 0 8px;
}
.doc p,
.doc li {
	font-size: 17px;
	line-height: 1.7;
	color: var(--fv-fg-muted);
}
.doc p {
	margin: 0 0 16px;
}
.doc ul {
	margin: 0 0 16px;
	padding-left: 22px;
}
.doc li {
	margin: 0 0 8px;
}
.doc strong {
	color: var(--fv-fg);
}
.doc a {
	color: var(--fv-accent-hover);
	text-decoration: underline;
}
.doc__lead {
	font-size: 19px;
	line-height: 1.6;
	color: var(--fv-fg);
	margin: 0 0 24px;
}
.doc__back {
	display: inline-block;
	margin-bottom: 28px;
	font-size: 14px;
	font-weight: 600;
}
.doc__toc {
	background: var(--fv-bg-subtle);
	border: 1px solid var(--fv-border);
	border-radius: var(--fv-radius-md);
	padding: 18px 22px;
	margin: 0 0 36px;
}
.doc__toc h2 {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fv-fg-subtle);
	margin: 0 0 10px;
	border: 0;
	padding: 0;
}
.doc__toc ol {
	margin: 0;
	padding-left: 20px;
}
.doc__toc li {
	margin: 0 0 6px;
	font-size: 16px;
}
.doc__toc a {
	color: var(--fv-accent-hover);
	text-decoration: none;
}
.doc__toc a:hover {
	text-decoration: underline;
}
.doc__note {
	background: var(--fv-green-50);
	border: 1px solid var(--fv-green-200);
	border-radius: var(--fv-radius-md);
	padding: 16px 18px;
	margin: 0 0 28px;
}
.doc__note p {
	margin: 0;
	font-size: 15px;
	color: var(--fv-gray-700);
}
.doc table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 15px;
}
.doc th,
.doc td {
	text-align: left;
	padding: 10px 12px;
	border: 1px solid var(--fv-border);
	vertical-align: top;
}
.doc th {
	background: var(--fv-bg-subtle);
	font-weight: 700;
	color: var(--fv-fg);
}
.doc td {
	color: var(--fv-fg-muted);
}

/* =============================================================================
   Coming soon (temporary home)
   ============================================================================= */
.coming {
	min-height: calc(100vh - 68px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--fv-gradient-hero);
	position: relative;
	overflow: hidden;
}
.coming::before {
	content: "";
	position: absolute;
	width: 620px;
	height: 620px;
	top: -220px;
	right: -160px;
	background: radial-gradient(circle, rgba(85, 186, 0, 0.18), rgba(85, 186, 0, 0) 70%);
	pointer-events: none;
}
.coming::after {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	bottom: -200px;
	left: -140px;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0) 70%);
	pointer-events: none;
}
.coming__inner {
	position: relative;
	max-width: 720px;
	padding: 0 var(--fv-gutter);
}
.coming__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--fv-white);
	border: 1px solid var(--fv-green-200);
	color: var(--fv-green-800);
	font-weight: 600;
	font-size: 14px;
	padding: 7px 14px;
	border-radius: var(--fv-radius-full);
	box-shadow: var(--fv-shadow-sm);
	margin-bottom: 28px;
}
.coming__pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fv-green-600);
	box-shadow: 0 0 0 0 rgba(85, 186, 0, 0.5);
	animation: comingPulse 2s infinite;
}
@keyframes comingPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(85, 186, 0, 0.5);
	}
	70% {
		box-shadow: 0 0 0 12px rgba(85, 186, 0, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(85, 186, 0, 0);
	}
}
.coming__product {
	margin: 0 0 16px;
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--fv-brand-ink);
}
.coming__product .accent {
	color: var(--fv-green-700);
}
.coming h1 {
	font-size: 60px;
	line-height: 1.04;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0 0 20px;
}
.coming h1 .accent {
	color: var(--fv-green-700);
}
.coming__lead {
	font-size: 20px;
	line-height: 1.55;
	color: var(--fv-fg-muted);
	margin: 0 auto 36px;
	max-width: 560px;
}
.coming__ctas {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.coming__fineprint {
	margin-top: 28px;
	font-size: 14px;
	color: var(--fv-fg-subtle);
}
.coming__legal {
	margin-top: 14px;
	font-size: 13px;
}
.coming__legal a {
	color: var(--fv-fg-subtle);
	text-decoration: none;
}
.coming__legal a:hover {
	color: var(--fv-green-700);
}
@media (max-width: 760px) {
	.coming h1 {
		font-size: 40px;
	}
}