*,
:after,
:before {
	box-sizing: border-box;
	border: 0 solid;
	margin: 0;
	padding: 0;
}
::backdrop {
	box-sizing: border-box;
	border: 0 solid;
	margin: 0;
	padding: 0;
}
::file-selector-button {
	box-sizing: border-box;
	border: 0 solid;
	margin: 0;
	padding: 0;
}
html,
:host {
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
	line-height: 1.5;
	font-family: var(
		--default-font-family,
		ui-sans-serif,
		system-ui,
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Segoe UI Symbol",
		"Noto Color Emoji"
	);
	font-feature-settings: var(--default-font-feature-settings, normal);
	font-variation-settings: var(--default-font-variation-settings, normal);
	-webkit-tap-highlight-color: transparent;
}
hr {
	height: 0;
	color: inherit;
	border-top-width: 1px;
}
abbr:where([title]) {
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit;
}
a {
	color: inherit;
	-webkit-text-decoration: inherit;
	-webkit-text-decoration: inherit;
	-webkit-text-decoration: inherit;
	-webkit-text-decoration: inherit;
	text-decoration: inherit;
}
b,
strong {
	font-weight: bolder;
}
code,
kbd,
samp,
pre {
	font-family: var(
		--default-mono-font-family,
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Monaco,
		Consolas,
		"Liberation Mono",
		"Courier New",
		monospace
	);
	font-feature-settings: var(--default-mono-font-feature-settings, normal);
	font-variation-settings: var(--default-mono-font-variation-settings, normal);
	font-size: 1em;
}
small {
	font-size: 80%;
}
sub,
sup {
	vertical-align: baseline;
	font-size: 75%;
	line-height: 0;
	position: relative;
}
sub {
	bottom: -0.25em;
}
sup {
	top: -0.5em;
}
table {
	text-indent: 0;
	border-color: inherit;
	border-collapse: collapse;
}
:-moz-focusring {
	outline: auto;
}
progress {
	vertical-align: baseline;
}
summary {
	display: list-item;
}
ol,
ul,
menu {
	list-style: none;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	vertical-align: middle;
	display: block;
}
img,
video {
	max-width: 100%;
	height: auto;
}
button,
input,
select,
optgroup,
textarea {
	font: inherit;
	font-feature-settings: inherit;
	font-variation-settings: inherit;
	letter-spacing: inherit;
	color: inherit;
	opacity: 1;
	background-color: #0000;
	border-radius: 0;
}
::file-selector-button {
	font: inherit;
	font-feature-settings: inherit;
	font-variation-settings: inherit;
	letter-spacing: inherit;
	color: inherit;
	opacity: 1;
	background-color: #0000;
	border-radius: 0;
}
:where(select:is([multiple], [size])) optgroup {
	font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
	padding-inline-start: 20px;
}
::file-selector-button {
	margin-inline-end: 4px;
}
::placeholder {
	opacity: 1;
}
@supports (not ((-webkit-appearance: -apple-pay-button))) or
	(contain-intrinsic-size: 1px) {
	::placeholder {
		color: currentColor;
	}
	@supports (color: color-mix(in lab, red, red)) {
		::placeholder {
			color: color-mix(in oklab, currentcolor 50%, transparent);
		}
	}
}
textarea {
	resize: vertical;
}
::-webkit-search-decoration {
	-webkit-appearance: none;
}
::-webkit-date-and-time-value {
	min-height: 1lh;
	text-align: inherit;
}
::-webkit-datetime-edit {
	display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
	padding: 0;
}
::-webkit-datetime-edit {
	padding-block: 0;
}
::-webkit-datetime-edit-year-field {
	padding-block: 0;
}
::-webkit-datetime-edit-month-field {
	padding-block: 0;
}
::-webkit-datetime-edit-day-field {
	padding-block: 0;
}
::-webkit-datetime-edit-hour-field {
	padding-block: 0;
}
::-webkit-datetime-edit-minute-field {
	padding-block: 0;
}
::-webkit-datetime-edit-second-field {
	padding-block: 0;
}
::-webkit-datetime-edit-millisecond-field {
	padding-block: 0;
}
::-webkit-datetime-edit-meridiem-field {
	padding-block: 0;
}
::-webkit-calendar-picker-indicator {
	line-height: 1;
}
:-moz-ui-invalid {
	box-shadow: none;
}
button,
input:where([type="button"], [type="reset"], [type="submit"]) {
	-webkit-appearance: button;
	appearance: button;
}
::file-selector-button {
	-webkit-appearance: button;
	appearance: button;
}
::-webkit-inner-spin-button {
	height: auto;
}
::-webkit-outer-spin-button {
	height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
	display: none !important;
}
:root {
	--ink: #10221a;
	--green: #24e982;
	--green-2: #0fc66a;
	--mint: #eafff3;
	--lime: #dfff57;
	--soft: #f7f9f8;
	--line: #dfe8e3;
	--text: #637269;
}
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	color: var(--ink);
	background: #fff;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	font: inherit;
}
main {
	overflow: hidden;
}
.nav {
	border-bottom: 1px solid #ecf0ed;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	max-width: 1340px;
	height: 78px;
	margin: auto;
	padding: 0 30px;
	display: grid;
}
.brand {
	letter-spacing: -0.04em;
	align-items: center;
	gap: 10px;
	font-size: 22px;
	display: flex;
}
.dio-mark {
	border: 2px solid var(--green-2);
	border-right-color: #0000;
	border-radius: 50%;
	place-items: center;
	width: 30px;
	height: 30px;
	display: inline-grid;
	transform: rotate(-14deg);
}
.dio-mark i {
	background: var(--green-2);
	border-radius: 50%;
	width: 6px;
	height: 6px;
}
.dio-mark.large {
	border-width: 3px;
	width: 52px;
	height: 52px;
}
.dio-mark.large i {
	width: 9px;
	height: 9px;
}
.brand.mini {
	font-size: 15px;
}
.brand.mini .dio-mark {
	width: 23px;
	height: 23px;
}
.brand.mini .dio-mark i {
	width: 4px;
	height: 4px;
}
.nav nav {
	color: #526258;
	gap: 35px;
	font-size: 14px;
	display: flex;
}
.nav nav a:hover {
	color: #08a158;
}
.nav > a:last-child {
	justify-self: end;
}
.button {
	border-radius: 100px;
	justify-content: center;
	align-items: center;
	gap: 9px;
	padding: 15px 21px;
	font-size: 14px;
	font-weight: 750;
	transition: all 0.2s;
	display: inline-flex;
}
.button.small {
	padding: 12px 18px;
}
.button.dark {
	background: var(--ink);
	color: #fff;
}
.button.dark:hover {
	background: #1c3a2b;
	transform: translateY(-1px);
}
.button.green {
	background: var(--green);
	color: #092619;
	box-shadow: 0 10px 28px #24e9822e;
}
.button.green:hover {
	background: #42ef96;
	transform: translateY(-1px);
}
.hero {
	text-align: center;
	max-width: 1400px;
	margin: auto;
	padding: 95px 30px 100px;
	position: relative;
}
.badge,
.section-label {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #078b4b;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 750;
	display: inline-flex;
}
.badge {
	background: #effff6;
	border: 1px solid #bdeed3;
	border-radius: 100px;
	padding: 9px 13px;
}
.hero h1 {
	letter-spacing: -0.075em;
	max-width: 1160px;
	margin: 0 auto 28px;
	font-size: clamp(60px, 7.5vw, 108px);
	line-height: 0.91;
}
.hero h1 span {
	color: #18c96d;
}
/* The badge is the heading's first line, so the page's subject is in its <h1>. Drawn where
   it was when it sat above the heading: on its own row, 28px clear of the headline. */
