/* ============================================================
   Ulterium — static build
   Compiled by hand from the ulteriumnew theme LESS:
   entity/page/grid.less, defaults.less, header.less, footer.less,
   public_theme_ulterium.less, home.less, mobile.less
   ============================================================ */

/* ---------- defaults.less ---------- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	background-color: #fff;
	font-size: 16px;
	/* Second line of defence alongside the same rule on body — iOS
	   respects the html-level clip more reliably for touch panning. */
	overflow-x: hidden;
	overflow-x: clip;
	/* Vertical panning only: no native horizontal pan, no pinch or
	   double-tap zoom (the slider's JS swipe still receives touches). */
	touch-action: pan-y;
}

section {
	scroll-snap-align: start;
}

body {
	-webkit-font-smoothing: antialiased;
	font-family: "Inter", sans-serif;
	font-weight: 300;
	line-height: 1.5;
	font-optical-sizing: auto;
	color: #000;
	/* The hero divider lines intentionally overshoot (width 140%) —
	   clip horizontal overflow at the viewport so they never cause a
	   sideways scroll. Propagates to the viewport, so sticky still works. */
	overflow-x: hidden;
	overflow-x: clip;
}

h2 { font-size: 3.5rem; font-weight: 600; margin-bottom: 40px; }
h3 { font-size: 2rem; }
h4 { font-size: 1rem; line-height: 1.3rem; margin-bottom: 20px; color: #0c5460; }
h5 { font-size: 1rem; line-height: 1.3rem; }

p, li {
	font-size: 1rem;
	line-height: 2rem;
	font-weight: 400;
	margin-bottom: 10px;
}

.margin_top { margin-top: 40px; }
.margin_bottom { margin-bottom: 40px; }
.margin_bottom_small { margin-bottom: 10px; }

.buttons {
	display: flex;
}
.buttons > * {
	display: inline-block;
	margin-right: 1rem;
}
.buttons img {
	height: 40px;
	opacity: 0.2;
}
.buttons img:hover {
	opacity: 1;
}

.button {
	border-radius: 100px;
	display: inline-block;
}

input, textarea {
	padding: 10px 20px;
}

p.centered {
	max-width: 80%;
	margin: 40px auto;
	text-align: center;
}

.align_right { text-align: right; }

/* ---------- entity grid.less ---------- */
.g {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}
.g.contain {
	margin: 0 auto;
	max-width: 1400px;
}
.g.pad { gap: 15px; }
.g.full { min-height: 100vh; }
.g.center {
	grid-template-columns: none;
	justify-items: center;
	align-items: center;
}
.g.share {
	grid-template-columns: none;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
}
.g.top > *    { align-self: start; }
.g.middle > * { align-self: center; }
.g.bottom > * { align-self: end; }

.g.thirds   { --c-span: 4; }
.g.quarters { --c-span: 3; }
.g.sixths   { --c-span: 2; }
.g.eights   { --c-span: 1; grid-template-columns: repeat(8, 1fr); }
.g.fifths   { --c-span: 2; grid-template-columns: repeat(10, 1fr); }

.c_1  { --c-span: 1; }
.c_2  { --c-span: 2; }
.c_3  { --c-span: 3; }
.c_4  { --c-span: 4; }
.c_5  { --c-span: 5; }
.c_6  { --c-span: 6; }
.c_7  { --c-span: 7; }
.c_8  { --c-span: 8; }
.c_9  { --c-span: 9; }
.c_10 { --c-span: 10; }
.c_11 { --c-span: 11; }
.c_12 { --c-span: 12; }

.g > *, [class*="c_"] {
	grid-column: span var(--c-span, 1);
}

[class*="c_"].top    { align-self: start; }
[class*="c_"].middle { align-self: center; }
[class*="c_"].bottom { align-self: end; }
[class*="c_"].right  { justify-self: end; }
[class*="c_"].left   { justify-self: start; }
[class*="c_"].center { justify-self: center; }

.c_hide { display: none; }
.c_middle { align-self: center; }

@media (max-width: 1400px) {
	.g.contain { padding: 0 2em; }
}

@media (max-width: 650px) {
	.c_m_1  { --c-span: 1; }
	.c_m_2  { --c-span: 2; }
	.c_m_3  { --c-span: 3; }
	.c_m_4  { --c-span: 4; }
	.c_m_5  { --c-span: 5; }
	.c_m_6  { --c-span: 6; }
	.c_m_7  { --c-span: 7; }
	.c_m_8  { --c-span: 8; }
	.c_m_9  { --c-span: 9; }
	.c_m_10 { --c-span: 10; }
	.c_m_11 { --c-span: 11; }
	.c_m_12 { --c-span: 12; }
	.c_m_hide { display: none !important; }
	.c_m_show, .c_m_show.hidden { display: block !important; }
	.c_m_middle { align-self: center; }
	.c_m_o_1 { order: 1; }
	.c_m_o_2 { order: 2; }
	.c_m_o_3 { order: 3; }
	.c_m_o_4 { order: 4; }
	.c_m_o_5 { order: 5; }
}

@media (max-width: 440px) {
	.c_s_1  { --c-span: 1; }
	.c_s_2  { --c-span: 2; }
	.c_s_3  { --c-span: 3; }
	.c_s_4  { --c-span: 4; }
	.c_s_5  { --c-span: 5; }
	.c_s_6  { --c-span: 6; }
	.c_s_7  { --c-span: 7; }
	.c_s_8  { --c-span: 8; }
	.c_s_9  { --c-span: 9; }
	.c_s_10 { --c-span: 10; }
	.c_s_11 { --c-span: 11; }
	.c_s_12 { --c-span: 12; }
	.c_s_hide { display: none !important; }
	.c_s_show, .c_s_show.hidden { display: block !important; }

	.g.contain { padding: 0 1em; }
	.g.pad { gap: 5px; }

	.c_s_middle { align-self: center; }
	.c_s_o_1 { order: 1; }
	.c_s_o_2 { order: 2; }
	.c_s_o_3 { order: 3; }
	.c_s_o_4 { order: 4; }
	.c_s_o_5 { order: 5; }

	.g.thirds   { --c-span: 6; }
	.g.quarters { --c-span: 6; }
	.g.sixths   { --c-span: 4; }
	.g.eights   { --c-span: 4; }
	.g.fifths   { --c-span: 5; }
}

/* ---------- header.less ---------- */
header .g {
	margin-top: 40px !important;
	margin-bottom: 40px !important;
}

header .logo {
	flex: none;
	overflow: visible;
	position: relative;
	width: 120px;
	fill: #000;
}

header nav {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	align-items: center;
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 5px;
	height: min-content;
	justify-content: flex-start;
	overflow: visible;
	padding: 0;
	position: relative;
	width: min-content;
}

header nav a {
	text-decoration: none;
	color: #000;
	padding: 0.4rem 0.5rem;
	font-size: 1rem;
}
header nav a:not(:last-child) {
	margin-right: 0.5rem;
}

header nav a.selected {
	background-color: rgb(35, 35, 35);
	border-radius: 100px;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	color: #fff;
}

/* ---------- public_theme_ulterium.less ---------- */
.public_theme_ulterium {
	color: #000;
}

.public_theme_ulterium section {
	margin: 5em 0;
}

.public_theme_ulterium section.small_top {
	margin-top: 4em;
}

.public_theme_ulterium section.grey {
	background-color: #f3f3f3;
	padding: 5em 0;
	margin-top: 0;
}

.public_theme_ulterium section.intro {
	margin: 0;
	padding: 0;
	position: relative;
	margin-top: 100px;
}

.public_theme_ulterium section.dark {
	background-color: #111;
	color: #fff;
	padding: 3rem 50px;
	margin-bottom: 0;
}
.public_theme_ulterium section.dark p {
	color: #fff;
}

.public_theme_ulterium section.round {
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}

/* ---------- home.less (scoped to main.home) ---------- */
main.home div.grid {
	width: 100%;
	align-content: center;
	align-items: center;
	display: flex;
	flex: 1 0 0px;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0px;
	height: min-content;
	justify-content: flex-start;
}

/* The visible headline IS the page's h1 (one heading, three lines) —
   spans keep the per-line divider treatment the old stacked h2s had. */
main.home section.intro h1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin: 0;
	font-weight: 600;
}

