/* ============================================================
   InnGeniusAI brand overrides on top of the InnGenius AI template.
   Kept separate from assets/sass/style.css (vendor file) so the
   template's own stylesheet stays untouched and easy to update.
   ============================================================ */

/* vendor CSS points scroll-up's icon at "Font Awesome 5 Pro" (\f176),
   which isn't bundled — this theme only ships FA6 Free, so the glyph
   rendered as an empty box. Point it at the Free font + a Free glyph. */
.scroll-up::after {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f106";
}

.inngeniusai-logo {
	display: flex !important;
	align-items: center;
	gap: 8px;
	/*font-family: "Poppins", sans-serif;*/
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}
.inngeniusai-logo .ing-spark {
	width: 18px;
	height: 18px;
	flex: none;
	color: #f59e0b;
}
.inngeniusai-logo .wordmark { display: inline-flex; }
.inngeniusai-logo .a { color: #c2272f; }
.inngeniusai-logo .b { color: #1565c0; }
.inngeniusai-logo .c {
	background: linear-gradient(92deg, #0891b2 0%, #1d4ed8 30%, #4338ca 60%, #be123c 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.inngeniusai-logo .tag {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.35;
	color: #6b7280;
	border-left: 1.5px solid #d8dee8;
	padding-left: 8px;
	margin-left: 2px;
	white-space: nowrap;
}
/* Vendor bug: meanmenu's hamburger bar inherits width:100% from
   jquery.meanmenu.min.css, and the template's own mobile override makes it
   position:absolute with no width set — so the (invisible, transparent)
   bar stretches across the whole header and swallows clicks on the logo.
   Pin it to the icon's own footprint instead. */
@media (max-width: 991px) {
	.header__area-menubar-right .responsive-menu .mean-bar {
		width: 44px;
		left: auto;
	}
	/* Same root cause hits the dropdown itself: .mean-nav's width:100% is
	   relative to .responsive-menu (a narrow flex item), not the viewport,
	   so the open menu renders as a cramped column with truncated labels
	   instead of a full-width drawer. Take it out of that narrow flow. */
	.mean-container .mean-nav {
		position: fixed;
		left: 0;
		width: 100%;
		max-height: calc(100vh - 44px);
		overflow-y: auto;
		z-index: 999998;
	}
}
.header__area-menubar-center-menu ul li.active > a {
	color: var(--text-heading-color);
	font-weight: 700;
	position: relative;
}
.header__area-menubar-center-menu ul li.active > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 8px;
	transform: translateX(-50%);
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: var(--primary-color-1);
}
.ing-topbar {
	/*background: #4338ca;*/
	color: var(--text-white);
	background: linear-gradient(92deg, #0891B2 0%, #1d4ed8 30%, #4338CA 60%, #BE123C 100%);;
}
.ing-topbar__in {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 2px 20px;
	position: relative;
}
.ing-topbar__text {
	margin: 0;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .01em;
	text-align: center;
}
.ing-topbar__text i {
	margin-right: 7px;
	color: #fbbf24;
}
.ing-topbar__text strong {
	font-weight: 700;
}
@media (max-width: 767px) {
	.ing-topbar__in { padding: 8px 16px; gap: 8px; }
	.ing-topbar__text { font-size: 11px; text-align: left; }
}

.login-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-heading-color);
	margin-right: 6px;
	transition: color 0.3s;
}
.login-link i {
	font-size: 13px;
}
.login-link:hover {
	color: var(--primary-color-1);
}

/* InnGenius AI's nav padding/font-size assumed ~6 short dropdown labels;
   InnGeniusAI's flat 7-item nav (Platform/AI/Integrations/Solutions/
   Pricing/Security/Compare) needs tighter spacing to fit on one line. */
.header__area-menubar-center-menu ul li a {
	padding: 18px 9px;
	font-size: 14px;
	font-weight: 500;
}

/* ============================================================
   Homepage — Hero
   Content ported from the marketing2 build; restyled with
   InnGenius AI's fonts/buttons/colour tokens instead of its own image
   banner (no stock photo — the visual is the real animated
   data-flow diagram, same as the source site).
   ============================================================ */
.ing-gradient-text {
	background: linear-gradient(92deg, #0891b2 0%, #1d4ed8 30%, #4338ca 60%, #be123c 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ing-hero {
	position: relative;
	padding: 50px 0 0;
	overflow: hidden;
}
.ing-hero__shape {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(5, 22, 52, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(5, 22, 52, .05) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .45) 60%, transparent 92%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .45) 60%, transparent 92%);
}
.ing-hero__shape-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .55;
}
.ing-hero__shape-blob-1 {
	width: 480px;
	height: 320px;
	left: 4%;
	top: -80px;
	background: rgba(8, 145, 178, .16);
}
.ing-hero__shape-blob-2 {
	width: 480px;
	height: 320px;
	right: 4%;
	top: -40px;
	background: rgba(190, 18, 60, .13);
}
.ing-hero__shape-blob-3 {
	width: 560px;
	height: 320px;
	left: 50%;
	bottom: -220px;
	transform: translateX(-50%);
	background: rgba(67, 56, 202, .11);
}

.ing-hero__content {
	position: relative;
	z-index: 2;
}
.ing-hero__content .ing-aibadge {
	margin-bottom: 20px;
}
.ing-hero h1 {
	font-size: clamp(32px, 3.6vw, 50px);
	line-height: 1.15;
	margin-bottom: 20px;
	text-transform: none;
}
.ing-hero__sub {
	max-width: 50ch;
	font-size: 17px;
	line-height: 1.6;
	color: var(--body-color);
	margin-bottom: 34px;
}
.ing-hero__sub strong {
	color: var(--text-heading-color);
	font-weight: 600;
}
.ing-hero__cta {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
.ing-hero__watch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	border: 1.5px solid var(--text-heading-color);
	border-radius: 12px;
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-heading-color);
	background: var(--bg-white);
	transition: background .18s;
}
.ing-hero__watch:hover {
	color: var(--text-heading-color);
	background: #F6F8FB;
}
.ing-hero__trust {
	margin-top: 28px;
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--faint-color, #8a94a6);
}
.ing-hero__trust span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ing-hero__trust i {
	color: var(--primary-color-1);
	font-size: 11px;
}

/*.ing-hero__flowcard {
	position: relative;
	z-index: 2;
	background: var(--bg-white);
	border-radius: 20px;
	box-shadow: 0 25px 55px rgba(11, 18, 32, .14);
	padding: 10px;
}*/
.ing-hero__flowcard-top {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .08em;
	color: #4338ca;
	margin-bottom: 20px;
	justify-content: center;
}
.ing-hero__flowcard-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #047857;
	flex: none;
	animation: ing-pulse 2.4s ease-in-out infinite;
}
@keyframes ing-spin {
	to { transform: rotate(360deg); }
}
@keyframes ing-pulse {
	0%, 100% { opacity: .35; transform: scale(1); }
	50% { opacity: .9; transform: scale(1.25); }
}
@keyframes ing-aflow-travel {
	0% { left: 0; opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { left: calc(100% - 7px); opacity: 0; }
}

/* vertical fan diagram: night audit -> AI core -> workspaces.
   All positions are percentages against the .ing-fan aspect-ratio box,
   matching the SVG viewBox 1:1 so curves always meet the pills. */
.ing-fan {
	position: relative;
	width: 100%;
	aspect-ratio: 400 / 320;
}
.ing-fan__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.ing-fan__audit,
.ing-fan__core,
.ing-fan__pill {
	position: absolute;
	transform: translate(-50%, -50%);
}
.ing-fan__audit {
	left: 50%;
	top: 7.5%;
	width: 40%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 10px;
	background: #F0FAFC;
	border: 1.5px solid #0891B2;
	border-radius: 10px;
	text-align: center;
}
.ing-fan__audit b {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .05em;
	color: #0E7490;
}
.ing-fan__audit span {
	font-family: var(--heading-font);
	font-size: 12px;
	font-weight: 700;
	color: var(--text-heading-color);
}
.ing-fan__core {
	left: 50%;
	top: 31.5%;
	width: 60px;
	height: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid #4338ca;
	color: #4338ca;
}
.ing-fan__core-ring {
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	border: 2px solid transparent;
	border-top-color: #0891B2;
	border-right-color: #4338CA;
	border-bottom-color: #BE123C;
	animation: ing-spin 9s linear infinite;
}
.ing-fan__core b {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
}
.ing-fan__pill {
	width: 38%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	background: #fff;
	border: 1.5px solid var(--c);
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(11, 18, 32, .06);
}
.ing-fan__pill b {
	width: 100%;
	padding-bottom: 0;
	border-bottom: 1.5px dashed var(--color-4);
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 16px;
	font-weight: 700;
	color: var(--text-heading-color);
	text-align: center;
}
.ing-fan__pill span {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	font-weight: 700;
	text-align: left;
	color: var(--faint-color, #8a94a6);
}
.ing-fan__pill--tri {
	width: 32%;
	padding: 3px 6px;
	gap: 2px;
}
.ing-fan__pill--tri b {
	font-size: 16px;
}
.ing-fan__pill--tri span {
	font-size: 12px;
	white-space: normal;
}

/* the fan's absolute/percentage layout assumes desktop-proportioned
   content boxes; at narrow widths the fixed font sizes wrap and grow
   taller than the fixed vertical slots, so pills collide. Below 767px,
   drop the fan geometry entirely and stack everything in DOM order
   (audit -> core -> pills), which is already the correct data flow. */
@media (max-width: 767px) {
	.ing-fan {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding: 6px 0 2px;
	}
	.ing-fan__svg { display: none; }
	.ing-fan__audit,
	.ing-fan__pill {
		position: static;
		transform: none;
		width: 100%;
		max-width: 320px;
	}
	/* stays position:relative (not static) so .ing-fan__core-ring's
	   absolute inset:-7px still anchors to this 60x60 circle instead of
	   escaping to fill the whole stacked column. */
	.ing-fan__core {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		margin: 2px 0;
	}
	.ing-fan__pill--tri span, .ing-fan__pill span
	{
		font-size: 15px;
	}
}
.ing-hero__ticker {
	/*margin-top: 46px;*/
	border-top: 1px solid var(--color-4);
	border-bottom: 1px solid var(--color-4);
	background: #f6f8fb;
	overflow: hidden;
}
.ing-hero__ticker-track {
	display: flex;
	align-items: center;
	width: max-content;
	padding: 12px 0;
	gap: 22px;
	animation: ing-tick 42s linear infinite;
}
.ing-hero__ticker-track .ing-lgo {
	padding: 0;
	margin: 0 4px;
}
.ing-hero__ticker:hover .ing-hero__ticker-track {
	animation-play-state: paused;
}
.ing-hero__ticker-track span {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0 26px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--body-color);
	white-space: nowrap;
	justify-content: center;
}
.ing-hero__ticker-track i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
}
@keyframes ing-tick {
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.ing-flow__core-ring,
	.ing-hero__ticker-track {
		animation: none !important;
	}
}

