/* ============================================================
   EFTA Design System — v2.0
   ------------------------------------------------------------
   Drop this stylesheet into any EFTA web application.

   Requires:
   - Tailwind CSS (config block lives in design-guidelines.md)
   - Lucide icons:
       <script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
   - Google fonts:
       <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
   ============================================================ */

:root {
	--efta-navy: #0d2134;
	--efta-medium-blue: #284c92;
	--efta-sky-blue: #5082bc;
	--efta-light-blue: #8fbdea;
	--efta-pale-blue: #7293b8;
	--efta-coral: #db4745;
	--efta-ice-blue: #e8f2fc;
	--efta-mist: #f2f6fb;
	--efta-hairline: #e6eaf0;
	--efta-surface: #fbfaf8;
	--efta-charcoal: #394042;
}
html {
	scroll-behavior: smooth;
}
body {
	font-feature-settings: 'ss01', 'cv11';
	-webkit-font-smoothing: antialiased;
}

/* ---------- Inputs ---------- */
input[type='text'],
input[type='email'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='search'],
input[type='url'],
input[type='tel'],
input[type='password'],
select,
textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px !important;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.4;
	border: 1px solid var(--efta-hairline);
	border-radius: 8px;
	background-color: white;
	color: var(--efta-navy);
	transition:
		border-color 0.15s,
		box-shadow 0.15s,
		background-color 0.15s;
}
input:hover,
select:hover,
textarea:hover {
	border-color: var(--efta-light-blue);
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--efta-medium-blue);
	box-shadow: 0 0 0 4px rgba(40, 76, 146, 0.12);
}
input:disabled,
select:disabled,
textarea:disabled {
	background-color: var(--efta-surface);
	color: #94a3b8;
	cursor: not-allowed;
}
input::placeholder,
textarea::placeholder {
	color: #b8c1cc;
}

select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 10px 38px 10px 14px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237293B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
	cursor: pointer;
}
select::-ms-expand {
	display: none;
}

textarea {
	min-height: 92px;
	resize: vertical;
	padding: 12px 14px !important;
}

input[type='date'],
input[type='time'] {
	padding: 10px 12px 10px 14px !important;
}
input[type='date']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator {
	opacity: 0.55;
	cursor: pointer;
}
input[type='date']:hover::-webkit-calendar-picker-indicator,
input[type='time']:hover::-webkit-calendar-picker-indicator {
	opacity: 1;
}

.help-text {
	font-size: 12px;
	color: #6b7480;
	margin-top: 6px;
	line-height: 1.45;
}

/* ---------- Section title with the brand coral underline ---------- */
.section-title {
	font-family: 'Manrope', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--efta-navy);
	position: relative;
	padding-bottom: 10px;
	display: inline-block;
}
.section-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 48px;
	background: var(--efta-coral);
	border-radius: 2px;
}
.eyebrow {
	font-size: 11px;
	letter-spacing: 0.14em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--efta-sky-blue);
}

/* ---------- Color swatch ---------- */
.swatch {
	width: 100%;
	aspect-ratio: 1.4 / 1;
	border-radius: 10px;
	border: 1px solid rgba(13, 33, 52, 0.06);
	position: relative;
	overflow: hidden;
}
.swatch-ring {
	box-shadow: inset 0 0 0 1px var(--efta-hairline);
}

/* ---------- Sidebar nav link ---------- */
.nav-link {
	position: relative;
	padding: 9px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	color: #5a6471;
	transition:
		background-color 0.15s,
		color 0.15s;
}
.nav-link:hover {
	background: var(--efta-ice-blue);
	color: var(--efta-navy);
}
.nav-link.active {
	background: var(--efta-navy);
	color: white;
}
.nav-link.active::after {
	content: '';
	position: absolute;
	right: 9px;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--efta-coral);
}

/* ---------- EFTA logo lockup ---------- */
.efta-mark {
	width: 64px;
	height: auto;
	display: inline-block;
	flex-shrink: 0;
}
.efta-mark img {
	width: 100%;
	height: auto;
	display: block;
}

.ambient {
	position: absolute;
	pointer-events: none;
	filter: blur(60px);
	opacity: 0.55;
}

