/* =============================================================================
   UNITED EXPRESS LOGISTIC — DESIGN SYSTEM
   -----------------------------------------------------------------------------
   Tokens first, then primitives (type, buttons, cards, forms, badges, tables,
   accordion, toasts). Nothing here is page-specific.

   Token groups:
     --uel-c-*   colour
     --uel-s-*   spacing
     --uel-r-*   radius
     --uel-sh-*  shadow
     --uel-t-*   transition
     --uel-fs-*  font size
     --uel-z-*   z-index
============================================================================= */

/* -----------------------------------------------------------------------------
   1. TOKENS
-------------------------------------------------------------------------------*/

:root {
	/* --- Brand ------------------------------------------------------------- */
	--uel-c-ink:          #050B18;
	--uel-c-navy-900:     #0A1730;
	--uel-c-navy-800:     #0F244A;
	--uel-c-navy-700:     #16325F;
	--uel-c-navy-600:     #1D3F75;

	--uel-c-blue-700:     #0F49C4;
	--uel-c-blue-600:     #1557E0;
	--uel-c-blue-500:     #1E6BFF;
	--uel-c-blue-400:     #4DA3FF;
	--uel-c-blue-200:     #B9D5FF;
	--uel-c-blue-100:     #E8F1FF;
	--uel-c-blue-050:     #F4F8FF;

	--uel-c-gold:         #C9A227;
	--uel-c-gold-soft:    #F5EBCB;

	/* --- Neutrals ---------------------------------------------------------- */
	--uel-c-white:        #FFFFFF;
	--uel-c-gray-050:     #F7F9FC;
	--uel-c-gray-100:     #EFF3F9;
	--uel-c-gray-200:     #E2E8F2;
	--uel-c-gray-300:     #CBD5E4;
	--uel-c-gray-400:     #9FAEC5;
	--uel-c-gray-500:     #6E7F99;
	--uel-c-gray-600:     #4E5E78;
	--uel-c-gray-700:     #33425C;

	/* --- Semantic ---------------------------------------------------------- */
	--uel-c-success:      #12855B;
	--uel-c-success-soft: #E4F6EE;
	--uel-c-warn:         #B3690A;
	--uel-c-warn-soft:    #FDF1DF;
	--uel-c-danger:       #C22B38;
	--uel-c-danger-soft:  #FDEDEE;

	/* --- Surfaces ---------------------------------------------------------- */
	--uel-c-bg:           var(--uel-c-white);
	--uel-c-bg-alt:       var(--uel-c-gray-050);
	--uel-c-surface:      var(--uel-c-white);
	--uel-c-border:       var(--uel-c-gray-200);
	--uel-c-border-soft:  rgba(16, 37, 74, 0.08);
	--uel-c-text:         var(--uel-c-navy-900);
	--uel-c-text-soft:    var(--uel-c-gray-600);
	--uel-c-text-muted:   var(--uel-c-gray-500);
	--uel-c-on-dark:      rgba(255, 255, 255, 0.92);
	--uel-c-on-dark-soft: rgba(255, 255, 255, 0.66);

	/* --- Typography -------------------------------------------------------- */
	--uel-font-head: "Plus Jakarta Sans", "Manrope", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--uel-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--uel-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--uel-fs-display: clamp(2.35rem, 1.35rem + 3.6vw, 4.15rem);
	--uel-fs-h1:      clamp(2rem, 1.3rem + 2.6vw, 3.2rem);
	--uel-fs-h2:      clamp(1.65rem, 1.2rem + 1.7vw, 2.5rem);
	--uel-fs-h3:      clamp(1.22rem, 1.05rem + 0.7vw, 1.55rem);
	--uel-fs-h4:      clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
	--uel-fs-lede:    clamp(1.04rem, 0.98rem + 0.4vw, 1.22rem);
	--uel-fs-body:    1rem;
	--uel-fs-sm:      0.9125rem;
	--uel-fs-xs:      0.8125rem;
	--uel-fs-xxs:     0.72rem;

	--uel-lh-tight:   1.1;
	--uel-lh-snug:    1.32;
	--uel-lh-normal:  1.62;

	--uel-ls-tight:   -0.022em;
	--uel-ls-wide:    0.09em;

	/* --- Spacing (4px base) ------------------------------------------------ */
	--uel-s-1:  0.25rem;
	--uel-s-2:  0.5rem;
	--uel-s-3:  0.75rem;
	--uel-s-4:  1rem;
	--uel-s-5:  1.25rem;
	--uel-s-6:  1.5rem;
	--uel-s-7:  2rem;
	--uel-s-8:  2.5rem;
	--uel-s-9:  3rem;
	--uel-s-10: 4rem;
	--uel-s-11: 5rem;
	--uel-s-12: 6.5rem;

	--uel-section-y: clamp(3.5rem, 2rem + 5vw, 6.5rem);

	/* --- Radii ------------------------------------------------------------- */
	--uel-r-xs:   6px;
	--uel-r-sm:   10px;
	--uel-r-md:   14px;
	--uel-r-lg:   20px;
	--uel-r-xl:   28px;
	--uel-r-pill: 999px;

	/* --- Shadows ----------------------------------------------------------- */
	--uel-sh-xs: 0 1px 2px rgba(10, 23, 48, 0.05);
	--uel-sh-sm: 0 2px 6px rgba(10, 23, 48, 0.06), 0 1px 2px rgba(10, 23, 48, 0.04);
	--uel-sh-md: 0 10px 28px -12px rgba(10, 23, 48, 0.18), 0 2px 6px rgba(10, 23, 48, 0.05);
	--uel-sh-lg: 0 24px 56px -24px rgba(10, 23, 48, 0.28), 0 6px 14px rgba(10, 23, 48, 0.06);
	--uel-sh-xl: 0 44px 92px -36px rgba(7, 18, 40, 0.42), 0 10px 24px rgba(7, 18, 40, 0.10);
	--uel-sh-focus: 0 0 0 3px rgba(30, 107, 255, 0.32);

	/* --- Motion ------------------------------------------------------------ */
	--uel-t-fast:  120ms cubic-bezier(0.33, 1, 0.68, 1);
	--uel-t-base:  220ms cubic-bezier(0.33, 1, 0.68, 1);
	--uel-t-slow:  420ms cubic-bezier(0.22, 1, 0.36, 1);

	/* --- Layout ------------------------------------------------------------ */
	--uel-container:        1220px;
	--uel-container-narrow: 880px;
	--uel-gutter:           clamp(1rem, 0.55rem + 2.2vw, 2.5rem);
	--uel-header-h:         76px;

	/* --- Z-index ----------------------------------------------------------- */
	--uel-z-header: 900;
	--uel-z-menu:   1000;
	--uel-z-toast:  1100;
}