@media (max-width: 991px) {
	.ing-hero { padding-top: 60px; }
}

/* ============================================================
   Homepage — The Film & Stats
   ============================================================ */
.ing-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--text-white);
	background: var(--e, #4338ca);
	border-radius: 999px;
	padding: 7px 14px;
	margin-bottom: 22px;
}

.ing-film {
	padding: 60px 0;
	background: linear-gradient(160deg, rgba(8, 145, 178, .06), rgba(67, 56, 202, .05) 55%, rgba(190, 18, 60, .05));
}
.ing-film__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}
.ing-stat {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 12px;
	gap: 14px;
	border: 1px solid var(--color-4);
	border-left: 4px solid var(--c);
	border-radius: 10px;
	padding: 18px;
	background: var(--bg-white);
}
.ing-stat__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(11, 18, 32, .05);
	color: var(--c);
	font-size: 15px;
}
.ing-stat__head {
	flex: 1 1 auto;
	min-width: 0;
}
.ing-stat__num {
	font-family: var(--heading-font);
	font-size: 26px;
	font-weight: 800;
	color: var(--c);
	line-height: 1;
	margin-bottom: 0;
}
.ing-stat__label {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--faint-color, #8a94a6);
	white-space: nowrap;
}
.ing-stat__desc {
	flex: 1 0 100%;
	min-width: 0;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--color-4);
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--body-color);
}

/* ============================================================
   Homepage — The 3:00 AM Flow
   ============================================================ */
.ing-aflow {
	padding: 40px 0;
}
.ing-aflow__title {
	font-size: clamp(26px, 2.8vw, 38px);
	margin-bottom: 18px;
	text-transform: none;
}
.ing-aflow__lead {
	max-width: 62ch;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--body-color);
	margin-bottom: 40px;
}
.ing-aflow__lead strong {
	color: var(--text-heading-color);
	font-weight: 600;
}
.ing-aflow__row {
	display: flex;
	align-items: stretch;
	gap: 10px;
}
.ing-aflow__connector {
	flex: 0 0 28px;
	align-self: flex-start;
	position: relative;
	height: 2px;
	margin-top: 45px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(11, 18, 32, .14), var(--c));
}
.ing-aflow__connector::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--c);
	transform: translateY(-50%);
}
.ing-aflow__connector-dot {
	position: absolute;
	top: 50%;
	left: 0;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 8px 1px var(--c);
	animation: ing-aflow-travel 2.4s ease-in-out infinite;
	animation-delay: var(--d, 0s);
}
.ing-aflow__node {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	border: 1px solid #eef1f6;
	border-radius: 18px;
	padding: 26px 18px 20px;
	background: var(--bg-white);
	box-shadow: 0 14px 30px rgba(11, 18, 32, .07);
}
.ing-aflow__step {
	position: absolute;
	top: -13px;
	left: 16px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--c);
	color: var(--text-white);
	font-family: var(--heading-font);
	font-weight: 800;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--bg-white);
	box-shadow: 0 6px 14px rgba(11, 18, 32, .2);
}
.ing-aflow__icon {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--c);
	color: var(--text-white);
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}
.ing-aflow__time {
	display: inline-block;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	font-weight: 700;
	color: var(--c);
	background: rgba(11, 18, 32, .05);
	border-radius: 999px;
	padding: 3px 8px;
	margin-bottom: 8px;
}
.ing-aflow__label {
	font-family: var(--heading-font);
	font-size: 15.5px;
	font-weight: 800;
	color: var(--text-heading-color);
	line-height: 1.3;
	margin-bottom: 8px;
}
.ing-aflow__sub {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--body-color);
}
.ing-inline-logo {
	width: 13px;
	height: 13px;
	object-fit: contain;
	vertical-align: -2px;
	margin-right: 3px;
	border-radius: 3px;
}
.ing-aflow__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	padding: 3px 9px;
	margin-bottom: 8px;
}
.ing-aflow__badge--ok {
	color: #047857;
	background: rgba(4, 120, 87, .08);
}
.ing-aflow__seal {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	font-weight: 700;
	color: #0f766e;
	background: rgba(15, 118, 110, .08);
	border-radius: 999px;
	padding: 3px 9px;
	margin-bottom: 8px;
}
.ing-aflow__meta {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 26px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--faint-color, #8a94a6);
}
.ing-aflow__meta b {
	color: var(--text-heading-color);
}
.ing-aflow__replay {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ing-aflow__replay i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #047857;
	flex: none;
	animation: ing-pulse 2.4s ease-in-out infinite;
}
@media (max-width: 991px) {
	.ing-aflow__row { flex-wrap: wrap; gap: 22px; }
	.ing-aflow__node { flex: 1 1 calc(33.333% - 15px); }
	.ing-aflow__connector { display: none; }
	.ing-topbar{ display: none; }
}
@media (max-width: 767px) {
	.ing-aflow { padding-bottom: 60px; }
	.ing-aflow__node { flex: 1 1 calc(50% - 11px); }
}
@media (max-width: 420px) {
	.ing-aflow__node { flex: 1 1 100%; }
}

/* ============================================================
   Homepage — The Cascade (early checkout demo)
   ============================================================ */
.ing-cascade {
	padding: 40px 0;
	background: #fafbfd;
	border-top: 1px solid var(--color-4);
}
.ing-cascade__title {
	font-size: clamp(26px, 2.8vw, 38px);
	margin-bottom: 14px;
	text-transform: none;
}
.ing-cascade__lead {
	max-width: 64ch;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--body-color);
	margin-bottom: 0;
}
.ing-cascade__lead strong {
	color: var(--text-heading-color);
	font-weight: 600;
}

.ing-cascade__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 22px;
}
.ing-ctab {
	position: relative;
	overflow: hidden;
	border: 1.5px solid var(--color-4);
	background: #fff;
	border-radius: 999px;
	padding: 5px 17px;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--body-color);
	cursor: pointer;
	transition: border-color .18s, color .18s;
}
.ing-ctab b {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: rgba(190, 18, 60, .1);
	z-index: 0;
}
.ing-ctab span {
	position: relative;
	z-index: 1;
}
.ing-ctab:hover {
	border-color: #BE123C;
	color: #BE123C;
}
.ing-ctab[aria-pressed="true"] {
	border-color: #BE123C;
	color: #BE123C;
	font-weight: 700;
}

.ing-cascade__grid {
	display: grid;
	grid-template-columns: 1.18fr .82fr;
	gap: 16px;
	margin-top: 22px;
	align-items: stretch;
}
.ing-cascade__rows {
	position: relative;
	padding-left: 16px;
}
.ing-cascade__rows::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 14px;
	bottom: 14px;
	width: 2px;
	background: linear-gradient(#0891B2, #4338CA, #BE123C);
	border-radius: 1px;
	opacity: .35;
}
.ing-crow {
	position: relative;
	display: grid;
	grid-template-columns: 78px 1fr 128px;
	gap: 12px;
	align-items: center;
	border: 1.5px solid var(--color-4);
	border-radius: 12px;
	background: #fff;
	padding: 10px 14px;
	margin-bottom: 8px;
	opacity: 0;
	transform: translateX(-12px);
}
.ing-crow::before {
	content: "";
	position: absolute;
	left: -16.5px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -4.5px;
	border-radius: 50%;
	background: #BE123C;
	opacity: .55;
}
.ing-crow.is-lit {
	animation: ing-crowin .45s cubic-bezier(.2, 1, .3, 1) both;
	animation-delay: var(--d, 0s);
}
@keyframes ing-crowin {
	to { opacity: 1; transform: none; }
}
.ing-crow__time {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10.5px;
	font-weight: 700;
	color: #BE123C;
}
.ing-crow__event {
	font-size: 13.5px;
	line-height: 1.45;
}
.ing-crow__event b {
	font-weight: 600;
}
.ing-cchip {
	justify-self: end;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	border-radius: 8px;
	padding: 2px 10px;
	text-align: center;
	opacity: 0;
	transform: scale(.85) translateY(4px);
}
.ing-cchip.is-shown {
	animation: ing-chipflip .38s cubic-bezier(.2, 1.2, .4, 1) both;
	animation-delay: var(--d, 0s);
}
@keyframes ing-chipflip {
	to { opacity: 1; transform: none; }
}
.ing-cchip--ok {
	background: #F1FAF5;
	color: #047857;
	border: 1.5px solid #CBE9D8;
}
.ing-cchip--gap {
	background: #FEF5F6;
	color: #BE123C;
	border: 1.5px solid #F3D9E1;
}