/* ---------- Tabs/segments ---------- */
.segment {
	display: inline-flex;
	background: white;
	border: 1px solid var(--efta-hairline);
	border-radius: 999px;
	padding: 4px;
}
.segment button {
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: #6b7480;
	transition: all 0.15s;
}
.segment button.active {
	background: var(--efta-navy);
	color: white;
}

/* ---------- Code chip ---------- */
code.chip {
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 11.5px;
	background: var(--efta-surface);
	color: #5a6471;
	padding: 2px 7px;
	border-radius: 5px;
	border: 1px solid var(--efta-hairline);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-thumb {
	background: #d8dee6;
	border-radius: 8px;
}
::-webkit-scrollbar-track {
	background: transparent;
}

/* ========================================================
   Icons (Lucide)
   ======================================================== */
[data-lucide] {
	width: 16px;
	height: 16px;
	stroke-width: 2;
}
.ico-xs [data-lucide] {
	width: 12px;
	height: 12px;
}
.ico-sm [data-lucide] {
	width: 14px;
	height: 14px;
}
.ico-md [data-lucide] {
	width: 18px;
	height: 18px;
}
.ico-lg [data-lucide] {
	width: 22px;
	height: 22px;
}
.ico-xl [data-lucide] {
	width: 28px;
	height: 28px;
}

/* ========================================================
   Custom checkbox
   ======================================================== */
.check {
	appearance: none;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--efta-light-blue);
	border-radius: 5px;
	background: white;
	display: inline-grid;
	place-content: center;
	cursor: pointer;
	transition: all 0.15s;
	flex-shrink: 0;
}
.check:hover {
	border-color: var(--efta-medium-blue);
}
.check::before {
	content: '';
	width: 10px;
	height: 10px;
	transform: scale(0) rotate(-45deg);
	transition: transform 0.15s ease-out;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")
		center/contain no-repeat;
	transform-origin: center;
}
.check:checked {
	background: var(--efta-navy);
	border-color: var(--efta-navy);
}
.check:checked::before {
	transform: scale(1) rotate(0);
}
.check:indeterminate {
	background: var(--efta-navy);
	border-color: var(--efta-navy);
}
.check:indeterminate::before {
	content: '';
	width: 9px;
	height: 2px;
	background: white;
	transform: scale(1);
	border-radius: 1px;
}
.check:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(40, 76, 146, 0.18);
}
.check:disabled {
	background: var(--efta-surface);
	border-color: var(--efta-hairline);
	cursor: not-allowed;
}

/* ========================================================
   Custom radio
   ======================================================== */
.radio {
	appearance: none;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--efta-light-blue);
	border-radius: 50%;
	background: white;
	cursor: pointer;
	display: inline-grid;
	place-content: center;
	transition: all 0.15s;
	flex-shrink: 0;
}
.radio:hover {
	border-color: var(--efta-medium-blue);
}
.radio::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
	transform: scale(0);
	transition: transform 0.15s ease-out;
}
.radio:checked {
	background: var(--efta-navy);
	border-color: var(--efta-navy);
}
.radio:checked::before {
	transform: scale(1);
}
.radio:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(40, 76, 146, 0.18);
}
.radio:disabled {
	background: var(--efta-surface);
	border-color: var(--efta-hairline);
	cursor: not-allowed;
}

/* ========================================================
   Toggle switch
   ======================================================== */
.switch {
	appearance: none;
	width: 36px;
	height: 20px;
	background: #d3dbe3;
	border-radius: 999px;
	position: relative;
	cursor: pointer;
	transition: background-color 0.2s;
	flex-shrink: 0;
}
.switch::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: white;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch:checked {
	background: var(--efta-navy);
}
.switch:checked::before {
	transform: translateX(16px);
}
.switch:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(40, 76, 146, 0.18);
}
.switch:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ========================================================
   Range slider
   ======================================================== */