/* -----------------------------------------------------------------------------
   2. RESET & BASE
-------------------------------------------------------------------------------*/

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--uel-header-h) + 16px);
}

body {
	margin: 0;
	font-family: var(--uel-font-body);
	font-size: var(--uel-fs-body);
	line-height: var(--uel-lh-normal);
	color: var(--uel-c-text);
	background: var(--uel-c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden; /* Guard against any single overflowing child. */
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--uel-font-head);
	font-weight: 700;
	line-height: var(--uel-lh-snug);
	letter-spacing: var(--uel-ls-tight);
	color: var(--uel-c-navy-900);
	margin: 0 0 var(--uel-s-4);
	text-wrap: balance;
}

p { margin: 0 0 var(--uel-s-4); }
p:last-child { margin-bottom: 0; }

a {
	color: var(--uel-c-blue-600);
	text-decoration-color: rgba(21, 87, 224, 0.32);
	text-underline-offset: 3px;
	transition: color var(--uel-t-fast), text-decoration-color var(--uel-t-fast);
}
a:hover { color: var(--uel-c-blue-700); text-decoration-color: currentColor; }

ul, ol { margin: 0 0 var(--uel-s-4); padding-left: 1.15rem; }
li { margin-bottom: var(--uel-s-2); }

hr { border: 0; border-top: 1px solid var(--uel-c-border); margin: var(--uel-s-8) 0; }

strong, b { font-weight: 600; }

small { font-size: var(--uel-fs-xs); }

code, kbd, pre { font-family: var(--uel-font-mono); font-size: 0.9em; }

/* --- Focus: visible, branded, never removed ------------------------------- */
:focus { outline: none; }
:focus-visible {
	outline: 3px solid var(--uel-c-blue-500);
	outline-offset: 2px;
	border-radius: var(--uel-r-xs);
}
.uel-section--dark :focus-visible,
.uel-hero :focus-visible,
.uel-footer :focus-visible {
	outline-color: var(--uel-c-blue-400);
}

/* --- Screen reader only --------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--uel-c-white);
	clip: auto;
	clip-path: none;
	color: var(--uel-c-navy-900);
	display: block;
	font-size: 0.9rem;
	height: auto;
	left: 16px;
	line-height: normal;
	padding: 14px 20px;
	text-decoration: none;
	top: 16px;
	width: auto;
	z-index: 100000;
	border-radius: var(--uel-r-sm);
	box-shadow: var(--uel-sh-lg);
}

.uel-skip-link:focus { position: fixed !important; }

/* -----------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
-------------------------------------------------------------------------------*/

.uel-container {
	width: 100%;
	max-width: var(--uel-container);
	margin-inline: auto;
	padding-inline: var(--uel-gutter);
}

.uel-container--narrow { max-width: var(--uel-container-narrow); }

.uel-section { padding-block: var(--uel-section-y); }
.uel-section--tight { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.uel-section--alt { background: var(--uel-c-bg-alt); }

.uel-section--dark {
	background:
		radial-gradient(900px 460px at 85% -10%, rgba(30, 107, 255, 0.24), transparent 62%),
		linear-gradient(168deg, var(--uel-c-navy-800), var(--uel-c-navy-900) 62%, var(--uel-c-ink));
	color: var(--uel-c-on-dark);
}
.uel-section--dark h1,
.uel-section--dark h2,
.uel-section--dark h3,
.uel-section--dark h4 { color: var(--uel-c-white); }
.uel-section--dark p { color: var(--uel-c-on-dark-soft); }
.uel-section--dark a { color: var(--uel-c-blue-400); }

.uel-grid { display: grid; gap: var(--uel-s-5); }
.uel-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uel-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uel-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.uel-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: center;
}
.uel-split--reverse .uel-split__text { order: 2; }
.uel-split--reverse .uel-split__visual { order: 1; }

.uel-two-col {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 1rem + 3.5vw, 4rem);
	align-items: start;
}
.uel-two-col--wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

.uel-button-row { display: flex; flex-wrap: wrap; gap: var(--uel-s-3); }
.uel-button-row--tight { gap: var(--uel-s-2); }

/* -----------------------------------------------------------------------------
   4. TYPOGRAPHY PRIMITIVES
-------------------------------------------------------------------------------*/

.uel-h2 { font-size: var(--uel-fs-h2); }
.uel-h3 { font-size: var(--uel-fs-h3); margin-bottom: var(--uel-s-4); }

.uel-lede {
	font-size: var(--uel-fs-lede);
	color: var(--uel-c-text-soft);
	line-height: 1.58;
}

.uel-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--uel-s-2);
	font-size: var(--uel-fs-xs);
	font-weight: 600;
	letter-spacing: var(--uel-ls-wide);
	text-transform: uppercase;
	color: var(--uel-c-blue-600);
	margin: 0 0 var(--uel-s-3);
}
.uel-eyebrow__mark {
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	flex: none;
}
.uel-eyebrow--light { color: var(--uel-c-blue-400); }
.uel-eyebrow--accent { color: var(--uel-c-gold); }