.ing-cascade__score {
	border: 1.5px solid var(--color-4);
	border-radius: 14px;
	padding: 20px;
	background: linear-gradient(180deg, #FEF5F6, #fff 42%);
	display: flex;
	flex-direction: column;
}
.ing-crings {
	display: flex;
	gap: 14px;
	justify-content: center;
}
.ing-cring {
	text-align: center;
}
.ing-cring svg {
	width: 104px;
	height: 104px;
	transform: rotate(-90deg);
}
.ing-cring__track {
	fill: none;
	stroke: #EEF1F6;
	stroke-width: 9;
}
.ing-cring__prog {
	fill: none;
	stroke-width: 9;
	stroke-linecap: round;
	transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1);
}
.ing-cring__val {
	margin-top: -68px;
	font-family: "Space Grotesk", sans-serif;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.02em;
}
.ing-cring__key {
	margin-top: 46px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 9px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .12em;
	color: var(--faint-color, #8a94a6);
}
.ing-cascade__verdict {
	margin-top: 16px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--body-color);
	min-height: 66px;
}
.ing-cascade__verdict b {
	color: var(--text-heading-color);
}
.ing-cascade__barswrap {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px dashed var(--color-4);
}
.ing-cascade__barslabel {
	display: block;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--faint-color, #8a94a6);
	margin-bottom: 10px;
}
.ing-cchart {
	display: flex;
	gap: 10px;
}
.ing-cchart__yaxis {
	flex: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 120px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 9px;
	font-weight: 700;
	color: var(--faint-color, #8a94a6);
	text-align: right;
}
.ing-cchart__body {
	flex: 1;
	min-width: 0;
}
.ing-cchart__plot {
	position: relative;
	height: 120px;
}
.ing-cchart__grid {
	position: absolute;
	left: 0;
	right: 0;
	border-top: 1px dashed var(--color-4);
}
.ing-cchart__cols {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 6px;
}
.ing-cchart__xaxis {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}
.ing-cchart__cols > *,
.ing-cchart__xaxis > * {
	flex: 1;
	min-width: 0;
}
.ing-ccol {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	height: 100%;
}
.ing-ccol__val {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 9px;
	font-weight: 700;
	color: var(--faint-color, #8a94a6);
}
.ing-ccol__bar {
	width: 60%;
	max-width: 26px;
	border-radius: 3px 3px 0 0;
	background: var(--c, #BE123C);
	transition: height .6s cubic-bezier(.2, .8, .2, 1);
}
.ing-cchart__xaxis span {
	display: block;
	text-align: center;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--faint-color, #8a94a6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ing-ccol.is-active .ing-ccol__bar {
	box-shadow: 0 0 0 1.5px #BE123C;
}
.ing-ccol.is-active .ing-ccol__val {
	color: var(--text-heading-color);
}
.ing-cchart__xaxis span.is-active {
	color: var(--text-heading-color);
	font-weight: 700;
}
.ing-ccol--best .ing-ccol__bar {
	background: linear-gradient(180deg, #0891B2, #4338CA, #BE123C);
}
.ing-ccol--best .ing-ccol__val,
.ing-cchart__xaxis span.ing-cchart__xaxis-best {
	color: var(--text-heading-color);
	font-weight: 700;
}
@media (max-width: 420px) {
	.ing-cchart__xaxis span { font-size: 7.5px; }
}
.ing-cascade__foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px dashed var(--color-4);
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	color: #047857;
}
.ing-cascade__illustrative {
	float: right;
	color: var(--faint-color, #8a94a6);
	border: 1px solid var(--color-4);
	border-radius: 6px;
	padding: 2px 7px;
	font-size: 8.5px;
}
@media (max-width: 900px) {
	.ing-cascade__grid { grid-template-columns: 1fr; }
	.ing-crow { grid-template-columns: 64px 1fr 110px; }
}
@media (max-width: 575px) {
	.ing-crow { grid-template-columns: 1fr; row-gap: 6px; }
	.ing-crow::before { display: none; }
	.ing-cchip { justify-self: start; }
}

/* ============================================================
   Homepage — What Ran Last Night (bento)
   ============================================================ */
.ing-bento {
	padding: 40px 0;
	border-top: 1px solid var(--color-4);
}
.ing-bento__title {
	font-size: clamp(26px, 2.8vw, 38px);
	margin-top: 12px;
	margin-bottom: 0;
}
.ing-bento__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 28px;
}
.ing-bt {
	border: 1px solid var(--color-4);
	border-top: 3px solid var(--c, var(--color-4));
	border-radius: 10px;
	padding: 20px;
	background: var(--bg-white);
	transition: border-color .18s;
}
.ing-bt:hover {
	border-color: var(--c, var(--color-4));
}
.ing-bt__k {
	display: inline-block;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 9%, #fff);
	border-radius: 4px;
	padding: 5px 8px;
}
.ing-bt h3 {
	font-size: 17px;
	margin-top: 12px;
	letter-spacing: -.01em;
}
.ing-bt p {
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--body-color);
}
.ing-bt__z {
	margin-top: 12px;
	padding-top: 9px;
	border-top: 1px dotted var(--color-4);
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11.5px;
	font-weight: 600;
	color: #047857;
}
.ing-bt--big {
	grid-column: span 2;
	grid-row: span 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: linear-gradient(180deg, #f7fafd, #fff);
}
.ing-bt--big .ing-bt__huge {
	font-family: var(--heading-font);
	font-size: clamp(58px, 7vw, 92px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--text-heading-color);
	margin-top: 14px;
}
.ing-bt--big h3 {
	font-size: 21px;
}
.ing-bt--wide {
	grid-column: span 2;
}
.ing-bt__minirow {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 12px;
}
.ing-bt__minirow span {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-4);
	border-radius: 5px;
	padding: 4px 8px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--faint-color, #8a94a6);
}
.ing-bt__minirow .ing-inline-logo {
	width: 12px;
	height: 12px;
	margin-right: 5px;
	vertical-align: middle;
}
.ing-bt__grid7 {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 3px;
	margin-top: 12px;
}
.ing-bt__grid7 i {
	aspect-ratio: 1;
	border-radius: 2px;
	background: #e8edf4;
}
@media (max-width: 900px) {
	.ing-bento__grid { grid-template-columns: repeat(2, 1fr); }
	.ing-bt--big { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 575px) {
	.ing-bento__grid { grid-template-columns: 1fr; }
	.ing-bt--big,
	.ing-bt--wide { grid-column: span 1; }
}

/* ============================================================
   Homepage — The Platform (workspace band)
   ============================================================ */
.ing-platform {
	padding: 40px 0;
}
.ing-platform__title {
	font-size: clamp(26px, 2.8vw, 38px);
	margin-bottom: 0;
	text-transform: none;
}
.ing-wsband {
	margin-top: 26px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 22px;
	border: 1.5px solid var(--color-4);
	border-radius: 16px;
	background: #fff;
	padding: 22px 26px;
}
.ing-wsband__num {
	flex: none;
	font-family: "Space Grotesk", sans-serif;
	font-size: 46px;
	font-weight: 700;
	letter-spacing: -.05em;
	color: #1D4ED8;
}
.ing-wsband__tx {
	flex: none;
}
.ing-wsband__tx b {
	display: block;
	font-family: "Space Grotesk", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--text-heading-color);
}
.ing-wsband__tx span {
	display: block;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--faint-color, #8a94a6);
}
.ing-wsband__icons {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	flex: 1;
	min-width: 280px;
}
.ing-wp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--color-4);
	border-radius: 11px;
	background: #fff;
	padding: 5px 12px 5px 5px;
	font-family: "Poppins", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-heading-color);
	transition: transform .18s, border-color .18s;
	cursor: default;
}
.ing-wp:hover {
	transform: translateY(-3px);
	border-color: var(--t);
}
.ing-wp i {
	width: 30px;
	height: 30px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: var(--t);
}
.ing-wp svg {
	width: 17px;
	height: 17px;
	stroke: #fff;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ing-wsband__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #1D4ED8;
	transition: gap .18s;
}
.ing-wsband__cta:hover {
	color: #1D4ED8;
	gap: 12px;
}
@media (max-width: 767px) {
	.ing-wsband { padding: 20px; }
	.ing-wsband__num { font-size: 36px; }
}

/* ============================================================
   Homepage — Final CTA
   ============================================================ */
.ing-cta2 {
	padding: 30px 0 90px;
}
.ing-cta2__frame {
	border-radius: 22px;
	padding: 3px;
	background: linear-gradient(120deg, #0891B2, #4338CA 50%, #BE123C);
}
.ing-cta2__in {
	position: relative;
	overflow: hidden;
	background: var(--bg-white);
	border-radius: 19px;
	padding: 44px 40px;
}
.ing-cta2__in::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(480px 200px at 25% 0%, rgba(67, 56, 202, .07), transparent 70%);
}
.ing-cta2__in > .row {
	position: relative;
	z-index: 1;
}
.ing-cta2__title {
	font-size: clamp(26px, 2.8vw, 36px);
	margin-bottom: 14px;
	text-transform: none;
}
.ing-cta2__lead {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--body-color);
	max-width: 46ch;
	margin-bottom: 28px;
}
.ing-cta2__buttons {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.ing-cta2__media {
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #11141c;
}
.ing-cta2__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 991px) {
	.ing-cta2__in { padding: 34px 26px; text-align: center; }
	.ing-cta2__lead { margin-left: auto; margin-right: auto; }
	.ing-cta2__buttons { justify-content: center; }
	.ing-cta2__media { margin-top: 8px; }
}
@media (max-width: 1399px) {
	.ing-fan__pill-two
	{
		top: 85% !important;
	}
}

/* ============================================================
   Integrations page — hero badge + flow stage
   ============================================================ */