input[type='range'].range {
	appearance: none;
	width: 100%;
	height: 6px;
	border: none;
	padding: 0;
	background: var(--efta-hairline);
	border-radius: 999px;
	cursor: pointer;
}
input[type='range'].range::-webkit-slider-thumb {
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: white;
	border: 2px solid var(--efta-navy);
	box-shadow: 0 1px 4px rgba(13, 33, 52, 0.2);
	cursor: grab;
	transition: transform 0.1s;
}
input[type='range'].range::-webkit-slider-thumb:active {
	transform: scale(1.15);
	cursor: grabbing;
}
input[type='range'].range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: white;
	border: 2px solid var(--efta-navy);
	cursor: grab;
}
input[type='range'].range:focus {
	outline: none;
	box-shadow: 0 0 0 4px rgba(40, 76, 146, 0.12);
	border-radius: 999px;
}

/* ========================================================
   Tabs
   ======================================================== */
.tablist {
	display: inline-flex;
	gap: 4px;
	border-bottom: 1px solid var(--efta-hairline);
	width: 100%;
}
.tab {
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #6b7480;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: all 0.15s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
.tab:hover {
	color: var(--efta-navy);
}
.tab[aria-selected='true'] {
	color: var(--efta-navy);
	border-bottom-color: var(--efta-coral);
}
.tab .badge {
	background: var(--efta-ice-blue);
	color: var(--efta-medium-blue);
	font-size: 10.5px;
	padding: 1px 6px;
	border-radius: 999px;
	font-weight: 700;
}
.tabpanel {
	display: none;
	animation: fadeIn 0.25s ease-out;
}
.tabpanel.active {
	display: block;
}

/* ========================================================
   Accordion
   ======================================================== */
details.acc {
	border-bottom: 1px solid var(--efta-hairline);
}
details.acc:last-child {
	border-bottom: none;
}
details.acc summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-weight: 600;
	font-size: 14px;
	color: var(--efta-navy);
}
details.acc summary::-webkit-details-marker {
	display: none;
}
details.acc summary .chev {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--efta-surface);
	display: grid;
	place-content: center;
	color: var(--efta-pale-blue);
	transition:
		transform 0.25s,
		background 0.15s,
		color 0.15s;
	flex-shrink: 0;
}
details.acc summary:hover .chev {
	background: var(--efta-ice-blue);
	color: var(--efta-medium-blue);
}
details.acc[open] summary .chev {
	transform: rotate(180deg);
	background: var(--efta-navy);
	color: white;
}
details.acc .acc-body {
	padding: 0 4px 16px 4px;
	color: var(--efta-charcoal);
	font-size: 13px;
	line-height: 1.6;
	animation: slideDown 0.25s ease-out;
}

/* ========================================================
   Blockquote / pull-quote
   ======================================================== */
blockquote.efta-quote {
	position: relative;
	padding: 8px 0 8px 28px;
	border-left: 3px solid var(--efta-coral);
	font-family: 'Playfair Display', serif;
	font-size: 22px;
	font-style: italic;
	line-height: 1.4;
	color: var(--efta-navy);
}
blockquote.efta-quote cite {
	display: block;
	margin-top: 12px;
	font-family: 'Manrope', sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--efta-pale-blue);
}
blockquote.efta-pull {
	position: relative;
	padding: 28px;
	background: var(--efta-mist);
	border-radius: 16px;
	font-family: 'Playfair Display', serif;
	font-size: 22px;
	line-height: 1.4;
	color: var(--efta-navy);
}
blockquote.efta-pull::before {
	content: '';
	position: absolute;
	left: 28px;
	bottom: 24px;
	width: 40px;
	height: 3px;
	background: var(--efta-coral);
	border-radius: 2px;
}

/* ========================================================
   Dropdown menu
   ======================================================== */
.menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 220px;
	background: white;
	border: 1px solid var(--efta-hairline);
	border-radius: 12px;
	box-shadow: 0 8px 32px -12px rgba(13, 33, 52, 0.18);
	padding: 6px;
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition:
		opacity 0.15s,
		transform 0.15s;
	z-index: 50;
}
.menu.open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.menu a,
.menu button {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 13px;
	color: var(--efta-charcoal);
	width: 100%;
	text-align: left;
	transition:
		background-color 0.12s,
		color 0.12s;
}
.menu a:hover,
.menu button:hover {
	background: var(--efta-surface);
	color: var(--efta-navy);
}
.menu hr {
	border: none;
	border-top: 1px solid var(--efta-hairline);
	margin: 6px 4px;
}