.uel-section-heading { max-width: 62ch; margin-bottom: var(--uel-s-8); }
.uel-section-heading--center { margin-inline: auto; text-align: center; }
.uel-section-heading--center .uel-eyebrow { justify-content: center; }
.uel-section-heading__title { font-size: var(--uel-fs-h2); margin-bottom: var(--uel-s-4); }
.uel-section-heading__text {
	font-size: var(--uel-fs-lede);
	color: var(--uel-c-text-soft);
	margin: 0;
}
.uel-section--dark .uel-section-heading__text { color: var(--uel-c-on-dark-soft); }

.uel-section__footer-link { margin-top: var(--uel-s-8); text-align: center; }

.uel-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--uel-s-2);
	font-weight: 600;
	font-size: var(--uel-fs-sm);
	text-decoration: none;
	color: var(--uel-c-blue-600);
}
.uel-link-arrow svg { transition: transform var(--uel-t-base); }
.uel-link-arrow:hover svg { transform: translateX(4px); }

/* Long-form content */
.uel-prose { font-size: 1.02rem; color: var(--uel-c-text-soft); }
.uel-prose h2 { font-size: var(--uel-fs-h3); margin-top: var(--uel-s-8); }
.uel-prose h3 { font-size: var(--uel-fs-h4); margin-top: var(--uel-s-7); }
.uel-prose h2:first-child, .uel-prose h3:first-child { margin-top: 0; }
.uel-prose li { line-height: var(--uel-lh-normal); }
.uel-prose blockquote {
	margin: var(--uel-s-6) 0;
	padding: var(--uel-s-5) var(--uel-s-6);
	border-left: 3px solid var(--uel-c-blue-500);
	background: var(--uel-c-blue-050);
	border-radius: 0 var(--uel-r-md) var(--uel-r-md) 0;
	color: var(--uel-c-navy-800);
}
.uel-prose img { border-radius: var(--uel-r-md); }
.uel-prose .uel-legal-note {
	background: var(--uel-c-warn-soft);
	border: 1px solid rgba(179, 105, 10, 0.22);
	color: #7A4806;
	padding: var(--uel-s-4) var(--uel-s-5);
	border-radius: var(--uel-r-md);
	font-size: var(--uel-fs-sm);
}

.uel-icon { flex: none; }
.uel-icon--flip { transform: scaleX(-1); }

/* -----------------------------------------------------------------------------
   5. BUTTONS
-------------------------------------------------------------------------------*/

.uel-btn {
	--uel-btn-bg: var(--uel-c-blue-600);
	--uel-btn-fg: var(--uel-c-white);
	--uel-btn-bd: transparent;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--uel-s-2);
	font-family: var(--uel-font-head);
	font-weight: 650;
	font-size: var(--uel-fs-sm);
	line-height: 1;
	letter-spacing: -0.008em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid var(--uel-btn-bd);
	border-radius: var(--uel-r-pill);
	background: var(--uel-btn-bg);
	color: var(--uel-btn-fg);
	padding: 0.78rem 1.35rem;
	transition: transform var(--uel-t-fast), box-shadow var(--uel-t-base),
				background-color var(--uel-t-base), border-color var(--uel-t-base), color var(--uel-t-base);
	-webkit-tap-highlight-color: transparent;
}
.uel-btn:hover { transform: translateY(-1px); color: var(--uel-btn-fg); }
.uel-btn:active { transform: translateY(0); }
.uel-btn[disabled], .uel-btn.is-loading { cursor: not-allowed; opacity: 0.72; transform: none; }

.uel-btn--sm { padding: 0.58rem 1.05rem; font-size: var(--uel-fs-xs); }
.uel-btn--md { padding: 0.72rem 1.25rem; }
.uel-btn--lg { padding: 0.95rem 1.7rem; font-size: var(--uel-fs-body); }
.uel-btn--block { display: flex; width: 100%; }

.uel-btn--primary {
	--uel-btn-bg: var(--uel-c-blue-600);
	box-shadow: 0 10px 24px -12px rgba(21, 87, 224, 0.85), inset 0 1px 0 rgba(255,255,255,0.16);
}
.uel-btn--primary:hover { --uel-btn-bg: var(--uel-c-blue-700); box-shadow: 0 16px 32px -14px rgba(21, 87, 224, 0.95); }

.uel-btn--secondary {
	--uel-btn-bg: var(--uel-c-white);
	--uel-btn-fg: var(--uel-c-navy-800);
	--uel-btn-bd: var(--uel-c-gray-300);
	box-shadow: var(--uel-sh-xs);
}
.uel-btn--secondary:hover { --uel-btn-bd: var(--uel-c-blue-400); --uel-btn-fg: var(--uel-c-blue-700); }

.uel-btn--ghost {
	--uel-btn-bg: transparent;
	--uel-btn-fg: var(--uel-c-navy-800);
	--uel-btn-bd: var(--uel-c-gray-300);
}
.uel-btn--ghost:hover { --uel-btn-bg: var(--uel-c-gray-100); --uel-btn-bd: var(--uel-c-gray-400); }

.uel-btn--light {
	--uel-btn-bg: var(--uel-c-white);
	--uel-btn-fg: var(--uel-c-navy-900);
	box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.55);
}
.uel-btn--light:hover { --uel-btn-fg: var(--uel-c-blue-700); }

.uel-btn--ghost-light {
	--uel-btn-bg: rgba(255, 255, 255, 0.06);
	--uel-btn-fg: var(--uel-c-white);
	--uel-btn-bd: rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(6px);
}
.uel-btn--ghost-light:hover { --uel-btn-bg: rgba(255, 255, 255, 0.14); --uel-btn-bd: rgba(255, 255, 255, 0.45); }

.uel-btn--danger { --uel-btn-bg: var(--uel-c-danger); }

/* Loading state: label hides, spinner shows. */
.uel-spinner {
	display: none;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: uel-spin 720ms linear infinite;
}
.uel-btn.is-loading .uel-btn__label { visibility: hidden; }
.uel-btn.is-loading .uel-spinner { display: block; position: absolute; }
.uel-btn.is-loading svg:not(.uel-spinner) { display: none; }