.ing-inthero {
	padding-bottom: 50px;
}
.ing-inthero__content {
	position: relative;
	z-index: 2;
}
.ing-aibadge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--color-4);
	background: var(--bg-white);
	border-radius: 999px;
	padding: 3px 16px 3px 7px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--body-color);
}
.ing-aibadge b {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(92deg, #0891b2 0%, #1d4ed8 30%, #4338ca 60%, #be123c 100%);
	color: #fff;
	border-radius: 999px;
	padding: 1px 12px;
	font-weight: 700;
	flex: none;
}
@media (max-width: 575px) {
	.ing-aibadge {
		align-items: center;
		gap: 7px;
		border-radius: 16px;
		padding: 5px 12px 6px 6px;
		font-size: 10.5px;
		line-height: 1.5;
	}
	.ing-aibadge b {
		margin-top: 1px;
		padding: 3px 10px;
		white-space: nowrap;
	}
}
.ing-inthero h1 {
	font-size: clamp(32px, 3.6vw, 48px);
	line-height: 1.12;
	margin: 20px 0 0;
	max-width: 14ch;
	text-transform: none;
}
.ing-inthero__sub {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--body-color);
	max-width: 52ch;
}
.ing-inthero__sub strong {
	color: var(--text-heading-color);
	font-weight: 600;
}
.ing-inthero__cta {
	justify-content: flex-start;
	margin-top: 24px;
}
.ing-flow2 {
	margin-top: 46px;
	display: grid;
	grid-template-columns: 1fr 70px 140px 70px 1fr;
	align-items: center;
	gap: 0;
	text-align: left;
}
.ing-flow2__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ing-flow2__row {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1.5px solid var(--color-4);
	border-radius: 12px;
	padding: 9px 12px;
	background: var(--bg-white);
}
.ing-flow2__chip {
	font-family: "Poppins", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-heading-color);
}
.ing-flow2__lgs {
	display: flex;
	align-items: center;
	gap: 6px;
}
.ing-flow2__lbl {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--c);
	margin-left: auto;
}
.ing-flow2__row--out {
	border-left: 4px solid var(--c);
}
.ing-flow2__row--out .ing-flow2__lbl {
	margin-left: 0;
}
.ing-flow2__out {
	margin-left: auto;
	text-align: right;
	font-family: "Poppins", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-heading-color);
}
.ing-flow2__pipe {
	height: 4px;
	border-radius: 2px;
	background: var(--color-4);
	position: relative;
	overflow: hidden;
}
.ing-flow2__pipe i {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg, transparent 0 10px, #4338CA 10px 18px);
	animation: ing-pflow 1.1s linear infinite;
	opacity: .75;
}
.ing-flow2__pipe--rev i {
	animation-direction: reverse;
	background: repeating-linear-gradient(90deg, transparent 0 10px, #047857 10px 18px);
}
@keyframes ing-pflow {
	to { transform: translateX(18px); }
}
.ing-flow2__core {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 2px solid var(--color-4);
	background: var(--bg-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	position: relative;
	margin: 0 auto;
}
.ing-flow2__core b {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .24em;
	background: linear-gradient(92deg, #0891b2 0%, #1d4ed8 30%, #4338ca 60%, #be123c 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ing-flow2__core span {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--faint-color, #8a94a6);
}
.ing-flow2__core svg {
	color: #4338CA;
}
@media (max-width: 900px) {
	.ing-flow2 { grid-template-columns: 1fr; gap: 14px; }
	.ing-flow2__pipe { width: 4px; height: 30px; margin: 0 auto; }
	.ing-flow2__pipe i { background: repeating-linear-gradient(180deg, transparent 0 10px, #4338CA 10px 18px); animation-name: ing-pflowv; }
	.ing-flow2__pipe--rev i { background: repeating-linear-gradient(180deg, transparent 0 10px, #047857 10px 18px); }
	@keyframes ing-pflowv { to { transform: translateY(18px); } }
	.ing-flow2__row--out { text-align: right; flex-direction: row-reverse; border-left: 0; border-right: 4px solid var(--c); }
	.ing-flow2__row--out .ing-flow2__out { margin-left: 0; margin-right: auto; text-align: left; }
}

/* Integrations hero — connector coverage chart (right column) */
.ing-covcard {
	position: relative;
	z-index: 2;
	background: var(--bg-white);
	border: 1px solid var(--color-4);
	border-radius: 20px;
	box-shadow: 0 25px 55px rgba(11, 18, 32, .1);
	padding: 22px 22px 18px;
}
.ing-covchart .ing-cchart__plot { height: 140px; }
.ing-covchart .ing-cchart__cols { gap: 4px; }
.ing-covchart .ing-cchart__xaxis { gap: 4px; margin-top: 8px; }
.ing-covchart .ing-cchart__xaxis span { font-size: 9px; letter-spacing: 0; }
.ing-ccol2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	gap: 2px;
}
.ing-ccol2__val {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 9px;
	font-weight: 700;
	color: var(--faint-color, #8a94a6);
}
.ing-ccol2__road,
.ing-ccol2__live {
	width: 60%;
	max-width: 20px;
}
.ing-ccol2__road {
	background: repeating-linear-gradient(45deg, var(--c) 0 3px, transparent 3px 6px);
	opacity: .4;
}
.ing-ccol2__live {
	background: var(--c);
}
.ing-ccol2__val + .ing-ccol2__road,
.ing-ccol2__val + .ing-ccol2__live {
	border-radius: 3px 3px 0 0;
}
.ing-covchart__legend {
	display: flex;
	gap: 18px;
	margin-top: 14px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11px;
	font-weight: 600;
	color: var(--faint-color, #8a94a6);
}
.ing-covchart__legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ing-covchart__dot {
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background: #4338CA;
}
.ing-covchart__dot--road {
	background: repeating-linear-gradient(45deg, #4338CA 0 2px, transparent 2px 4px);
	opacity: .5;
}
.ing-covchart__foot {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--color-4);
	font-size: 13px;
	color: var(--body-color);
}
.ing-covchart__foot b {
	color: var(--text-heading-color);
}
@media (max-width: 480px) {
	.ing-covchart .ing-cchart__xaxis span { font-size: 7px; }
	.ing-covchart .ing-cchart__cols { gap: 2px; }
	.ing-ccol2__road, .ing-ccol2__live { max-width: 14px; }
}

/* ============================================================
   Integrations page — Three Promises
   ============================================================ */
.ing-prin {
	padding: 40px 0;
	border-top: 1px solid var(--color-4);
}
.ing-prin__title {
	font-size: clamp(26px, 2.8vw, 38px);
	margin-bottom: 0;
}
.ing-prin__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 26px;
}
@media (max-width: 900px) {
	.ing-prin__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Integrations page — category cards
   ============================================================ */
.ing-catsec {
	padding: 40px 0;
	border-top: 1px solid var(--color-4);
	background: #fafbfd;
}
.ing-catsec__title {
	font-size: clamp(26px, 2.8vw, 38px);
	margin-bottom: 0;
}
.ing-catsec__lead {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--body-color);
	max-width: 66ch;
}
.ing-catgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 26px;
}
.ing-cat {
	border: 1.5px solid var(--color-4);
	border-radius: 14px;
	background: var(--bg-white);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .2s;
}
.ing-cat:hover {
	border-color: var(--c);
}
.ing-cat__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: color-mix(in srgb, var(--c) 9%, #fff);
	border-bottom: 1.5px solid var(--color-4);
}
.ing-cat__icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--c);
	color: #fff;
	flex: none;
	display: grid;
	place-items: center;
	font-size: 17px;
}
.ing-cat__key {
	display: block;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--c);
}
.ing-cat__name {
	display: block;
	margin-top: 0;
	font-family: var(--heading-font);
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--text-heading-color);
}
.ing-cat__tag {
	margin-left: auto;
	text-align: right;
	max-width: 30ch;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--c);
}
.ing-cat__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 8px;
	padding: 14px 16px 12px;
}
.ing-cchip2 {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1.5px solid var(--color-4);
	border-radius: 8px;
	padding: 6px 10px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--body-color);
	background: var(--bg-white);
}
.ing-cchip2--road {
	border-style: dashed;
	color: var(--faint-color, #8a94a6);
}
.ing-cchip2--more {
	color: #1D4ED8;
	background: #F4F8FE;
	border-color: #D6E3F8;
}

/* real connector logo tiles — used in the flow stage, the ticker,
   category chip rows and the payroll band. Dashed + faded marks
   anything still on the roadmap, matching the live/roadmap split
   used throughout the connector data. */
.ing-lgo {
	position: relative;
	width: 50px;
	height: 50px;
	flex: none;
	border: 1.5px solid var(--color-4);
	border-radius: 14px;
	background: var(--bg-white);
	display: grid;
	place-items: center;
	transition: transform .18s, border-color .18s;
}
.ing-lgo:hover {
	transform: translateY(-3px);
}
.ing-lgo img {
	width: 27px;
	height: 27px;
	object-fit: contain;
	border-radius: 6px;
}
.ing-lgo--sm {
	width: 42px;
	height: 42px;
	border-radius: 12px;
}
.ing-lgo--sm img {
	width: 23px;
	height: 23px;
}
.ing-lgo--road {
	border-style: dashed;
	background: #fcfdfe;
}
.ing-lgo--road img {
	opacity: .55;
	filter: saturate(.6);
}
.ing-cat__note {
	margin: 0 16px 12px;
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--color-4);
	border-radius: 999px;
	padding: 1px 10px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-heading-color);
	background: #f6f8fb;
	width: fit-content;
}
.ing-cat__duo {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	border-top: 1px solid var(--color-4);
	flex: 1;
	margin-top: 6px;
}
.ing-cat__in,
.ing-cat__out {
	padding: 13px 16px;
}
.ing-cat__in {
	border-right: 1px solid var(--color-4);
	background: #fbfcfe;
}
.ing-cat__dk {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--faint-color, #8a94a6);
}
.ing-cat__in ul,
.ing-cat__out ul {
	list-style: none;
	margin-top: 9px;
	padding: 0;
}
.ing-cat__in li {
	padding: 4px 0 4px 14px;
	position: relative;
	font-size: 12.5px;
	color: var(--body-color);
	line-height: 1.45;
}
.ing-cat__in li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--c);
	opacity: .55;
}
.ing-cat__out li {
	padding: 4px 0 4px 16px;
	position: relative;
	font-size: 12.5px;
	color: var(--body-color);
	line-height: 1.5;
}
.ing-cat__out li::before {
	content: "\2014";
	position: absolute;
	left: 0;
	color: var(--c);
	font-weight: 700;
}
.ing-cat__out li b {
	color: var(--text-heading-color);
	font-weight: 600;
}
@media (max-width: 1020px) {
	.ing-catgrid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.ing-cat__duo { grid-template-columns: 1fr; }
	.ing-cat__in { border-right: 0; border-bottom: 1px solid var(--color-4); }
}