/* ========================================================
   Drawer / side sheet
   ======================================================== */
.drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(13, 33, 52, 0.3);
	backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s;
	z-index: 60;
}
.drawer-backdrop.open {
	opacity: 1;
	pointer-events: auto;
}
.drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 420px;
	max-width: 92vw;
	background: white;
	border-left: 1px solid var(--efta-hairline);
	box-shadow: -16px 0 48px -16px rgba(13, 33, 52, 0.2);
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
	z-index: 61;
	display: flex;
	flex-direction: column;
}
.drawer.open {
	transform: translateX(0);
}

/* ========================================================
   Progress + loaders
   ======================================================== */
.progress {
	width: 100%;
	height: 6px;
	background: var(--efta-hairline);
	border-radius: 999px;
	overflow: hidden;
}
.progress > span {
	display: block;
	height: 100%;
	background: var(--efta-navy);
	border-radius: 999px;
	transition: width 0.4s ease-out;
}
.progress.indeterminate > span {
	width: 35% !important;
	animation: indeterminate 1.4s infinite cubic-bezier(0.65, 0.05, 0.35, 1);
}
.dots {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}
.dots > span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--efta-medium-blue);
	animation: dotPulse 1.2s infinite ease-in-out;
}
.dots > span:nth-child(2) {
	animation-delay: 0.15s;
}
.dots > span:nth-child(3) {
	animation-delay: 0.3s;
}
.bars {
	display: inline-flex;
	gap: 3px;
	align-items: flex-end;
	height: 18px;
}
.bars > span {
	width: 3px;
	background: var(--efta-medium-blue);
	border-radius: 2px;
	animation: barBounce 1s infinite ease-in-out;
}
.bars > span:nth-child(1) {
	animation-delay: 0s;
}
.bars > span:nth-child(2) {
	animation-delay: 0.1s;
}
.bars > span:nth-child(3) {
	animation-delay: 0.2s;
}
.bars > span:nth-child(4) {
	animation-delay: 0.3s;
}