@keyframes uel-spin { to { transform: rotate(360deg); } }

/* Icon-only / compact action button */
.uel-icon-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--uel-s-2);
	padding: 0.42rem 0.72rem;
	font-size: var(--uel-fs-xs);
	font-weight: 600;
	color: var(--uel-c-gray-600);
	background: var(--uel-c-white);
	border: 1px solid var(--uel-c-border);
	border-radius: var(--uel-r-pill);
	cursor: pointer;
	transition: all var(--uel-t-base);
}
.uel-icon-btn:hover {
	color: var(--uel-c-blue-700);
	border-color: var(--uel-c-blue-400);
	background: var(--uel-c-blue-050);
}
.uel-icon-btn.is-done { color: var(--uel-c-success); border-color: var(--uel-c-success); }

.uel-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.32rem 0.7rem;
	font-family: var(--uel-font-mono);
	font-size: var(--uel-fs-xxs);
	letter-spacing: 0.04em;
	color: var(--uel-c-gray-600);
	background: var(--uel-c-gray-100);
	border: 1px solid var(--uel-c-border);
	border-radius: var(--uel-r-pill);
	cursor: pointer;
	transition: all var(--uel-t-fast);
}
.uel-chip:hover { background: var(--uel-c-blue-100); border-color: var(--uel-c-blue-200); color: var(--uel-c-blue-700); }

/* -----------------------------------------------------------------------------
   6. CARDS
-------------------------------------------------------------------------------*/

.uel-card {
	position: relative;
	background: var(--uel-c-surface);
	border: 1px solid var(--uel-c-border);
	border-radius: var(--uel-r-lg);
	padding: var(--uel-s-6);
	box-shadow: var(--uel-sh-sm);
	transition: transform var(--uel-t-base), box-shadow var(--uel-t-base), border-color var(--uel-t-base);
}
.uel-card--flush { padding: 0; overflow: hidden; }
.uel-card--quiet { box-shadow: none; background: var(--uel-c-bg-alt); }

.uel-card__heading {
	font-size: var(--uel-fs-h4);
	display: flex;
	align-items: center;
	gap: var(--uel-s-2);
	margin: 0 0 var(--uel-s-4);
}
.uel-card--flush .uel-card__heading { padding: var(--uel-s-6) var(--uel-s-6) 0; }

.uel-card__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--uel-s-4);
	flex-wrap: wrap;
}
.uel-card--flush .uel-card__header { padding: var(--uel-s-6) var(--uel-s-6) 0; }
.uel-card--flush .uel-card__header .uel-card__heading { padding: 0; margin-bottom: var(--uel-s-4); }
.uel-card__hint { font-size: var(--uel-fs-xs); color: var(--uel-c-text-muted); }

/* Service card — flex column so every card in a row ends with its link on the
   same baseline regardless of how long the description runs. */
.uel-card--service {
	display: flex;
	flex-direction: column;
	padding: var(--uel-s-6);
}
.uel-card--service .uel-card__text { flex: 1 1 auto; }
.uel-card--service .uel-card__link { margin-top: auto; align-self: flex-start; }
.uel-card--detailed { display: flex; flex-direction: column; }
.uel-card--detailed .uel-card__points { margin-top: auto; }
.uel-card--service:hover {
	transform: translateY(-3px);
	box-shadow: var(--uel-sh-md);
	border-color: var(--uel-c-blue-200);
}
.uel-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--uel-r-md);
	background: linear-gradient(150deg, var(--uel-c-blue-100), var(--uel-c-blue-050));
	color: var(--uel-c-blue-600);
	margin-bottom: var(--uel-s-4);
	border: 1px solid rgba(30, 107, 255, 0.12);
	transition: background var(--uel-t-base), color var(--uel-t-base);
}
.uel-card--service:hover .uel-card__icon {
	background: linear-gradient(150deg, var(--uel-c-blue-600), var(--uel-c-blue-500));
	color: var(--uel-c-white);
	border-color: transparent;
}
.uel-card--tone-accent .uel-card__icon {
	background: linear-gradient(150deg, var(--uel-c-gold-soft), #FDF8EA);
	color: #8A6E0F;
	border-color: rgba(201, 162, 39, 0.24);
}
.uel-card--tone-accent:hover .uel-card__icon {
	background: linear-gradient(150deg, var(--uel-c-gold), #B08C1C);
	color: var(--uel-c-white);
}
.uel-card__title { font-size: 1.08rem; margin-bottom: var(--uel-s-2); }
.uel-card__text { font-size: var(--uel-fs-sm); color: var(--uel-c-text-soft); margin-bottom: var(--uel-s-4); }
.uel-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--uel-s-2);
	font-size: var(--uel-fs-xs);
	font-weight: 650;
	text-decoration: none;
}
.uel-card__link svg { transition: transform var(--uel-t-base); }
.uel-card__link:hover svg { transform: translateX(3px); }
/* Whole card is clickable while the link remains the accessible target. */
.uel-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.uel-card__points { list-style: none; margin: 0; padding: 0; }
.uel-card__points li {
	display: flex;
	align-items: flex-start;
	gap: var(--uel-s-2);
	font-size: var(--uel-fs-xs);
	color: var(--uel-c-text-muted);
	margin-bottom: var(--uel-s-2);
}
.uel-card__points svg { color: var(--uel-c-success); margin-top: 3px; }

.uel-mini-card {
	background: var(--uel-c-white);
	border: 1px solid var(--uel-c-border);
	border-radius: var(--uel-r-md);
	padding: var(--uel-s-5);
	transition: border-color var(--uel-t-base), box-shadow var(--uel-t-base);
}
.uel-mini-card:hover { border-color: var(--uel-c-blue-300, var(--uel-c-blue-200)); box-shadow: var(--uel-sh-sm); }
.uel-mini-card__icon { display: inline-flex; color: var(--uel-c-blue-600); margin-bottom: var(--uel-s-3); }
.uel-mini-card__title { font-size: 0.98rem; margin-bottom: var(--uel-s-1); }
.uel-mini-card__text { font-size: var(--uel-fs-xs); color: var(--uel-c-text-muted); margin: 0; }