main.home section.intro h1 span {
	display: block;
	width: 100%;
	max-width: 800px;
	text-align: center;
	position: relative;
	font-size: 3.5rem;
	line-height: 1.5;
	font-weight: 600;
	z-index: 200;
}

main.home section.intro h1 span:before,
main.home section.intro h1 span:after,
main.home section.intro p.cta:before {
	content: "";
	position: absolute;
	/* Overshoot the 800px column but never the viewport — iOS Safari
	   ignores body overflow clipping for touch panning, so the lines
	   must not create horizontal overflow in the first place. */
	left: 50%;
	transform: translateX(-50%);
	width: min(140%, 100vw);
	height: 1px;
	background: linear-gradient(to right, transparent, #eee, transparent);
}
main.home section.intro h1 span:before,
main.home section.intro p.cta:before {
	top: 0;
}
main.home section.intro h1 span:after {
	bottom: 0;
}

main.home section.intro p.strap {
	line-height: 50px;
	font-weight: 400;
	color: #6f6b6b;
	font-size: 0.8rem;
	margin: 0;
	text-align: center;
	position: relative;
	z-index: 200;
}

main.home section.intro p.cta {
	width: 100%;
	max-width: 800px;
	text-align: center;
	position: relative;
	margin: 0;
	padding: 1.35rem 0;
	z-index: 200;
}

main.home section.intro .cta a {
	background-color: rgb(35, 35, 35);
	font-size: 16px;
	padding: 0.6rem 2.5rem;
	padding-right: 2.6rem;
	color: #fff;
	font-weight: 100;
	text-decoration: none;
	border-radius: 100px;
	box-shadow: rgba(0, 0, 0, 0.15) 8px 10px 15px 0px;
	transition: all ease-in-out 0.2s;
}

main.home section.intro .cta a:hover {
	padding: 12px 50px;
}

main.home section.intro .cta a:hover .dot {
	transform: scale(0.5);
	transition: all ease-in-out 1.2s;
}

main.home section.intro img.icon {
	height: 7vw;
	width: 7vw;
	transition: all 0.5s ease-out;
	position: absolute;
	z-index: 100;
}

main.home section.intro img.icon-1 {
	left: calc(4% + var(--scroll, 0) * 10%);
	top: calc(-3% + var(--scroll, 0) * 50%);
}
main.home section.intro img.icon-2 {
	right: calc(4% + var(--scroll, 0) * 10%);
	top: calc(-3% + var(--scroll, 0) * 50%);
}
main.home section.intro img.icon-3 {
	right: calc(12% + (var(--scroll, 0) * 0.8) * 10%);
	top: calc(20% + (var(--scroll, 0) * 0.8) * 50%);
}
main.home section.intro img.icon-4 {
	left: calc(12% + (var(--scroll, 0) * 0.8) * 10%);
	top: calc(20% + (var(--scroll, 0) * 0.8) * 50%);
}

main.home section.intro .preview {
	width: 80vw;
	z-index: 1000 !important;
	margin: 10px auto;
	display: block;
	position: relative;
	border-radius: 60px 60px 0 0;
	overflow: hidden;
	aspect-ratio: 1.8;
}

main.home section.intro .frame {
	background-image: url(../images/home/screen.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 300;
}

main.home section.intro .preview video {
	width: 100%;
	z-index: 200;
	position: relative;
	padding: 5% 8% 4% 8%;
}

main.home span.dot {
	background-color: rgb(241, 253, 130);
	border-radius: 100%;
	aspect-ratio: 1 / 1;
	flex: none;
	height: 8px;
	position: relative;
	width: 8px;
	display: inline-block;
	margin-right: 1em;
	top: -2px;
}

main.home .center {
	text-align: center;
}

main.home .references {
	margin: 4em auto 2em auto !important;
}
main.home .references img {
	width: 5vw;
	height: auto;
	filter: grayscale(100%);
}

/* The speech is scroll-driven: the section is a tall runway and #story
   pins to the viewport while the visitor scrolls (reads) through it. */
main.home section.speech {
	min-height: 280vh;
}

main.home section.speech #story {
	position: sticky;
	top: 0;
}

main.home section.speech .icon {
	color: #ffda69;
	font-size: 1em;
	padding: 4px 12px 3px 12px;
	vertical-align: middle;
}

main.home section.speech .icon {
	opacity: 0.15;
	display: inline-block;
	transform: scale(0.85);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
main.home section.speech .icon.lit {
	opacity: 1;
	transform: none;
}

main.home .speech p {
	font-size: 2.4rem;
	font-weight: 300;
	margin-bottom: 2rem;
	line-height: 4rem;
}

main.home .speech p:last-child {
	margin-bottom: 0;
}

main.home .speech p span {
	transition: color 0.4s ease;
	cursor: pointer;
	color: #575757;
}

main.home .speech p span.highlight {
	color: #ffffff;
	transition: color 0.15s;
}

/* The word currently being "read" */
main.home .speech p span.current {
	color: #ffda69;
}

main.home .speech p span:hover {
	color: #c4ac25;
}

@media (prefers-reduced-motion: reduce) {
	main.home .speech p span,
	main.home section.speech .icon {
		transition: none;
	}
}

main.home #story p:hover {
	cursor: pointer;
}

main.home .button {
	font-size: 0.5em;
	background-color: #000000;
	color: #fff;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 600;
	padding: 0.6rem 2rem;
}

/* Box cards (from home.less, used by the Upsell section) */
main.home .box {
	background-color: rgb(255, 255, 255);
	height: 100%;
	width: 100%;
	opacity: 1;
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.157) 0px 0.48175px 1.44525px -1.08333px, rgba(0, 0, 0, 0.145) 0px 1.83083px 5.49248px -2.16667px, rgba(0, 0, 0, 0.086) 0px 8px 24px -3.25px;
	border: 1px solid #eeeeeeb5;
	padding: 30px 40px;
	position: relative;
	overflow: hidden;
}

