/* ==========================================================================
   TheCodeWork — Products: the ERPKaro hero
   Drawn 16 September 2026 from Ashish's mockup. Scoped under .ek. Plain CSS
   loaded on the products page only, on the same terms as the contact page.
   Sizes are in px: the theme's html font-size changes at md, so rem drifts.

   ERPKaro's own palette, from erpkaro.com: brand #5d3996, strong #4d3280,
   soft #ece6f7, tint #f5f3fb. The page's ink is the product's near-black.

   Contents
     1. Tokens and the ground
     2. The top row: copy and the dashboard
     3. The bottom row: the steps, the detail and the analytics aside
     4. Notes in the margins
     5. Narrow screens
   ========================================================================== */


/* ==========================================================================
   1. Tokens and the ground
   ========================================================================== */

.ek {
	--ek-brand: #5d3996;
	--ek-strong: #4d3280;
	--ek-soft: #ece6f7;
	--ek-tint: #f5f3fb;
	--ek-ground: #f8f6fd;
	--ek-line: #dcd2f0;
	--ek-line-2: #c9bbe6;
	--ek-ink: #1b1638;
	--ek-ink-2: #4b4566;
	--ek-ink-3: #6b6486;
	--ek-ink-4: #a39cb8;
	--ek-note: #7a5bb0;
	--ek-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--ek-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
	--ek-content: var(--tcw-content, 1280px);
	--ek-pad: var(--tcw-gutter, 24px);
	--ek-shadow: 0 2px 6px rgba(27, 22, 56, 0.05), 0 34px 70px -34px rgba(93, 57, 150, 0.38);
	--ek-t: 200ms;
	--ek-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

	position: relative;
	overflow: hidden;
	padding-bottom: clamp(48px, 5vw, 76px);
	background:
		linear-gradient(rgba(93, 57, 150, 0.06) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(93, 57, 150, 0.06) 1px, transparent 1px) 0 0 / 56px 56px,
		radial-gradient(900px 520px at 78% 0%, rgba(93, 57, 150, 0.10), transparent 70%),
		var(--ek-ground);
	color: var(--ek-ink);
	font-family: var(--ek-font);
	-webkit-font-smoothing: antialiased;
}

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

/* No top padding of its own: the air under the header is the site's, set once by .tcw-bleed-top
   in site-header.css, so this hero starts where the homepage and every other page's does. */

.ek__shell {
	position: relative;
	width: 100%;
	max-width: calc(var(--ek-content) + (var(--ek-pad) * 2));
	margin-inline: auto;
	padding-inline: var(--ek-pad);
}


/* ==========================================================================
   2. The top row: copy and the dashboard
   ========================================================================== */

.ek__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

@media (min-width: 1024px) {
	.ek__top {
		grid-template-columns: minmax(0, 432px) minmax(0, 1fr);
		column-gap: clamp(24px, 3vw, 44px);
	}
}

.ek__badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 4px 0 0;
	padding: 7px 15px;
	border: 1px solid var(--ek-line);
	border-radius: 999px;
	background: var(--ek-soft);
	color: var(--ek-brand);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ek__badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ek-brand);
	animation: ek-pulse 2s ease-in-out infinite;
}

@keyframes ek-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}

.ek__logo {
	margin: 18px 0 0;
}

.ek__logo img {
	display: block;
	width: 232px;
	height: auto;
}

.ek__title {
	margin: 16px 0 0;
	font-size: clamp(28px, 2.45vw, 35px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--ek-ink);
}

.ek__lead {
	max-width: 46ch;
	margin: 12px 0 0;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--ek-ink-3);
}

.ek__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.ek .ek__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 42px;
	padding: 0 22px;
	border: 1px solid var(--ek-brand);
	border-radius: 8px;
	background: var(--ek-brand);
	color: #ffffff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: background var(--ek-t) var(--ek-ease), border-color var(--ek-t) var(--ek-ease), color var(--ek-t) var(--ek-ease), box-shadow var(--ek-t) var(--ek-ease);
}

.ek .ek__btn:hover {
	background: var(--ek-strong);
	border-color: var(--ek-strong);
	color: #ffffff;
	box-shadow: 0 10px 24px -12px rgba(93, 57, 150, 0.6);
}