/* -----------------------------------------------------------------------------
   7. BADGES, TAGS, ALERTS
-------------------------------------------------------------------------------*/

.uel-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--uel-s-2);
	padding: 0.36rem 0.85rem;
	font-family: var(--uel-font-head);
	font-size: var(--uel-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--uel-r-pill);
	border: 1px solid transparent;
	white-space: nowrap;
}
.uel-badge--neutral { background: var(--uel-c-gray-100); color: var(--uel-c-gray-700); border-color: var(--uel-c-gray-200); }
.uel-badge--active  { background: var(--uel-c-blue-100); color: var(--uel-c-blue-700); border-color: var(--uel-c-blue-200); }
.uel-badge--success { background: var(--uel-c-success-soft); color: var(--uel-c-success); border-color: rgba(18, 133, 91, 0.22); }
.uel-badge--warn    { background: var(--uel-c-warn-soft); color: var(--uel-c-warn); border-color: rgba(179, 105, 10, 0.24); }

.uel-badge__dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: currentColor;
	flex: none;
	position: relative;
}
.uel-badge--pulse .uel-badge__dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid currentColor;
	opacity: 0.45;
	animation: uel-pulse 1900ms ease-out infinite;
}
@keyframes uel-pulse {
	0%   { transform: scale(0.6); opacity: 0.55; }
	70%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}

.uel-tag {
	display: inline-flex;
	padding: 0.16rem 0.5rem;
	font-size: var(--uel-fs-xxs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--uel-c-blue-700);
	background: var(--uel-c-blue-100);
	border-radius: var(--uel-r-xs);
}

.uel-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--uel-s-3);
	padding: var(--uel-s-4) var(--uel-s-5);
	border-radius: var(--uel-r-md);
	font-size: var(--uel-fs-sm);
	line-height: 1.55;
	border: 1px solid transparent;
	margin: 0 0 var(--uel-s-5);
}
.uel-alert svg { flex: none; margin-top: 2px; }
.uel-alert--info { background: var(--uel-c-blue-050); border-color: var(--uel-c-blue-200); color: var(--uel-c-navy-800); }
.uel-alert--info svg { color: var(--uel-c-blue-600); }
.uel-alert--warn { background: var(--uel-c-warn-soft); border-color: rgba(179, 105, 10, 0.24); color: #7A4806; }
.uel-alert--note { background: var(--uel-c-gray-050); border-color: var(--uel-c-border); color: var(--uel-c-text-soft); }
.uel-alert--success { background: var(--uel-c-success-soft); border-color: rgba(18,133,91,.22); color: #0B5C40; }
.uel-alert--error { background: var(--uel-c-danger-soft); border-color: rgba(194,43,56,.22); color: #8E1F29; }
.uel-alert--wide { max-width: 82ch; margin-inline: auto; margin-top: var(--uel-s-8); }

.uel-note {
	display: flex;
	align-items: flex-start;
	gap: var(--uel-s-2);
	font-size: var(--uel-fs-xs);
	line-height: 1.6;
	color: var(--uel-c-text-muted);
}
.uel-note svg { flex: none; margin-top: 2px; }
.uel-note--muted { margin-top: var(--uel-s-5); }
.uel-note--center { justify-content: center; text-align: left; margin-top: var(--uel-s-6); }
.uel-section--dark .uel-note { color: var(--uel-c-on-dark-soft); }

.uel-empty {
	display: flex;
	align-items: flex-start;
	gap: var(--uel-s-3);
	padding: var(--uel-s-6);
	background: var(--uel-c-gray-050);
	border: 1px dashed var(--uel-c-gray-300);
	border-radius: var(--uel-r-md);
	font-size: var(--uel-fs-sm);
	color: var(--uel-c-text-muted);
}
.uel-empty svg { color: var(--uel-c-gray-400); flex: none; margin-top: 2px; }

.uel-placeholder {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	font-size: var(--uel-fs-xs);
	color: #7A4806;
	background: var(--uel-c-warn-soft);
	border: 1px dashed rgba(179, 105, 10, 0.4);
	border-radius: var(--uel-r-xs);
}

/* -----------------------------------------------------------------------------
   8. LISTS
-------------------------------------------------------------------------------*/

.uel-check-list { list-style: none; margin: 0 0 var(--uel-s-5); padding: 0; }
.uel-check-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--uel-s-3);
	font-size: var(--uel-fs-sm);
	color: var(--uel-c-text-soft);
	margin-bottom: var(--uel-s-3);
}
.uel-check-list svg {
	flex: none;
	margin-top: 3px;
	padding: 3px;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--uel-c-success-soft);
	color: var(--uel-c-success);
}
.uel-section--dark .uel-check-list li { color: var(--uel-c-on-dark-soft); }
.uel-section--dark .uel-check-list svg { background: rgba(77, 163, 255, 0.14); color: var(--uel-c-blue-400); }

.uel-icon-list { list-style: none; margin: 0; padding: 0; }
.uel-icon-list li { display: flex; gap: var(--uel-s-4); margin-bottom: var(--uel-s-5); }
.uel-icon-list li > span:first-child {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border-radius: var(--uel-r-sm);
	background: var(--uel-c-blue-100);
	color: var(--uel-c-blue-600);
}
.uel-icon-list h3 { font-size: 1rem; margin: 0 0 var(--uel-s-1); }
.uel-icon-list p { font-size: var(--uel-fs-sm); color: var(--uel-c-text-muted); margin: 0; }

.uel-feature-list { list-style: none; margin: var(--uel-s-6) 0; padding: 0; }
.uel-feature-list li { display: flex; gap: var(--uel-s-4); margin-bottom: var(--uel-s-5); }
.uel-feature-list__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: var(--uel-r-sm);
	background: rgba(77, 163, 255, 0.14);
	color: var(--uel-c-blue-400);
	border: 1px solid rgba(77, 163, 255, 0.2);
}
.uel-feature-list h3 { font-size: 1rem; margin: 0 0 var(--uel-s-1); }
.uel-feature-list p { font-size: var(--uel-fs-sm); margin: 0; }