main.home .box h3 {
	line-height: normal;
	margin-bottom: 0.5rem;
	font-weight: 500;
}

main.home .box > span {
	font-size: 0.5em;
	background-color: #f1f1f1;
	color: #6a6868;
	padding: 4px 10px;
	border-radius: 12px;
	text-transform: uppercase;
	position: absolute;
	top: 1em;
	right: 1em;
	font-weight: 600;
	display: none;
}

main.home .box .info {
	min-height: 14rem;
}

main.home .box p {
	font-weight: 400;
	margin-top: 5px;
}

main.home .box ul {
	padding-left: 1.5em;
	margin-top: 10px;
	margin-bottom: 10px;
}
main.home .box ul li {
	margin-bottom: 2px;
	font-size: 0.8rem;
}
main.home .box ul li::marker {
	color: #ffda6a;
}

main.home .box .button {
	font-size: 1rem;
}

main.home .box img {
	max-width: 100%;
	height: auto;
	display: block;
}

main.home .box.dark {
	background-color: #111;
	border-color: #111;
	display: flex;
	align-items: center;
}
main.home .box.dark .code {
	font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
	font-size: 0.8rem;
	line-height: 2.2;
	color: #d9d9d9;
	white-space: nowrap;
}
main.home .box.dark .code .y {
	color: #ffda69;
	margin-right: 0.5em;
}
main.home .box.dark .code .dim {
	color: #7a7a7a;
}