.ek .ek__btn--ghost {
	background: #ffffff;
	border-color: var(--ek-line-2);
	color: var(--ek-brand);
}

.ek .ek__btn--ghost:hover {
	background: var(--ek-tint);
	border-color: var(--ek-brand);
	color: var(--ek-strong);
	box-shadow: none;
}

.ek__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 0;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.ek__stat {
	padding-right: 14px;
	margin-right: 14px;
	border-right: 1px solid var(--ek-line);
	white-space: nowrap;
}

.ek__stat:last-child {
	padding-right: 0;
	margin-right: 0;
	border-right: 0;
}

.ek__stat strong {
	display: block;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--ek-brand);
}

.ek__stat span {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	color: var(--ek-ink-3);
}

/* The dashboard, in a white frame. */
.ek__shot {
	position: relative;
}

.ek__frame,
.ek__mini {
	margin: 0;
	padding: 6px;
	border: 1px solid #e6e0f3;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: var(--ek-shadow);
}

.ek__frame img,
.ek__mini img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 11px;
}

.ek__mini {
	padding: 4px;
	border-radius: 12px;
}

.ek__mini img {
	border-radius: 8px;
}

/* Until the screenshot file is there: a quiet framed panel, not a broken image. */
.ek__empty {
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: 1960 / 1080;
	overflow: hidden;
	border-radius: 11px;
	background:
		linear-gradient(rgba(93, 57, 150, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, rgba(93, 57, 150, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(180deg, #faf8ff, #f1ecfa);
}

.ek__mini .ek__empty {
	border-radius: 8px;
}

.ek__empty-bar {
	display: flex;
	gap: 6px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--ek-line);
	background: #ffffff;
}

.ek__empty-bar i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ek-line);
}

.ek__empty-label {
	margin: auto;
	padding: 8px 14px;
	border: 1px dashed var(--ek-line-2);
	border-radius: 999px;
	color: var(--ek-ink-4);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ek__mini .ek__empty-bar {
	padding: 7px 9px;
}

.ek__mini .ek__empty-bar i {
	width: 6px;
	height: 6px;
}

.ek__mini .ek__empty-label {
	padding: 5px 10px;
	font-size: 9.5px;
}


/* ==========================================================================
   3. The bottom row: the steps, the detail and the analytics aside
   ========================================================================== */

/* The bottom row. Between 1024px and 1280px the steps take a row of their
   own with the detail and the aside beneath; from 1280px all of it sits on
   one line, as drawn. The row starts 44px under the dashboard, which is
   what the dashed lead from the lit step is drawn to reach. */
.ek__bottom {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	margin-top: 44px;
}

@media (min-width: 1024px) {
	/* Aligned to the top, not the middle: the analytics card is the tallest
	   thing in the row and may hang below it, but the steps must stay where
	   the dashed lead can reach the dashboard. */
	.ek__bottom {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 36px 40px;
		align-items: start;
	}

	.ek__detail {
		padding-top: 6px;
	}

	.ek__steps {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1280px) {
	.ek__bottom {
		grid-template-columns: auto 1px minmax(0, 1fr) 290px;
		column-gap: 28px;
	}

	.ek__steps {
		grid-column: auto;
	}
}

/* The strip of steps, joined by a line behind the nodes. */
.ek__steps {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1024px) {
	.ek__steps {
		flex-wrap: nowrap;
		gap: 0 20px;
	}

	.ek__steps::before {
		content: "";
		position: absolute;
		top: 24px;
		left: 46px;
		right: 46px;
		height: 2px;
		background: var(--ek-line);
	}
}

.ek__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 92px;
	text-align: center;
}

.ek__node {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--ek-line);
	border-radius: 50%;
	background: #ffffff;
	color: var(--ek-brand);
	box-shadow: 0 1px 2px rgba(27, 22, 56, 0.05);
	transition: border-color var(--ek-t) var(--ek-ease), box-shadow var(--ek-t) var(--ek-ease);
}

.ek__node svg {
	width: 22px;
	height: 22px;
}

.ek__step-label {
	font-size: 13.5px;
	line-height: 1.25;
	color: var(--ek-ink-2);
}

.ek__step--active .ek__node {
	border-color: var(--ek-brand);
	background: var(--ek-brand);
	color: #ffffff;
	box-shadow: 0 0 0 8px rgba(93, 57, 150, 0.12), 0 12px 24px -12px rgba(93, 57, 150, 0.7);
}

.ek__step--active .ek__step-label {
	font-weight: 700;
	color: var(--ek-brand);
}

/* The dashed lead from the lit step up to the dashboard's foot. */
.ek__lead-line {
	display: none;
}

@media (min-width: 1024px) {
	.ek__lead-line {
		position: absolute;
		bottom: calc(100% - 24px);
		left: 50%;
		display: block;
		overflow: visible;
		pointer-events: none;
	}

	.ek__lead-line path {
		fill: none;
		stroke: var(--ek-brand);
		stroke-width: 2;
		stroke-dasharray: 6 6;
		stroke-linecap: round;
	}

	.ek__lead-line circle {
		fill: var(--ek-brand);
	}
}

.ek__divider {
	display: none;
}

@media (min-width: 1024px) {
	.ek__divider {
		display: none;
	}
}

@media (min-width: 1280px) {
	.ek__divider {
		display: block;
		width: 1px;
		height: 96px;
		background: var(--ek-line);
	}
}

.ek__detail-title {
	max-width: 30ch;
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--ek-ink);
}