.uel-pill-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--uel-s-2); margin: 0 0 var(--uel-s-6); padding: 0; }
.uel-pill-list li {
	margin: 0;
	padding: 0.36rem 0.85rem;
	font-size: var(--uel-fs-xs);
	font-weight: 600;
	color: var(--uel-c-on-dark);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--uel-r-pill);
}

.uel-numbered-list { list-style: none; margin: 0; padding: 0; counter-reset: uel-num; }
.uel-numbered-list li {
	position: relative;
	counter-increment: uel-num;
	padding-left: 2.3rem;
	margin-bottom: var(--uel-s-4);
	font-size: var(--uel-fs-sm);
	color: var(--uel-c-on-dark-soft);
}
.uel-numbered-list li::before {
	content: counter(uel-num);
	position: absolute;
	left: 0; top: 0;
	width: 24px; height: 24px;
	display: grid;
	place-items: center;
	font-family: var(--uel-font-head);
	font-size: var(--uel-fs-xxs);
	font-weight: 700;
	color: var(--uel-c-blue-400);
	background: rgba(77, 163, 255, 0.14);
	border-radius: 50%;
}
.uel-numbered-list strong { display: block; color: var(--uel-c-white); margin-bottom: 2px; }

/* -----------------------------------------------------------------------------
   9. FORMS
-------------------------------------------------------------------------------*/

.uel-form__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--uel-s-4) var(--uel-s-5);
}
.uel-field { grid-column: span 6; min-width: 0; }
.uel-field--half { grid-column: span 3; }
.uel-field--third { grid-column: span 2; }

.uel-label {
	display: block;
	font-family: var(--uel-font-head);
	font-size: var(--uel-fs-xs);
	font-weight: 650;
	color: var(--uel-c-navy-800);
	margin-bottom: var(--uel-s-2);
}
.uel-req { color: var(--uel-c-danger); margin-left: 2px; }

.uel-input {
	display: block;
	width: 100%;
	font-family: var(--uel-font-body);
	font-size: 0.97rem;
	color: var(--uel-c-text);
	background: var(--uel-c-white);
	border: 1px solid var(--uel-c-gray-300);
	border-radius: var(--uel-r-sm);
	padding: 0.76rem 0.9rem;
	transition: border-color var(--uel-t-base), box-shadow var(--uel-t-base), background var(--uel-t-base);
	appearance: none;
	-webkit-appearance: none;
}
.uel-input::placeholder { color: var(--uel-c-gray-400); }
.uel-input:hover { border-color: var(--uel-c-gray-400); }
.uel-input:focus {
	border-color: var(--uel-c-blue-500);
	box-shadow: var(--uel-sh-focus);
	outline: none;
}
.uel-input:focus-visible { outline: none; }
.uel-textarea { resize: vertical; min-height: 110px; line-height: 1.55; }

.uel-field.has-error .uel-input { border-color: var(--uel-c-danger); background: #FFFBFB; }
.uel-field.has-error .uel-input:focus { box-shadow: 0 0 0 3px rgba(194, 43, 56, 0.22); }

.uel-field-error {
	display: flex;
	align-items: center;
	gap: var(--uel-s-1);
	font-size: var(--uel-fs-xs);
	color: var(--uel-c-danger);
	margin: var(--uel-s-2) 0 0;
	font-weight: 550;
}
.uel-field-error[hidden] { display: none; }

.uel-field__help { font-size: var(--uel-fs-xs); color: var(--uel-c-text-muted); margin: var(--uel-s-2) 0 0; }

.uel-select { position: relative; }
.uel-select select { padding-right: 2.6rem; cursor: pointer; }
.uel-select__chevron {
	position: absolute;
	right: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--uel-c-gray-500);
	pointer-events: none;
}

.uel-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--uel-s-3);
	cursor: pointer;
	font-size: var(--uel-fs-sm);
	color: var(--uel-c-text-soft);
	line-height: 1.5;
}
.uel-checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.uel-checkbox__box {
	flex: none;
	display: grid;
	place-items: center;
	width: 22px; height: 22px;
	margin-top: 1px;
	border: 1.5px solid var(--uel-c-gray-300);
	border-radius: var(--uel-r-xs);
	background: var(--uel-c-white);
	color: transparent;
	transition: all var(--uel-t-fast);
}
.uel-checkbox input:checked + .uel-checkbox__box {
	background: var(--uel-c-blue-600);
	border-color: var(--uel-c-blue-600);
	color: var(--uel-c-white);
}
.uel-checkbox input:focus-visible + .uel-checkbox__box { box-shadow: var(--uel-sh-focus); }
.uel-field.has-error .uel-checkbox__box { border-color: var(--uel-c-danger); }

.uel-fieldset { border: 0; margin: 0 0 var(--uel-s-7); padding: 0; }
.uel-fieldset__legend {
	font-family: var(--uel-font-head);
	font-size: var(--uel-fs-xs);
	font-weight: 700;
	letter-spacing: var(--uel-ls-wide);
	text-transform: uppercase;
	color: var(--uel-c-blue-600);
	margin-bottom: var(--uel-s-4);
	padding: 0;
}

.uel-form__head { margin-bottom: var(--uel-s-6); }
.uel-form__title { font-size: var(--uel-fs-h3); margin-bottom: var(--uel-s-2); }
.uel-form__sub { font-size: var(--uel-fs-sm); color: var(--uel-c-text-muted); margin: 0; }

.uel-form__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--uel-s-4);
	margin-top: var(--uel-s-6);
}
.uel-form__legal { font-size: var(--uel-fs-xs); color: var(--uel-c-text-muted); margin: 0; max-width: 42ch; }

.uel-form--panel {
	background: var(--uel-c-white);
	border: 1px solid var(--uel-c-border);
	border-radius: var(--uel-r-xl);
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	box-shadow: var(--uel-sh-md);
}