/* ---------- honesty strip ---------- */
.ing-honest {
	margin-top: 20px;
	border: 1.5px dashed var(--color-4);
	border-radius: 14px;
	padding: 18px 22px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #f6f8fb;
}
.ing-honest__icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #047857;
	color: #fff;
	flex: none;
	display: grid;
	place-items: center;
	font-size: 15px;
}
.ing-honest p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--body-color);
}
.ing-honest p strong {
	color: var(--text-heading-color);
	font-weight: 600;
}

/* ============================================================
   Integrations page — payroll band
   ============================================================ */
.ing-payband-sec {
	padding: 40px 0;
	border-top: 1px solid var(--color-4);
}
.ing-payband-sec__title {
	font-size: clamp(26px, 2.8vw, 38px);
	margin-bottom: 0;
}
.ing-payband-sec__lead {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--body-color);
	max-width: 66ch;
}
.ing-payband-sec__lead strong {
	color: var(--text-heading-color);
	font-weight: 600;
}
.ing-payband {
	margin-top: 26px;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 30px;
	align-items: center;
	border: 1.5px solid var(--color-4);
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(90deg, #F4F8FE, #fff 40%);
}
.ing-payband__num {
	padding: 26px 0 26px 28px;
}
.ing-payband__val {
	font-family: "Space Grotesk", sans-serif;
	font-size: 56px;
	font-weight: 700;
	letter-spacing: -.05em;
	color: #1D4ED8;
	line-height: 1;
}
.ing-payband__key {
	margin-top: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--faint-color, #8a94a6);
	max-width: 24ch;
}
.ing-payband__key img {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	flex: none;
}
.ing-payband__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 22px 26px 26px 0;
}
@media (max-width: 900px) {
	.ing-payband { grid-template-columns: 1fr; }
	.ing-payband__num { padding: 22px 22px 0; }
	.ing-payband__chips { padding: 16px 22px 22px; }
}

/* ============================================================
   Integrations page — philosophy
   ============================================================ */
.ing-philo {
	padding: 40px 0;
	border-top: 1px solid var(--color-4);
	text-align: center;
}
.ing-philo__title {
	font-size: clamp(26px, 2.8vw, 34px);
	margin-bottom: 0;
}
.ing-philo__lead {
	margin: 12px auto 0;
	font-size: 15px;
	color: var(--body-color);
}
.ing-philo__pline {
	margin: 18px auto 0;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	border: 1.5px solid var(--color-4);
	border-radius: 12px;
	overflow: hidden;
}
.ing-philo__pline span {
	padding: 13px 20px;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--body-color);
}
.ing-philo__pline span + span {
	border-left: 1px solid var(--color-4);
}
.ing-philo__pline strong {
	color: var(--text-heading-color);
}
.ing-philo__win {
	background: #F1FAF5;
	color: #047857;
	font-weight: 700;
}

/* ============================================================
   Integrations page — centered CTA variant
   ============================================================ */
.ing-cta2--centered {
	padding: 30px 0 90px;
}
.ing-cta2__in--centered {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 48px 40px;
}
.ing-cta2__in--centered .ing-cta2__lead {
	margin: 0 auto 28px;
}
.ing-cta2__in--centered .ing-cta2__buttons {
	justify-content: center;
}

/* ============================================================
   Footer — light version, restyled to match the rest of the
   site's design language (mono-uppercase labels, quiet borders,
   tighter link list) instead of the template's default dark
   navy footer with oversized generic widget styling.
   ============================================================ */
.footer__two {
	background: var(--bg-white);
	border-top: 1px solid var(--color-4);
	padding-top: 64px;
}
.footer__two-widget-about p {
	color: var(--body-color);
	font-size: 15px;
	line-height: 1.65;
	max-width: 34ch;
}
.footer__two-widget h4 {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-heading-color);
	margin-bottom: 22px;
}
.footer__two-widget-about-location-item {
	margin-bottom: 0;
}
.footer__two-widget-about-location-item-icon i {
	width: 38px;
	height: 38px;
	font-size: 16px;
}
.footer__two-widget-about-location-item-info span {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--faint-color, #8a94a6);
	margin-bottom: 0;
}
.footer__two-widget-about-location-item-info a {
	color: var(--text-heading-color);
	font-size: 15px;
}
.footer__two-widget-about-location-item-info a:hover {
	color: var(--primary-color-1);
}
.footer__two-widget-solution ul li {
	margin-bottom: 12px;
}
.footer__two-widget-solution ul li a {
	color: var(--body-color);
	font-size: 15px;
	transition: .25s;
}
.footer__two-widget-solution ul li a i {
	font-size: 10px;
	margin-right: 8px;
	opacity: .7;
}
.footer__two-widget-solution ul li a:hover {
	color: var(--primary-color-1);
	padding-left: 6px;
}
.footer__two-widget-subscribe p {
	color: var(--body-color);
	font-size: 15px;
	line-height: 1.6;
	max-width: 28ch;
}
.copyright__one-container-area {
	background-color: var(--bg-white);
	border: none;
	border-top: 1px solid var(--color-4);
	border-radius: 0;
	margin-top: 50px;
	padding: 22px 0;
}
.copyright__one-left,
.copyright__one-right {
	color: var(--faint-color, #8a94a6);
}
.copyright__one-left p,
.copyright__one-right {
	font-size: 13.5px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	letter-spacing: .02em;
}

/* Platform hero — browser-window mockup (right column): Bookkeeper's
   AI Invoice Inbox, showing what "AI codes it" actually looks like. */
.ing-appwin {
	position: relative;
	border: 1px solid var(--color-4);
	border-radius: 16px;
	background: var(--bg-white);
	box-shadow: 0 25px 55px rgba(11, 18, 32, .1);
	overflow: hidden;
}
.ing-appwin__illus {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 2;
	color: var(--faint-color, #8a94a6);
	border: 1px solid var(--color-4);
	background: var(--bg-white);
	border-radius: 6px;
	padding: 2px 7px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 8.5px;
	letter-spacing: .06em;
}
.ing-appwin__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: #F6F8FB;
	border-bottom: 1px solid var(--color-4);
}
.ing-appwin__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #D8DEE8;
	flex: none;
}
.ing-appwin__url {
	margin: 0 auto;
	max-width: calc(100% - 100px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11.5px;
	color: var(--faint-color, #8a94a6);
	background: var(--bg-white);
	border: 1px solid var(--color-4);
	border-radius: 999px;
	padding: 3px 16px;
}
.ing-appwin__body {
	display: grid;
	grid-template-columns: 150px 1fr;
}
.ing-appwin__side {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 8px;
	border-right: 1px solid var(--color-4);
	background: #FAFBFD;
}
.ing-appwin__wsitem {
	position: relative;
	padding: 7px 6px 7px 18px;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--body-color);
	border-radius: 7px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ing-appwin__wsitem::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--c);
}
.ing-appwin__wsitem--on {
	background: #EEF0FF;
	color: var(--text-heading-color);
	font-weight: 700;
}
.ing-appwin__main {
	padding: 16px 18px;
	min-width: 0;
}
.ing-appwin__mhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.ing-appwin__mtitle {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--faint-color, #8a94a6);
}
.ing-appwin__mbadge {
	flex: none;
	white-space: nowrap;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #4338CA;
	background: #EEF0FF;
	border-radius: 999px;
	padding: 4px 12px;
}
.ing-appwin__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--color-4);
	font-size: 13px;
}
.ing-appwin__row span {
	color: var(--body-color);
}
.ing-appwin__row b {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	color: var(--text-heading-color);
	flex: none;
}
.ing-appwin__balanced {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	padding: 9px 12px;
	border-radius: 10px;
	background: #F1FAF5;
}
.ing-appwin__balanced span {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	font-weight: 600;
	color: #047857;
}
.ing-appwin__balanced b {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #047857;
}
.ing-appwin__tags {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}
.ing-appwin__tags span {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	padding: 5px 9px;
	border-radius: 6px;
	background: #F1FAF5;
	color: #047857;
}
.ing-appwin__tags span.ing-appwin__tags--faint {
	background: #F6F8FB;
	color: var(--faint-color, #8a94a6);
}
@media (max-width: 480px) {
	.ing-appwin__body {
		grid-template-columns: 1fr;
	}
	.ing-appwin__side {
		flex-direction: row;
		flex-wrap: wrap;
		border-right: 0;
		border-bottom: 1px solid var(--color-4);
	}
	.ing-appwin__illus {
		display: none;
	}
}

/* Platform page — seventeen workspaces grid */
.ing-wssec {
	padding: 40px 0 56px;
	border-top: 1px solid var(--color-4);
}
.ing-wssec__title {
	font-size: clamp(26px, 2.8vw, 38px);
	margin-bottom: 0;
}
.ing-wssec__lead {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--body-color);
	max-width: 66ch;
}
.ing-wscard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 14px;
	margin-top: 24px;
}
.ing-wscard {
	border: 1.5px solid var(--color-4);
	border-radius: 16px;
	background: var(--bg-white);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .2s, border-color .2s;
}
.ing-wscard:hover {
	transform: translateY(-4px);
	border-color: var(--c);
}
.ing-wscard__top {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 16px;
	background: color-mix(in srgb, var(--c) 10%, #fff);
	border-bottom: 1.5px solid var(--color-4);
}
.ing-wscard__icon {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: var(--c);
	flex: none;
	display: grid;
	place-items: center;
	transition: transform .25s;
}
.ing-wscard:hover .ing-wscard__icon {
	transform: scale(1.08) rotate(-3deg);
}
.ing-wscard__icon svg {
	width: 27px;
	height: 27px;
	stroke: #fff;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ing-wscard__name {
	display: block;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--text-heading-color);
}
.ing-wscard__ct {
	margin-top: 0;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 14px;
	font-weight: 500;
	color: var(--c);
}
.ing-wscard__desc {
	padding: 12px 15px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--body-color);
	flex: 1;
}
.ing-wscard__ai {
	margin: 0 15px 13px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 10%, #fff);
	border-radius: 999px;
	padding: 1px 10px;
}

