<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: en }}">
	{%- include head.html -%}

	<body>
		<section class="logo-section align-logo">
			<div class="logo fade-in">
				<a href="/">
					<img
						src="/assets/base/c-logos/logo-bw.svg"
						alt="Caution logo"
						style="opacity: 0.85"
					/>
				</a>
			</div>
		</section>

		<section class="align">
			<div class="heading fade-in">
				<p class="pill">COMING SOON</p>
				<h1 class="headline">Verifiable compute</h1>
				<p class="subtext delay-1">
					Caution is the next-gen compute platform – verifiable, portable, and
					fast to deploy. Built by the security engineers behind
					<a
						rel="”noopener"
						noreferrer”
						target="_blank"
						href="https://distrust.co/"
						class="distrust-link-subtext"
						>Distrust</a
					>
				</p>
			</div>
		</section>

		<div class="info-block center fade-in delay-2">
			<span class="spaced-text">HELP</span>
			<span class="spaced-text">US</span>
			<span class="spaced-text">SHAPE</span>
			<span class="spaced-text">THE</span>
			<span class="spaced-text">FUTURE</span><br />
			<span class="spaced-text">JOIN</span>
			<span class="spaced-text">THE</span>
			<span class="spaced-text">DESIGN</span>
			<span class="spaced-text">PARTNER</span>
			<span class="spaced-text">PROGRAM</span>
		</div>

		<div class="waitlist-form">
			<form
				id="contact-form"
				method="post"
				class="email-form"
				action="/submit-email"
			>
				<div class="input-wrapper">
					<input
						type="email"
						name="email"
						placeholder="Enter your email"
						id="email"
						class="email-input"
						required
					/>
					<input
						type="hidden"
						id="name"
						name="name"
						class="form-input"
						value="caution.co"
					/>
					<input
						type="hidden"
						id="company-name"
						value="caution.co"
						name="company-name"
						class="form-input"
					/>
					<input
						id="service"
						type="hidden"
						name="service"
						class="form-select"
						value="caution.co"
					/>
					<input
						type="hidden"
						id="other-source"
						name="other-source"
						class="form-input"
						placeholder="Please specify"
					/>
					<input
						type="hidden"
						id="other-source"
						name="help"
						class="form-input"
						placeholder="Please specify"
					/>
					<button type="submit" class="submit-btn" aria-label="Submit email">
						<span class="arrow">→</span>
					</button>
				</div>
			</form>
		</div>

		<div class="footer fade-in delay-3">
			<p>No spam – we'll only email you about Caution.</p>
		</div>
		<div class="footer-mobile">
			<p>
				Get in touch to learn about joining our Design Partner program. No spam
				– we'll only email you about Caution.
			</p>
		</div>
	</body>
</html>