.uel-form__status { margin-top: var(--uel-s-5); }
.uel-form__status:empty { margin-top: 0; }

/* Honeypot — hidden from humans, present for bots. */
.uel-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
   10. ACCORDION
-------------------------------------------------------------------------------*/

.uel-accordion {
	border: 1px solid var(--uel-c-border);
	border-radius: var(--uel-r-lg);
	overflow: hidden;
	background: var(--uel-c-white);
	box-shadow: var(--uel-sh-xs);
}
.uel-accordion__item + .uel-accordion__item { border-top: 1px solid var(--uel-c-border); }
.uel-accordion__heading { margin: 0; font-size: inherit; }
.uel-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--uel-s-4);
	width: 100%;
	padding: var(--uel-s-5) var(--uel-s-6);
	font-family: var(--uel-font-head);
	font-size: 1rem;
	font-weight: 650;
	text-align: left;
	color: var(--uel-c-navy-900);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: background var(--uel-t-fast), color var(--uel-t-fast);
}
.uel-accordion__trigger:hover { background: var(--uel-c-gray-050); color: var(--uel-c-blue-700); }
.uel-accordion__chevron { color: var(--uel-c-gray-500); transition: transform var(--uel-t-base); flex: none; }
.uel-accordion__trigger[aria-expanded="true"] { color: var(--uel-c-blue-700); }
.uel-accordion__trigger[aria-expanded="true"] .uel-accordion__chevron { transform: rotate(180deg); color: var(--uel-c-blue-600); }

.uel-accordion__panel { overflow: hidden; }
.uel-accordion__panel[hidden] { display: none; }
.uel-accordion__content {
	padding: 0 var(--uel-s-6) var(--uel-s-5);
	font-size: var(--uel-fs-sm);
	color: var(--uel-c-text-soft);
	max-width: 78ch;
}
.uel-accordion__content p { margin-bottom: var(--uel-s-3); }

/* -----------------------------------------------------------------------------
   11. TABLES
-------------------------------------------------------------------------------*/

.uel-table-wrap { overflow-x: auto; border-radius: var(--uel-r-md); border: 1px solid var(--uel-c-border); }
.uel-table { width: 100%; border-collapse: collapse; font-size: var(--uel-fs-sm); }
.uel-table th, .uel-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--uel-c-border); }
.uel-table th {
	font-family: var(--uel-font-head);
	font-size: var(--uel-fs-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--uel-c-gray-500);
	background: var(--uel-c-gray-050);
}
.uel-table tr:last-child td { border-bottom: 0; }

/* -----------------------------------------------------------------------------
   12. BREADCRUMBS & PAGINATION
-------------------------------------------------------------------------------*/

.uel-breadcrumbs { margin-bottom: var(--uel-s-5); }
.uel-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--uel-s-2);
	list-style: none;
	margin: 0; padding: 0;
	font-size: var(--uel-fs-xs);
}
.uel-breadcrumbs__item { margin: 0; display: flex; align-items: center; gap: var(--uel-s-2); color: var(--uel-c-text-muted); }
.uel-breadcrumbs__item a { color: inherit; text-decoration: none; }
.uel-breadcrumbs__item a:hover { color: var(--uel-c-blue-600); text-decoration: underline; }
.uel-breadcrumbs__sep { color: var(--uel-c-gray-300); }
.uel-page-hero .uel-breadcrumbs__item { color: rgba(255,255,255,0.62); }
.uel-page-hero .uel-breadcrumbs__item a:hover { color: var(--uel-c-blue-400); }
.uel-page-hero .uel-breadcrumbs__sep { color: rgba(255,255,255,0.3); }

.uel-pagination { margin-top: var(--uel-s-9); }
.uel-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--uel-s-2); justify-content: center; }
.uel-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px; height: 42px;
	padding: 0 0.7rem;
	font-size: var(--uel-fs-sm);
	font-weight: 600;
	color: var(--uel-c-gray-600);
	background: var(--uel-c-white);
	border: 1px solid var(--uel-c-border);
	border-radius: var(--uel-r-sm);
	text-decoration: none;
	transition: all var(--uel-t-fast);
}
.uel-pagination .page-numbers:hover { border-color: var(--uel-c-blue-400); color: var(--uel-c-blue-700); }
.uel-pagination .page-numbers.current { background: var(--uel-c-blue-600); border-color: var(--uel-c-blue-600); color: var(--uel-c-white); }

/* -----------------------------------------------------------------------------
   13. TOASTS
-------------------------------------------------------------------------------*/