/* ========================================================
   Animations & utilities
   ======================================================== */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes indeterminate {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(400%);
	}
}
@keyframes dotPulse {
	0%,
	80%,
	100% {
		transform: scale(0.6);
		opacity: 0.4;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes barBounce {
	0%,
	100% {
		height: 6px;
	}
	50% {
		height: 18px;
	}
}
@keyframes shimmer {
	0% {
		background-position: -400px 0;
	}
	100% {
		background-position: 400px 0;
	}
}

.anim-fade {
	animation: fadeIn 0.35s ease-out both;
}
.anim-up {
	animation: slideUp 0.45s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.anim-down {
	animation: slideDown 0.35s ease-out both;
}
.anim-zoom {
	animation: zoomIn 0.35s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.skel-shimmer {
	background: linear-gradient(
		90deg,
		var(--efta-hairline) 0%,
		#f1f4f8 50%,
		var(--efta-hairline) 100%
	);
	background-size: 800px 100%;
	animation: shimmer 1.4s infinite linear;
	border-radius: 6px;
}

.hover-lift {
	transition:
		transform 0.2s cubic-bezier(0.32, 0.72, 0, 1),
		box-shadow 0.2s;
}
.hover-lift:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -16px rgba(13, 33, 52, 0.25);
}
.press {
	transition: transform 0.1s;
}
.press:active {
	transform: scale(0.97);
}

/* ========================================================
   File drop
   ======================================================== */
.file-drop {
	border: 1.5px dashed var(--efta-light-blue);
	background: var(--efta-mist);
	border-radius: 12px;
	padding: 24px;
	text-align: center;
	transition: all 0.15s;
	cursor: pointer;
}
.file-drop:hover,
.file-drop.drag {
	border-color: var(--efta-navy);
	background: var(--efta-ice-blue);
}

/* ========================================================
   Breadcrumb
   ======================================================== */
.crumb {
	color: var(--efta-pale-blue);
	font-size: 12.5px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.crumb a:hover {
	color: var(--efta-navy);
}
.crumb .sep {
	color: var(--efta-hairline);
}

/* ========================================================
   Preloader
   ======================================================== */
.preloader {
	position: fixed;
	inset: 0;
	background: linear-gradient(180deg, #fbfaf8 0%, #ffffff 60%, #f2f6fb 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	transition:
		opacity 0.45s ease-out,
		visibility 0.45s ease-out;
}
.preloader.hide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.preloader-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	animation: preloader-in 0.6s ease-out;
}
.preloader-stage img {
	width: 320px;
	max-width: 60vw;
	height: auto;
	filter: drop-shadow(0 8px 28px rgba(13, 33, 52, 0.1));
}
.preloader-title {
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--efta-charcoal);
	margin: 0;
}
.preloader-ellipsis {
	display: inline-flex;
	gap: 1px;
	margin-left: 1px;
}
.preloader-ellipsis span {
	opacity: 0;
	animation: preloader-dot 1.4s infinite ease-in-out;
}
.preloader-ellipsis span:nth-child(2) {
	animation-delay: 0.2s;
}
.preloader-ellipsis span:nth-child(3) {
	animation-delay: 0.4s;
}
.preloader-bar {
	width: 180px;
	height: 3px;
	background: var(--efta-hairline);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}
.preloader-bar > span {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 40%;
	background: linear-gradient(
		90deg,
		transparent,
		var(--efta-medium-blue) 30%,
		var(--efta-coral) 70%,
		transparent
	);
	border-radius: 999px;
	animation: preloader-bar 1.6s infinite cubic-bezier(0.65, 0.05, 0.35, 1);
}
@keyframes preloader-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes preloader-dot {
	0%,
	60%,
	100% {
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
}
@keyframes preloader-bar {
	0% {
		left: -45%;
	}
	100% {
		left: 100%;
	}
}
@media (prefers-reduced-motion: reduce) {
	.preloader-ellipsis span,
	.preloader-bar > span {
		animation: none;
	}
	.preloader-ellipsis span {
		opacity: 1;
	}
}

/* ========================================================
   Steps / Stepper
   ======================================================== */
.stepper {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}
.stepper .step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	position: relative;
	text-align: center;
	min-width: 0;
}
.stepper .step::after {
	content: '';
	position: absolute;
	top: 16px;
	left: calc(50% + 22px);
	right: calc(-50% + 22px);
	height: 2px;
	background: var(--efta-hairline);
	border-radius: 1px;
	z-index: 0;
}
.stepper .step:last-child::after {
	display: none;
}
.stepper .step .dot {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: white;
	border: 1.5px solid var(--efta-hairline);
	color: var(--efta-pale-blue);
	display: grid;
	place-content: center;
	font-size: 12px;
	font-weight: 700;
	position: relative;
	z-index: 1;
	transition: all 0.2s;
}
.stepper .step.done .dot {
	background: var(--efta-navy);
	border-color: var(--efta-navy);
	color: white;
}
.stepper .step.done::after {
	background: var(--efta-navy);
}
.stepper .step.current .dot {
	background: white;
	border-color: var(--efta-navy);
	color: var(--efta-navy);
	box-shadow: 0 0 0 4px rgba(13, 33, 52, 0.1);
}
.stepper .step.current .dot::before {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 999px;
	border: 1.5px solid var(--efta-coral);
	opacity: 0.55;
	animation: stepper-pulse 1.8s infinite ease-out;
}
.stepper .step .label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--efta-charcoal);
	max-width: 14ch;
}
.stepper .step.done .label,
.stepper .step.current .label {
	color: var(--efta-navy);
}
.stepper .step.upcoming .label {
	color: var(--efta-pale-blue);
	font-weight: 500;
}
.stepper .step .hint {
	font-size: 11px;
	color: var(--efta-pale-blue);
	margin-top: 2px;
}
@keyframes stepper-pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.6;
	}
	80% {
		transform: scale(1.4);
		opacity: 0;
	}
	100% {
		transform: scale(1.4);
		opacity: 0;
	}
}