.hero h1 .badge {
	display: flex;
	width: fit-content;
	margin: 0 auto 28px;
	line-height: 1.5;
}
.hero > p {
	color: var(--text);
	max-width: 700px;
	margin: 0 auto;
	font-size: 20px;
	line-height: 1.55;
}
.hero-actions {
	justify-content: center;
	align-items: center;
	gap: 25px;
	margin-top: 33px;
	display: flex;
}
.text-button {
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 750;
	display: flex;
}
.text-button span {
	color: #078b4b;
	border: 1px solid #cdd8d1;
	border-radius: 50%;
	place-items: center;
	width: 38px;
	height: 38px;
	display: grid;
}
.hero-proof {
	color: #748279;
	justify-content: center;
	gap: 26px;
	margin-top: 22px;
	font-size: 12px;
	display: flex;
}
.hero-proof span {
	align-items: center;
	gap: 6px;
	display: flex;
}
.hero-proof svg {
	color: #0bad5e;
}
.product-stage {
	max-width: 1250px;
	margin: 90px auto 0;
	position: relative;
}
.shape {
	filter: blur(1px);
	border-radius: 50%;
	position: absolute;
}
.shape-a {
	background: #caffdf;
	width: 530px;
	height: 530px;
	top: -70px;
	left: -190px;
}
.shape-b {
	background: #efffb6;
	width: 410px;
	height: 410px;
	bottom: -100px;
	right: -150px;
}
.browser {
	z-index: 2;
	text-align: left;
	background: #fff;
	border: 1px solid #d9e4de;
	border-radius: 19px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 35px 90px #173e2923;
}
.browser-top {
	color: #77847d;
	border-bottom: 1px solid #e6ede9;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 58px;
	padding: 0 18px;
	font-size: 11px;
	display: grid;
}
.browser-top > div:first-child {
	gap: 6px;
	display: flex;
}
.browser-top > div:first-child i {
	background: #dce4df;
	border-radius: 50%;
	width: 8px;
	height: 8px;
}
.browser-top .live {
	justify-self: end;
	align-items: center;
	gap: 7px;
	display: flex;
}
.live i {
	background: var(--green);
	border-radius: 50%;
	width: 7px;
	height: 7px;
	box-shadow: 0 0 0 5px #24e98218;
}
.browser-body {
	grid-template-columns: 180px 1fr 275px;
	min-height: 500px;
	display: grid;
}
.side-nav {
	background: #f8faf9;
	border-right: 1px solid #e5ece8;
	padding: 25px 18px;
}
.side-item {
	color: #718078;
	border-radius: 8px;
	align-items: center;
	gap: 10px;
	margin-top: 7px;
	padding: 11px;
	font-size: 11px;
	display: flex;
}
.side-item span {
	background: #edf2ef;
	border-radius: 6px;
	place-items: center;
	width: 22px;
	height: 22px;
	font-size: 9px;
	display: grid;
}
.side-item.active {
	color: #087d46;
	background: #eafff3;
	font-weight: 700;
}
.side-item.active span {
	background: #caffdd;
}
.candidate-mini {
	border-top: 1px solid #e3eae6;
	align-items: center;
	gap: 9px;
	margin-top: 265px;
	padding-top: 18px;
	display: flex;
}
.candidate-mini > div {
	background: #c8f8da;
	border-radius: 50%;
	place-items: center;
	width: 28px;
	height: 28px;
	font-size: 9px;
	font-weight: 800;
	display: grid;
}
.candidate-mini span {
	flex-direction: column;
	gap: 2px;
	display: flex;
}
.candidate-mini b {
	font-size: 10px;
}
.candidate-mini small {
	color: #839188;
	font-size: 9px;
}
.conversation {
	padding: 31px;
}
.conversation-top {
	align-items: center;
	gap: 14px;
	display: flex;
}
.conversation-top span {
	letter-spacing: 0.1em;
	color: #829087;
	font-size: 9px;
}
.conversation-top > div {
	background: #edf2ef;
	border-radius: 5px;
	flex: 1;
	height: 5px;
}
.conversation-top i {
	background: var(--green);
	border-radius: 5px;
	width: 78%;
	height: 100%;
	display: block;
}
.conversation h3 {
	margin: 25px 0 18px;
	font-size: 21px;
}
.dio-question {
	background: #f0fff7;
	border: 1px solid #d3f4e1;
	border-radius: 12px;
	padding: 18px;
}
.dio-question span {
	color: #078b4b;
	letter-spacing: 0.1em;
	font-size: 9px;
	font-weight: 800;
}
.dio-question p {
	margin: 7px 0 0;
	font-size: 14px;
	line-height: 1.55;
}
.candidate-answer {
	grid-template-columns: auto 1fr;
	gap: 12px;
	padding: 24px 5px;
	display: grid;
}
.speaker {
	background: #dff7e9;
	border-radius: 50%;
	place-items: center;
	width: 30px;
	height: 30px;
	font-size: 9px;
	font-weight: 800;
	display: grid;
}
.candidate-answer span {
	font-size: 10px;
	font-weight: 700;
}
.candidate-answer p {
	color: #68776e;
	margin: 7px 0 0;
	font-size: 13px;
	line-height: 1.55;
}
.audio {
	border-top: 1px solid #e8eeea;
	align-items: center;
	gap: 12px;
	padding-top: 15px;
	display: flex;
}
.audio > span {
	color: #8b9890;
	font-size: 9px;
}
.audio > div {
	flex: 1;
	align-items: center;
	gap: 4px;
	height: 52px;
	display: flex;
}
.audio i {
	background: linear-gradient(var(--green), #9aeebc);
	border-radius: 3px;
	width: 3px;
}
.audio button {
	background: var(--ink);
	color: #fff;
	border: 0;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: 9px;
}
.signals {
	background: #fcfdfc;
	border-left: 1px solid #e4ebe7;
	padding: 28px 23px;
}
.signals-title {
	justify-content: space-between;
	align-items: center;
	margin-bottom: 28px;
	display: flex;
}
.signals-title > span {
	letter-spacing: 0.1em;
	color: #7b8981;
	font-size: 9px;
}
.signals-title b {
	color: #078b4b;
	align-items: center;
	gap: 4px;
	font-size: 9px;
	display: flex;
}
.signal {
	margin-bottom: 19px;
}
.signal > div {
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 11px;
	display: flex;
}
.signal > div b {
	color: #078b4b;
}
.signal em {
	background: #edf2ef;
	border-radius: 5px;
	height: 5px;
	display: block;
}
.signal em i {
	background: linear-gradient(90deg, #18d776, #68ed9f);
	border-radius: 5px;
	height: 100%;
	display: block;
}
.evidence {
	background: #f2fff7;
	border: 1px solid #d6eee0;
	border-radius: 11px;
	margin-top: 26px;
	padding: 14px;
}
.evidence > span {
	letter-spacing: 0.08em;
	color: #078b4b;
	align-items: center;
	gap: 5px;
	font-size: 9px;
	font-weight: 700;
	display: flex;
}
.evidence p {
	color: #5f7066;
	font-size: 11px;
	line-height: 1.5;
}
.evidence b {
	color: #079850;
	align-items: center;
	gap: 5px;
	font-size: 9px;
	display: flex;
}
.decision {
	background: var(--ink);
	color: #fff;
	border-radius: 10px;
	grid-template-columns: 1fr auto;
	margin-top: 13px;
	padding: 14px;
	display: grid;
}
.decision small {
	color: #92a198;
	letter-spacing: 0.1em;
	grid-column: 1 / -1;
	margin-bottom: 5px;
	font-size: 8px;
}
.decision b {
	font-size: 13px;
}
.decision span {
	color: var(--green);
	align-self: center;
	font-size: 9px;
}
.logo-line {
	text-align: center;
	border-top: 1px solid #edf1ee;
	border-bottom: 1px solid #edf1ee;
	padding: 46px 30px 55px;
}
.logo-line p {
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: #819087;
	font-size: 11px;
}
.logo-line div {
	color: #89968f;
	justify-content: center;
	align-items: center;
	gap: 24px;
	margin-top: 24px;
	font-size: 14px;
	font-weight: 700;
	display: flex;
}
.logo-line i {
	background: #c1cbc5;
	border-radius: 50%;
	width: 4px;
	height: 4px;
}
.section {
	padding: 120px max(30px, 50vw - 620px);
}
.section-heading {
	grid-template-columns: 1.2fr 0.8fr;
	align-items: end;
	gap: 10vw;
	margin: 25px 0 65px;
	display: grid;
}
.section h2 {
	letter-spacing: -0.06em;
	margin: 0;
	font-size: clamp(46px, 5vw, 70px);
	line-height: 1;
}
.section-heading p,
.integration-copy > p,
.security-card > div:last-child p {
	color: var(--text);
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
}
.why {
	background: #f7f9f8;
}
.feature-row {
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	display: grid;
}
.feature-row article {
	background: #fff;
	border: 1px solid #e1e9e4;
	border-radius: 18px;
	min-height: 340px;
	padding: 29px;
}
.feature-row article > span {
	color: #909d96;
	font-size: 11px;
}
.feature-icon {
	color: #079850;
	background: #e9fff2;
	border-radius: 13px;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 50px 0 28px;
	display: grid;
}
.feature-row h3 {
	letter-spacing: -0.04em;
	margin: 0 0 13px;
	font-size: 24px;
}
.feature-row p {
	color: #68776e;
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
}
.integrations {
	grid-template-columns: 0.8fr 1.2fr;
	align-items: center;
	gap: 8vw;
	display: grid;
}
.integration-copy h2 {
	margin: 23px 0 24px;
}
.integration-copy ul {
	margin: 25px 0;
	padding: 0;
	list-style: none;
}
.integration-copy li {
	color: #4f6257;
	align-items: center;
	gap: 9px;
	padding: 8px 0;
	font-size: 14px;
	display: flex;
}
.integration-copy li svg {
	color: #0cad5e;
}
.inline-link {
	color: #078b4b;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 750;
	display: inline-flex;
}
.integration-map {
	background: radial-gradient(circle, #f1fff7 0, #f7fff9 55%, #fff 72%);
	place-items: center;
	min-height: 530px;
	display: grid;
	position: relative;
}
.connector-lines {
	border: 1px solid #c9ead7;
	border-radius: 50%;
	position: absolute;
	inset: 15%;
}
.connector-lines span {
	background: #c9ead7;
	position: absolute;
}
.connector-lines span:first-child {
	width: 1px;
	height: 75%;
	top: 12%;
	left: 50%;
}
.connector-lines span:nth-child(2) {
	width: 85%;
	height: 1px;
	top: 50%;
	left: 7%;
}
.connector-lines span:nth-child(3) {
	width: 1px;
	height: 70%;
	top: 15%;
	left: 25%;
	transform: rotate(45deg);
}
.connector-lines span:nth-child(4) {
	width: 1px;
	height: 70%;
	top: 15%;
	right: 25%;
	transform: rotate(-45deg);
}
.hub {
	z-index: 2;
	background: var(--ink);
	color: #fff;
	border-radius: 50%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 145px;
	height: 145px;
	display: flex;
	box-shadow: 0 20px 45px #153c282d;
}
.hub .dio-mark {
	border-color: var(--green);
	border-right-color: #0000;
}
.hub .dio-mark i {
	background: var(--green);
}
.hub b {
	margin-top: 9px;
	font-size: 18px;
}
.hub small {
	color: #9caea4;
	margin-top: 3px;
	font-size: 9px;
}
.ats-grid {
	position: absolute;
	inset: 0;
}
.ats-card {
	background: #fff;
	border: 1px solid #dce7e0;
	border-radius: 13px;
	align-items: center;
	gap: 9px;
	min-width: 145px;
	height: 62px;
	padding: 0 14px;
	display: flex;
	position: absolute;
	box-shadow: 0 12px 30px #224b3414;
}
.ats-card > span {
	border-radius: 8px;
	place-items: center;
	width: 28px;
	height: 28px;
	font-size: 14px;
	font-weight: 900;
	display: grid;
}
.ats-card b {
	white-space: nowrap;
	font-size: 13px;
}
.ats-card:first-child {
	top: 14%;
	left: 2%;
}
.ats-card:nth-child(2) {
	top: 12%;
	right: 1%;
}
.ats-card:nth-child(3) {
	bottom: 16%;
	left: 0;
}
.ats-card:nth-child(4) {
	bottom: 14%;
	right: 3%;
}
.ats-card:nth-child(5) {
	top: 0;
	left: 37%;
}
.ats-card:nth-child(6) {
	bottom: 0;
	left: 37%;
}
.greenhouse > span {
	color: #09894d;
	background: #e8fff2;
	font-family: Georgia;
}
.workday > span {
	color: #f59a2c;
	background: #fff4e7;
	font-size: 22px;
}
.lever > span {
	color: #e75626;
	background: #fff0ea;
}
.ashby > span {
	color: #6553d9;
	background: #f0edff;
}
.smart > span {
	color: #2168d5;
	background: #eef4ff;
}
.bamboo > span {
	color: #6a9f29;
	background: #eef8e5;
}
.workflow {
	color: #fff;
	background: #10221a;
}
.workflow .section-label {
	color: var(--green);
}
.workflow > h2 {
	margin: 22px 0 65px;
}
.workflow-steps {
	border-top: 1px solid #ffffff20;
	grid-template-columns: repeat(3, 1fr);
	display: grid;
}
.workflow-steps article {
	border-right: 1px solid #ffffff20;
	min-height: 240px;
	padding: 35px 45px 0 0;
}
.workflow-steps article + article {
	padding-left: 45px;
}
.workflow-steps article:last-child {
	border: 0;
}
.workflow-steps article > b {
	background: var(--green);
	color: #092619;
	border-radius: 50%;
	place-items: center;
	width: 34px;
	height: 34px;
	font-size: 12px;
	display: inline-grid;
}
.workflow-steps article > span {
	float: right;
	color: #6f8579;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 10px;
	font-size: 10px;
}
.workflow-steps h3 {
	margin: 38px 0 12px;
	font-size: 23px;
}
.workflow-steps p {
	color: #97a89f;
	font-size: 14px;
	line-height: 1.6;
}
.security {
	background: #effff6;
}
.security-card {
	grid-template-columns: 95px 1.05fr 0.95fr;
	align-items: center;
	gap: 45px;
	display: grid;
}
.security-icon {
	color: #078b4b;
	background: #d4f7e3;
	border-radius: 50%;
	place-items: center;
	width: 76px;
	height: 76px;
	display: grid;
}
.security h2 {
	margin-top: 18px;
	font-size: clamp(36px, 4.2vw, 58px);
}
.cta {
	text-align: center;
	background: var(--green);
	color: #092619;
	padding: 120px 25px;
	position: relative;
	overflow: hidden;
}
.cta > .dio-mark {
	border-color: #092619 #0000 #092619 #092619;
	margin: auto;
}
.cta > .dio-mark i {
	background: #092619;
}
.cta h2 {
	letter-spacing: -0.065em;
	margin: 26px 0;
	font-size: clamp(55px, 6.5vw, 88px);
	line-height: 0.94;
}
.cta p {
	margin: 0 0 30px;
	font-size: 18px;
}
.cta-dot {
	border: 1px solid #0b673b22;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.cta-dot.one {
	width: 600px;
	height: 600px;
}
.cta-dot.two {
	width: 870px;
	height: 870px;
}
footer {
	color: #74837a;
	grid-template-columns: 1fr 1fr auto auto;
	align-items: center;
	gap: 24px;
	max-width: 1320px;
	min-height: 120px;
	margin: auto;
	padding: 35px 30px;
	font-size: 13px;
	display: grid;
}
footer div {
	gap: 12px 23px;
	flex-wrap: wrap;
	display: flex;
}
footer div a {
	white-space: nowrap;
}
footer a:hover {
	color: #079850;
}
footer small {
	text-align: right;
}
@media (max-width: 1000px) {
	.browser-body {
		grid-template-columns: 140px 1fr;
	}
	.signals {
		display: none;
	}
	.section-heading,
	.integrations {
		grid-template-columns: 1fr;
	}
	.section-heading {
		gap: 25px;
	}
	.feature-row {
		grid-template-columns: 1fr;
	}
	.feature-row article {
		min-height: auto;
	}
	.feature-icon {
		margin: 28px 0 22px;
	}
	.integration-figure {
		margin-top: 20px;
	}
	.security-card {
		grid-template-columns: 80px 1fr;
	}
	.security-card > div:last-child {
		grid-column: 2;
	}
	.workflow-steps {
		grid-template-columns: 1fr;
	}
	.workflow-steps article,
	.workflow-steps article + article {
		border-bottom: 1px solid #ffffff20;
		border-right: 0;
		min-height: auto;
		padding: 28px 0;
	}
	footer {
		grid-template-columns: 1fr 1fr;
	}
	footer p {
		display: none;
	}
}
@media (max-width: 700px) {
	.nav {
		grid-template-columns: 1fr auto;
		padding: 0 20px;
	}
	.nav nav {
		display: none;
	}
	.hero {
		padding: 70px 20px 75px;
	}
	.hero h1 {
		font-size: 53px;
	}
	.hero > p {
		font-size: 17px;
	}
	.hero-actions {
		flex-direction: column;
		gap: 18px;
	}
	.hero-proof {
		flex-wrap: wrap;
		gap: 10px 18px;
	}
	.product-stage {
		margin-top: 65px;
	}
	.browser-body {
		grid-template-columns: 1fr;
	}
	.side-nav {
		display: none;
	}
	.conversation {
		padding: 22px;
	}
	.shape-a {
		left: -300px;
	}
	.shape-b {
		right: -280px;
	}
	.browser-top {
		grid-template-columns: 1fr auto;
	}
	.browser-top > span {
		display: none;
	}
	.logo-line div {
		flex-wrap: wrap;
	}
	.section {
		padding: 85px 21px;
	}
	.section h2 {
		font-size: 43px;
	}
	.section-heading {
		margin-bottom: 45px;
	}
	.integration-map {
		min-height: 490px;
	}
	.ats-card {
		min-width: 122px;
		height: 56px;
		padding: 0 10px;
	}
	.ats-card b {
		font-size: 11px;
	}
	.ats-card:nth-child(5),
	.ats-card:nth-child(6) {
		left: 31%;
	}
	.hub {
		width: 122px;
		height: 122px;
	}
	.security-card {
		grid-template-columns: 1fr;
		gap: 25px;
	}
	.security-card > div:last-child {
		grid-column: 1;
	}
	.cta {
		padding: 95px 20px;
	}
	.cta h2 {
		font-size: 53px;
	}
	footer {
		grid-template-columns: 1fr;
		padding: 40px 20px;
	}
	footer small {
		text-align: left;
	}
}
@media (max-width: 450px) {
	.nav .button {
		padding: 11px 14px;
	}
	.hero h1 {
		font-size: 46px;
	}
	.conversation h3 {
		font-size: 18px;
	}
	.candidate-answer {
		display: none;
	}
	.audio {
		margin-top: 18px;
	}
	.integration-map {
		min-height: 580px;
	}
	.ats-card:first-child {
		top: 10%;
		left: 0;
	}
	.ats-card:nth-child(2) {
		top: 10%;
		right: 0;
	}
	.ats-card:nth-child(3) {
		bottom: 11%;
		left: 0;
	}
	.ats-card:nth-child(4) {
		bottom: 11%;
		right: 0;
	}
	.ats-card:nth-child(5) {
		top: 0;
		left: 29%;
	}
	.ats-card:nth-child(6) {
		bottom: 0;
		left: 29%;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.audio i:nth-child(2n) {
		animation: 1.1s ease-in-out infinite alternate wave;
	}
	.audio i:nth-child(3n) {
		animation: 1.45s ease-in-out infinite alternate wave;
	}
	.browser {
		animation: 0.65s both rise;
	}
	@keyframes wave {
		to {
			opacity: 0.55;
			transform: scaleY(0.55);
		}
	}
	@keyframes rise {
		0% {
			opacity: 0;
			transform: translateY(24px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
}
/* DIO brand tokens from the current production landing page. */
:root {
	--ink: #182320;
	--green: #0e7a6d;
	--green-2: #0a6156;
	--mint: #e4f6f2;
	--lime: #8ed8c8;
	--soft: #f4f7f6;
	--line: #dfe7e5;
	--text: #586b66;
}
.brand-logo {
	display: block;
	width: 112px;
	height: 35px;
	object-fit: contain;
}
.brand.mini .brand-logo {
	width: 83px;
	height: 26px;
}
.brand-icon {
	display: block;
	width: 52px;
	height: 52px;
	object-fit: contain;
}
.cta > .brand-icon {
	margin: auto;
}
.hero h1 span {
	color: #0e7a6d;
}
.button.green {
	color: #fff;
	box-shadow: 0 10px 28px #0e7a6d2e;
}
.button.green:hover {
	background: #0a6156;
}
.button.dark:hover {
	background: #3e4d48;
}
.nav nav a:hover,
footer a:hover,
.badge,
.section-label,
.text-button span,
.hero-proof svg,
.dio-question span,
.signals-title b,
.signal > div b,
.evidence > span,
.evidence b,
.feature-icon,
.integration-copy li svg,
.inline-link,
.security-icon {
	color: #0e7a6d;
}
.badge {
	background: #e4f6f2;
	border-color: #8ed8c8;
}
.shape-a {
	background: #c7ede4;
}
.shape-b {
	background: #e4f6f2;
}
.live i {
	box-shadow: 0 0 0 5px #0e7a6d18;
}
.side-item.active {
	color: #0a6156;
	background: #e4f6f2;
}
.side-item.active span,
.candidate-mini > div {
	background: #bce5dc;
}
.dio-question {
	background: #f0faf7;
	border-color: #c7e7de;
}
.speaker {
	background: #e4f6f2;
}
.audio i {
	background: linear-gradient(#0e7a6d, #8ed8c8);
}
.signal em i {
	background: linear-gradient(90deg, #0e7a6d, #43b8a5);
}
.evidence {
	background: #f0faf7;
	border-color: #c7e7de;
}
.decision span,
.workflow .section-label {
	color: #8ed8c8;
}
.why {
	background: #f4f7f6;
}
.feature-icon {
	background: #e4f6f2;
}
.integration-map {
	background: radial-gradient(circle, #e4f6f2 0, #f4faf8 55%, #fff 72%);
}
.connector-lines {
	border-color: #bce5dc;
}
.connector-lines span {
	background: #bce5dc;
}
.workflow {
	background: #182320;
}
.workflow-steps article > b {
	color: #182320;
	background: #8ed8c8;
}
.security {
	background: #e4f6f2;
}
.security-icon {
	background: #c7ede4;
}
.cta {
	background: #8ed8c8;
	color: #182320;
}
.cta-dot {
	border-color: #0a615622;
	pointer-events: none;
}
.audio button {
	cursor: pointer;
}
.audio.is-paused i {
	animation-play-state: paused !important;
}
a:focus-visible,
button:focus-visible {
	outline: 3px solid #0e7a6d;
	outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Waveform-to-DIO hero and screening benefits calculator. */
button,
input {
	-webkit-tap-highlight-color: transparent;
}
button {
	cursor: pointer;
}
button:focus-visible,
input:focus-visible,
summary:focus-visible {
	outline: 3px solid #43b8a5;
	outline-offset: 5px;
}
.hero {
	padding-bottom: 0;
}
.motion-stage {
	max-width: 1100px;
	margin: 64px auto 0;
	position: relative;
	background: radial-gradient(ellipse at 50% 65%, #e4f6f2 0, transparent 64%);
}
.motion-caption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
}
.motion-caption .section-label {
	font-size: 11px;
}
.motion-caption button {
	border: 1px solid #dfe7e5;
	border-radius: 30px;
	padding: 9px 14px;
	font-size: 12px;
	color: #586b66;
	background: #ffffffb3;
}
.motion-caption button:hover {
	color: #0e7a6d;
	border-color: #8ed8c8;
}
#dio-sculpture {
	display: block;
	width: 100%;
	height: 295px;
}
.motion-steps {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	color: #586b66;
	font-size: 12px;
	padding: 0 0 35px;
}
.motion-steps i {
	width: 65px;
	height: 1px;
	background: linear-gradient(90deg, #dfe7e5, #43b8a5);
}
.sample-heading {
	display: grid;
	grid-template-columns: 1.3fr 0.8fr;
	align-items: end;
	gap: 70px;
	margin-bottom: 45px;
}
.sample-heading h2 {
	margin-top: 20px;
}
.sample-heading h2 span {
	color: #0e7a6d;
}
.sample-heading > p {
	font-size: 18px;
	color: #586b66;
	line-height: 1.65;
	margin: 0 0 4px;
	max-width: 380px;
}
.micro-label {
	letter-spacing: 0.12em;
	font-size: 11px;
	font-weight: 700;
	color: #778b86;
}
.calendar-sample {
	background: #fff;
}
.calendar-toggle {
	display: flex;
	padding: 4px;
	background: #f0f4f2;
	border-radius: 30px;
}
.calendar-toggle button {
	font-size: 12px;
	padding: 9px 14px;
	border-radius: 25px;
	color: #586b66;
	white-space: nowrap;
}
.calendar-toggle button[aria-pressed="true"] {
	background: #fff;
	color: #182320;
	box-shadow: 0 2px 6px #18232012;
}
.time-layout {
	display: grid;
	grid-template-columns: 0.8fr 1.4fr;
	gap: 60px;
	align-items: start;
}
.time-controls {
	padding-top: 10px;
}
.time-controls > label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	font-size: 14px;
	color: #3e4d48;
}
.time-controls output {
	font-weight: 700;
	color: #0e7a6d;
	white-space: nowrap;
}
.time-controls input {
	display: block;
	width: 100%;
	accent-color: #0e7a6d;
	margin: 18px 0 33px;
	height: 6px;
	cursor: pointer;
}
.time-result {
	border-top: 1px solid #dfe7e5;
	padding-top: 28px;
}
.time-result > span {
	font-size: 12px;
	color: #586b66;
}
.time-result strong {
	display: block;
	font-size: 66px;
	line-height: 1.2;
	letter-spacing: -0.065em;
	color: #0e7a6d;
	margin-top: 10px;
}
.time-result strong small {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	color: #586b66;
}
.time-result p {
	font-size: 13px;
	color: #586b66;
	margin: 10px 0 24px;
}
.time-assumptions {
	color: #778b86;
	font-size: 12px;
	line-height: 1.65;
}
.time-assumptions summary {
	cursor: pointer;
}
.time-assumptions p {
	margin-top: 10px;
}
.calendar-card {
	border: 1px solid #dfe7e5;
	background: #f9fbfa;
	padding: 26px;
	border-radius: 20px;
}
.calendar-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 25px;
}
.calendar-top b {
	display: block;
	font-size: 15px;
	letter-spacing: -0.02em;
}
.calendar-top > div > span {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	color: #778b86;
}
.calendar-grid {
	display: grid;
	grid-template-columns: 30px repeat(5, minmax(0, 1fr));
	gap: 5px;
}
.calendar-day {
	text-align: center;
	font-size: 11px;
	color: #778b86;
	padding: 0 0 12px;
}
.calendar-hour {
	font-size: 10px;
	color: #8da198;
	padding-top: 12px;
}
.calendar-slot {
	height: 37px;
	border-radius: 5px;
	border: 1px solid #e5ede9;
	position: relative;
	overflow: hidden;
	background: #fff;
	text-align: center;
	font-size: 10px;
	color: #637269;
}
.calendar-slot::before {
	content: "";
	position: absolute;
	inset: 0;
	transform-origin: top;
	transform: scaleY(var(--fill, 0));
	background: #d6ded9;
	transition:
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.4s;
}
.calendar-grid.after .calendar-slot::before {
	background: #8ed8c8;
}
.calendar-slot > span {
	position: relative;
}
.calendar-slot:not(:disabled):hover {
	background: #e4f6f2;
	border-color: #43b8a5;
}
.calendar-slot:disabled {
	cursor: default;
}
.calendar-slot:not(:disabled)::after {
	content: "+";
	color: #9cbeb3;
	font-size: 15px;
}
.calendar-slot:not(:disabled):hover::after {
	color: #0e7a6d;
}
.calendar-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 20px 0 0 35px;
	font-size: 11px;
	color: #778b86;
}
.calendar-legend > span {
	display: flex;
	align-items: center;
	gap: 6px;
}
.calendar-legend i {
	width: 9px;
	height: 9px;
	border-radius: 2px;
	border: 1px solid #d8e3dd;
	display: block;
}
.busy-key {
	background: #d6ded9;
}
.free-key {
	background: #fff;
}
.calendar-caption {
	min-height: 42px;
	font-size: 13px;
	line-height: 1.6;
	color: #0e7a6d;
	background: #eaf6f1;
	padding: 12px 14px;
	border-radius: 8px;
	margin: 20px 0 0;
}
@media (max-width: 1000px) {
	.demo-toolbar {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}
	.sample-heading {
		gap: 30px;
	}
	.time-layout {
		gap: 30px;
		grid-template-columns: 1fr;
	}
	.time-controls {
		display: grid;
		grid-template-columns: 1fr;
	}
	.time-result strong {
		font-size: 56px;
	}
	.demo-content {
		grid-template-columns: 1.2fr 1fr;
	}
	.transcript-panel {
		padding: 25px 18px;
	}
	.evidence-panel-sample {
		padding: 25px 18px;
	}
}
@media (max-width: 700px) {
	.hero {
		padding-bottom: 0;
	}
	.motion-stage {
		margin-top: 45px;
	}
	.motion-caption {
		flex-direction: column;
		gap: 15px;
		padding: 0;
	}
	.motion-caption .section-label {
		font-size: 10px;
	}
	#dio-sculpture {
		height: 250px;
	}
	.motion-steps {
		gap: 10px;
	}
	.motion-steps i {
		width: 35px;
	}
	.sample-heading {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	.sample-heading h2 {
		font-size: 42px;
	}
	.sample-heading > p {
		font-size: 16px;
	}
	.interview-sample {
		padding-top: 45px;
	}
	.demo-toolbar {
		padding: 14px 10px;
	}
	.role-controls {
		gap: 0;
		width: 100%;
	}
	.role-controls button {
		padding: 10px 9px;
		font-size: 11px;
		flex: 1;
	}
	.sample-label {
		font-size: 10px;
		padding-left: 8px;
	}
	.demo-subbar {
		padding: 18px;
		flex-wrap: wrap;
		gap: 18px;
	}
	.view-controls {
		width: 100%;
	}
	.view-controls button {
		flex: 1;
	}
	.demo-content {
		grid-template-columns: 1fr;
	}
	.evidence-panel-sample {
		border-left: 0;
		border-top: 1px solid #e5ece8;
	}
	.transcript-turn {
		grid-template-columns: 26px 1fr;
		padding: 10px 7px;
		gap: 9px;
	}
	.turn-avatar {
		width: 26px;
		height: 26px;
	}
	.transcript-turn p {
		font-size: 14px;
	}
	.transcript-panel h3 {
		font-size: 21px;
	}
	.playback-bar {
		padding: 18px 15px;
		gap: 12px;
		flex-wrap: wrap;
	}
	.play-sample {
		min-width: 145px;
		padding: 12px 15px;
		font-size: 12px;
	}
	.playback-info {
		order: 3;
		width: 100%;
		flex-basis: 100%;
	}
	.restart-sample {
		margin-left: auto;
	}
	.calendar-card {
		padding: 18px 12px;
	}
	.calendar-top {
		flex-wrap: wrap;
		gap: 18px;
	}
	.calendar-top b {
		font-size: 14px;
	}
	.calendar-slot {
		height: 35px;
	}
	.calendar-grid {
		gap: 4px;
		grid-template-columns: 24px repeat(5, minmax(0, 1fr));
	}
	.calendar-legend {
		margin-left: 28px;
		font-size: 10px;
		gap: 12px;
	}
	.time-controls label {
		font-size: 13px;
	}
	.time-result strong {
		font-size: 60px;
	}
	.time-layout {
		gap: 30px;
	}
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation: none !important;
		transition: none !important;
	}
}
/* Hours and cost share one set of assumptions. */
.benefit-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 0 0 30px;
	margin-bottom: 30px;
	border-bottom: 1px solid #dfe7e5;
}
.benefit-switch {
	background: #edf3f0;
	padding: 6px;
	display: flex;
	gap: 5px;
	border-radius: 40px;
}
.benefit-switch button {
	padding: 14px 24px;
	border-radius: 30px;
	font-size: 15px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 9px;
	color: #586b66;
	transition:
		background 0.25s,
		color 0.25s,
		box-shadow 0.25s;
}
.benefit-switch button > span {
	font-size: 20px;
	line-height: 1;
}
.benefit-switch button[aria-pressed="true"] {
	background: #0e7a6d;
	color: #fff;
	box-shadow: 0 5px 14px #0e7a6d20;
}
.benefit-period {
	display: flex;
	gap: 4px;
}
.benefit-period button {
	color: #778b86;
	padding: 10px 15px;
	border-radius: 8px;
	font-size: 13px;
}
.benefit-period button[aria-pressed="true"] {
	background: #e4f6f2;
	color: #0a6156;
}
.benefit-visual {
	min-width: 0;
}
.benefit-equivalent {
	font-size: 13px;
	line-height: 1.65;
	color: #586b66;
	margin-bottom: 24px;
}
.time-result strong {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px 8px;
	font-variant-numeric: tabular-nums;
	font-size: clamp(40px, 4.7vw, 66px);
	overflow-wrap: anywhere;
}
.time-result.is-negative strong {
	color: #a14d2f;
}
.price-inputs {
	margin: 3px 0 27px;
	border-top: 1px solid #dfe7e5;
	padding-top: 24px;
}
.price-row {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 14px;
	margin-bottom: 19px;
}
.price-row label,
.price-fixed {
	font-size: 13px;
	color: #3e4d48;
	display: block;
}
.price-fixed b {
	display: flex;
	align-items: center;
	height: 44px;
	margin-top: 8px;
	color: #182320;
	font-size: 15px;
}
.price-inputs input {
	border: 1px solid #d1ded7;
	border-radius: 9px;
	background: #fff;
	width: 100%;
	min-width: 0;
	color: #182320;
	font: inherit;
	font-size: 15px;
	padding: 11px 12px;
	height: 44px;
	margin: 8px 0 0;
	cursor: auto;
}
.price-inputs input[aria-invalid="true"] {
	border-color: #a14d2f;
	background: #fff6f1;
}
.price-inputs > p {
	color: #778b86;
	font-size: 11px;
	line-height: 1.65;
	margin: 10px 0 0;
}
#price-error {
	color: #a14d2f;
}
.cost-card {
	background: #f8fbf9;
	border: 1px solid #dfe7e5;
	border-radius: 20px;
	padding: 34px;
}
.cost-heading h3 {
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -0.045em;
	margin: 15px 0 10px;
}
.cost-heading > p {
	font-size: 12px;
	color: #778b86;
}
.cost-comparison {
	margin-top: 33px;
}
.cost-bar-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-bottom: 13px;
	font-size: 14px;
}
.cost-bar-label small {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	font-weight: 400;
	color: #778b86;
}
.cost-bar-label strong {
	font-size: 25px;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}
.cost-track {
	height: 37px;
	background: #eaf0ed;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	margin-bottom: 29px;
}
.cost-track i {
	display: block;
	height: 100%;
	transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
#before-cost-bar {
	background: repeating-linear-gradient(
		125deg,
		#b8c6bf 0,
		#b8c6bf 5px,
		#c8d4ce 5px,
		#c8d4ce 7px
	);
}
#review-cost-bar {
	background: #0e7a6d;
}
#fee-cost-bar {
	background: #8ed8c8;
}
.cost-key {
	display: flex;
	gap: 20px;
	font-size: 11px;
	color: #778b86;
	margin-top: -14px;
}
.cost-key > span {
	display: flex;
	align-items: center;
	gap: 7px;
}
.cost-key i {
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: #0e7a6d;
}
.cost-key > span:last-child i {
	background: #8ed8c8;
}
.cost-receipt {
	padding: 23px 0 0;
	margin: 27px 0 0;
	border-top: 1px solid #dfe7e5;
}
.cost-receipt > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 8px 0;
	color: #586b66;
	font-size: 13px;
}
.cost-receipt b {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	color: #182320;
	white-space: nowrap;
}
.cost-receipt .receipt-total {
	border-top: 1px dashed #cddbd3;
	padding-top: 16px;
	margin-top: 10px;
	color: #182320;
}
.receipt-total b {
	font-weight: 700;
}
.break-even {
	display: flex;
	gap: 16px;
	border-radius: 12px;
	background: #e4f6f2;
	padding: 20px;
	margin-top: 23px;
}
.break-even-icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #aed7ca;
	color: #0e7a6d;
	flex-shrink: 0;
}
.break-even b {
	font-size: 12px;
	font-weight: 500;
	color: #586b66;
}
.break-even p {
	color: #0a6156;
	font-size: 23px;
	font-weight: 600;
	letter-spacing: -0.035em;
	margin: 5px 0 7px;
}
.break-even small {
	color: #586b66;
	display: block;
	font-size: 11px;
	line-height: 1.5;
}
.cost-note {
	font-size: 11px;
	color: #778b86;
	line-height: 1.65;
	margin: 17px 0 0;
}
#hours-panel:not([hidden]),
#cost-panel:not([hidden]) {
	animation: benefit-appear 0.35s ease both;
}
@keyframes benefit-appear {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@media (max-width: 1000px) {
	.time-controls {
		display: block;
	}
	.time-controls > input[type="range"] {
		margin-bottom: 33px;
	}
	.price-row {
		grid-template-columns: 1.5fr 1fr;
	}
}
@media (max-width: 700px) {
	.benefit-topbar {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding-bottom: 23px;
		margin-bottom: 25px;
	}
	.benefit-switch {
		justify-content: center;
	}
	.benefit-switch button {
		padding: 12px 15px;
		justify-content: center;
		flex: 1;
		font-size: 13px;
	}
	.benefit-period {
		justify-content: center;
	}
	.benefit-period button {
		flex: 1;
	}
	.cost-card {
		padding: 24px 18px;
	}
	.cost-heading h3 {
		font-size: 27px;
	}
	.cost-heading .micro-label {
		font-size: 9px;
	}
	.cost-bar-label strong {
		font-size: 23px;
	}
	.break-even {
		padding: 16px 13px;
		gap: 10px;
	}
	.break-even p {
		font-size: 21px;
	}
	.time-result strong {
		font-size: 52px;
	}
	.time-result strong small {
		font-size: 13px;
	}
}

/* Production shell: retain account entry points and keyboard navigation. */
.sprite {
	display: none;
}
body {
	-webkit-font-smoothing: antialiased;
}
.nav-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	justify-self: end;
}
.nav-signin {
	font-size: 14px;
	white-space: nowrap;
}
.skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	transform: translateY(-200%);
	z-index: 100;
	padding: 12px 20px;
	background: #182320;
	color: white;
	border-radius: 8px;
}
.skip-link:focus {
	transform: translateY(0);
}
/* Above the map, in normal flow: positioned inside it, the top card painted over it. */
.integration-roadmap {
	width: fit-content;
	margin: 0 auto 12px;
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: 100px;
	background: #fff;
	color: #586b66;
	font-size: 12px;
}
.calculator-notice {
	margin-bottom: 24px;
	color: #586b66;
}
@media (max-width: 700px) {
	.nav-actions {
		gap: 12px;
	}
	.nav-actions .button {
		padding: 10px 14px;
		font-size: 12px;
	}
	.nav-signin {
		font-size: 12px;
	}
}
/* "How it works": the product demo, right after the hero. A poster and one play button
 * until somebody asks for it (site.js), native controls once it plays. Without script the
 * video keeps its own controls and the chapters stay hidden. */
