:root {
	--navy: #02278e;
	--navy-deep: #011a63;
	--blue: #02258d;
	--blue-hover: #0a36b8;
	--ink: #0d1530;
	--muted: #5b647d;
	--body: #3d4660;
	--bright: #0339d9;
	--ic-a: #0339d9;
	--ic-b: #cddafd;
	--ic-c: #fff;
	--line: #d8deea;
	--line-soft: #e6eaf3;
	--error: #c4282d;
	--ok: #138a52;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--banner: radial-gradient(ellipse 90% 75% at 50% 80%, #0339dc 0%, #0233c4 40%, var(--navy) 85%) var(--navy);
	--tint: #edf2ff;
	--check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

@view-transition {
	navigation: auto;
}

::view-transition-group(*) {
	animation-duration: 0.45s;
	animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

body {
	margin: 0;
	background: #fff;
	color: var(--ink);
	font-family: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	display: block;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: 800;
	letter-spacing: -0.02em;
}

p {
	margin: 0;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 3px solid rgba(2, 37, 141, 0.35);
	outline-offset: 3px;
}

.has-scrollbar {
	scrollbar-width: none;
}

.has-scrollbar::-webkit-scrollbar {
	display: none;
}

.scrollbar {
	position: fixed;
	z-index: 60;
	top: 0;
	right: 0;
	bottom: 0;
	width: 14px;
}

.scrollbar[hidden] {
	display: none;
}

.scrollbar i {
	position: absolute;
	top: 0;
	right: 3px;
	width: 7px;
	border-radius: 7px;
	background: rgba(3, 57, 217, 0.55);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
	transition: width 0.15s, background-color 0.15s;
}

.scrollbar:hover i,
.scrollbar.is-dragging i {
	width: 9px;
	background: rgba(3, 57, 217, 0.85);
}

.wrap {
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
}

@keyframes rise {
	from { opacity: 0; transform: translateY(18px); }
}

@keyframes drop {
	from { opacity: 0; transform: translateY(-4px); }
}

@keyframes shake {
	20%, 60% { transform: translateX(-5px); }
	40%, 80% { transform: translateX(5px); }
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

@keyframes draw {
	to { stroke-dashoffset: 0; }
}

@keyframes word {
	from { opacity: 0; transform: translateY(0.45em); filter: blur(8px); }
}

@keyframes settle {
	from { opacity: 0; transform: scale(1.08); }
}

@keyframes flow {
	to { transform: translateX(-1600px); }
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	text-decoration: none;
}

.brand-name {
	display: flex;
	flex-direction: column;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: 0.01em;
}

.brand-name b {
	font-weight: 800;
}

.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 30px;
	border: 1.6px solid transparent;
	border-radius: 7px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}

.button:active {
	transform: translateY(1px);
}

.button-light {
	border-color: #fff;
	background: #fff;
	color: var(--blue);
}

.button-light:hover {
	background: transparent;
	color: #fff;
}

.button-ghost {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.button-ghost:hover {
	border-color: #fff;
	background: #fff;
	color: var(--blue);
}

.button-dark {
	background: var(--blue);
	color: #fff;
}

.button-dark:hover {
	background: var(--blue-hover);
}

.hero {
	--photo: 0.52;
	view-transition-name: hero;
	display: flex;
	flex-direction: column;
	min-height: min(100svh, 920px);
	background: var(--banner);
	color: #fff;
}

.hero,
.statement,
.section-navy {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.statement,
.section-navy {
	--ic-a: #fff;
	--ic-b: rgba(255, 255, 255, 0.22);
	--ic-c: var(--navy);
}

.hero::after,
.statement::after,
.section-navy::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.32;
	mix-blend-mode: overlay;
	pointer-events: none;
}

.hero::after {
	z-index: 1;
}

.texture {
	position: absolute;
	z-index: -1;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(75% 90% at 50% 50%, #000 15%, transparent 75%);
	mask-image: radial-gradient(75% 90% at 50% 50%, #000 15%, transparent 75%);
}

.hero .texture {
	-webkit-mask-image: radial-gradient(85% 70% at 25% 40%, #000 20%, transparent 80%);
	mask-image: radial-gradient(85% 70% at 25% 40%, #000 20%, transparent 80%);
}

.texture i {
	position: absolute;
	top: 50%;
	left: 0;
	width: calc(100% + 1600px);
	height: 1000px;
	margin-top: -500px;
	background: url("flow.svg") repeat-x 0 0 / 1600px 1000px;
	opacity: 0.14;
	animation: flow 150s linear infinite;
}

.nav,
.hero-body {
	position: relative;
	z-index: 2;
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 28px;
	padding-bottom: 28px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 32px;
}

.nav-links a {
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s;
}

.nav-links a:hover {
	color: #fff;
}

.nav-links .nav-apply {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 20px;
	border: 1.6px solid #fff;
	border-radius: 7px;
	color: #fff;
	transition: background-color 0.15s, color 0.15s;
}

.nav-links .nav-apply:hover {
	background: #fff;
	color: var(--blue);
}

.hero-body {
	margin-block: auto;
	padding-top: clamp(32px, 6vw, 72px);
}

.hero h1 {
	max-width: 15ch;
	font-size: clamp(44px, 9vw, 76px);
	line-height: 0.98;
	letter-spacing: -0.035em;
}

.hero h1 .word {
	display: inline-block;
	animation: word 0.9s calc(var(--i) * 70ms + 0.05s) var(--ease) backwards;
}

.hero-photo {
	--fade: linear-gradient(180deg, transparent 0%, #000 35%);
	position: relative;
	height: min(80vw, 460px);
	margin: 40px 0 0;
	overflow: hidden;
	animation: settle 1.6s 0.15s var(--ease) backwards;
}

.hero-photo img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	filter: saturate(0.85) contrast(1.04);
}

.hero-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #0339d9;
	opacity: 0.32;
	mix-blend-mode: soft-light;
}

.hero-photo img,
.hero-photo::after {
	-webkit-mask-image: var(--fade);
	-webkit-mask-composite: source-in;
	mask-image: var(--fade);
	mask-composite: intersect;
}

.hero-lead {
	max-width: 640px;
	margin-top: 28px;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(18px, 1.6vw, 21px);
	line-height: 1.6;
	animation: rise 0.8s 0.45s var(--ease) backwards;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
	margin-top: 44px;
	animation: rise 0.8s 0.55s var(--ease) backwards;
}

.arrow-link {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 5px;
	transition: text-decoration-color 0.15s;
}

.nowrap {
	white-space: nowrap;
}

.arrow-link svg {
	display: inline-block;
	margin-left: 8px;
	vertical-align: -3px;
	transition: transform 0.2s var(--ease);
}

.arrow-link:hover {
	text-decoration-color: #fff;
}

.arrow-link:hover svg {
	transform: translateX(4px);
}

.section {
	padding: clamp(88px, 11vw, 150px) 0;
}

.section-navy {
	background: var(--banner);
	color: #fff;
}

.section-tint {
	background: var(--tint);
}

.section h2 {
	font-size: clamp(34px, 4.6vw, 58px);
	line-height: 1.04;
	text-wrap: balance;
}

.section-text {
	max-width: 620px;
	margin-top: 24px;
	color: var(--body);
	font-size: 19px;
	line-height: 1.65;
}

.section-text strong {
	color: var(--ink);
	font-weight: 700;
}

.hl {
	color: var(--bright);
}

.section-navy .section-text {
	color: rgba(255, 255, 255, 0.78);
}

.section-navy .section-text strong {
	color: #fff;
}

.section-navy .hl {
	color: #9db8ff;
}

section[id] {
	scroll-margin-top: 72px;
}

.icon {
	flex: none;
	width: 48px;
	height: 48px;
	transition: transform 0.35s var(--ease);
}

.ic-a {
	fill: var(--ic-a);
}

.ic-b {
	fill: var(--ic-b);
}

.ic-c {
	fill: var(--ic-c);
}

.ic-s {
	fill: none;
	stroke: var(--ic-a);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ic-thick {
	stroke-width: 3.5;
}

.section-head {
	max-width: 780px;
}

.split {
	display: grid;
	gap: 56px;
}

.split-intro .photo {
	margin-top: 44px;
}

.photo {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: 4 / 3;
}

.photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.9);
}

.photo-wide {
	margin-top: 56px;
	aspect-ratio: 16 / 9;
}

.photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #0339d9;
	opacity: 0.18;
	mix-blend-mode: soft-light;
	pointer-events: none;
}

.js .photo.reveal {
	opacity: 1;
	transform: none;
	-webkit-mask-image: linear-gradient(100deg, #000 33.4%, transparent 66.6%);
	mask-image: linear-gradient(100deg, #000 33.4%, transparent 66.6%);
	-webkit-mask-size: 300% 100%;
	mask-size: 300% 100%;
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: -webkit-mask-position 1.7s cubic-bezier(0.45, 0, 0.2, 1), mask-position 1.7s cubic-bezier(0.45, 0, 0.2, 1);
}

.js .photo.reveal img {
	transform: scale(1.08);
	transition: transform 2.2s var(--ease);
}

.js .photo.reveal.is-visible.is-loaded {
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

.js .photo.reveal.is-visible.is-loaded img {
	transform: none;
}

.js .cue .icon {
	opacity: 0;
	transform: scale(0.6) rotate(-10deg);
	transition: opacity 0.4s, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: calc(var(--i, 0) * 90ms + 0.1s);
}

.js .cue.is-visible .icon {
	opacity: 1;
	transform: none;
}

.js .points li.is-visible:hover .icon,
.js .feature.is-visible:hover .icon {
	transform: translateY(-3px) rotate(-4deg);
	transition-delay: 0s;
}

.list-lead {
	margin-bottom: 8px;
	font-size: 18px;
	font-weight: 700;
}

.points {
	margin: 0;
	padding: 0;
	list-style: none;
}

.points li {
	display: flex;
	gap: 22px;
	padding: 28px 0;
	border-bottom: 1px solid var(--line-soft);
}

.points li:first-child {
	border-top: 1px solid var(--line-soft);
}

.points li:hover .icon {
	transform: translateY(-3px) rotate(-4deg);
}

.points h3 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.points p {
	margin-top: 6px;
	color: var(--body);
}

.features {
	display: grid;
	gap: 20px;
	margin-top: 64px;
}

.feature {
	padding: 36px;
	border: 1px solid var(--line-soft);
	border-radius: 16px;
	background: #fff;
	transition: border-color 0.2s, transform 0.3s var(--ease);
}

.feature:hover {
	border-color: #c5cee3;
	transform: translateY(-3px);
}

.feature .icon {
	width: 56px;
	height: 56px;
}

.feature:hover .icon {
	transform: translateY(-3px) rotate(-4deg);
}

.feature h3 {
	margin: 26px 0 10px;
	font-size: 23px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.feature p {
	color: var(--body);
}

.benefit {
	padding-top: 28px;
	border-top: 2px solid rgba(2, 37, 141, 0.14);
}

.benefit .icon {
	margin-bottom: 20px;
}

.benefit h3 {
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.benefit p {
	margin-top: 12px;
	color: var(--body);
}

.section:has(> .statement) {
	padding-bottom: 0;
}

.statement {
	margin-top: clamp(80px, 10vw, 128px);
	padding: clamp(88px, 11vw, 150px) 24px;
	background: var(--banner);
	color: #fff;
	text-align: center;
}

.connect {
	width: 132px;
	height: 36px;
	margin: 0 auto 36px;
	overflow: visible;
}

.connect path {
	fill: none;
	stroke: rgba(255, 255, 255, 0.5);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1s 0.35s var(--ease);
}

.connect circle {
	fill: #fff;
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.6s 1.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.connect circle:first-of-type {
	fill: #9db8ff;
	transition-delay: 0.15s;
}

.js .statement:not(.is-visible) .connect circle {
	transform: scale(0);
}

.is-visible .connect path,
html:not(.js) .connect path {
	stroke-dashoffset: 0;
}

.statement-text {
	max-width: 17ch;
	margin-inline: auto;
	font-size: clamp(31px, 5.2vw, 72px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.swash {
	position: relative;
	isolation: isolate;
	display: inline-block;
}

.swash svg {
	position: absolute;
	z-index: -1;
	left: -2%;
	bottom: -0.24em;
	width: 104%;
	height: 0.36em;
	overflow: visible;
	fill: none;
	stroke: #7db4ff;
	stroke-linecap: round;
}

.swash path {
	stroke-width: 7;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.9s 0.55s cubic-bezier(0.6, 0.05, 0.3, 1);
}

.swash path + path {
	stroke-width: 3.5;
	opacity: 0.6;
	transition-delay: 1s;
}

.is-visible .swash path,
html:not(.js) .swash path {
	stroke-dashoffset: 0;
}

.bar {
	position: fixed;
	z-index: 50;
	inset: 0 0 auto;
	visibility: hidden;
	background: #fff;
	box-shadow: 0 1px 0 var(--line-soft), 0 12px 32px -22px rgba(0, 10, 50, 0.45);
	transform: translateY(-100%);
	transition: transform 0.3s var(--ease), visibility 0s 0.3s;
}

.bar.is-shown {
	visibility: visible;
	transform: none;
	transition: transform 0.3s var(--ease);
}

.bar-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: 68px;
}

.bar-links {
	display: flex;
	align-items: center;
	gap: 28px;
}

.bar-links a:not(.button) {
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	opacity: 0.75;
	transition: opacity 0.15s;
}

.bar-links a:not(.button):hover,
.bar-links a[aria-current] {
	opacity: 1;
}

.bar-links a[aria-current] {
	text-decoration: underline 2px var(--bright);
	text-underline-offset: 8px;
}

.button-small {
	height: 42px;
	padding: 0 20px;
	font-size: 15px;
}

.brand-dark {
	color: var(--ink);
}

.brand-dark img {
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--line);
}

.card {
	position: relative;
	padding: clamp(28px, 4vw, 44px);
	border: 1px solid var(--line-soft);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 30px 60px -40px rgba(0, 10, 50, 0.35);
}

.form[hidden],
.success[hidden],
.alert[hidden] {
	display: none;
}

.grid {
	display: grid;
	gap: 20px;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.form > .field {
	margin-top: 24px;
}

.field > label,
.label {
	padding: 0;
	font-size: 15px;
	font-weight: 600;
}

.req {
	color: var(--error);
}

.optional {
	margin-left: 4px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 500;
}

.input {
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 15px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 16px;
	transition: border-color 0.15s, box-shadow 0.15s;
	-webkit-appearance: none;
	appearance: none;
}

textarea.input {
	height: auto;
	min-height: 112px;
	padding: 13px 15px;
	resize: vertical;
}

.input::placeholder {
	color: #9aa3b8;
}

.input:hover {
	border-color: #b8c1d6;
}

.input:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(2, 37, 141, 0.16);
}

.input[aria-invalid="true"] {
	border-color: var(--error);
}

.error {
	color: var(--error);
	font-size: 14px;
	font-weight: 500;
	animation: drop 0.2s ease-out backwards;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.chip {
	position: relative;
}

.chip input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.chip span {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	font-size: 15px;
	font-weight: 600;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.chip span::before {
	content: "";
	width: 0;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--check) center / contain no-repeat;
	mask: var(--check) center / contain no-repeat;
	transition: width 0.2s var(--ease), margin 0.2s var(--ease);
}

.chip:hover span {
	border-color: var(--blue);
}

.chip input:checked + span {
	border-color: var(--blue);
	background: var(--blue);
	color: #fff;
}

.chip input:checked + span::before {
	width: 14px;
	margin-right: 8px;
}

.chip input:focus-visible + span {
	box-shadow: 0 0 0 3px rgba(2, 37, 141, 0.2);
}

.field[aria-invalid="true"] .chip span {
	border-color: var(--error);
}

.consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--line-soft);
	color: var(--muted);
	font-size: 15px;
	cursor: pointer;
}

.consent input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--blue);
	cursor: pointer;
}

.consent a {
	color: var(--ink);
	font-weight: 600;
}

.consent + .error {
	margin: 8px 0 0 32px;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin-top: 28px;
}

.actions .button {
	width: 100%;
}

.hint {
	color: var(--muted);
	font-size: 14px;
	font-weight: 600;
}

.hint.is-ready {
	color: var(--ok);
}

.subtext {
	margin-top: 16px;
	color: var(--muted);
	font-size: 15px;
}

.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border: 2.5px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	animation: spin 0.7s linear infinite;
}

.button.is-loading {
	cursor: progress;
}

.button.is-loading .button-label {
	opacity: 0;
}

.button.is-loading .spinner {
	opacity: 1;
}

.alert {
	margin-bottom: 28px;
	padding: 12px 16px;
	border-left: 3px solid var(--error);
	border-radius: 6px;
	background: #fdeeee;
	color: #8f1d21;
	font-size: 15px;
	font-weight: 500;
	outline: none;
}

.alert.is-shaking {
	animation: shake 0.35s ease;
}

.trap {
	position: absolute !important;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.success {
	padding: 24px 0 8px;
	text-align: center;
}

.success-icon {
	margin: 0 auto 20px;
	stroke: var(--ok);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.success-icon circle {
	stroke-width: 2;
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: draw 0.5s 0.05s ease-out forwards;
}

.success-icon path {
	stroke-width: 3;
	stroke-dasharray: 32;
	stroke-dashoffset: 32;
	animation: draw 0.3s 0.45s ease-out forwards;
}

.success h3 {
	font-size: 28px;
	outline: none;
	animation: rise 0.5s 0.45s var(--ease) backwards;
}

.success p {
	max-width: 400px;
	margin: 10px auto 0;
	color: var(--muted);
	animation: rise 0.5s 0.55s var(--ease) backwards;
}

.footer {
	padding: 40px 0;
	background: var(--navy-deep);
	color: rgba(255, 255, 255, 0.7);
	font-size: 15px;
}

.footer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.footer-row p a {
	margin-left: 12px;
	color: inherit;
	text-underline-offset: 4px;
}

.footer-row p a:hover {
	color: #fff;
}

.hero-page {
	min-height: 0;
	padding-bottom: clamp(56px, 7vw, 96px);
}

.hero-page h1 {
	margin-top: clamp(24px, 4vw, 56px);
}

.prose {
	max-width: 720px;
	color: var(--body);
	font-size: 18px;
}

.prose h2 {
	margin: 48px 0 12px;
	color: var(--ink);
	font-size: 24px;
	letter-spacing: -0.01em;
}

.prose p + p,
.prose ul {
	margin-top: 12px;
}

.prose ul {
	padding-left: 22px;
}

.prose li + li {
	margin-top: 6px;
}

.prose strong {
	color: var(--ink);
}

.js .reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (min-width: 640px) {
	.grid {
		grid-template-columns: 1fr 1fr;
	}

	.features {
		grid-template-columns: 1fr 1fr;
	}

	.actions .button {
		width: auto;
	}
}

@media (min-width: 1000px) {
	.hero {
		padding-bottom: clamp(64px, 9vw, 120px);
	}

	.hero-text {
		max-width: 600px;
	}

	.hero h1 {
		font-size: clamp(56px, 5.6vw, 82px);
	}

	.hero-photo {
		--fade: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 24%, #000 50%), linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: calc(var(--photo) * 100%);
		height: auto;
		margin: 0;
	}

	.hero-photo::before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 90% 75% at 50% 80%, #0339dc 0%, #0233c4 40%, var(--navy) 85%) 100% 0 / calc(100% / var(--photo)) 100% no-repeat var(--navy);
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
		mask-composite: intersect;
	}

	.hero-photo img {
		object-position: 42% 40%;
	}

	.split {
		grid-template-columns: 5fr 7fr;
		align-items: start;
		gap: 88px;
	}

	.sticky {
		position: sticky;
		top: 48px;
	}

	.photo-wide {
		aspect-ratio: 21 / 8;
	}

	.features {
		gap: 24px;
	}
}

@media (max-width: 760px) {
	.nav-links,
	.bar-links a:not(.button),
	.bar .brand-name {
		display: none;
	}

	.bar {
		inset: auto 0 0;
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 -1px 0 var(--line-soft), 0 -12px 32px -22px rgba(0, 10, 50, 0.45);
		transform: translateY(100%);
	}

	.bar.is-tucked {
		visibility: hidden;
		transform: translateY(100%);
		transition: transform 0.3s var(--ease), visibility 0s 0.3s;
	}
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	.js .reveal,
	.js .cue .icon {
		opacity: 1;
		transform: none;
	}

	.js .photo.reveal {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}

	.js .photo.reveal img {
		transform: none;
	}

	.swash path {
		stroke-dashoffset: 0;
	}

	.success-icon circle,
	.success-icon path {
		stroke-dashoffset: 0;
	}
}

@supports (animation-timeline: view()) {
	@keyframes parallax {
		from { translate: 0 -5%; }
		to { translate: 0 5%; }
	}

	.photo img {
		scale: 1.12;
		animation: parallax linear both;
		animation-timeline: view();
	}
}