.uel-toasts {
	position: fixed;
	left: 50%;
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: var(--uel-z-toast);
	display: flex;
	flex-direction: column;
	gap: var(--uel-s-2);
	pointer-events: none;
	width: min(420px, calc(100vw - 2rem));
}
.uel-toast {
	display: flex;
	align-items: center;
	gap: var(--uel-s-3);
	padding: 0.8rem 1.1rem;
	font-size: var(--uel-fs-sm);
	font-weight: 550;
	color: var(--uel-c-white);
	background: var(--uel-c-navy-800);
	border-radius: var(--uel-r-pill);
	box-shadow: var(--uel-sh-lg);
	pointer-events: auto;
	animation: uel-toast-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.uel-toast--success { background: var(--uel-c-success); }
.uel-toast--error { background: var(--uel-c-danger); }
.uel-toast.is-leaving { animation: uel-toast-out 220ms ease forwards; }

@keyframes uel-toast-in {
	from { opacity: 0; transform: translateY(14px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes uel-toast-out {
	to { opacity: 0; transform: translateY(10px) scale(0.97); }
}

/* -----------------------------------------------------------------------------
   13b. STATE PANELS (not found, error, empty results)
   Used by the tracking page, the 404 page and the blog/search index, so it
   lives here rather than in tracking.css.
-------------------------------------------------------------------------------*/

.uel-state {
	max-width: 640px;
	margin-inline: auto;
	padding: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
	text-align: center;
	background: var(--uel-c-surface);
	border: 1px solid var(--uel-c-border);
	border-radius: var(--uel-r-xl);
	box-shadow: var(--uel-sh-md);
}
.uel-state__icon {
	display: grid;
	place-items: center;
	width: 66px; height: 66px;
	margin: 0 auto var(--uel-s-5);
	border-radius: 50%;
	background: var(--uel-c-gray-100);
	color: var(--uel-c-gray-500);
}
.uel-state--warn .uel-state__icon { background: var(--uel-c-warn-soft); color: var(--uel-c-warn); }
.uel-state__title { font-size: var(--uel-fs-h3); margin-bottom: var(--uel-s-3); }
.uel-state__number {
	display: inline-block;
	font-family: var(--uel-font-mono);
	font-size: var(--uel-fs-sm);
	letter-spacing: 0.06em;
	color: var(--uel-c-gray-600);
	background: var(--uel-c-gray-100);
	padding: 0.3rem 0.8rem;
	border-radius: var(--uel-r-pill);
	margin: 0 0 var(--uel-s-4);
}
.uel-state__message {
	font-size: var(--uel-fs-sm);
	color: var(--uel-c-text-soft);
	margin-bottom: var(--uel-s-5);
	max-width: 52ch;
	margin-inline: auto;
}
.uel-state__hint { font-size: var(--uel-fs-xs); color: var(--uel-c-text-muted); margin-bottom: var(--uel-s-5); }

.uel-state__tips {
	list-style: none;
	text-align: left;
	max-width: 440px;
	margin: 0 auto var(--uel-s-6);
	padding: var(--uel-s-4) var(--uel-s-5);
	background: var(--uel-c-gray-050);
	border-radius: var(--uel-r-md);
}
.uel-state__tips li {
	display: flex;
	gap: var(--uel-s-3);
	font-size: var(--uel-fs-xs);
	color: var(--uel-c-text-soft);
	margin-bottom: var(--uel-s-2);
}
.uel-state__tips li:last-child { margin-bottom: 0; }
.uel-state__tips svg { flex: none; margin-top: 2px; color: var(--uel-c-success); }

.uel-state__actions { display: flex; flex-wrap: wrap; gap: var(--uel-s-2); justify-content: center; }

@media (max-width: 420px) {
	.uel-state__actions { flex-direction: column; }
	.uel-state__actions .uel-btn { width: 100%; }
}

/* -----------------------------------------------------------------------------
   14. SKELETONS
-------------------------------------------------------------------------------*/

.uel-skeleton { display: grid; gap: var(--uel-s-4); }
.uel-skeleton__head { display: grid; gap: var(--uel-s-2); }
.uel-skeleton__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--uel-s-4); }
.uel-skeleton__line, .uel-skeleton__block {
	display: block;
	border-radius: var(--uel-r-sm);
	background: linear-gradient(100deg, var(--uel-c-gray-100) 30%, var(--uel-c-gray-200) 50%, var(--uel-c-gray-100) 70%);
	background-size: 300% 100%;
	animation: uel-shimmer 1500ms ease-in-out infinite;
}
.uel-skeleton__line { height: 14px; }
.uel-skeleton__line--sm { width: 130px; }
.uel-skeleton__line--lg { width: min(320px, 80%); height: 30px; }
.uel-skeleton__block { height: 96px; border-radius: var(--uel-r-lg); }
.uel-skeleton__block--tall { height: 240px; }

@keyframes uel-shimmer {
	0%   { background-position: 140% 0; }
	100% { background-position: -40% 0; }
}

/* -----------------------------------------------------------------------------
   15. REVEAL ANIMATION
   Sections fade and rise once, when they first enter the viewport. Handled by
   IntersectionObserver in main.js; this is only the visual half.
-------------------------------------------------------------------------------*/

[data-uel-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
				transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
[data-uel-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; }

/* -----------------------------------------------------------------------------
   16. RESPONSIVE PRIMITIVES
-------------------------------------------------------------------------------*/

@media (max-width: 1080px) {
	.uel-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.uel-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.uel-split,
	.uel-two-col,
	.uel-two-col--wide-left { grid-template-columns: minmax(0, 1fr); }
	.uel-split--reverse .uel-split__text { order: 1; }
	.uel-split--reverse .uel-split__visual { order: 2; }
}

@media (max-width: 640px) {
	:root { --uel-header-h: 64px; }
	.uel-grid--2,
	.uel-grid--3,
	.uel-grid--4 { grid-template-columns: minmax(0, 1fr); }

	.uel-field--half,
	.uel-field--third { grid-column: span 6; }

	.uel-btn { width: auto; }
	.uel-btn--lg { padding: 0.9rem 1.4rem; }

	.uel-card { padding: var(--uel-s-5); }
	.uel-accordion__trigger { padding: var(--uel-s-4) var(--uel-s-5); }
	.uel-accordion__content { padding: 0 var(--uel-s-5) var(--uel-s-4); }
}

@media (max-width: 400px) {
	.uel-form__actions { flex-direction: column; align-items: stretch; }
	.uel-form__actions .uel-btn { width: 100%; }
}

/* -----------------------------------------------------------------------------
   17. REDUCED MOTION
-------------------------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	[data-uel-reveal] { opacity: 1 !important; transform: none !important; }
}

/* -----------------------------------------------------------------------------
   18. PRINT
-------------------------------------------------------------------------------*/

@media print {
	.uel-topbar,
	.uel-site-header,
	.uel-mobile-menu,
	.uel-footer__cta,
	.uel-footer__main,
	.uel-to-top,
	.uel-toasts,
	.uel-track-widget,
	.uel-help-card,
	.uel-result__actions,
	.uel-icon-btn,
	.uel-map { display: none !important; }

	body { background: #fff; color: #000; font-size: 11pt; }
	.uel-card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
	.uel-section { padding-block: 0.5rem; }
	a[href]::after { content: ""; }
	[data-uel-reveal] { opacity: 1 !important; transform: none !important; }
}