.ek__detail-text {
	max-width: 40ch;
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ek-ink-3);
}

.ek__aside {
	position: relative;
}

.ek .ek__aside-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	color: var(--ek-ink);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.ek .ek__aside-link svg {
	transition: transform var(--ek-t) var(--ek-ease);
}

.ek .ek__aside-link:hover {
	color: var(--ek-brand);
}

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


/* ==========================================================================
   4. Notes in the margins
   ==========================================================================
   Handwritten asides and the stacked "ready" mark, as on the drawing. They
   are decoration: aria-hidden, and nothing they say is said only there. The
   note over the dashboard sits in the air above its top-right corner, which
   every two-column layout has. The other two live in the space outside the
   content measure, so they appear only where that space exists: from 1560px
   up, when the margin beside the content is wide enough to hold them.
   ========================================================================== */

.ek__note,
.ek__ready {
	display: none;
}

@media (min-width: 1024px) {
	.ek__note {
		position: absolute;
		display: block;
		margin: 0;
		font-family: var(--ek-hand);
		font-size: 22px;
		font-weight: 500;
		line-height: 1.05;
		color: var(--ek-note);
		white-space: nowrap;
		pointer-events: none;
	}

	.ek__note-arrow {
		display: block;
		margin-top: 2px;
	}

	.ek__note--top {
		top: -58px;
		right: 8px;
		display: flex;
		align-items: flex-start;
		gap: 6px;
		transform: rotate(-8deg);
	}

	.ek__note--top .ek__note-arrow {
		margin-top: 18px;
	}

	.ek__note--side {
		display: none;
	}
}

@media (min-width: 1560px) {
	.ek__note--side {
		top: 44px;
		left: calc(100% + 22px);
		transform: rotate(-8deg);
	}

	.ek__note--side .ek__note-arrow {
		margin-left: -14px;
	}

	.ek__ready {
		position: absolute;
		bottom: 4px;
		left: calc(100% + 30px);
		display: block;
		margin: 0;
		color: var(--ek-ink-4);
		font-size: 11px;
		font-weight: 600;
		line-height: 1.85;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		white-space: nowrap;
		pointer-events: none;
	}
}


/* ==========================================================================
   5. Narrow screens
   ========================================================================== */

@media (max-width: 1023px) {
	.ek__shot {
		max-width: 860px;
	}

	.ek__steps::before {
		display: none;
	}
}

@media (max-width: 560px) {
	.ek__title {
		max-width: none;
	}

	.ek .ek__btn {
		width: 100%;
	}

	.ek__stat {
		padding-right: 16px;
		margin-right: 16px;
	}

	.ek__step {
		width: calc(50% - 14px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ek__badge-dot {
		animation: none;
	}
}