/* Product slider */
main.home .slider {
	/* padding + negative margin keep box shadows inside the clip */
	overflow: hidden;
	padding: 24px;
	margin: -24px;
}

main.home .slider .slides {
	display: flex;
	align-items: stretch;
	gap: 48px;	/* keeps the neighbouring slide out of the shadow padding zone */
	transition: transform 0.5s ease;
}

main.home .slider .slide {
	flex: 0 0 100%;
	min-width: 100%;
}

main.home .slider_nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 2em;
}

main.home .slider_arrow {
	width: 40px;
	height: 40px;
	border-radius: 100px;
	border: 1px solid #d9d9d9;
	background: #fff;
	color: #000;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	transition: all ease-in-out 0.2s;
}
main.home .slider_arrow:hover {
	background: rgb(35, 35, 35);
	border-color: rgb(35, 35, 35);
	color: #fff;
}

main.home .slider_dot {
	width: 9px;
	height: 9px;
	border-radius: 100%;
	border: 0;
	padding: 0;
	background: #cfcfcf;
	cursor: pointer;
	transition: all ease-in-out 0.2s;
}
main.home .slider_dot.active {
	background: rgb(35, 35, 35);
	transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
	main.home .slider .slides {
		transition: none;
	}
}

@media (max-width: 440px) {
	/* Shadow padding must not exceed the container's 1em edge padding */
	main.home .slider {
		padding: 16px;
		margin: -16px;
	}
}

/* Inline contact section (adapted from contact.less) */
main.home section.contact .contact_container {
	margin: 1em auto 3em auto;
	display: block;
	width: 100%;
	max-width: 500px;
	padding: 0 1em;
}

main.home section.contact label {
	display: block;
	margin-bottom: 0.5em;
	font-weight: 300 !important;
	text-align: left;
}

main.home section.contact input,
main.home section.contact textarea {
	display: block;
	width: 100%;
	font-size: 1em;
	border-radius: 6px;
	line-height: 2em;
	margin-bottom: 1em;
	padding: 0.5em;
	font-weight: 300 !important;
	font: inherit;
	background-color: #efefef;
	border: 1px solid #252525;
}
main.home section.contact input:focus,
main.home section.contact textarea:focus {
	outline: 2px solid #838080;
	background-color: #eaeaea;
}