.demo {
	background: #fff;
}
.demo-player {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 24px;
	background: #0d1614;
	box-shadow:
		0 2px 6px rgba(24, 35, 32, 0.08),
		0 30px 80px rgba(24, 35, 32, 0.16);
}
.demo-player video {
	display: block;
	width: 100%;
	height: 100%;
	background: #0d1614;
}
.demo-play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	border: 0;
	padding: 0;
	background: rgba(13, 22, 20, 0.3);
	color: #fff;
	cursor: pointer;
}
.demo-play-icon {
	display: grid;
	place-items: center;
	width: 112px;
	height: 112px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: #0e7a6d;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s;
}
.demo-play-icon svg {
	margin-left: 5px;
}
.demo-play:hover .demo-play-icon {
	transform: scale(1.05);
}
.demo-play-label {
	padding: 8px 14px;
	border-radius: 100px;
	background: rgba(13, 22, 20, 0.9);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	font-size: 13px;
	font-weight: 700;
}
.demo-play:focus-visible {
	outline-offset: -6px;
}
.demo-chapters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 28px;
}
.demo-chapters button {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 0 0;
	border: 0;
	border-top: 1px solid #dfe7e5;
	background: none;
	color: var(--ink);
	font: inherit;
	text-align: left;
}
/* The top rule fills as the chapter plays; site.js sets --fill. */
.demo-chapters button::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: var(--fill, 0%);
	height: 2px;
	background: #0e7a6d;
}
.demo-chapter-head {
	display: flex;
	justify-content: space-between;
	color: #0e7a6d;
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.demo-chapter-head time {
	font-family: ui-monospace, Menlo, monospace;
	letter-spacing: 0;
}
.demo-chapter-text {
	font-size: 16px;
	line-height: 1.45;
}
.demo-chapters button[aria-current="true"] .demo-chapter-text {
	font-weight: 700;
}
@media (max-width: 700px) {
	.demo-player {
		border-radius: 16px;
	}
	.demo-play-icon {
		width: 72px;
		height: 72px;
	}
	.demo-play-icon svg {
		width: 26px;
		height: 26px;
		margin-left: 3px;
	}
	.demo-play-label {
		font-size: 12px;
	}
	.demo-chapters {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 12px;
	}
	.demo-chapters button {
		padding: 14px 0;
	}
}

/* Questions, on the landing page and the candidates' guide. Native disclosures, so every
   answer is in the page for a reader and a crawler alike, and each opens with no script. */
.faq {
	background: var(--soft);
}
.faq h2 {
	margin-top: 22px;
	max-width: 820px;
}
.faq-list {
	max-width: 920px;
	margin-top: 50px;
	border-top: 1px solid var(--line);
}
.faq-list details {
	border-bottom: 1px solid var(--line);
}
.faq-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	color: var(--ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.02em;
	list-style: none;
	cursor: pointer;
}
.faq-list summary::-webkit-details-marker {
	display: none;
}
.faq-list summary::after {
	content: "+";
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	color: var(--green);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}
.faq-list details[open] > summary::after {
	content: "−";
}
.faq-list details p {
	max-width: 760px;
	margin: -6px 0 26px;
	color: var(--text);
	font-size: 17px;
	line-height: 1.65;
}
.faq-list details a {
	color: var(--green);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The candidates' guide. */
.guide-hero {
	padding-bottom: 50px;
}
.guide-hero h1 {
	max-width: 980px;
	margin: 22px 0 26px;
	font-size: clamp(46px, 6.4vw, 88px);
	line-height: 0.98;
	letter-spacing: -0.065em;
}
.guide-hero p {
	max-width: 720px;
	margin: 0;
	color: var(--text);
	font-size: 20px;
	line-height: 1.6;
}
.guide-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	padding-top: 0;
}
.guide-steps article {
	background: #fff;
	border: 1px solid #e1e9e4;
	border-radius: 22px;
	padding: 32px 30px 34px;
}
.guide-steps article > span {
	color: var(--green);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.guide-steps h2 {
	margin: 16px 0 20px;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -0.035em;
}
.guide-steps ul {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
}
.guide-steps li {
	position: relative;
	padding-left: 22px;
	color: var(--text);
	font-size: 16px;
	line-height: 1.6;
}
.guide-steps li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lime);
}
@media (max-width: 1000px) {
	.guide-steps {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 700px) {
	.faq-list summary {
		padding: 20px 0;
		font-size: 18px;
	}
	.faq-list details p {
		font-size: 16px;
	}
	.guide-hero p {
		font-size: 17px;
	}
	.guide-steps h2 {
		font-size: 24px;
	}
}

/* Readability floor: no text under 12px, small text at 4.5:1 against its background or
   better, and links at least 24px tall. Kept together as overrides, so the approved
   design's own values stay readable above. #627069 passes on every light background the
   page uses (4.6:1 on the mint); #7d9387 is its counterpart on the dark workflow band. */
.hero-proof,
.logo-line p,
.logo-line div,
.feature-row article > span,
footer,
.time-assumptions,
.benefit-period button,
.micro-label,
.calendar-top > div > span,
.calendar-day,
.calendar-hour,
.calendar-legend,
.price-inputs > p,
.cost-heading > p,
.cost-bar-label small,
.cost-key,
.cost-note {
	color: #627069;
}
.workflow-steps article > span {
	color: #7d9387;
}
.motion-caption .section-label,
.logo-line p,
.feature-row article > span,
.hub small,
.ats-card b,
.workflow-steps article > span,
.micro-label,
.calendar-top > div > span,
.calendar-day,
.calendar-hour,
.calendar-legend,
.price-inputs > p,
.cost-bar-label small,
.cost-key,
.break-even small,
.cost-note,
.cost-heading .micro-label,
footer small {
	font-size: 12px;
}
/* At 12px the hub's caption is wider than the hub: two lines inside it, not one past it. */
.hub small {
	max-width: 92px;
	text-align: center;
	line-height: 1.25;
}
@media (max-width: 700px) {
	.hub {
		width: 140px;
		height: 140px;
	}
}
/* Room for "16:00" at 12px. */
.calendar-grid {
	grid-template-columns: 36px repeat(5, minmax(0, 1fr));
}
.nav nav a,
.nav-signin,
footer div a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}
.inline-link {
	min-height: 24px;
}
.time-assumptions summary {
	padding-block: 3px;
}

/* The footer's links wrap rather than squeeze the logo and the line beside it. With the Blog
   and About links the row is wider than its `auto` column can be between 1000px and about
   1250px, and the `1fr` columns gave way instead: a 24px logo and a four-line tagline. */
@media (min-width: 1001px) {
	footer {
		grid-template-columns: minmax(112px, 1fr) minmax(150px, 1fr) minmax(0, auto) auto;
	}
	footer div {
		justify-content: flex-end;
	}
}