/* ============================================================
   AI page — centered hero + typed headline
   ============================================================ */
.ing-inthero__content--center {
	text-align: center;
}
.ing-inthero__content--center h1 {
	margin-left: auto;
	margin-right: auto;
	max-width: 20ch;
}
.ing-inthero__content--center .ing-inthero__sub {
	margin-left: auto;
	margin-right: auto;
}
.ing-inthero__content--center .ing-inthero__cta {
	justify-content: center;
}
.ing-typedwrap {
	display: block;
	min-height: 2.3em;
}
.ing-typed {
	border-right: 3px solid #4338CA;
	padding-right: 4px;
	animation: ing-caret 1s step-end infinite;
}
@keyframes ing-caret {
	50% { border-color: transparent; }
}

/* AI page — Right Now board */
.ing-now {
	padding: 40px 0;
	border-top: 1px solid var(--color-4);
}
.ing-now__title {
	font-size: clamp(26px, 2.8vw, 38px);
	margin-bottom: 0;
}
.ing-now__lead {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--body-color);
	max-width: 74ch;
}
.ing-nowbar {
	margin-top: 22px;
	border: 1.5px solid var(--color-4);
	border-radius: 14px;
	overflow: hidden;
	background: var(--bg-white);
}
.ing-nowbar__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	flex-wrap: wrap;
	background: linear-gradient(90deg, #F0FAFC, #F3F2FC);
	border-bottom: 1px solid var(--color-4);
}
.ing-nowbar__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11px;
	font-weight: 700;
	color: #047857;
}
.ing-nowbar__live i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #047857;
	animation: ing-pulse 1.6s ease-in-out infinite;
}
.ing-nowbar__clock {
	font-family: "Space Grotesk", sans-serif;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--text-heading-color);
}
.ing-nowbar__clock small {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	font-weight: 600;
	color: var(--faint-color, #8a94a6);
	margin-left: 8px;
	letter-spacing: .06em;
}
.ing-nowbar__phase {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--pc, #4338CA);
}
.ing-nowbar__phase i {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--pc, #4338CA);
}
.ing-nowbar__cols {
	display: grid;
	grid-template-columns: 1fr 1.15fr 1fr;
	background: var(--bg-white);
}
.ing-nowcol {
	padding: 14px 16px;
	border-right: 1px solid var(--color-4);
	min-height: 200px;
}
.ing-nowcol:last-child {
	border-right: 0;
}
.ing-nowcol__h {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-4);
	margin-bottom: 6px;
}
.ing-nowcol--done .ing-nowcol__h {
	color: #047857;
}
.ing-nowcol--next .ing-nowcol__h {
	color: #1D4ED8;
}
.ing-nowev {
	display: flex;
	gap: 10px;
	padding: 8px 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--body-color);
	border-bottom: 1px dashed var(--color-4);
	align-items: baseline;
}
.ing-nowev:last-child {
	border-bottom: 0;
}
.ing-nowev__t {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11px;
	font-weight: 600;
	color: var(--faint-color, #8a94a6);
	flex: none;
	width: 64px;
}
.ing-nowev__d {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background: var(--c);
	align-self: center;
}
.ing-nowev--past {
	color: var(--faint-color, #8a94a6);
}
.ing-nowev--past .ing-nowev__chk {
	color: #047857;
	font-weight: 700;
	flex: none;
}
.ing-nowev__cd {
	margin-left: auto;
	flex: none;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	color: #1D4ED8;
	background: #EEF3FC;
	border-radius: 5px;
	padding: 4px 7px;
	align-self: center;
	white-space: nowrap;
}
.ing-nownow {
	border: 2px solid var(--pc, #4338CA);
	border-radius: 12px;
	margin-top: 8px;
	padding: 14px 15px;
	transition: border-color .4s;
	background: color-mix(in srgb, var(--pc, #4338CA) 6%, #fff);
}
.ing-nownow__k {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--pc, #4338CA);
}
.ing-nownow__k i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pc, #4338CA);
	animation: ing-pulse 1.4s ease-in-out infinite;
}
.ing-nownow h3 {
	font-size: 18px;
	margin-top: 8px;
	letter-spacing: -.02em;
}
.ing-nownow p {
	margin-top: 6px;
	font-size: 13px;
	color: var(--body-color);
	line-height: 1.55;
}
.ing-nownow__foot {
	margin-top: 11px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11px;
	font-weight: 600;
	color: var(--pc, #4338CA);
}
.ing-nowbar__foot {
	display: flex;
	gap: 16px;
	padding: 11px 16px;
	border-top: 1px solid var(--color-4);
	background: #F6F8FB;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	color: var(--body-color);
	flex-wrap: wrap;
}
.ing-nowbar__foot b {
	color: var(--text-heading-color);
}
.ing-nowbar__foot-right {
	margin-left: auto;
}
@media (max-width: 860px) {
	.ing-nowbar__cols { grid-template-columns: 1fr; }
	.ing-nowcol { border-right: 0; border-bottom: 1px solid var(--color-4); min-height: 0; }
	.ing-nowcol:last-child { border-bottom: 0; }
}

/* AI page — Zero Entry Machine */
.ing-zem {
	padding: 40px 0;
	border-top: 1px solid var(--color-4);
	background: #fafbfd;
}
.ing-zem__title {
	font-size: clamp(26px, 2.8vw, 38px);
	margin-bottom: 0;
}
.ing-zem__lead {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--body-color);
	max-width: 66ch;
}
.ing-zem__pick {
	margin-top: 22px;
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}
.ing-zem__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--color-4);
	background: var(--bg-white);
	border-radius: 999px;
	padding: 7px 14px 7px 7px;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--body-color);
	transition: .18s;
}
.ing-zem__chip-icon {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--c);
	display: grid;
	place-items: center;
	flex: none;
}
.ing-zem__chip-icon svg {
	width: 15px;
	height: 15px;
	stroke: #fff;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ing-zem__chip:hover {
	border-color: var(--c);
	color: var(--c);
}
.ing-zem__chip[aria-pressed="true"] {
	background: var(--c);
	border-color: var(--c);
	color: #fff;
}
.ing-zem__grid {
	margin-top: 20px;
	display: grid;
	grid-template-columns: 1.12fr .88fr;
	gap: 14px;
	align-items: stretch;
}
.ing-zem__console {
	border: 1.5px solid var(--color-4);
	border-radius: 14px;
	overflow: hidden;
	background: var(--bg-white);
}
.ing-zem__chd {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 15px;
	border-bottom: 1px solid var(--color-4);
	background: color-mix(in srgb, var(--mc, #4338CA) 8%, #fff);
}
.ing-zem__chd-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--mc);
	display: grid;
	place-items: center;
	flex: none;
}
.ing-zem__chd-icon svg {
	width: 19px;
	height: 19px;
	stroke: #fff;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ing-zem__chd-name {
	font-family: "Space Grotesk", sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.02em;
}
.ing-zem__chd-task {
	margin-left: auto;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--mc);
}
.ing-zem__step {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 12px 15px;
	border-bottom: 1px solid #F1F4F8;
	transition: background .3s;
}
.ing-zem__step:last-child {
	border-bottom: 0;
}
.ing-zem__step-dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid var(--color-4);
	display: grid;
	place-items: center;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	font-weight: 700;
	color: var(--faint-color, #8a94a6);
	transition: .3s;
}
.ing-zem__step-t1 {
	font-size: 14px;
	font-weight: 600;
	color: var(--faint-color, #8a94a6);
	transition: .3s;
}
.ing-zem__step-t2 {
	margin-top: 2px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11px;
	color: var(--faint-color, #8a94a6);
	opacity: 0;
	transition: .3s;
}
.ing-zem__step-badge {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .1em;
	padding: 5px 8px;
	border-radius: 5px;
	opacity: 0;
	transition: .3s;
}
.ing-zem__step--act {
	background: color-mix(in srgb, var(--mc) 6%, #fff);
}
.ing-zem__step--act .ing-zem__step-dot {
	border-color: var(--mc);
	border-style: dashed;
	animation: ing-spin2 1s linear infinite;
	color: var(--mc);
}
.ing-zem__step--act .ing-zem__step-t1 {
	color: var(--text-heading-color);
}
@keyframes ing-spin2 {
	to { transform: rotate(360deg); }
}
.ing-zem__step--done .ing-zem__step-dot {
	background: var(--mc);
	border-color: var(--mc);
	color: #fff;
}
.ing-zem__step--done .ing-zem__step-t1 {
	color: var(--text-heading-color);
}
.ing-zem__step--done .ing-zem__step-t2 {
	opacity: 1;
	color: var(--mc);
}
.ing-zem__step--done .ing-zem__step-badge {
	opacity: 1;
	background: color-mix(in srgb, var(--mc) 12%, #fff);
	color: var(--mc);
}
.ing-zem__panel {
	border: 1.5px solid var(--color-4);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: radial-gradient(400px 260px at 50% 0%, rgba(67, 56, 202, .07), transparent 70%), var(--bg-white);
}
.ing-zem__panelhead {
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-4);
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .2em;
	color: var(--faint-color, #8a94a6);
	display: flex;
	align-items: center;
	gap: 8px;
}
.ing-zem__panelhead i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #047857;
	animation: ing-pulse 1.6s ease-in-out infinite;
}
.ing-zem__zero {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-align: center;
}
.ing-zem__bignum {
	font-family: "Space Grotesk", sans-serif;
	font-size: clamp(72px, 8vw, 120px);
	line-height: .9;
	font-weight: 700;
	letter-spacing: -.06em;
	background: linear-gradient(92deg, #0891b2 0%, #1d4ed8 30%, #4338ca 60%, #be123c 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: transform .4s;
}
.ing-zem__bignum.is-bump {
	animation: ing-bump .4s ease;
}
@keyframes ing-bump {
	40% { transform: scale(1.06); }
}
.ing-zem__label {
	margin-top: 8px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .26em;
	color: var(--text-heading-color);
}
.ing-zem__sub {
	margin-top: 6px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11px;
	color: var(--faint-color, #8a94a6);
}
.ing-zem__nokeys {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--color-4);
	border-radius: 999px;
	padding: 7px 14px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	color: #BE123C;
}
.ing-zem__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--color-4);
}
.ing-zem__stats > div {
	padding: 13px 16px;
	text-align: center;
}
.ing-zem__stats > div + div {
	border-left: 1px solid var(--color-4);
}
.ing-zem__statval {
	font-family: "Space Grotesk", sans-serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.03em;
}
.ing-zem__statval--g { color: #047857; }
.ing-zem__statval--i { color: #4338CA; }
.ing-zem__statk {
	margin-top: 4px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--faint-color, #8a94a6);
}
@media (max-width: 900px) {
	.ing-zem__grid { grid-template-columns: 1fr; }
}

/* ---------- AI page hero · live action counter ---------- */
.ing-herolive {
	position: relative;
	border: 1px solid var(--color-4);
	border-radius: 16px;
	background: var(--bg-white);
	box-shadow: 0 30px 60px -34px rgba(15, 23, 42, .18);
	overflow: hidden;
}
.ing-herolive__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--color-4);
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--faint-color, #8a94a6);
}
.ing-herolive__head i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #047857;
	animation: ing-pulse 1.6s ease-in-out infinite;
}
.ing-herolive__zero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 30px 20px 22px;
}
.ing-herolive__bignum {
	font-family: "Space Grotesk", sans-serif;
	font-size: clamp(56px, 6vw, 84px);
	line-height: .9;
	font-weight: 700;
	letter-spacing: -.05em;
	background: linear-gradient(92deg, #0891b2 0%, #1d4ed8 30%, #4338ca 60%, #be123c 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: transform .4s;
}
.ing-herolive__bignum.is-bump {
	animation: ing-bump .4s ease;
}
.ing-herolive__label {
	margin-top: 8px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .22em;
	color: var(--text-heading-color);
}
.ing-herolive__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--color-4);
}
.ing-herolive__stats > div {
	padding: 14px 16px;
	text-align: center;
}
.ing-herolive__stats > div + div {
	border-left: 1px solid var(--color-4);
}
.ing-herolive__statval {
	font-family: "Space Grotesk", sans-serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.03em;
}
.ing-herolive__statval--i { color: #4338CA; }
.ing-herolive__statval--g { color: #047857; }
.ing-herolive__statk {
	margin-top: 4px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--faint-color, #8a94a6);
}
.ing-herolive__foot {
	padding: 12px 20px 16px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10.5px;
	color: var(--faint-color, #8a94a6);
	text-align: center;
	border-top: 1px solid var(--color-4);
}
@media (max-width: 480px) {
	.ing-herolive__bignum { font-size: 64px; }
}

/* AI page — Workspace Parade */
.ing-parade {
	padding: 40px 0;
	border-top: 1px solid var(--color-4);
}
.ing-parade__title {
	font-size: clamp(26px, 2.8vw, 38px);
	margin-bottom: 0;
}
.ing-parade__lead {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--body-color);
	max-width: 66ch;
}
.ing-parade__icons {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ing-parade__icon {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--bg-white);
	border: 2px solid var(--c);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: transform .2s;
	flex: none;
}
.ing-parade__icon svg {
	width: 24px;
	height: 24px;
	stroke: var(--c);
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .2s;
}
.ing-parade__icon:hover {
	transform: translateY(-3px);
}
.ing-parade__icon.is-live {
	background: var(--c);
	transform: scale(1.1);
}
.ing-parade__icon.is-live svg {
	stroke: #fff;
}
.ing-paradebox {
	margin-top: 22px;
	max-width: 700px;
	border: 2.5px solid var(--lc, #4338CA);
	border-radius: 18px;
	background: var(--bg-white);
	transition: border-color .4s;
	overflow: hidden;
}
.ing-paradebox__head {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 16px 20px;
	background: color-mix(in srgb, var(--lc, #4338CA) 10%, #fff);
	border-bottom: 2px solid var(--lc, #4338CA);
	transition: .4s;
}
.ing-paradebox__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--lc, #4338CA);
	display: grid;
	place-items: center;
	flex: none;
	transition: .4s;
}
.ing-paradebox__icon svg {
	width: 28px;
	height: 28px;
	stroke: #fff;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ing-paradebox__nm {
	min-width: 0;
}
.ing-paradebox__name {
	font-family: "Space Grotesk", sans-serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.03em;
}
.ing-paradebox__ct {
	margin-top: 4px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--lc, #4338CA);
	transition: .4s;
}
.ing-paradebox__badge {
	margin-left: auto;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	color: #047857;
}
.ing-paradebox__badge i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #047857;
	animation: ing-pulse 1.4s ease-in-out infinite;
}
.ing-paradebox__body {
	padding: 16px 20px 18px;
	min-height: 130px;
}
.ing-paradebox__body.is-fade {
	animation: ing-fadein .45s ease;
}
@keyframes ing-fadein {
	from { opacity: 0; transform: translateY(6px); }
}
.ing-paradebox__lin {
	font-family: "Space Grotesk", sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -.02em;
}
.ing-paradebox__ai {
	margin-top: 9px;
	font-size: 14px;
	color: var(--body-color);
	line-height: 1.6;
}
.ing-paradebox__who {
	margin-top: 9px;
	font-size: 13.5px;
	color: var(--body-color);
	line-height: 1.55;
}
.ing-paradebox__who b {
	color: var(--lc, #4338CA);
	font-weight: 600;
	transition: color .4s;
}
.ing-paradebox__prog {
	height: 4px;
	background: #F6F8FB;
}
.ing-paradebox__prog i {
	display: block;
	height: 100%;
	background: var(--lc, #4338CA);
	width: 0%;
}

/* AI page — Trust Console */
.ing-trust {
	padding: 40px 0 56px;
	border-top: 1px solid var(--color-4);
	background: #fafbfd;
}
.ing-trust__title {
	font-size: clamp(26px, 2.8vw, 38px);
	margin-bottom: 0;
}
.ing-trust__lead {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--body-color);
	max-width: 66ch;
}
.ing-tconsole {
	margin-top: 22px;
	border: 2px solid var(--color-4);
	border-radius: 14px;
	overflow: hidden;
	background: var(--bg-white);
}
.ing-tconsole__tabs {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1.5px solid var(--color-4);
	background: #F6F8FB;
}
.ing-tconsole__tab {
	flex: 1;
	min-width: 160px;
	border: 0;
	background: transparent;
	padding: 13px 14px;
	font-family: "Poppins", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--body-color);
	border-right: 1px solid var(--color-4);
	border-bottom: 3px solid transparent;
	transition: .18s;
	text-align: left;
	cursor: pointer;
}
.ing-tconsole__tab:last-child {
	border-right: 0;
}
.ing-tconsole__tab-k {
	display: block;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--c);
	margin-bottom: 5px;
}
.ing-tconsole__tab:hover {
	color: var(--text-heading-color);
	background: var(--bg-white);
}
.ing-tconsole__tab[aria-pressed="true"] {
	background: var(--bg-white);
	color: var(--text-heading-color);
	border-bottom-color: var(--c);
}
.ing-tconsole__stage {
	padding: 20px;
	min-height: 240px;
	position: relative;
}
.ing-tnote {
	font-size: 13.5px;
	color: var(--body-color);
	max-width: 52ch;
	line-height: 1.55;
}
.ing-tnote b {
	color: var(--text-heading-color);
	font-weight: 600;
}
.ing-tbtns {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
}
.ing-tbtn {
	border: 1.5px solid var(--text-heading-color);
	border-radius: 8px;
	background: var(--bg-white);
	padding: 9px 14px;
	font-family: "Poppins", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-heading-color);
	transition: .15s;
	cursor: pointer;
}
.ing-tbtn:hover {
	background: #F6F8FB;
}
.ing-tbtn--hot {
	border-color: #BE123C;
	color: #BE123C;
}
.ing-tbtn--hot:hover {
	background: #BE123C;
	color: #fff;
}
.ing-tbtn--good {
	border-color: #047857;
	color: #047857;
}
.ing-tbtn--good:hover {
	background: #047857;
	color: #fff;
}
.ing-tbtn:disabled {
	opacity: .35;
	pointer-events: none;
}
.ing-tled {
	margin-top: 14px;
	max-width: 460px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 13px;
}
.ing-tled__row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 2px;
	border-bottom: 1px dashed var(--color-4);
}
.ing-tled__row b {
	font-weight: 600;
}
.ing-tled__row--tot {
	border-bottom: 0;
	border-top: 2px solid var(--text-heading-color);
	margin-top: 2px;
	font-weight: 700;
}
.ing-tled__bad {
	color: #BE123C;
}
.ing-tstamp {
	position: absolute;
	right: 26px;
	top: 50%;
	transform: translateY(-50%) rotate(-7deg);
	border: 3px solid var(--sc);
	color: var(--sc);
	border-radius: 10px;
	padding: 10px 16px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .1em;
	text-align: center;
	animation: ing-stamp .35s cubic-bezier(.2, 1.6, .4, 1) both;
}
.ing-tstamp small {
	display: block;
	font-size: 9.5px;
	letter-spacing: .16em;
	margin-top: 4px;
	opacity: .75;
}
@keyframes ing-stamp {
	from { opacity: 0; transform: translateY(-50%) rotate(-7deg) scale(1.6); }
}
.ing-tchain {
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: wrap;
	margin-top: 16px;
}
.ing-tblk {
	border: 2px solid var(--color-4);
	border-radius: 9px;
	padding: 9px 12px;
	text-align: center;
	transition: .25s;
	background: var(--bg-white);
}
.ing-tblk__h {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	font-weight: 700;
}
.ing-tblk__l {
	margin-top: 4px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 9px;
	letter-spacing: .08em;
	color: var(--faint-color, #8a94a6);
}
.ing-tblk--tamper {
	border-color: #B45309;
	background: color-mix(in srgb, #B45309 10%, #fff);
}
.ing-tblk--newer {
	border-color: #047857;
	background: color-mix(in srgb, #047857 8%, #fff);
}
.ing-tchlink {
	width: 26px;
	height: 3px;
	background: var(--color-4);
	position: relative;
	transition: .25s;
}
.ing-tchlink--broken {
	background: repeating-linear-gradient(90deg, #BE123C 0 4px, transparent 4px 8px);
}
.ing-tdrill {
	margin-top: 14px;
}
.ing-tdstep {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font-family: "Poppins", sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	opacity: 0;
	transform: translateY(6px);
	transition: .35s;
}
.ing-tdstep.is-on {
	opacity: 1;
	transform: none;
}
.ing-tdstep__a {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 14px;
	font-weight: 700;
	color: var(--c2);
}
.ing-tdstep__v {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12px;
	font-weight: 600;
	color: var(--c2);
	margin-left: auto;
	background: color-mix(in srgb, var(--c2) 10%, #fff);
	border-radius: 5px;
	padding: 5px 8px;
}
.ing-tinv {
	margin-top: 14px;
	max-width: 470px;
	border: 1.5px solid var(--color-4);
	border-radius: 10px;
	padding: 12px 14px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 13px;
	line-height: 1.5;
	transition: .3s;
}
.ing-tinv + .ing-tinv {
	margin-top: 10px;
}
.ing-tinv.is-enter {
	animation: ing-fadein .45s ease;
}
.ing-tinv__h {
	display: flex;
	justify-content: space-between;
	font-weight: 600;
}
.ing-tinv__code {
	color: #4338CA;
	font-weight: 700;
}
.ing-ttag {
	float: right;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .12em;
	border-radius: 4px;
	padding: 4px 7px;
}
@media (max-width: 800px) {
	.ing-tstamp { position: static; transform: rotate(-4deg); display: inline-block; margin-top: 14px; }
	.ing-tconsole__tab { min-width: 46%; }
}

/* ============================================================
   Demo page — two-column "book a demo" hero, and Contact Form 7
   styling so its markup reads like the rest of the site's cards,
   labels and inputs instead of the plugin's bare default look.
   ============================================================ */
.ing-demo-founding {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid #CBE9D8;
	background: #F1FAF5;
	border-radius: 999px;
	padding: 8px 15px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #047857;
}
.ing-demo-founding i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #047857;
	animation: ing-pulse 1.4s ease-in-out infinite;
}
.ing-dsteps {
	margin-top: 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ing-dstep {
	display: flex;
	gap: 13px;
	border: 1.5px solid var(--color-4);
	border-radius: 14px;
	background: var(--bg-white);
	padding: 14px 16px;
}
.ing-dstep__n {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: var(--c);
	color: #fff;
	flex: none;
	display: grid;
	place-items: center;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-weight: 700;
	font-size: 13px;
}
.ing-dstep h4 {
	font-size: 14.5px;
	letter-spacing: -.01em;
	margin: 0;
}
.ing-dstep h4 small {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-weight: 700;
	font-size: 9px;
	letter-spacing: .12em;
	color: var(--c);
	margin-left: 8px;
}
.ing-dstep p {
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--body-color);
	line-height: 1.55;
}
.ing-dstep p strong {
	color: var(--text-heading-color);
}
.ing-demo-mgnote {
	margin-top: 14px;
	border: 1.5px dashed var(--color-4);
	border-radius: 12px;
	background: #F6F8FB;
	padding: 12px 16px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-weight: 600;
	font-size: 12px;
	line-height: 1.6;
	color: var(--body-color);
}
.ing-demo-mgnote strong {
	color: var(--primary-color-1);
}
.ing-demo-trustline {
	margin-top: 16px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--faint-color, #8a94a6);
	max-width: 52ch;
}

/* form card (Contact Form 7 output lives inside .ing-fcard) */
.ing-fcard {
	border: 1.5px solid var(--color-4);
	border-radius: 18px;
	background: var(--bg-white);
	padding: 22px 24px;
	box-shadow: 0 30px 60px -34px rgba(15, 23, 42, .18);
}
.ing-fh {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .18em;
	color: var(--faint-color, #8a94a6);
	padding-bottom: 14px;
	border-bottom: 1.5px solid var(--color-4);
	margin-bottom: 16px;
}
.ing-frow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.ing-f {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 13px;
}
.ing-f label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-heading-color);
}
.ing-f label small {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-weight: 500;
	font-size: 10px;
	color: var(--faint-color, #8a94a6);
	margin-left: 6px;
}
.ing-f input[type="text"],
.ing-f input[type="email"],
.ing-f input[type="tel"],
.ing-f select,
.ing-f textarea {
	border: 1.5px solid var(--color-4);
	border-radius: 10px;
	padding: 11px 13px;
	font-size: 14px;
	font-family: inherit;
	background: var(--bg-white);
	color: var(--text-heading-color);
	width: 100%;
	transition: .15s;
}
.ing-f textarea {
	min-height: 76px;
	resize: vertical;
	font-size: 13.5px;
	line-height: 1.5;
}
.ing-f input:focus,
.ing-f select:focus,
.ing-f textarea:focus {
	outline: none;
	border-color: var(--primary-color-1);
}
.ing-f input.wpcf7-not-valid,
.ing-f select.wpcf7-not-valid {
	border-color: #BE123C;
}
.ing-f .wpcf7-not-valid-tip {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 11px;
	color: #BE123C;
	margin-top: 4px;
}
/* CF7 radio / checkbox groups rendered as chip buttons */
.ing-f .wpcf7-radio,
.ing-f .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ing-f .wpcf7-list-item {
	margin: 0;
}
.ing-f .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--color-4);
	border-radius: 10px;
	background: var(--bg-white);
	padding: 10px 15px;
	font-size: 13px;
	font-weight: 600;
	color: var(--body-color);
	cursor: pointer;
	transition: .15s;
}
.ing-f .wpcf7-list-item label:hover {
	border-color: var(--primary-color-1);
}
.ing-f .wpcf7-list-item input[type="radio"],
.ing-f .wpcf7-list-item input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.ing-f .wpcf7-list-item label:has(input:checked) {
	border-color: var(--primary-color-1);
	background: #EEF3FC;
	color: var(--text-heading-color);
}
.ing-fcard input.btn-two[type="submit"] {
	width: 100%;
	justify-content: center;
	text-align: center;
	font-size: 15px;
	padding: 15px;
	margin-top: 4px;
}
.ing-consent {
	margin-top: 11px;
	text-align: center;
	font-size: 11px;
	line-height: 1.6;
	color: var(--faint-color, #8a94a6);
}
.ing-consent a {
	text-decoration: underline;
}
.ing-fcard .wpcf7-spinner {
	display: block;
	margin: 8px auto 0;
}
.ing-fcard .wpcf7-response-output {
	margin: 12px 0 0 !important;
	border-radius: 10px !important;
	font-size: 12.5px !important;
}

/* success state, swapped in for .ing-fcard once CF7 fires wpcf7mailsent */
.ing-done2 {
	display: none;
	border: 2px solid #047857;
	border-radius: 16px;
	background: #F7FCF9;
	padding: 34px 30px;
	text-align: center;
}
.ing-done2.is-show {
	display: block;
}
.ing-done2__ic {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #047857;
	margin: 0 auto;
	display: grid;
	place-items: center;
}
.ing-done2__ic svg {
	width: 32px;
	height: 32px;
	stroke: #fff;
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ing-done2 h2 {
	color: #047857;
	margin-top: 14px;
}
.ing-done2 p {
	margin: 10px auto 0;
	font-size: 14.5px;
	color: var(--body-color);
	max-width: 46ch;
	line-height: 1.6;
}
.ing-done2 p strong {
	color: var(--text-heading-color);
}
@media (max-width: 767px) {
	.ing-frow { grid-template-columns: 1fr; }
}

/* ============================================================
   404 page
   ============================================================ */
.ing-404__num {
	font-family: "Space Grotesk", sans-serif;
	font-size: clamp(90px, 14vw, 160px);
	line-height: .9;
	font-weight: 700;
	letter-spacing: -.06em;
	background: linear-gradient(92deg, #0891b2 0%, #1d4ed8 30%, #4338ca 60%, #be123c 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-top: 18px;
}
.ing-404__links {
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var(--color-4);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 22px;
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .04em;
}
.ing-404__links a {
	color: var(--body-color);
	transition: .2s;
}
.ing-404__links a:hover {
	color: var(--primary-color-1);
}