main.home section.contact textarea {
	min-height: 5em;
}

main.home section.contact .button {
	font-size: 1rem;
	display: inline-block;
	cursor: pointer;
	border: 0;
	font-family: inherit;
}
main.home section.contact .button:disabled {
	opacity: 0.6;
	cursor: default;
}

main.home section.contact .contact_note {
	color: #6f6b6b;
	font-size: 0.9rem;
	text-align: center;
	min-height: 1.5em;
	margin-top: 1em;
}
main.home section.contact .contact_note.success {
	color: #2f7d33;
}
main.home section.contact .contact_note.failure {
	color: #a33c3c;
}

/* Honeypot: parked off-screen, still fillable by bots */
main.home section.contact .hp {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Footer reveal: main slides up over the fixed footer.
   (In home.less these were nested inside main.home and never applied;
   hoisted to top level so the intended effect works.)
   The reveal gap and the footer height share one expression so the
   footer always exactly fills the gap, whatever the window height. */
main.home {
	z-index: 20;
	background-color: #fff;
	position: relative;
	border-radius: 0 0 30px 30px;
	margin-bottom: min(440px, 52vh);
	padding-bottom: 10px;
}

/* ---------- footer.less + home.less footer ---------- */
footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background-color: #000;
	color: #fff;
	/* 40px taller than the reveal gap so it tucks behind main's
	   rounded corners instead of meeting them edge-to-edge */
	height: calc(min(440px, 52vh) + 40px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: 1.5em;
	font-size: 18px;
	font-weight: 300;
	line-height: initial;
}

footer .g {
	width: 100%;
}

footer .foot_logo {
	width: 110px;
	display: block;
	fill: #fff;
	margin-bottom: 1em;
}

footer .tagline {
	color: #acaaaa;
	font-size: 0.8em;
	max-width: 28ch;
}

footer a {
	font-size: 14px;
	color: #fff;
	text-decoration: none;
}

footer ul {
	list-style: none;
	border-left: 1px solid rgba(255, 255, 255, 0.3);
	padding-left: 2em;
	margin: 0;
}

footer ul li {
	line-height: normal;
	margin-bottom: 6px;
	font-size: 14px;
}

footer ul li.head {
	color: #fff;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.8em;
}

footer ul li,
footer ul li a {
	color: #acaaaa;
}
footer ul li:hover,
footer ul li a:hover {
	color: #fff;
}

footer p {
	margin-bottom: 0;
	font-size: 0.7em;
	color: #bbb;
}

footer .foot_base {
	margin-top: 2.5em;
}
footer .foot_base p {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 1.2em;
	text-align: center;
	font-size: 12px;
	color: #8a8a8a;
}

/* ---------- mobile.less ---------- */
@media (max-width: 700px) {
	h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 40px; }
	h3 { font-size: 1.2rem; }
	h4 { font-size: 1rem; line-height: 1.3rem; margin-bottom: 20px; color: #0c5460; }
	h5 { font-size: 1rem; line-height: 1.3rem; }

	p, li {
		font-size: 1rem;
		line-height: 1.3rem;
		font-weight: 400;
		margin-bottom: 10px;
	}

	main.home section.intro h1 span {
		font-size: 1.5rem;
	}

	main.home .speech p {
		font-size: 1.4rem;
		line-height: 2rem;
	}

	/* Tidy-up: 5vw logos are illegible on phones */
	main.home .references img {
		width: 11vw;
	}

	/* Stacked footer columns outgrow the fixed reveal on small screens —
	   let the footer flow normally instead. */
	main.home {
		margin-bottom: 0;
	}
	footer {
		position: static;
		height: auto;
		padding-top: 3em;
	}
	footer .foot_grid > * {
		margin-bottom: 1.8em;
	}

	.buttons {
		flex-direction: column;
		align-items: flex-start;
	}
	.buttons > * {
		margin-bottom: 20px !important;
	}
}

@media (max-width: 1000px) and (orientation: landscape) {
	.public_theme_ulterium section.intro {
		margin-top: 10px !important;
	}
	.public_theme_ulterium section.intro h1 span {
		font-size: 2.5rem;
	}

	.buttons {
		flex-direction: column;
		align-items: flex-start;
	}
	.buttons > * {
		margin-bottom: 20px !important;
	}
}