.stepper-vertical {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 16px;
}
.stepper-vertical .v-step {
	display: contents;
}
.stepper-vertical .v-marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 32px;
}
.stepper-vertical .v-marker .dot {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: white;
	border: 1.5px solid var(--efta-hairline);
	color: var(--efta-pale-blue);
	display: grid;
	place-content: center;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
	transition: all 0.2s;
}
.stepper-vertical .v-marker .line {
	flex: 1;
	width: 2px;
	background: var(--efta-hairline);
	margin: 4px 0;
	min-height: 16px;
}
.stepper-vertical .v-step:last-child .v-marker .line {
	display: none;
}
.stepper-vertical .v-step.done .dot {
	background: var(--efta-navy);
	border-color: var(--efta-navy);
	color: white;
}
.stepper-vertical .v-step.done .line {
	background: var(--efta-navy);
}
.stepper-vertical .v-step.current .dot {
	background: white;
	border-color: var(--efta-navy);
	color: var(--efta-navy);
	box-shadow: 0 0 0 4px rgba(13, 33, 52, 0.1);
}
.stepper-vertical .v-body {
	padding: 4px 0 22px 0;
}
.stepper-vertical .v-step:last-child .v-body {
	padding-bottom: 0;
}
.stepper-vertical .v-body .title {
	font-size: 14px;
	font-weight: 600;
	color: var(--efta-navy);
	line-height: 1.3;
}
.stepper-vertical .v-step.upcoming .v-body .title {
	color: var(--efta-charcoal);
	font-weight: 500;
}
.stepper-vertical .v-body .desc {
	font-size: 12.5px;
	color: var(--efta-pale-blue);
	margin-top: 4px;
	line-height: 1.5;
}

/* ========================================================
   Timeline
   ======================================================== */
.timeline {
	position: relative;
	padding-left: 28px;
}
.timeline .t-item {
	position: relative;
	padding: 0 0 22px 0;
}
.timeline .t-item:last-child {
	padding-bottom: 0;
}
.timeline .t-item::before {
	content: '';
	position: absolute;
	left: -20px;
	top: 22px;
	bottom: -4px;
	width: 2px;
	background: var(--efta-hairline);
}
.timeline .t-item:last-child::before {
	display: none;
}
.timeline .t-item.done::before {
	background: var(--efta-navy);
}
.timeline .t-marker {
	position: absolute;
	left: -28px;
	top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: white;
	border: 2px solid var(--efta-light-blue);
	box-shadow: 0 0 0 4px white;
}
.timeline .t-item.accent .t-marker {
	border-color: var(--efta-coral);
}
.timeline .t-item.done .t-marker {
	background: var(--efta-navy);
	border-color: var(--efta-navy);
}
.timeline .t-item.done .t-marker::after {
	content: '';
	position: absolute;
	inset: 3px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")
		center/contain no-repeat;
}
.timeline .t-item.current .t-marker {
	border-color: var(--efta-navy);
}
.timeline .t-item.current .t-marker::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 999px;
	border: 2px solid var(--efta-navy);
	opacity: 0.25;
	animation: stepper-pulse 1.8s infinite ease-out;
}
.timeline .t-time {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--efta-pale-blue);
	margin-bottom: 4px;
}
.timeline .t-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--efta-navy);
	line-height: 1.3;
}
.timeline .t-desc {
	font-size: 12.5px;
	color: var(--efta-charcoal);
	margin-top: 4px;
	line-height: 1.55;
}

/* ========================================================
   Workflow
   ======================================================== */
.workflow {
	display: flex;
	align-items: stretch;
	gap: 0;
	flex-wrap: wrap;
}
.workflow .wf-node {
	flex: 1 1 200px;
	min-width: 200px;
	background: white;
	border: 1px solid var(--efta-hairline);
	border-radius: 12px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}
.workflow .wf-node.accent {
	border-color: var(--efta-navy);
	box-shadow: 0 0 0 3px rgba(13, 33, 52, 0.06);
}
.workflow .wf-node.coral {
	border-color: var(--efta-coral);
}
.workflow .wf-node .wf-icon {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--efta-ice-blue);
	color: var(--efta-medium-blue);
	display: grid;
	place-content: center;
	margin-bottom: 4px;
}
.workflow .wf-node.coral .wf-icon {
	background: rgba(219, 71, 69, 0.12);
	color: var(--efta-coral);
}
.workflow .wf-node.accent .wf-icon {
	background: var(--efta-navy);
	color: white;
}
.workflow .wf-eyebrow {
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--efta-pale-blue);
}
.workflow .wf-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--efta-navy);
	line-height: 1.3;
}
.workflow .wf-meta {
	font-size: 11.5px;
	color: var(--efta-pale-blue);
	margin-top: 2px;
}
.workflow .wf-arrow {
	flex: 0 0 32px;
	align-self: center;
	display: grid;
	place-content: center;
	color: var(--efta-light-blue);
}
.workflow .wf-arrow svg {
	width: 22px;
	height: 22px;
}
.workflow.vertical {
	flex-direction: column;
	gap: 0;
}
.workflow.vertical .wf-arrow {
	flex-basis: 28px;
	transform: rotate(90deg);
}

/* Branching workflow */
.wf-branch {
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: wrap;
}
.wf-branch > .wf-node,
.wf-branch > .wf-diamond,
.wf-branch > .wf-split {
	flex-shrink: 0;
}
.wf-branch > .wf-node {
	min-width: 180px;
	flex: 0 1 200px;
}
.wf-branch .wf-line {
	flex: 1 1 28px;
	min-width: 28px;
	height: 2px;
	background: var(--efta-light-blue);
	position: relative;
}
.wf-branch .wf-line.arrow::after {
	content: '';
	position: absolute;
	right: -1px;
	top: 50%;
	width: 0;
	height: 0;
	transform: translateY(-50%);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 7px solid var(--efta-light-blue);
}
.wf-diamond {
	width: 130px;
	height: 130px;
	display: grid;
	place-content: center;
	position: relative;
	flex-shrink: 0;
}
.wf-diamond::before {
	content: '';
	position: absolute;
	inset: 12px;
	background: white;
	border: 1.5px solid var(--efta-navy);
	transform: rotate(45deg);
	border-radius: 8px;
	box-shadow: 0 0 0 3px rgba(13, 33, 52, 0.06);
}
.wf-diamond .wf-diamond-content {
	position: relative;
	text-align: center;
	padding: 0 8px;
}
.wf-diamond .wf-diamond-content .eyebrow-mini {
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--efta-pale-blue);
}
.wf-diamond .wf-diamond-content p {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--efta-navy);
	line-height: 1.2;
	margin-top: 4px;
}
.wf-split {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 240px;
	flex: 1 1 240px;
	position: relative;
}
.wf-split .wf-branch-row {
	display: flex;
	align-items: center;
}
.wf-split .wf-branch-row + .wf-branch-row {
	margin-top: 12px;
}
.wf-split .wf-stem {
	width: 28px;
	height: 2px;
	position: relative;
	flex-shrink: 0;
}
.wf-split .wf-branch-row.yes .wf-stem {
	background: #10b981;
}
.wf-split .wf-branch-row.no .wf-stem {
	background: var(--efta-coral);
}
.wf-split .wf-stem::before {
	content: '';
	position: absolute;
	left: 0;
	width: 2px;
	background: inherit;
}
.wf-split .wf-branch-row.yes .wf-stem::before {
	background: #10b981;
	top: 100%;
	height: 18px;
}
.wf-split .wf-branch-row.no .wf-stem::before {
	background: var(--efta-coral);
	bottom: 100%;
	height: 18px;
}
.wf-split .wf-stem::after {
	content: '';
	position: absolute;
	right: -1px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}
.wf-split .wf-branch-row.yes .wf-stem::after {
	border-left: 7px solid #10b981;
}
.wf-split .wf-branch-row.no .wf-stem::after {
	border-left: 7px solid var(--efta-coral);
}
.wf-split .wf-branch-row .wf-label {
	position: absolute;
	left: 0;
	bottom: calc(100% + 2px);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #10b981;
}
.wf-split .wf-branch-row.no .wf-label {
	bottom: auto;
	top: calc(100% + 2px);
	color: var(--efta-coral);
}
.wf-split .wf-branch-row .wf-node {
	flex: 1;
	min-width: 0;
}