/**
 * UfirstDEV Design System
 * Tokens + base styles derived from the approved UI reference designs.
 */

/* ---------- Design Tokens ---------- */
:root {
	--ud-navy: #0a1128;
	--ud-navy-soft: #10193a;
	--ud-orange: #ff6b1a;
	--ud-orange-dark: #e85d0f;
	--ud-white: #ffffff;
	--ud-ink: #0f172a;
	--ud-text-muted: #64748b;
	--ud-text-on-dark: #cbd5e1;
	--ud-border: #e5e7eb;
	--ud-bg-light: #f8f9fb;
	--ud-bg-section: #f5f6fa;
	--ud-success: #16a34a;
	--ud-purple: #6d5bd0;
	--ud-green: #22c55e;

	--ud-radius-sm: 6px;
	--ud-radius-md: 10px;
	--ud-radius-lg: 16px;
	--ud-radius-pill: 999px;

	--ud-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--ud-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
	--ud-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);

	--ud-container: 1200px;
	--ud-gutter: 24px;

	--ud-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ud-font-heading: var(--ud-font-body);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--ud-font-body);
	color: var(--ud-ink);
	background: var(--ud-white);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ud-font-heading);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.5em;
	color: var(--ud-ink);
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--ud-text-muted); }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999999;
	background: var(--ud-navy); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Layout ---------- */
.ud-container {
	max-width: var(--ud-container);
	margin-inline: auto;
	padding-inline: var(--ud-gutter);
}
.ud-section { padding-block: 72px; }
.ud-section--tight { padding-block: 48px; }
.ud-section--dark { background: var(--ud-navy); color: var(--ud-text-on-dark); }
.ud-section--dark h1, .ud-section--dark h2, .ud-section--dark h3 { color: #fff; }
.ud-section--dark p { color: var(--ud-text-on-dark); }
.ud-section--light { background: var(--ud-bg-section); }

.ud-grid { display: grid; gap: var(--ud-gutter); }
.ud-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ud-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ud-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.ud-grid--2, .ud-grid--3, .ud-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ud-grid--2, .ud-grid--3, .ud-grid--4 { grid-template-columns: 1fr; }
}

.ud-eyebrow {
	display: inline-block;
	color: var(--ud-orange);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

/* ---------- Buttons ---------- */
.ud-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 22px;
	border-radius: var(--ud-radius-sm);
	font-weight: 600;
	font-size: 0.95rem;
	border: 1px solid transparent;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}
.ud-btn--primary { background: var(--ud-orange); color: #fff; }
.ud-btn--primary:hover { background: var(--ud-orange-dark); color: #fff; }
.ud-btn--outline-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.ud-btn--outline-dark:hover { border-color: #fff; }
.ud-btn--outline-light { background: transparent; color: var(--ud-ink); border-color: var(--ud-border); }
.ud-btn--outline-light:hover { border-color: var(--ud-ink); }
.ud-btn--dark { background: var(--ud-navy); color: #fff; border-radius: var(--ud-radius-pill); }
.ud-btn--dark:hover { background: var(--ud-navy-soft); color: #fff; }
.ud-btn--block { width: 100%; justify-content: center; }
.ud-btn--sm { padding: 8px 16px; font-size: 0.85rem; }

/* ---------- Header ---------- */
.ud-site-header {
	background: var(--ud-navy);
	position: sticky; top: 0; z-index: 100;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.ud-site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	padding-block: 14px;
	gap: 24px;
}
.ud-logo { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 1.05rem; }
.ud-logo img, .ud-logo svg { height: 46px; width: auto; }
.ud-logo__image { height: 46px; width: auto; }

.ud-primary-nav { flex: 1; display: flex; justify-content: center; }
.ud-primary-nav ul { display: flex; align-items: center; gap: 8px; position: relative; margin: 0; padding: 0; list-style: none; }
.ud-primary-nav > ul > li { position: relative; display: flex; align-items: center; }
.ud-primary-nav a {
	color: var(--ud-text-on-dark);
	font-size: 0.95rem;
	font-weight: 500;
	padding: 10px 14px;
	display: inline-block;
	position: relative;
	border-radius: var(--ud-radius-sm);
	transition: color 0.15s ease;
}
.ud-primary-nav > ul > li > a::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
	background: var(--ud-orange); border-radius: var(--ud-radius-pill);
	transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease;
}
.ud-primary-nav > ul > li.current-menu-item > a,
.ud-primary-nav > ul > li.current-menu-ancestor > a,
.ud-primary-nav a:hover { color: #fff; }
.ud-primary-nav > ul > li.current-menu-item > a::after,
.ud-primary-nav > ul > li.current-menu-ancestor > a::after,
.ud-primary-nav > ul > li > a:hover::after { transform: scaleX(1); }

.ud-nav-caret {
	background: none; border: 0; padding: 6px; margin-left: -6px; cursor: pointer;
	color: var(--ud-text-on-dark); display: inline-flex; align-items: center; border-radius: 50%;
}
.ud-nav-caret svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.ud-primary-nav li:hover .ud-nav-caret,
.ud-primary-nav li.is-open .ud-nav-caret { color: #fff; }
.ud-primary-nav li:hover .ud-nav-caret svg,
.ud-primary-nav li.is-open .ud-nav-caret svg { transform: rotate(180deg); }

.ud-primary-nav .sub-menu {
	position: absolute; top: 100%; left: 0;
	background: #fff; color: var(--ud-ink);
	width: 340px; border-radius: var(--ud-radius-lg);
	border: 1px solid var(--ud-border); box-shadow: var(--ud-shadow-lg);
	padding: 10px; margin-top: 14px;
	list-style: none;
	display: flex; flex-direction: column; align-items: stretch; gap: 2px;
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.ud-primary-nav li:hover > .sub-menu,
.ud-primary-nav li:focus-within > .sub-menu,
.ud-primary-nav li.is-open > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.ud-primary-nav .sub-menu a {
	color: var(--ud-ink); padding: 10px; border-radius: var(--ud-radius-sm);
	display: flex; align-items: flex-start; gap: 12px; text-align: left;
}
.ud-primary-nav .sub-menu a:hover { background: var(--ud-bg-light); color: var(--ud-ink); }
.ud-nav-dropdown-icon {
	flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--ud-radius-sm);
	display: flex; align-items: center; justify-content: center;
	background: var(--ud-bg-light); color: var(--ud-orange);
	transition: background 0.15s ease, color 0.15s ease;
}
.ud-nav-dropdown-icon svg { width: 18px; height: 18px; }
.ud-primary-nav .sub-menu a:hover .ud-nav-dropdown-icon { background: var(--ud-orange); color: #fff; }
.ud-nav-dropdown-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.ud-nav-dropdown-label { font-size: 0.9rem; font-weight: 600; color: var(--ud-ink); line-height: 1.3; }
.ud-nav-dropdown-desc { font-size: 0.78rem; color: var(--ud-text-muted); line-height: 1.4; }

.ud-header-actions { display: flex; align-items: center; gap: 20px; }
.ud-header-actions a.ud-signin { color: var(--ud-text-on-dark); font-weight: 500; font-size: 0.95rem; transition: color 0.15s ease; }
.ud-header-actions a.ud-signin:hover { color: #fff; }
.ud-primary-nav a.ud-primary-nav__mobile-signin { display: none; }
.ud-menu-toggle {
	display: none; background: none; border: 0; color: #fff;
	width: 40px; height: 40px; align-items: center; justify-content: center;
	position: relative; flex-direction: column; gap: 5px; cursor: pointer;
}
.ud-menu-toggle__bar {
	display: block; width: 20px; height: 2px; background: #fff; border-radius: var(--ud-radius-pill);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.ud-menu-toggle[aria-expanded="true"] .ud-menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ud-menu-toggle[aria-expanded="true"] .ud-menu-toggle__bar:nth-child(2) { opacity: 0; }
.ud-menu-toggle[aria-expanded="true"] .ud-menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
	.ud-primary-nav {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--ud-navy-soft); border-top: 1px solid rgba(255,255,255,0.08);
		box-shadow: var(--ud-shadow-lg); max-height: calc(100vh - 72px); overflow-y: auto;
	}
	.ud-primary-nav.is-open { display: block; }
	.ud-primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 12px; }
	.ud-primary-nav > ul > li { flex-direction: column; align-items: stretch; }
	.ud-primary-nav > ul > li > a { padding: 14px 12px; }
	.ud-primary-nav > ul > li > a::after { display: none; }
	.ud-nav-caret { position: absolute; right: 4px; top: 4px; }
	/* No :hover on touch — the sub-menu only opens via the caret button
	   (li.is-open, toggled by JS), and lives inline instead of flying out. */
	.ud-primary-nav .sub-menu {
		position: static; box-shadow: none; border: none; margin: 0 0 6px;
		padding-left: 12px; width: auto; opacity: 1; visibility: visible; transform: none;
		max-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; transition: max-height 0.2s ease;
		background: transparent;
	}
	.ud-primary-nav li.is-open > .sub-menu { max-height: 600px; padding-top: 4px; padding-bottom: 4px; }
	.ud-nav-dropdown-icon { background: rgba(255,255,255,0.08); color: var(--ud-orange); }
	.ud-primary-nav .sub-menu a:hover .ud-nav-dropdown-icon { background: var(--ud-orange); color: #fff; }
	.ud-nav-dropdown-label { color: var(--ud-text-on-dark); }
	.ud-nav-dropdown-desc { color: rgba(255,255,255,0.55); }
	.ud-primary-nav .sub-menu a:hover { background: rgba(255,255,255,0.06); color: #fff; }

	.ud-menu-toggle { display: inline-flex; }
	.ud-header-actions .ud-signin { display: none; }

	/* The top bar has no room for "Sign in" once the hamburger appears —
	   it moves inside the drawer instead of just vanishing. Specificity
	   must match/beat .ud-primary-nav a (display:inline-block, defined
	   unconditionally above) — a bare .ud-primary-nav__mobile-signin
	   selector loses to it regardless of media query or source order. */
	.ud-primary-nav a.ud-primary-nav__mobile-signin {
		display: flex; align-items: center; gap: 10px;
		margin: 4px 12px 12px; padding: 14px 12px;
		border-top: 1px solid rgba(255,255,255,0.08);
		color: var(--ud-text-on-dark); font-weight: 600; font-size: 0.95rem;
	}
	.ud-primary-nav__mobile-signin svg { width: 18px; height: 18px; flex-shrink: 0; }
	.ud-primary-nav__mobile-signin:hover { color: #fff; }
}

/* ---------- Breadcrumbs ---------- */
.ud-breadcrumbs { font-size: 0.85rem; color: var(--ud-text-on-dark); padding-block: 20px 0; }
.ud-breadcrumbs a { color: var(--ud-text-on-dark); }
.ud-breadcrumbs a:hover { color: var(--ud-orange); }
.ud-breadcrumbs .sep { margin: 0 8px; opacity: 0.5; }

/* ---------- Hero (split) ---------- */
.ud-hero-split {
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
	padding-block: 56px 72px;
}
.ud-hero-split__actions { display: flex; gap: 12px; margin: 28px 0; flex-wrap: wrap; }
.ud-hero-split__badges { display: flex; gap: 24px; flex-wrap: wrap; font-size: 0.85rem; color: var(--ud-text-on-dark); }
.ud-hero-split__badges span { display: inline-flex; align-items: center; gap: 8px; }
.ud-hero-split figure { margin: 0; border-radius: var(--ud-radius-lg); overflow: hidden; }
@media (max-width: 900px) {
	.ud-hero-split { grid-template-columns: 1fr; }
}

/* ---------- Stat bar ---------- */
.ud-stat-bar {
	background: var(--ud-navy-soft);
	border-radius: var(--ud-radius-lg);
	padding: 32px;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
	margin-block: 48px;
}
.ud-stat-bar__item { display: flex; align-items: center; gap: 16px; }
.ud-stat-bar__icon {
	width: 48px; height: 48px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.08); flex-shrink: 0;
}
.ud-stat-bar__number { font-size: 1.5rem; font-weight: 700; color: #fff; }
.ud-stat-bar__label { font-size: 0.85rem; color: var(--ud-text-on-dark); }
.ud-stat-bar__desc { font-size: 0.78rem; color: var(--ud-text-on-dark); opacity: 0.65; }
@media (max-width: 900px) { .ud-stat-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ud-stat-bar { grid-template-columns: 1fr; } }

/* ---------- Feature / value cards ---------- */
.ud-card {
	background: #fff; border: 1px solid var(--ud-border);
	border-radius: var(--ud-radius-md); padding: 28px;
}
.ud-card--shadow { box-shadow: var(--ud-shadow-sm); border: none; }
.ud-card__icon {
	width: 48px; height: 48px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 16px; font-size: 1.25rem;
}
.ud-card h3 { margin-bottom: 8px; }
.ud-card p { margin-bottom: 0; font-size: 0.92rem; }
.ud-card__link { display: inline-flex; align-items: center; gap: 6px; color: var(--ud-orange); font-weight: 600; margin-top: 12px; font-size: 0.9rem; }

/* ---------- Article / resource cards ---------- */
.ud-article-card {
	background: #fff; border-radius: var(--ud-radius-md); overflow: hidden;
	border: 1px solid var(--ud-border);
}
.ud-article-card__media { aspect-ratio: 16/9; background: var(--ud-bg-section); position: relative; }
.ud-article-card__badge {
	position: absolute; top: 12px; left: 12px;
	background: var(--ud-orange); color: #fff; font-size: 0.7rem; font-weight: 700;
	padding: 4px 10px; border-radius: var(--ud-radius-pill); text-transform: uppercase;
}
.ud-article-card__body { padding: 20px; }
.ud-article-card__category { color: var(--ud-orange); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; display: block; }
.ud-article-card__meta { display: flex; gap: 10px; align-items: center; font-size: 0.8rem; color: var(--ud-text-muted); margin-top: 14px; }
.ud-article-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.ud-article-card__meta svg { width: 14px; height: 14px; }
.ud-article-card__fallback-icon {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,0.85);
}
.ud-article-card__fallback-icon svg { width: 36px; height: 36px; }

/* ---------- CTA banner ---------- */
.ud-cta-banner {
	background: var(--ud-navy);
	border-radius: var(--ud-radius-lg);
	padding: 40px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	flex-wrap: wrap;
}
.ud-cta-banner h3 { color: #fff; margin-bottom: 4px; }
.ud-cta-banner p { color: var(--ud-text-on-dark); margin-bottom: 0; }
.ud-cta-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- Pricing ---------- */
.ud-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.ud-pricing-card { border: 1px solid var(--ud-border); border-radius: var(--ud-radius-lg); padding: 32px; text-align: left; background: #fff; }
.ud-pricing-card--popular { border-color: var(--product-accent, var(--ud-purple)); box-shadow: var(--ud-shadow-md); position: relative; }
.ud-pricing-card--popular::before {
	content: "Most Popular"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
	background: var(--product-accent, var(--ud-purple)); color: #fff; font-size: 0.7rem; font-weight: 700;
	padding: 4px 14px; border-radius: var(--ud-radius-pill);
}
.ud-pricing-card__price { font-size: 2.25rem; font-weight: 800; margin: 12px 0; }
.ud-pricing-card__price span { font-size: 1rem; font-weight: 400; color: var(--ud-text-muted); }
.ud-pricing-card ul { margin: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.ud-pricing-card li { display: flex; gap: 8px; font-size: 0.9rem; align-items: flex-start; }
@media (max-width: 900px) { .ud-pricing-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ / accordion ---------- */
.ud-faq-item { border-bottom: 1px solid var(--ud-border); }
.ud-faq-item__q {
	width: 100%; background: none; border: 0; text-align: left;
	padding: 18px 0; display: flex; justify-content: space-between; align-items: center;
	font-weight: 600; font-size: 0.95rem; color: var(--ud-ink);
}
.ud-faq-item__q::after { content: "+"; font-size: 1.25rem; color: var(--ud-text-muted); }
.ud-faq-item[data-open="true"] .ud-faq-item__q::after { content: "\2212"; }
.ud-faq-item__a { display: none; padding-bottom: 18px; font-size: 0.9rem; }
.ud-faq-item[data-open="true"] .ud-faq-item__a { display: block; }

/* ---------- Forms ---------- */
.ud-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.ud-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ud-field label { font-size: 0.85rem; font-weight: 600; color: var(--ud-ink); }
.ud-field input, .ud-field select, .ud-field textarea {
	padding: 12px 14px; border: 1px solid var(--ud-border); border-radius: var(--ud-radius-sm);
	font-size: 0.9rem; color: var(--ud-ink); background: #fff;
}
.ud-field textarea { resize: vertical; min-height: 120px; }
@media (max-width: 600px) { .ud-form-row { grid-template-columns: 1fr; } }

/* A white card (e.g. the contact form) can sit inside a .ud-section--dark
   wrapper for layout purposes; without this, the dark section's ambient
   text colors (white headings, light-gray body text) leak into the card
   and read as invisible/low-contrast against its white background. */
.ud-card--shadow.ud-card { color: var(--ud-ink); }
.ud-card--shadow.ud-card h3 { color: var(--ud-ink); }
.ud-card--shadow.ud-card p { color: var(--ud-text-muted); }

/* ---------- Filter pills ---------- */
.ud-filter-pills { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ud-filter-pill {
	padding: 8px 18px; border-radius: var(--ud-radius-pill); border: 1px solid var(--ud-border);
	font-size: 0.85rem; font-weight: 600; background: #fff; color: var(--ud-ink);
}
.ud-filter-pill.is-active { background: var(--ud-navy); color: #fff; border-color: var(--ud-navy); }
a.ud-filter-pill { display: inline-block; text-decoration: none; }

.ud-filter-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	flex-wrap: wrap; margin-bottom: 32px;
}
.ud-search-input {
	display: flex; align-items: center; gap: 8px;
	border: 1px solid var(--ud-border); border-radius: var(--ud-radius-sm);
	padding: 10px 14px; min-width: 220px; color: var(--ud-text-muted);
}
.ud-search-input svg { flex-shrink: 0; }
.ud-search-input input {
	border: 0; outline: 0; font-size: 0.9rem; width: 100%; color: var(--ud-ink);
}

/* ---------- Team card ---------- */
.ud-team-row-wrap { display: flex; align-items: center; gap: 16px; }
.ud-team-row {
	display: flex; gap: 24px; overflow-x: auto; scroll-behavior: smooth;
	flex: 1; padding-bottom: 4px; scrollbar-width: none;
}
.ud-team-row::-webkit-scrollbar { display: none; }
.ud-team-card {
	text-align: left; flex: 0 0 auto; width: 190px;
	background: #fff; border: 1px solid var(--ud-border); border-radius: var(--ud-radius-md);
	padding: 12px;
}
.ud-team-card__photo { border-radius: var(--ud-radius-sm); overflow: hidden; margin-bottom: 14px; aspect-ratio: 1; background: var(--ud-bg-section); }
.ud-team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ud-team-card__name { font-weight: 700; font-size: 0.95rem; }
.ud-team-card__role { font-size: 0.8rem; color: var(--ud-text-muted); margin-bottom: 12px; }
.ud-team-card__socials { display: flex; align-items: center; gap: 14px; }
.ud-team-card__socials a { color: var(--ud-text-muted); display: inline-flex; }
.ud-team-card__socials a:hover { color: var(--ud-orange); }
.ud-team-card__socials svg { width: 16px; height: 16px; }
.ud-team-next {
	flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none;
	background: var(--ud-orange); color: #fff; display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: background 0.15s ease;
}
.ud-team-next:hover { background: var(--ud-orange-dark); }
@media (max-width: 600px) {
	.ud-team-row-wrap { flex-direction: column-reverse; align-items: stretch; }
}

/* ---------- Footer ---------- */
.ud-site-footer { background: var(--ud-navy); color: var(--ud-text-on-dark); padding-block: 56px 24px; }
.ud-footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; padding-bottom: 40px; }
.ud-footer-grid h4 { color: #fff; font-size: 0.95rem; margin-bottom: 16px; }
.ud-footer-grid ul { display: flex; flex-direction: column; gap: 10px; }
.ud-footer-grid a { color: var(--ud-text-on-dark); font-size: 0.9rem; }
.ud-footer-grid a:hover { color: var(--ud-orange); }
.ud-footer-newsletter { display: flex; gap: 8px; margin-top: 12px; }
.ud-footer-newsletter input {
	flex: 1; padding: 10px 14px; border-radius: var(--ud-radius-sm); border: 1px solid rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.05); color: #fff;
}
.ud-footer-newsletter button {
	background: var(--ud-orange); color: #fff; border: 0; border-radius: var(--ud-radius-sm); padding: 10px 16px;
}
.ud-logo__image--footer { height: 44px; margin-bottom: 12px; }
.ud-footer-social { display: flex; gap: 16px; margin-top: 20px; }
.ud-footer-social a { color: var(--ud-text-on-dark); display: inline-flex; }
.ud-footer-social a:hover { color: var(--ud-orange); }
.ud-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	font-size: 0.8rem;
}
@media (max-width: 900px) { .ud-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ud-footer-grid { grid-template-columns: 1fr; } }

/* ---------- Utility ---------- */
.ud-text-center { text-align: center; }
.ud-mb-0 { margin-bottom: 0; }
.ud-flex { display: flex; align-items: center; gap: 12px; }
.ud-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ud-mt-lg { margin-top: 48px; }

/* --- New Front Page Sections --- */

/* Social Proof / Logos Grid */
.ud-section--social-proof { padding-block: 48px; }
.ud-logos-grid {
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; align-items: center;
}
.ud-logo-item {
	text-align: center; font-weight: 600; font-size: 0.85rem;
	color: var(--ud-text-muted); padding: 12px;
	display: flex; align-items: center; justify-content: center;
}
.ud-logo-item img {
	max-height: 36px; max-width: 100%; width: auto; object-fit: contain;
	filter: grayscale(100%); opacity: 0.6; transition: filter 0.15s ease, opacity 0.15s ease;
}
.ud-logo-item img:hover { filter: grayscale(0%); opacity: 1; }
@media (max-width: 900px) {
	.ud-logos-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
	.ud-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* Product Cards (Updated design) */
.ud-product-card {
	background: #fff; border: 1px solid var(--ud-border);
	border-radius: var(--ud-radius-md); padding: 28px;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	box-shadow: var(--ud-shadow-sm);
}
.ud-product-card:hover {
	box-shadow: var(--ud-shadow-lg); transform: translateY(-6px);
}
.ud-product-card__header {
	margin-bottom: 20px; display: flex; align-items: center; gap: 12px;
}
.ud-product-card__icon {
	width: 64px; height: 64px; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	background: var(--ud-navy); color: #fff; font-size: 1.75rem;
	flex-shrink: 0;
}
.ud-product-card__title {
	font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--ud-ink);
}
.ud-product-card__desc {
	font-size: 0.92rem; color: var(--ud-text-muted); margin-bottom: 16px; line-height: 1.5;
}
.ud-product-card__link {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--ud-orange); font-weight: 600; font-size: 0.9rem;
}

/* Catalog variant (Products archive): smaller icon, badge in header row,
   feature checklist, and a footer action row with a cart button. */
.ud-product-card--catalog { display: flex; flex-direction: column; min-width: 0; }
.ud-product-card--catalog .ud-product-card__header {
	display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px;
}
.ud-product-card--catalog .ud-product-card__icon {
	width: 48px; height: 48px; border-radius: 10px; font-size: 1.3rem;
}
.ud-product-card--catalog .ud-product-card__icon svg { width: 22px; height: 22px; }
.ud-product-card--catalog .ud-product-card__title { margin-bottom: 8px; }
.ud-product-card--catalog .ud-product-card__desc { min-height: 62px; }
.ud-product-card__features {
	display: flex; flex-direction: column; gap: 10px; margin: 4px 0 20px;
}
.ud-product-card__features li {
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 0.85rem; color: var(--ud-ink);
}
.ud-product-card__features svg {
	color: var(--ud-orange); width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
}
.ud-product-card__footer {
	margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ud-product-card__cart {
	width: 38px; height: 38px; border-radius: var(--ud-radius-sm);
	background: var(--ud-bg-section); color: var(--ud-ink);
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ud-product-card__cart:hover { background: var(--ud-border); }

/* Uploaded-favicon variant of any product icon chip (see
   ufirstdev_get_product_icon_html()) — white padded square instead of a
   solid color fill, so an uploaded logo (often transparent-background PNG)
   reads cleanly regardless of the product's accent color. Combined with
   whatever sizing class the call site already uses (e.g. .ud-product-card__icon),
   so no per-context duplication needed. */
.ud-product-icon--image {
	background: #fff; padding: 8px;
}
.ud-product-icon--image img {
	display: block; width: 100%; height: 100%; object-fit: contain;
}

/* Showcase variant (homepage): centered card on a pastel tint of the
   product's own accent color, with its dashboard/app screenshot peeking
   out from the bottom edge — see page-templates reference design. */
.ud-product-card--showcase {
	background: color-mix( in srgb, var(--card-accent, var(--ud-orange)) 7%, #fff );
	border: 1px solid color-mix( in srgb, var(--card-accent, var(--ud-orange)) 18%, #fff );
	border-radius: var(--ud-radius-lg); padding: 36px 28px 0;
	text-align: center; overflow: hidden;
	display: flex; flex-direction: column; align-items: center; min-width: 0;
	box-shadow: none;
}
.ud-product-card--showcase:hover {
	box-shadow: var(--ud-shadow-lg); transform: translateY(-6px);
}
.ud-product-card--showcase .ud-product-card__header {
	justify-content: center; margin-bottom: 16px;
}
.ud-product-card--showcase .ud-product-card__icon {
	width: 40px; height: 40px; border-radius: 10px;
}
.ud-product-card--showcase .ud-product-card__icon svg { width: 20px; height: 20px; }
.ud-product-card--showcase .ud-product-card__title {
	margin-bottom: 0; font-size: 1.2rem;
}
.ud-product-card--showcase .ud-product-card__desc { margin-bottom: 20px; }
.ud-product-card--showcase .ud-product-card__link {
	margin-bottom: 28px; display: inline-flex;
}
.ud-product-card--showcase .ud-product-card__shot {
	margin-top: auto; width: 100%; border-radius: 12px 12px 0 0; overflow: hidden;
	box-shadow: 0 20px 40px -18px rgba(16, 24, 43, 0.28);
	border: 1px solid rgba(16, 24, 43, 0.06); border-bottom: none;
	transform: translateY(18px);
}
.ud-product-card--showcase .ud-product-card__shot img {
	display: block; width: 100%; height: auto;
}

/* Bundle promo card (dark, replaces the last grid slot) */
.ud-bundle-card {
	background: var(--ud-navy); color: var(--ud-text-on-dark);
	border-radius: var(--ud-radius-md); padding: 28px;
	display: flex; flex-direction: column; min-width: 0;
}
.ud-bundle-card__icon {
	width: 48px; height: 48px; border-radius: 10px;
	background: rgba(255,255,255,0.1); color: var(--ud-orange);
	display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.ud-bundle-card h3 { color: #fff; margin-bottom: 8px; }
.ud-bundle-card p { color: var(--ud-text-on-dark); margin-bottom: 20px; font-size: 0.92rem; }
.ud-bundle-card .ud-btn { margin-bottom: 20px; align-self: flex-start; }
.ud-bundle-card ul { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.ud-bundle-card li { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.ud-bundle-card li svg { color: #4ade80; width: 16px; height: 16px; flex-shrink: 0; }

/* Badge */
.ud-badge {
	display: inline-block; padding: 4px 12px; border-radius: var(--ud-radius-pill);
	font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
	margin-bottom: 12px;
}
.ud-badge--coming-soon {
	background: var(--ud-bg-section); color: var(--ud-text-muted);
}
.ud-badge--popular { background: #dbeafe; color: #1d4ed8; }
.ud-badge--new { background: #dcfce7; color: #16a34a; }
.ud-badge--stay-tuned { background: #ede9fe; color: #7c3aed; }

/* Text Highlight (orange) */
.ud-highlight { color: var(--ud-orange); }

/* Feature Cards (5-column grid) */
.ud-grid--5 { grid-template-columns: repeat(5, 1fr); }
.ud-feature-card {
	text-align: center; padding: 0;
}
.ud-feature-card__icon {
	width: 64px; height: 64px; margin: 0 auto 16px;
	display: flex; align-items: center; justify-content: center;
	background: #fff; border-radius: 50%; box-shadow: var(--ud-shadow-sm);
	color: var(--ud-navy);
}
.ud-feature-card__icon svg { width: 26px; height: 26px; }
.ud-feature-card__icon--peach { background: #fef1e8; color: var(--ud-orange); box-shadow: none; }
.ud-feature-card h3 { font-size: 1rem; margin-bottom: 8px; color: var(--ud-ink); }
.ud-feature-card p { font-size: 0.85rem; color: var(--ud-text-muted); margin: 0; line-height: 1.4; }

@media (max-width: 900px) {
	.ud-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.ud-grid--5 { grid-template-columns: repeat(2, 1fr); }
}

/* Stats Section (contained rounded box within a light section) */
.ud-stats-section { padding-block: 0 72px; }
.ud-stats-box {
	background: var(--ud-navy); border-radius: var(--ud-radius-lg);
	padding: 40px 32px;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.ud-stat-item {
	text-align: center;
}
.ud-stat-item svg {
	color: var(--ud-orange); width: 28px; height: 28px; margin-bottom: 10px;
}
.ud-stat-number {
	font-size: 2rem; font-weight: 800; color: var(--ud-orange); margin-bottom: 4px;
}
.ud-stat-label {
	font-size: 0.85rem; color: var(--ud-text-on-dark); font-weight: 500;
}
@media (max-width: 900px) {
	.ud-stats-box { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
	.ud-stats-box { grid-template-columns: 1fr; gap: 20px; padding: 32px 20px; }
}

/* Testimonial */
.ud-eyebrow--muted { color: var(--ud-text-muted); }
.ud-testimonial-carousel { max-width: 600px; margin-inline: auto; }
.ud-testimonial {
	display: none;
	text-align: center;
	padding: 40px; background: var(--ud-bg-light); border-radius: var(--ud-radius-lg);
}
.ud-testimonial.is-active { display: block; }
.ud-testimonial__quote-mark {
	display: block; font-size: 2.5rem; line-height: 1; color: var(--ud-orange);
	font-weight: 800; margin-bottom: 8px; font-family: Georgia, serif;
}
.ud-testimonial__quote {
	font-size: 1.1rem; font-weight: 500; color: var(--ud-ink);
	margin-bottom: 24px; line-height: 1.6; padding: 0;
}
.ud-testimonial__author {
	display: flex; align-items: center; justify-content: center; gap: 16px;
}
.ud-testimonial__avatar {
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--ud-navy); color: #fff;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; flex-shrink: 0;
}
.ud-testimonial__avatar img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.ud-testimonial__name {
	font-weight: 700; color: var(--ud-ink); font-size: 0.95rem;
}
.ud-testimonial__title {
	font-size: 0.8rem; color: var(--ud-text-muted);
}
.ud-testimonial__dots {
	display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px;
}
.ud-testimonial__dots span {
	width: 8px; height: 8px; border-radius: 50%; background: var(--ud-border); cursor: pointer;
}
.ud-testimonial__dots span.is-active { background: var(--ud-orange); width: 22px; border-radius: var(--ud-radius-pill); }

/* Final CTA Section */
.ud-final-cta__grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.ud-final-cta__content {}
.ud-final-cta__content h2 { color: #fff; margin-bottom: 16px; }
.ud-final-cta__content p { color: var(--ud-text-on-dark); margin-bottom: 24px; }
.ud-brand { color: var(--ud-orange); }
.ud-final-cta__actions {
	display: flex; gap: 16px; flex-wrap: wrap;
}
.ud-cta-mockup {
	background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--ud-radius-lg); overflow: hidden;
}
.ud-cta-mockup__chrome {
	display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ud-cta-mockup__chrome span {
	width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2);
}
.ud-cta-mockup__body { padding: 20px; }
.ud-chart {
	width: 100%; height: 200px;
}
@media (max-width: 900px) {
	.ud-final-cta__grid { grid-template-columns: 1fr; gap: 32px; }
	.ud-chart { height: 150px; }
}

/* Products Archive: Hero with stacked window mockups */
.ud-products-hero { position: relative; overflow: hidden; padding-block: 56px 88px; }
.ud-products-hero::after {
	content: ""; position: absolute; bottom: -60px; right: -60px;
	width: 320px; height: 320px;
	background: linear-gradient(135deg, rgba(255,107,26,0.9), rgba(255,107,26,0));
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	pointer-events: none; z-index: 0;
}
.ud-products-hero__grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.ud-products-hero__heading {
	font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.2;
	margin-bottom: 16px; color: #fff;
}
.ud-products-hero__copy {
	font-size: 1.05rem; color: var(--ud-text-on-dark); line-height: 1.7;
	margin-bottom: 28px; max-width: 90%;
}
.ud-products-hero__badges { display: flex; flex-wrap: wrap; gap: 16px 28px; }

.ud-stacked-mockup { position: relative; height: 320px; }
.ud-stacked-mockup__layer {
	position: absolute; border-radius: 8px; overflow: hidden;
	background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.ud-stacked-mockup__layer--back-1 {
	top: 0; right: 0; width: 78%; height: 62%; opacity: 0.55; z-index: 1;
}
.ud-stacked-mockup__layer--back-2 {
	top: 34px; right: 34px; width: 78%; height: 62%; opacity: 0.8; z-index: 2;
}
.ud-stacked-mockup__layer--front {
	top: 68px; left: 0; width: 92%; z-index: 3;
}
.ud-stacked-mockup__layer--front img { display: block; width: 100%; height: auto; }
.ud-stacked-mockup__chrome {
	display: flex; align-items: center; gap: 8px; padding: 8px 12px;
	border-bottom: 1px solid var(--ud-border); background: #f8f9fa;
}
.ud-stacked-mockup__chrome span:first-child {
	width: 16px; height: 16px; border-radius: 4px; background: var(--ud-navy); color: #fff;
	display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem;
}
.ud-stacked-mockup__chrome b { font-size: 0.75rem; color: var(--ud-ink); }
.ud-stacked-mockup__body { padding: 16px; }
.ud-stacked-mockup__row { display: flex; gap: 8px; margin-bottom: 8px; }
.ud-stacked-mockup__bar { flex: 1; height: 8px; border-radius: 4px; background: var(--ud-bg-section); }

@media (max-width: 900px) {
	.ud-products-hero__grid { grid-template-columns: 1fr; }
	.ud-products-hero__copy { max-width: 100%; }
	.ud-stacked-mockup { margin-top: 24px; height: 280px; }
}
@media (max-width: 600px) {
	.ud-products-hero__badges { flex-direction: column; gap: 12px; }
}

/* Home Hero Section (namespaced separately from the shared .ud-hero-split
   design-system component used on single-product/resource/archive templates,
   which applies its own grid directly to .ud-container — reusing that class
   here caused the home hero's outer section to inherit an unwanted 2-col
   grid, squashing the container to half width). */
.ud-home-hero { position: relative; overflow: hidden; }
.ud-home-hero::after {
	content: ""; position: absolute; top: -220px; right: -180px;
	width: 560px; height: 560px; border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, rgba(255,107,26,0.35), rgba(255,107,26,0) 70%);
	pointer-events: none; z-index: 0;
}
.ud-home-hero__grid { position: relative; z-index: 1; }
.ud-home-hero__grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.ud-home-hero__content {
	min-width: 0;
}
.ud-eyebrow-badge {
	display: inline-block; padding: 8px 16px; border: 1px solid var(--ud-orange);
	border-radius: var(--ud-radius-pill); color: var(--ud-orange); font-size: 0.85rem;
	font-weight: 600; margin-bottom: 24px;
}
.ud-home-hero__heading {
	font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 800; line-height: 1.15;
	margin-bottom: 24px; color: #fff;
}
.ud-home-hero__copy {
	font-size: 1.1rem; color: var(--ud-text-on-dark); line-height: 1.7;
	margin-bottom: 32px; max-width: 95%;
}
.ud-home-hero__actions {
	display: flex; gap: 16px; margin-bottom: 48px; flex-wrap: wrap;
}
.ud-home-hero__actions .ud-btn {
	display: inline-flex; align-items: center; gap: 8px;
}
.ud-home-hero__badges {
	display: flex; flex-wrap: wrap; gap: 20px 28px;
}
.ud-hero-badge {
	display: flex; align-items: center; gap: 12px; font-size: 0.9rem;
	color: var(--ud-text-on-dark);
}
.ud-hero-badge svg {
	width: 24px; height: 24px; flex-shrink: 0;
}
.ud-hero-badge--on-light { color: var(--ud-ink); }

.ud-home-hero__image {
	display: flex; align-items: center; justify-content: center;
	min-width: 0;
}
.ud-laptop-mockup {
	position: relative; width: 100%; max-width: 480px;
}
.ud-laptop-mockup__bezel {
	background: #1a1a1a; border-radius: 14px 14px 4px 4px;
	padding: 12px 12px 16px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.ud-laptop-mockup__screen {
	display: block; width: 100%; height: auto; border-radius: 4px;
}
.ud-laptop-mockup__base {
	height: 12px; margin-inline: 18px;
	background: linear-gradient(#2a2a2a, #141414);
	border-radius: 0 0 10px 10px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.ud-laptop-mockup__base::before {
	content: ""; display: block; width: 60px; height: 4px; margin: 0 auto;
	background: #3a3a3a; border-radius: 0 0 4px 4px;
}

@media (max-width: 768px) {
	.ud-home-hero__grid {
		grid-template-columns: 1fr; gap: 32px;
	}
	.ud-home-hero__badges {
		gap: 16px 24px;
	}
	.ud-home-hero__image {
		margin-top: 24px;
	}
	.ud-laptop-mockup {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.ud-home-hero__heading {
		font-size: 1.75rem;
	}
	.ud-home-hero__copy {
		font-size: 1rem; max-width: 100%;
	}
	.ud-home-hero__actions {
		flex-direction: column;
	}
	.ud-home-hero__actions .ud-btn {
		width: 100%;
	}
	.ud-home-hero__badges {
		flex-direction: column; gap: 12px;
	}
}

/* ---------- Founder Quote (homepage) ---------- */
.ud-founder-quote { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: center; }
.ud-founder-quote__photo {
	border-radius: var(--ud-radius-lg); overflow: hidden; aspect-ratio: 1;
	background: var(--ud-bg-section); display: flex; align-items: center; justify-content: center;
}
.ud-founder-quote__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ud-founder-quote__fallback-icon { color: var(--ud-text-muted); }
.ud-founder-quote__fallback-icon svg { width: 48px; height: 48px; }
.ud-founder-quote__text {
	font-size: 1.5rem; font-weight: 700; line-height: 1.4; color: var(--ud-ink);
	margin: 0 0 24px; border: none; padding: 0;
}
.ud-founder-quote__name { font-weight: 700; font-size: 1rem; }
.ud-founder-quote__role { color: var(--ud-text-muted); font-size: 0.9rem; }
@media (max-width: 800px) {
	.ud-founder-quote { grid-template-columns: 1fr; gap: 28px; }
	.ud-founder-quote__photo { max-width: 320px; margin-inline: auto; }
	.ud-founder-quote__text { font-size: 1.25rem; }
}

/* ==========================================================================
   Single Product page (combines AcquisitionSuite/Synapress reference
   designs into one data-driven layout; --product-accent is set inline
   per-section from the product's ud_accent_color meta field).
   ========================================================================== */

.ud-product-hero { position: relative; overflow: hidden; padding-block: 56px 88px; }
.ud-product-hero::after {
	content: ""; position: absolute; top: -220px; right: -180px;
	width: 560px; height: 560px; border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--product-accent) 35%, transparent), transparent 70%);
	pointer-events: none; z-index: 0;
}
.ud-product-hero__grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.ud-product-hero__content { min-width: 0; }
.ud-product-hero__icon {
	width: 64px; height: 64px; border-radius: 14px;
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; margin-bottom: 20px;
}
.ud-product-hero__icon svg { width: 30px; height: 30px; }
.ud-product-hero__title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.ud-product-hero__title-row h1 { margin-bottom: 0; font-size: clamp(2rem, 4vw, 2.75rem); color: #fff; }
.ud-highlight-accent { color: var(--product-accent); }
.ud-product-hero__badge {
	display: inline-block; padding: 5px 12px; border-radius: var(--ud-radius-sm);
	background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
	color: var(--ud-text-on-dark); font-size: 0.75rem; font-weight: 600;
}
.ud-product-hero__headline {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; line-height: 1.2;
	color: #fff; margin-bottom: 16px;
}
.ud-product-hero__tagline {
	font-size: 1.05rem; color: var(--ud-text-on-dark); line-height: 1.7;
	margin-bottom: 24px; max-width: 95%;
}
.ud-product-hero__checklist {
	display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px;
}
.ud-product-hero__checklist li {
	display: flex; align-items: flex-start; gap: 10px;
	color: var(--ud-text-on-dark); font-size: 0.95rem;
}
.ud-product-hero__checklist svg { color: var(--product-accent); width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.ud-product-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.ud-product-hero__trust { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.ud-star-row { display: inline-flex; gap: 2px; }
.ud-star-fill { color: var(--product-accent); width: 16px; height: 16px; }
.ud-star-fill svg, svg.ud-star-fill { fill: currentColor; stroke: none; }

.ud-product-hero__image { display: flex; align-items: center; justify-content: center; min-width: 0; }
.ud-product-hero__screenshot {
	width: 100%; height: auto; border-radius: 12px;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

@media (max-width: 900px) {
	.ud-product-hero__grid { grid-template-columns: 1fr; gap: 32px; }
	.ud-product-hero__tagline { max-width: 100%; }
	.ud-product-hero__image { margin-top: 8px; }
}
@media (max-width: 600px) {
	.ud-product-hero__actions { flex-direction: column; }
	.ud-product-hero__actions .ud-btn { width: 100%; justify-content: center; }
	.ud-product-hero__trust { flex-direction: column; gap: 12px; }
}

/* Ratings bar */
.ud-ratings-bar { border-bottom: 1px solid var(--ud-border); }
.ud-ratings-bar__row {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 40px;
}
.ud-ratings-bar__item { display: flex; align-items: center; gap: 12px; }
.ud-ratings-bar__item svg { color: var(--ud-text-muted); width: 28px; height: 28px; flex-shrink: 0; }
.ud-ratings-bar__score { font-weight: 700; color: var(--ud-ink); font-size: 0.95rem; }
.ud-ratings-bar__label { font-size: 0.8rem; color: var(--ud-text-muted); }

/* Features grid header (eyebrow+heading left, optional intro right) */
.ud-features-header {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
	flex-wrap: wrap; margin-bottom: 40px;
}
.ud-features-header h2 { margin-bottom: 0; }
.ud-features-header__intro { max-width: 380px; margin-bottom: 0; }
.ud-product-feature-card__icon {
	background: var(--ud-bg-section);
	background: color-mix(in srgb, var(--product-accent) 14%, white);
	color: var(--product-accent);
}

/* Ecosystem section */
.ud-ecosystem-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.ud-ecosystem-grid--text-only { grid-template-columns: 1fr; max-width: 700px; margin-inline: auto; text-align: center; }
.ud-ecosystem-grid--text-only .ud-ecosystem-badges { justify-content: center; }
.ud-ecosystem-badges { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 20px; }
.ud-ecosystem-grid__image { width: 100%; height: auto; border-radius: 12px; box-shadow: var(--ud-shadow-lg); }
@media (max-width: 900px) {
	.ud-ecosystem-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Resources Hub page
   ========================================================================== */

.ud-resources-hero { position: relative; overflow: hidden; padding-block: 56px 96px; }
.ud-resources-hero::after {
	content: ""; position: absolute; top: -200px; right: -160px;
	width: 520px; height: 520px; border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, rgba(255,107,26,0.3), transparent 70%);
	pointer-events: none; z-index: 0;
}
.ud-resources-hero__grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.ud-resources-hero__heading {
	font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 800; line-height: 1.15;
	margin-bottom: 16px; color: #fff;
}
.ud-resources-hero__copy {
	font-size: 1.05rem; color: var(--ud-text-on-dark); line-height: 1.7; margin-bottom: 28px; max-width: 95%;
}
.ud-resources-hero__search {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border-radius: var(--ud-radius-sm); padding: 12px 16px; max-width: 480px;
}
.ud-resources-hero__search svg { color: var(--ud-text-muted); flex-shrink: 0; }
.ud-resources-hero__search input { flex: 1; border: 0; outline: 0; font-size: 0.95rem; color: var(--ud-ink); }

.ud-resources-hero__visual { position: relative; min-width: 0; }
.ud-resources-hero__badge {
	position: absolute; width: 48px; height: 48px; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	color: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.ud-resources-hero__badge--1 { top: -10px; right: 12%; background: var(--ud-navy); }
.ud-resources-hero__badge--2 { top: 38%; right: -18px; background: var(--ud-orange); }
.ud-resources-hero__badge--3 { bottom: 6%; right: 20%; background: var(--ud-navy); }

@media (max-width: 900px) {
	.ud-resources-hero__grid { grid-template-columns: 1fr; gap: 32px; }
	.ud-resources-hero__copy, .ud-resources-hero__search { max-width: 100%; }
	.ud-resources-hero__visual { margin-top: 8px; }
}

/* Quick links row (overlaps the hero bottom edge like a card) */
.ud-quicklinks {
	background: #fff; border-radius: var(--ud-radius-lg); box-shadow: var(--ud-shadow-lg);
	padding: 28px 32px; margin-top: -64px; position: relative; z-index: 2;
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
}
.ud-quicklink { display: flex; align-items: center; gap: 12px; }
.ud-quicklink__icon {
	width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.ud-quicklink__icon svg { width: 20px; height: 20px; }
.ud-quicklink strong { display: block; font-size: 0.92rem; color: var(--ud-ink); }
.ud-quicklink__desc { font-size: 0.78rem; color: var(--ud-text-muted); }

@media (max-width: 900px) {
	.ud-quicklinks { grid-template-columns: repeat(3, 1fr); margin-top: -40px; }
}
@media (max-width: 600px) {
	.ud-quicklinks { grid-template-columns: repeat(2, 1fr); padding: 20px; }
}

/* Knowledge base tiles */
.ud-kb-card { display: block; text-align: left; }
.ud-kb-card__count { display: inline-block; margin-top: 12px; color: #3b82f6; font-weight: 600; font-size: 0.85rem; }

/* Newsletter banner */
.ud-newsletter-banner {
	background: var(--ud-navy-soft); border-radius: var(--ud-radius-lg); padding: 32px 40px;
	display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.ud-newsletter-banner__intro { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 260px; }
.ud-newsletter-banner__icon {
	width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
	background: rgba(255,107,26,0.15); color: var(--ud-orange);
	display: flex; align-items: center; justify-content: center;
}
.ud-newsletter-banner h3 { color: #fff; margin-bottom: 6px; font-size: 1.1rem; }
.ud-newsletter-banner p { color: var(--ud-text-on-dark); margin-bottom: 0; font-size: 0.9rem; }
.ud-newsletter-banner__form { display: flex; gap: 10px; }
.ud-newsletter-banner__form input {
	padding: 12px 16px; border-radius: var(--ud-radius-sm); border: 1px solid rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.06); color: #fff; min-width: 220px;
}
.ud-newsletter-banner__form input::placeholder { color: var(--ud-text-on-dark); }
.ud-newsletter-banner__form button {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--ud-orange); color: #fff; border: 0; border-radius: var(--ud-radius-sm);
	padding: 12px 20px; font-weight: 600; white-space: nowrap;
}
@media (max-width: 700px) {
	.ud-newsletter-banner__form { width: 100%; flex-direction: column; }
	.ud-newsletter-banner__form input { min-width: 0; }
}

/* ==========================================================================
   Blog listing page (home.php)
   ========================================================================== */

.ud-blog-hero { position: relative; overflow: hidden; padding-block: 56px 64px; }
.ud-blog-hero::after {
	content: ""; position: absolute; top: -200px; right: -160px;
	width: 520px; height: 520px; border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, rgba(255,107,26,0.3), transparent 70%);
	pointer-events: none; z-index: 0;
}
.ud-blog-hero__grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.ud-blog-hero__heading {
	font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 800; line-height: 1.2;
	margin-bottom: 16px; color: #fff;
}
.ud-blog-hero__copy {
	font-size: 1.05rem; color: var(--ud-text-on-dark); line-height: 1.7; margin-bottom: 24px; max-width: 95%;
}
.ud-blog-hero__visual { position: relative; min-width: 0; }
.ud-blog-hero__illustration { width: 100%; height: auto; max-width: 420px; margin-inline: auto; display: block; }
.ud-blog-hero__badge {
	position: absolute; top: 6%; right: 6%; width: 52px; height: 52px; border-radius: 50%;
	background: var(--ud-navy); color: var(--ud-orange); display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}
@media (max-width: 900px) {
	.ud-blog-hero__grid { grid-template-columns: 1fr; gap: 32px; }
	.ud-blog-hero__copy { max-width: 100%; }
}

/* Filter bar + sort dropdown */
.ud-sort-select { position: relative; }
.ud-sort-select select {
	appearance: none; -webkit-appearance: none;
	padding: 10px 36px 10px 16px; border-radius: var(--ud-radius-sm); border: 1px solid var(--ud-border);
	background: #fff; font-size: 0.9rem; color: var(--ud-ink); cursor: pointer;
}
.ud-sort-select::after {
	content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px;
	border: solid var(--ud-text-muted); border-width: 0 2px 2px 0;
	transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

.ud-blog-layout { display: grid; grid-template-columns: 2.4fr 1fr; gap: 40px; align-items: start; margin-top: 32px; }
.ud-blog-list { display: flex; flex-direction: column; gap: 24px; }

/* Horizontal blog list item */
.ud-blog-list-item {
	display: grid; grid-template-columns: 240px 1fr; gap: 0;
	background: #fff; border: 1px solid var(--ud-border); border-radius: var(--ud-radius-md);
	overflow: hidden; box-shadow: var(--ud-shadow-sm);
}
.ud-blog-list-item__media {
	position: relative; display: block; min-height: 180px;
	background: var(--ud-bg-section);
}
.ud-blog-list-item__media img { width: 100%; height: 100%; object-fit: cover; }
.ud-blog-list-item__fallback-icon {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,0.85);
}
.ud-blog-list-item__fallback-icon svg { width: 36px; height: 36px; }
.ud-blog-list-item__ribbon {
	position: absolute; top: 12px; left: 12px;
	background: var(--ud-orange); color: #fff; font-size: 0.65rem; font-weight: 700;
	padding: 4px 10px; border-radius: var(--ud-radius-sm); letter-spacing: 0.03em;
}
.ud-blog-list-item__body { padding: 24px; display: flex; flex-direction: column; }
.ud-blog-list-item__category {
	color: var(--ud-orange); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em;
	margin-bottom: 8px; display: block;
}
.ud-blog-list-item__body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.ud-blog-list-item__body h3 a { color: var(--ud-ink); }
.ud-blog-list-item__body p { font-size: 0.9rem; margin-bottom: 16px; }
.ud-blog-list-item__footer {
	margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ud-blog-list-item__meta { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ud-text-muted); flex-wrap: wrap; }
.ud-blog-list-item__avatar img { width: 24px; height: 24px; border-radius: 50%; display: block; }
.ud-blog-list-item__link { display: inline-flex; align-items: center; gap: 6px; color: var(--ud-orange); font-weight: 600; font-size: 0.85rem; white-space: nowrap; }

@media (max-width: 700px) {
	.ud-blog-list-item { grid-template-columns: 1fr; }
	.ud-blog-list-item__media { min-height: 160px; }
}

/* Sidebar */
.ud-blog-sidebar { display: flex; flex-direction: column; gap: 24px; }
.ud-sidebar-card h3 { margin-bottom: 16px; }
.ud-topic-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.ud-topic-list li { display: flex; align-items: center; justify-content: space-between; }
.ud-topic-list a { font-size: 0.9rem; color: var(--ud-ink); }
.ud-topic-list a:hover { color: var(--ud-orange); }
.ud-topic-list__count {
	background: var(--ud-bg-section); color: var(--ud-text-muted); font-size: 0.75rem; font-weight: 600;
	padding: 2px 9px; border-radius: var(--ud-radius-pill);
}

.ud-sidebar-newsletter {
	background: var(--ud-navy); border-radius: var(--ud-radius-lg); padding: 28px;
}
.ud-sidebar-newsletter__icon {
	width: 40px; height: 40px; border-radius: 50%; background: rgba(255,107,26,0.15); color: var(--ud-orange);
	display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.ud-sidebar-newsletter h3 { color: #fff; font-size: 1.05rem; margin-bottom: 8px; }
.ud-sidebar-newsletter p { color: var(--ud-text-on-dark); font-size: 0.88rem; margin-bottom: 16px; }
.ud-sidebar-newsletter form { display: flex; flex-direction: column; gap: 10px; }
.ud-sidebar-newsletter input {
	padding: 11px 14px; border-radius: var(--ud-radius-sm); border: 1px solid rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.06); color: #fff;
}
.ud-sidebar-newsletter input::placeholder { color: var(--ud-text-on-dark); }
.ud-sidebar-newsletter button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--ud-orange); color: #fff; border: 0; border-radius: var(--ud-radius-sm);
	padding: 11px 16px; font-weight: 600;
}
.ud-sidebar-newsletter__note { font-size: 0.75rem; color: var(--ud-text-on-dark); margin: 10px 0 0; opacity: 0.8; }

.ud-sidebar-resource { display: flex; gap: 14px; margin-bottom: 16px; }
.ud-sidebar-resource__media {
	width: 64px; height: 64px; border-radius: var(--ud-radius-sm); flex-shrink: 0;
	display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden;
}
.ud-sidebar-resource__media img { width: 100%; height: 100%; object-fit: cover; }
.ud-sidebar-resource h4 { font-size: 0.92rem; margin-bottom: 4px; }
.ud-sidebar-resource h4 a { color: var(--ud-ink); }
.ud-sidebar-resource p { font-size: 0.8rem; color: var(--ud-text-muted); margin: 0; }

@media (max-width: 900px) {
	.ud-blog-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Single blog post page
   ========================================================================== */

.ud-single-post-layout { display: grid; grid-template-columns: 2.4fr 1fr; gap: 40px; align-items: start; }
.ud-single-post__subtitle { font-size: 1.05rem; margin-bottom: 20px; }
.ud-single-post__meta {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	border-bottom: 1px solid var(--ud-border); padding-bottom: 20px; margin-bottom: 24px;
}
.ud-single-post__byline { display: flex; align-items: center; gap: 12px; }
.ud-single-post__byline img { border-radius: 50%; display: block; }
.ud-single-post__byline strong { display: block; font-size: 0.92rem; color: var(--ud-ink); }
.ud-single-post__byline-sub { font-size: 0.8rem; color: var(--ud-text-muted); }
.ud-single-post__share { display: flex; align-items: center; gap: 14px; font-size: 0.85rem; color: var(--ud-text-muted); }
.ud-single-post__share a, .ud-copy-link {
	color: var(--ud-text-muted); display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; padding: 0; cursor: pointer;
}
.ud-single-post__share a:hover, .ud-copy-link:hover { color: var(--ud-orange); }
.ud-copy-link.is-copied { color: var(--ud-success); }
.ud-single-post__share svg { width: 18px; height: 18px; }

.ud-single-post__media { margin: 0 0 28px; border-radius: var(--ud-radius-lg); overflow: hidden; }
.ud-single-post__media img { width: 100%; height: auto; display: block; }
.ud-single-post__media--fallback {
	aspect-ratio: 16/8; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85);
}
.ud-single-post__media--fallback svg { width: 48px; height: 48px; }

/* Entry content: generic styling so any post's rich content looks right */
.entry-content { font-size: 1rem; line-height: 1.75; color: var(--ud-ink); }
.entry-content h2 { margin-top: 2em; margin-bottom: 0.6em; font-size: 1.4rem; scroll-margin-top: 100px; }
.entry-content p { margin-bottom: 1.1em; color: var(--ud-ink); }
.entry-content ul:not(.ud-callout ul) { margin: 1em 0 1.4em; display: flex; flex-direction: column; gap: 10px; }
.entry-content ul:not(.ud-callout ul) li { position: relative; padding-left: 28px; }
.entry-content ul:not(.ud-callout ul) li::before {
	content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--ud-orange);
}
.entry-content ul:not(.ud-callout ul) li::after {
	content: ""; position: absolute; left: 5px; top: 7px; width: 8px; height: 4px;
	border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.entry-content strong { color: var(--ud-ink); }

/* Callout / "Pro Tip" box — any post can use it by wrapping a paragraph in
   <div class="ud-callout">...</div> in the editor. The icon is pure CSS
   (not content markup) since wp_kses_post() strips raw <svg> from post
   content for security. */
.ud-callout {
	position: relative; display: flex; align-items: flex-start; gap: 14px;
	background: #fef1e8; border: 1px solid #fde3d0; border-radius: var(--ud-radius-md);
	padding: 18px 20px 18px 62px; margin: 1.5em 0; font-size: 0.92rem;
}
.ud-callout::before {
	content: "\1F4A1"; position: absolute; left: 20px; top: 18px;
	width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
	background: var(--ud-orange); display: flex; align-items: center; justify-content: center;
	font-size: 16px; line-height: 32px; text-align: center;
}
.ud-callout p { margin: 0; }

/* Sidebar cards (shared with blog listing's Popular Topics/newsletter, plus TOC + related here) */
.ud-sidebar-card__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ud-text-muted); margin-bottom: 16px; }
.ud-toc-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; }
.ud-toc-list a { font-size: 0.88rem; color: var(--ud-text-muted); display: block; }
.ud-toc-list a.is-active { color: var(--ud-orange); font-weight: 600; }

.ud-related-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.ud-related-item { display: flex; align-items: flex-start; gap: 12px; }
.ud-related-item__media {
	width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
	display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85);
}
.ud-related-item__media img { width: 100%; height: 100%; object-fit: cover; }
.ud-related-item__media svg { width: 20px; height: 20px; }
.ud-related-item__title { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ud-ink); margin-bottom: 4px; }
.ud-related-item__meta { display: block; font-size: 0.75rem; color: var(--ud-text-muted); }

.ud-sidebar-newsletter--light {
	background: #fef1e8; border: 1px solid #fde3d0;
}
.ud-sidebar-newsletter--light h3 { color: var(--ud-ink); }
.ud-sidebar-newsletter--light p { color: var(--ud-text-muted); }
.ud-sidebar-newsletter--light .ud-sidebar-newsletter__icon { background: #fff; }
.ud-sidebar-newsletter--light input {
	background: #fff; border: 1px solid var(--ud-border); color: var(--ud-ink);
}
.ud-sidebar-newsletter--light input::placeholder { color: var(--ud-text-muted); }
.ud-sidebar-newsletter--light .ud-sidebar-newsletter__note { color: var(--ud-text-muted); opacity: 1; }

@media (max-width: 900px) {
	.ud-single-post-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Documentation hub page
   ========================================================================== */

.ud-docs-hero { position: relative; overflow: hidden; }
.ud-docs-hero::after {
	content: ""; position: absolute; top: -180px; right: -160px;
	width: 480px; height: 480px; border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, rgba(255,107,26,0.28), transparent 70%);
	pointer-events: none; z-index: 0;
}
.ud-docs-hero::before {
	content: ""; position: absolute; left: 4%; bottom: 10%; width: 140px; height: 100px;
	background-image: radial-gradient(rgba(255,255,255,0.15) 1.5px, transparent 1.5px);
	background-size: 16px 16px; pointer-events: none; z-index: 0;
}
.ud-docs-hero__heading { position: relative; z-index: 1; font-size: clamp(2.25rem, 4.5vw, 3.25rem); color: #fff; margin-bottom: 12px; }
.ud-docs-hero__copy { position: relative; z-index: 1; color: var(--ud-text-on-dark); margin-bottom: 28px; }
.ud-docs-hero__search {
	position: relative; z-index: 1; display: flex; align-items: center; gap: 10px;
	background: #fff; border-radius: var(--ud-radius-sm); padding: 14px 18px;
	max-width: 560px; margin-inline: auto;
}
.ud-docs-hero__search svg { color: var(--ud-text-muted); flex-shrink: 0; }
.ud-docs-hero__search input { flex: 1; border: 0; outline: 0; font-size: 0.95rem; color: var(--ud-ink); text-align: left; }
.ud-docs-hero__search kbd {
	background: var(--ud-bg-section); color: var(--ud-text-muted); font-size: 0.75rem; font-family: inherit;
	padding: 4px 8px; border-radius: 5px;
}

.ud-docs-product-card { display: flex; flex-direction: column; }
.ud-docs-product-card__header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.ud-docs-product-card .ud-product-card__icon { width: 48px; height: 48px; border-radius: 10px; }
.ud-docs-product-card .ud-product-card__icon svg { width: 22px; height: 22px; }
.ud-docs-product-card h3 { margin-bottom: 8px; }
.ud-docs-product-card p { flex: 1; }
.ud-docs-product-card .ud-btn { align-self: flex-start; margin-top: 12px; }

.ud-docs-columns { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; }
.ud-docs-columns__icon {
	width: 32px; height: 32px; border-radius: 8px; background: var(--ud-bg-section); color: var(--ud-orange);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
@media (max-width: 900px) {
	.ud-docs-columns { grid-template-columns: 1fr; }
}

.ud-popular-docs-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; }
.ud-popular-docs-list li { list-style: none; }
.ud-popular-docs-list a {
	display: flex; align-items: center; gap: 14px; padding: 10px 6px; border-radius: var(--ud-radius-sm);
}
.ud-popular-docs-list a:hover { background: var(--ud-bg-section); }
.ud-popular-docs-list__num {
	width: 28px; height: 28px; border-radius: 7px; background: #eff6ff; color: #3b82f6;
	font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ud-popular-docs-list__title { flex: 1; font-size: 0.92rem; color: var(--ud-ink); font-weight: 500; }
.ud-popular-docs-list a svg { width: 16px; height: 16px; color: var(--ud-text-muted); flex-shrink: 0; }

.ud-explore-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.ud-explore-tile {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	padding: 14px; border: 1px solid var(--ud-border); border-radius: var(--ud-radius-sm);
	font-size: 0.85rem; font-weight: 600; color: var(--ud-ink);
}
.ud-explore-tile:hover { border-color: var(--ud-orange); }
.ud-explore-tile__icon {
	width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.ud-explore-tile__icon svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
	.ud-explore-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Single documentation article page
   ========================================================================== */

.ud-docs-single-layout {
	display: grid; grid-template-columns: 240px 1fr 280px; gap: 40px; align-items: start;
}
@media (max-width: 1100px) {
	.ud-docs-single-layout { grid-template-columns: 200px 1fr 260px; gap: 28px; }
}
@media (max-width: 900px) {
	.ud-docs-single-layout { grid-template-columns: 1fr; }
}

/* Left: doc navigation tree */
.ud-docs-nav { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; }
@media (max-width: 900px) {
	/* Sticky positioning only makes sense in the 3-column desktop layout,
	   where it floats beside long article content. Once the grid above
	   collapses to one stacked column, it's just another block in the
	   flow — left sticky, it pins near the top of the viewport and
	   overlaps the article content and TOC scrolling underneath it. This
	   override must come after the position:sticky rule above (equal
	   specificity — source order decides, media query or not). */
	.ud-docs-nav { position: static; max-height: none; overflow-y: visible; }
}
.ud-docs-nav__group { margin-bottom: 22px; }
.ud-docs-nav__group-label {
	display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--ud-text-muted); margin-bottom: 10px;
}
.ud-docs-nav__group ul { display: flex; flex-direction: column; gap: 2px; }
.ud-docs-nav__group a {
	display: block; font-size: 0.88rem; color: var(--ud-text-muted); padding: 6px 10px; border-radius: var(--ud-radius-sm);
	border-left: 2px solid transparent;
}
.ud-docs-nav__group a:hover { color: var(--ud-ink); background: var(--ud-bg-section); }
.ud-docs-nav__group a.is-active {
	color: var(--ud-orange); font-weight: 600; background: #fef1e8; border-left-color: var(--ud-orange);
}

/* Main content */
.ud-docs-single-main { min-width: 0; }
.ud-docs-single-main h1 { margin-top: 8px; }
.ud-docs-single__meta {
	display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ud-text-muted);
	padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--ud-border);
}
.ud-docs-single__meta svg { width: 16px; height: 16px; }

/* Was this helpful widget */
.ud-helpful-widget {
	margin-top: 3em; padding: 20px 24px; border: 1px solid var(--ud-border); border-radius: var(--ud-radius-md);
	background: var(--ud-bg-light);
}
.ud-helpful-widget__prompt { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ud-helpful-widget__prompt span { font-weight: 600; font-size: 0.92rem; color: var(--ud-ink); }
.ud-helpful-widget__buttons { display: flex; gap: 10px; }
.ud-helpful-widget__buttons button {
	background: #fff; border: 1px solid var(--ud-border); border-radius: var(--ud-radius-sm);
	padding: 7px 18px; font-size: 0.85rem; font-weight: 600; color: var(--ud-ink); cursor: pointer;
}
.ud-helpful-widget__buttons button:hover { border-color: var(--ud-orange); color: var(--ud-orange); }
.ud-helpful-widget__thanks { margin: 0; font-size: 0.9rem; color: var(--ud-ink); }

/* Prev/next navigation */
.ud-docs-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.ud-docs-pagination__item {
	display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
	border: 1px solid var(--ud-border); border-radius: var(--ud-radius-md);
}
.ud-docs-pagination__item:hover { border-color: var(--ud-orange); }
.ud-docs-pagination__item--next { text-align: right; align-items: flex-end; }
.ud-docs-pagination__label {
	display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.03em; color: var(--ud-text-muted);
}
.ud-docs-pagination__item--prev .ud-docs-pagination__label svg { transform: rotate(180deg); }
.ud-docs-pagination__label svg { width: 14px; height: 14px; }
.ud-docs-pagination__title { font-size: 0.92rem; font-weight: 600; color: var(--ud-ink); }
@media (max-width: 600px) {
	.ud-docs-pagination { grid-template-columns: 1fr; }
	.ud-docs-pagination__item--next { text-align: left; align-items: flex-start; }
}

/* ==========================================================================
   Changelog page (sourced from the License Manager plugin)
   ========================================================================== */

.ud-changelog-hero { position: relative; overflow: hidden; padding-block: 56px 64px; }
.ud-changelog-hero::after {
	content: ""; position: absolute; top: -200px; right: -160px;
	width: 520px; height: 520px; border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, rgba(255,107,26,0.3), transparent 70%);
	pointer-events: none; z-index: 0;
}
.ud-changelog-hero__grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center;
}
.ud-changelog-hero__grid h1 { color: #fff; margin-bottom: 12px; }
.ud-changelog-hero__grid p { color: var(--ud-text-on-dark); font-size: 1.05rem; max-width: 95%; }
.ud-changelog-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; }
.ud-changelog-hero__card {
	background: #fff; border-radius: var(--ud-radius-lg); box-shadow: 0 25px 60px rgba(0,0,0,0.35);
	padding: 24px; width: 100%; max-width: 300px;
}
.ud-changelog-hero__icon {
	width: 40px; height: 40px; border-radius: 10px; background: #3b82f6; color: #fff;
	display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.ud-changelog-hero__bar { display: block; height: 8px; width: 60%; border-radius: 4px; background: var(--ud-border); margin-bottom: 16px; }
.ud-changelog-hero__rows { display: flex; flex-direction: column; gap: 10px; }
.ud-changelog-hero__rows span { display: block; height: 6px; border-radius: 3px; background: var(--ud-bg-section); }
.ud-changelog-hero__rows span:nth-child(2) { width: 85%; }
.ud-changelog-hero__rows span:nth-child(3) { width: 70%; }
.ud-changelog-hero__bell {
	position: absolute; top: 6%; right: 4%; width: 56px; height: 56px; border-radius: 50%;
	background: var(--ud-navy); border: 4px solid var(--ud-bg-section); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.ud-changelog-hero__badge {
	position: absolute; bottom: 8%; right: 2%;
	background: var(--ud-orange); color: #fff; font-size: 0.8rem; font-weight: 700;
	padding: 8px 18px; border-radius: var(--ud-radius-pill); box-shadow: 0 8px 20px rgba(255,107,26,0.4);
}
@media (max-width: 900px) {
	.ud-changelog-hero__grid { grid-template-columns: 1fr; }
	.ud-changelog-hero__grid p { max-width: 100%; }
}

.ud-changelog-layout { display: grid; grid-template-columns: 2.4fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .ud-changelog-layout { grid-template-columns: 1fr; } }

/* Timeline */
.ud-changelog-timeline { position: relative; display: flex; flex-direction: column; gap: 28px; padding-left: 32px; }
.ud-changelog-timeline::before {
	content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--ud-border);
}
.ud-changelog-item { position: relative; display: flex; gap: 16px; }
.ud-changelog-item__dot {
	position: absolute; left: -32px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
	background: #fff; border: 2px solid var(--ud-orange);
}
.ud-changelog-item__icon {
	width: 40px; height: 40px; border-radius: 10px; color: #fff; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.ud-changelog-item__icon svg { width: 20px; height: 20px; }
.ud-changelog-item__body { flex: 1; min-width: 0; }
.ud-changelog-item__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ud-changelog-item__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ud-changelog-item__version { font-weight: 700; color: var(--ud-ink); }
.ud-changelog-item__date { font-size: 0.85rem; color: var(--ud-text-muted); }
.ud-changelog-item__view {
	display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: #3b82f6;
	white-space: nowrap;
}
.ud-changelog-item__summary { font-size: 0.92rem; margin: 8px 0 12px; }
.ud-changelog-item__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ud-changelog-badge {
	display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700;
	padding: 4px 11px; border-radius: var(--ud-radius-pill);
}
.ud-changelog-badge--sm { font-size: 0.65rem; padding: 2px 8px; flex-shrink: 0; }
.ud-changelog-item__details-toggle {
	display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
	font-size: 0.85rem; font-weight: 600; color: var(--ud-text-muted); cursor: pointer;
}
.ud-changelog-item__chevron { width: 14px; height: 14px; transform: rotate(90deg); transition: transform 0.15s ease; }
.ud-changelog-item.is-expanded .ud-changelog-item__chevron { transform: rotate(-90deg); }
.ud-changelog-item__details {
	display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px;
	border-top: 1px solid var(--ud-border);
}
.ud-changelog-item__details li { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--ud-ink); }

/* Sidebar: latest updates list */
.ud-latest-updates { display: flex; flex-direction: column; gap: 14px; }
.ud-latest-updates__item { display: flex; align-items: center; gap: 12px; }
.ud-latest-updates__icon {
	width: 36px; height: 36px; border-radius: 8px; color: #fff; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.ud-latest-updates__icon svg { width: 18px; height: 18px; }
.ud-latest-updates__title { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ud-ink); }
.ud-latest-updates__meta { display: block; font-size: 0.75rem; color: var(--ud-text-muted); }
.ud-latest-updates__item .ud-badge { margin-left: auto; }

.ud-update-policy__icon {
	display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
	border-radius: 50%; background: #ede9fe; color: #7c3aed; margin-bottom: 12px;
}

/* ==========================================================================
   Affiliate Program page
   ========================================================================== */

.ud-affiliate-hero { position: relative; overflow: hidden; padding-block: 56px 64px; }
.ud-affiliate-hero::after {
	content: ""; position: absolute; top: -220px; right: -180px;
	width: 560px; height: 560px; border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, rgba(255,107,26,0.3), transparent 70%);
	pointer-events: none; z-index: 0;
}
.ud-affiliate-hero__grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.ud-affiliate-hero__heading { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.2; color: #fff; margin-bottom: 16px; }
.ud-affiliate-hero__copy { font-size: 1.05rem; color: var(--ud-text-on-dark); line-height: 1.7; margin-bottom: 28px; max-width: 95%; }
.ud-affiliate-hero__copy .ud-highlight { color: var(--ud-orange); font-weight: 700; }
.ud-affiliate-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.ud-affiliate-hero__badges { display: flex; flex-wrap: wrap; gap: 24px; }
.ud-affiliate-badge { display: flex; align-items: flex-start; gap: 10px; }
.ud-affiliate-badge svg { width: 20px; height: 20px; color: var(--ud-orange); flex-shrink: 0; margin-top: 2px; }
.ud-affiliate-badge strong { display: block; font-size: 0.88rem; color: #fff; }
.ud-affiliate-badge span { display: block; font-size: 0.78rem; color: var(--ud-text-on-dark); }

/* Earning overview card */
.ud-earning-card {
	position: relative; z-index: 1;
	background: var(--ud-navy-soft); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--ud-radius-lg);
	padding: 24px;
}
.ud-earning-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ud-earning-card__header h3 { color: #fff; font-size: 1rem; margin-bottom: 0; }
.ud-earning-card__arrow { color: var(--ud-text-on-dark); display: inline-flex; }
.ud-earning-card__top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.ud-earning-card__label { display: block; font-size: 0.78rem; color: var(--ud-text-on-dark); margin-bottom: 6px; }
.ud-earning-card__value-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ud-earning-card__value { font-size: 1.4rem; font-weight: 800; color: #fff; }
.ud-earning-card__value--balance { font-size: 1.4rem; font-weight: 800; color: #4ade80; margin-bottom: 10px; }
.ud-earning-card__change { background: rgba(74,222,128,0.15); color: #4ade80; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: var(--ud-radius-pill); }
.ud-earning-card__sub { display: block; font-size: 0.75rem; color: var(--ud-text-on-dark); margin-top: 4px; }

.ud-earning-card__chart { background: rgba(255,255,255,0.03); border-radius: var(--ud-radius-md); padding: 16px; margin-bottom: 20px; }
.ud-earning-card__chart-label { display: block; font-size: 0.78rem; color: var(--ud-text-on-dark); margin-bottom: 8px; }
.ud-earning-card__chart-svg { width: 100%; height: 100px; display: block; }
.ud-earning-card__chart-axis { display: flex; justify-content: space-between; margin-top: 6px; }
.ud-earning-card__chart-axis span { font-size: 0.68rem; color: var(--ud-text-on-dark); }

.ud-earning-card__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ud-earning-card__stat {
	background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--ud-radius-sm);
	padding: 12px 8px; text-align: center;
}
.ud-earning-card__stat svg { width: 18px; height: 18px; color: var(--ud-text-on-dark); margin-bottom: 6px; }
.ud-earning-card__stat strong { display: block; font-size: 1rem; color: #fff; }
.ud-earning-card__stat span { display: block; font-size: 0.68rem; color: var(--ud-text-on-dark); margin-top: 2px; }

@media (max-width: 900px) {
	.ud-affiliate-hero__grid { grid-template-columns: 1fr; gap: 32px; }
	.ud-affiliate-hero__copy { max-width: 100%; }
}
@media (max-width: 500px) {
	.ud-earning-card__top { grid-template-columns: 1fr; }
	.ud-earning-card__stats { grid-template-columns: repeat(2, 1fr); }
}

/* Trust bar */
.ud-affiliate-trust__count { color: var(--ud-text-muted); font-size: 0.9rem; margin-bottom: 24px; }
.ud-affiliate-trust__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px; }
.ud-affiliate-trust__logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ud-text-muted); font-size: 0.95rem; opacity: 0.7; }
.ud-affiliate-trust__logo svg { width: 18px; height: 18px; }
.ud-affiliate-trust__logo img {
	max-height: 28px; max-width: 100%; width: auto; object-fit: contain;
	filter: grayscale(100%); opacity: 0.8; transition: filter 0.15s ease, opacity 0.15s ease;
}
.ud-affiliate-trust__logo img:hover { filter: grayscale(0%); opacity: 1; }

/* Partner Types — content-sized + centered instead of a rigid 3-column
   grid, so however many partner types happen to be active (could be 2,
   could be 6) fill the row naturally instead of leaving an empty
   column-shaped gap when the count doesn't divide evenly. */
.ud-partner-types {
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
	justify-content: center;
}
.ud-partner-type-card { padding: 26px; display: flex; flex-direction: column; }
.ud-partner-type-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.ud-partner-type-card p { font-size: 0.88rem; margin-bottom: 20px; flex: 1; }
.ud-partner-type-card__stats {
	display: flex; gap: 20px; padding-top: 16px; border-top: 1px solid var(--ud-border);
}
.ud-partner-type-card__stats > div { display: flex; flex-direction: column; }
.ud-partner-type-card__stats strong { font-size: 1.15rem; color: var(--ud-ink); font-weight: 800; }
.ud-partner-type-card__stats span { font-size: 0.75rem; color: var(--ud-text-muted); }
@media (max-width: 900px) {
	.ud-partner-types.ud-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ud-partner-types.ud-grid--3 { grid-template-columns: 1fr; }
}

/* Program Details facts strip */
.ud-partner-facts { gap: 20px; }
.ud-partner-fact {
	background: #fff; border: 1px solid var(--ud-border); border-radius: var(--ud-radius-md);
	padding: 24px; text-align: center;
}
.ud-partner-fact svg { color: var(--ud-orange); width: 24px; height: 24px; margin-bottom: 12px; }
.ud-partner-fact strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--ud-ink); margin-bottom: 6px; }
.ud-partner-fact span { font-size: 0.82rem; color: var(--ud-text-muted); line-height: 1.4; }
@media (max-width: 900px) {
	.ud-partner-facts.ud-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ud-partner-facts.ud-grid--4 { grid-template-columns: 1fr; }
}

/* Why Join */
.ud-affiliate-why { display: grid; grid-template-columns: 0.85fr 2fr; gap: 40px; align-items: start; }
.ud-affiliate-why__intro p { margin: 16px 0 20px; }
.ud-affiliate-why__grid { gap: 20px; }
.ud-affiliate-why__card { padding: 24px; }
.ud-affiliate-why__card h3 { font-size: 1rem; }
.ud-affiliate-why__card p { font-size: 0.88rem; margin-bottom: 0; }
@media (max-width: 900px) {
	.ud-affiliate-why { grid-template-columns: 1fr; }
	.ud-affiliate-why__grid.ud-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ud-affiliate-why__grid.ud-grid--3 { grid-template-columns: 1fr; }
}

/* How It Works */
.ud-affiliate-how { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: center; }
.ud-affiliate-steps { display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; }
.ud-affiliate-step { flex: 1; text-align: left; }
.ud-affiliate-step__icon {
	width: 52px; height: 52px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.ud-affiliate-step h3 { font-size: 1rem; margin-bottom: 6px; }
.ud-affiliate-step p { font-size: 0.85rem; margin-bottom: 0; }
.ud-affiliate-step__connector {
	color: var(--ud-border); margin-top: 26px; flex-shrink: 0;
}
.ud-affiliate-step__connector svg { width: 20px; height: 20px; }
.ud-affiliate-how__visual { display: flex; align-items: center; justify-content: center; }
.ud-affiliate-how__visual svg { width: 100%; max-width: 260px; height: auto; }
@media (max-width: 900px) {
	.ud-affiliate-how { grid-template-columns: 1fr; }
	.ud-affiliate-how__visual { order: -1; }
}
@media (max-width: 700px) {
	.ud-affiliate-steps { flex-direction: column; }
	.ud-affiliate-step__connector { display: none; }
}

/* ==========================================================================
   Contact Us page
   ========================================================================== */
.ud-contact-hero { position: relative; overflow: hidden; }
.ud-contact-hero::before {
	content: ""; position: absolute; top: 8%; left: 2%; width: 160px; height: 120px;
	background-image: radial-gradient(rgba(255,255,255,0.15) 1.5px, transparent 1.5px);
	background-size: 16px 16px; pointer-events: none; z-index: 0;
}
.ud-contact-hero::after {
	content: ""; position: absolute; bottom: -15%; right: -8%; width: 460px; height: 460px;
	background-image: repeating-linear-gradient(45deg, rgba(255,107,26,0.14) 0 2px, transparent 2px 22px);
	-webkit-mask-image: radial-gradient(circle at 70% 70%, black 0%, transparent 70%);
	mask-image: radial-gradient(circle at 70% 70%, black 0%, transparent 70%);
	pointer-events: none; z-index: 0;
}
.ud-contact-hero .ud-container { position: relative; z-index: 1; }

.ud-contact-features { display: flex; gap: 32px; margin-top: 28px; flex-wrap: wrap; }
.ud-contact-feature { display: flex; align-items: center; gap: 12px; }
.ud-contact-feature__icon {
	width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ud-orange);
	display: flex; align-items: center; justify-content: center; color: var(--ud-orange); flex-shrink: 0;
}
.ud-contact-feature strong { display: block; color: #fff; font-size: 0.9rem; }
.ud-contact-feature p { color: var(--ud-text-on-dark); font-size: 0.8rem; margin-bottom: 0; }

.ud-contact-reach-card { display: flex; flex-direction: column; }
.ud-contact-reach-card__desc { font-size: 0.85rem; color: var(--ud-text-muted); margin-bottom: 6px; }
.ud-contact-reach-card__sub { font-size: 0.78rem; color: var(--ud-text-muted); margin-top: 4px; }
.ud-contact-reach-card p { margin-bottom: 0; }
.ud-contact-reach-card p + p { margin-top: 6px; }

.ud-faq-card {
	background: #fff; border: 1px solid var(--ud-border); border-radius: var(--ud-radius-lg);
	padding: 32px; display: flex; flex-direction: column;
}
.ud-faq-card .ud-faq-list { margin-bottom: 20px; }
.ud-faq-card .ud-card__link { margin-top: auto; }

.ud-contact-cta { position: relative; overflow: hidden; flex-direction: column; align-items: flex-start; }
.ud-contact-cta__decoration { position: absolute; top: 0; right: 0; width: 140px; height: 140px; pointer-events: none; }
.ud-contact-cta__ring {
	position: absolute; top: 10px; right: 10px; width: 90px; height: 90px;
	border: 1.5px dashed rgba(255,255,255,0.2); border-radius: 50%;
}
.ud-contact-cta__plane {
	position: absolute; top: 30px; right: 40px; color: var(--ud-orange);
	transform: rotate(20deg);
}
.ud-contact-cta__plane svg { width: 28px; height: 28px; }

/* ==========================================================================
   Support page
   ========================================================================== */
.ud-support-hero { position: relative; overflow: hidden; }
.ud-support-hero::after {
	content: ""; position: absolute; top: -140px; right: -120px;
	width: 420px; height: 420px; border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, rgba(255,107,26,0.22), transparent 70%);
	pointer-events: none; z-index: 0;
}
.ud-support-hero .ud-container { position: relative; z-index: 1; }
.ud-support-hero .ud-hero-split { align-items: center; }

.ud-support-hero__art { position: relative; height: 320px; }
.ud-support-hero__bubble {
	position: absolute; border-radius: var(--ud-radius-md) var(--ud-radius-md) var(--ud-radius-md) 4px;
	padding: 14px 18px; display: flex; align-items: center; gap: 6px;
}
.ud-support-hero__bubble--orange { top: 10%; left: 32%; background: var(--ud-orange); gap: 5px; }
.ud-support-hero__bubble--orange span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.85); }
.ud-support-hero__bubble--dark {
	top: 38%; left: 2%; width: 130px; background: var(--ud-navy-soft);
	flex-direction: column; align-items: flex-start; gap: 8px;
}
.ud-support-hero__line { display: block; width: 100%; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.18); }
.ud-support-hero__avatar {
	position: absolute; top: 2%; right: 8%; width: 120px; height: 120px; border-radius: 50%;
	background: var(--ud-navy-soft); border: 3px solid rgba(255,255,255,0.08);
	display: flex; align-items: center; justify-content: center; color: #fff;
}
.ud-support-hero__avatar svg { width: 40px; height: 40px; }
.ud-support-hero__card {
	position: absolute; bottom: 4%; right: 4%; width: 170px; background: #fff;
	border-radius: var(--ud-radius-md); padding: 16px; display: flex; flex-direction: column; gap: 8px;
	box-shadow: var(--ud-shadow-md);
}
.ud-support-hero__dot { width: 20px; height: 8px; border-radius: 4px; background: var(--ud-navy); margin-bottom: 4px; }
.ud-support-hero__card-line { display: block; height: 6px; border-radius: 3px; background: var(--ud-border); }
@media (max-width: 900px) { .ud-support-hero__art { display: none; } }

.ud-support-search {
	display: flex; align-items: center; gap: 10px; max-width: 620px;
	background: #fff; border-radius: var(--ud-radius-sm); padding: 8px 8px 8px 18px; margin-top: 24px;
}
.ud-support-search svg { color: var(--ud-text-muted); flex-shrink: 0; }
.ud-support-search input {
	flex: 1; border: 0; outline: none; font-size: 0.95rem; color: var(--ud-ink); background: transparent;
}
.ud-support-quicklinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; font-size: 0.85rem; color: var(--ud-text-on-dark); }
.ud-support-quicklinks a { color: var(--ud-text-on-dark); text-decoration: underline; text-underline-offset: 2px; }
.ud-support-quicklinks a:hover { color: #fff; }

.ud-support-articles { display: flex; flex-direction: column; margin-top: 20px; }
.ud-support-article {
	display: flex; align-items: flex-start; gap: 14px; padding: 16px 0;
	border-bottom: 1px solid var(--ud-border);
}
.ud-support-article:hover strong { color: var(--ud-orange); }
.ud-support-article__icon {
	width: 34px; height: 34px; border-radius: var(--ud-radius-sm); background: var(--ud-bg-section);
	color: var(--ud-text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ud-support-article__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ud-support-article__body strong { font-size: 0.92rem; color: var(--ud-ink); }
.ud-support-article__body span { font-size: 0.82rem; color: var(--ud-text-muted); }
.ud-support-article__badge {
	flex-shrink: 0; font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: var(--ud-radius-pill);
	align-self: center; white-space: nowrap;
}

.ud-support-help-list { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.ud-support-help-list a {
	display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-radius: var(--ud-radius-sm);
	color: var(--ud-ink);
}
.ud-support-help-list a:hover { background: var(--ud-bg-section); }
.ud-support-help-list a > svg:last-child { margin-left: auto; color: var(--ud-text-muted); flex-shrink: 0; width: 16px; height: 16px; }
.ud-support-help-list__icon {
	width: 36px; height: 36px; border-radius: var(--ud-radius-sm);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ud-support-help-list strong { font-size: 0.88rem; }
.ud-support-help-list span span { font-size: 0.78rem; font-weight: 400; color: var(--ud-text-muted); }

.ud-support-hours {
	display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px;
	border-top: 1px solid var(--ud-border); font-size: 0.85rem;
}
.ud-support-hours svg { color: var(--ud-success); flex-shrink: 0; }
.ud-support-hours strong { font-size: 0.85rem; }

.ud-status-dot {
	width: 9px; height: 9px; border-radius: 50%; background: var(--ud-success); display: inline-block;
}

/* ==========================================================================
   Careers page
   ========================================================================== */
.ud-btn--outline-orange { background: transparent; color: var(--ud-orange); border-color: var(--ud-orange); }
.ud-btn--outline-orange:hover { background: var(--ud-orange); color: #fff; }

.ud-job-list { display: flex; flex-direction: column; }
.ud-job-item {
	display: flex; align-items: center; gap: 20px; padding: 20px 0;
	border-bottom: 1px solid var(--ud-border); flex-wrap: wrap;
}
.ud-job-item__icon {
	width: 40px; height: 40px; border-radius: var(--ud-radius-sm); flex-shrink: 0;
	background: var(--ud-bg-section); color: var(--ud-text-muted);
	display: flex; align-items: center; justify-content: center;
}
.ud-job-item__icon svg { width: 18px; height: 18px; }
.ud-job-item__main { flex: 1 1 220px; min-width: 200px; }
.ud-job-item__desc { flex: 1 1 260px; font-size: 0.85rem; color: var(--ud-text-muted); margin: 0; }
.ud-badge--fulltime { background: #dcfce7; color: var(--ud-success); margin-bottom: 0; }
.ud-badge--remote { background: #dbeafe; color: #1d4ed8; margin-bottom: 0; }
@media (max-width: 900px) {
	.ud-job-item__desc { display: none; }
}
@media (max-width: 600px) {
	.ud-job-item { flex-direction: column; align-items: flex-start; }
}

/* Single job listing */
.ud-job-overview-list { display: flex; flex-direction: column; gap: 14px; margin: 0 0 16px; }
.ud-job-overview-list li { display: flex; align-items: flex-start; gap: 10px; }
.ud-job-overview-list svg { width: 18px; height: 18px; color: var(--ud-orange); flex-shrink: 0; margin-top: 2px; }
.ud-job-overview-list li > span { font-size: 0.85rem; color: var(--ud-text-muted); }
.ud-job-overview-list strong { display: block; font-size: 0.8rem; color: var(--ud-ink); margin-bottom: 2px; }

/* ==========================================================================
   Tutorial single page (single-resource.php, resource_type=tutorial)
   ========================================================================== */
.ud-tutorial-steps { counter-reset: ud-step; }
.ud-tutorial-steps h2 {
	counter-increment: ud-step;
	position: relative; padding-left: 56px; margin-top: 40px;
}
.ud-tutorial-steps h2::before {
	content: counter(ud-step);
	position: absolute; left: 0; top: -6px;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--ud-orange); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.05rem; font-weight: 700;
}
.ud-tutorial-steps h2:first-child { margin-top: 0; }

/* WordPress core alignment classes required by Theme Review */
.alignwide { max-width: 1400px; margin-inline: auto; }
.alignfull { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.aligncenter { display: block; margin-inline: auto; }
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }

/* ==========================================================================
   Downloads page (page-templates/template-downloads.php)
   ========================================================================== */
.ud-downloads-hero { position: relative; overflow: hidden; padding-block: 56px 88px; }
.ud-downloads-hero__grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
}
.ud-downloads-hero__heading {
	font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.2;
	margin-bottom: 16px; color: #fff;
}
.ud-downloads-hero__copy {
	font-size: 1.05rem; color: var(--ud-text-on-dark); line-height: 1.7;
	margin-bottom: 28px; max-width: 90%;
}
.ud-downloads-hero__badges { display: flex; flex-wrap: wrap; gap: 20px 28px; }
.ud-downloads-trust { display: flex; align-items: flex-start; gap: 12px; max-width: 220px; }
.ud-downloads-trust__icon {
	width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.08); color: var(--ud-orange);
}
.ud-downloads-trust__icon svg { width: 18px; height: 18px; }
.ud-downloads-trust strong { display: block; font-size: 0.88rem; color: #fff; margin-bottom: 2px; }
.ud-downloads-trust__desc { display: block; font-size: 0.78rem; color: var(--ud-text-on-dark); line-height: 1.4; }

.ud-downloads-hero__art { position: relative; height: 300px; }
.ud-downloads-box {
	position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
	width: 140px; height: 110px; border-radius: 14px;
	background: linear-gradient(160deg, #1b2c4f 0%, #10182b 100%);
	box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
	display: flex; align-items: center; justify-content: center;
	color: var(--ud-orange);
}
.ud-downloads-box svg { width: 40px; height: 40px; }
.ud-downloads-float {
	position: absolute; width: 52px; height: 52px; border-radius: 14px;
	display: flex; align-items: center; justify-content: center; color: #fff;
	box-shadow: 0 14px 30px -8px rgba(0,0,0,0.5);
}
.ud-downloads-float svg { width: 22px; height: 22px; }
.ud-downloads-float--1 { top: 10px; left: 46%; background: #16a34a; }
.ud-downloads-float--2 { top: 0; left: 20%; background: #6d5bd0; }
.ud-downloads-float--3 { top: 30px; right: 10%; background: var(--ud-orange); }
.ud-downloads-float--4 { top: 90px; right: 22%; background: #1d4ed8; }
.ud-downloads-float--5 { top: 100px; left: 12%; background: #d97706; }
@media (max-width: 900px) {
	.ud-downloads-hero__grid { grid-template-columns: 1fr; }
	.ud-downloads-hero__copy { max-width: 100%; }
	.ud-downloads-hero__art { margin-top: 24px; height: 220px; }
}
@media (max-width: 600px) {
	.ud-downloads-hero__badges { flex-direction: column; gap: 16px; }
}

.ud-select-input {
	display: flex; align-items: center; gap: 8px;
	border: 1px solid var(--ud-border); border-radius: var(--ud-radius-sm);
	padding: 10px 14px; min-width: 200px; color: var(--ud-ink); position: relative;
}
.ud-select-input select {
	border: 0; outline: 0; font-size: 0.9rem; width: 100%; color: var(--ud-ink);
	background: transparent; appearance: none; padding-right: 20px; cursor: pointer;
}
.ud-select-input svg { flex-shrink: 0; pointer-events: none; margin-left: -20px; color: var(--ud-text-muted); }

.ud-download-card {
	background: #fff; border: 1px solid var(--ud-border);
	border-radius: var(--ud-radius-md); padding: 28px;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	box-shadow: var(--ud-shadow-sm);
	display: flex; flex-direction: column; min-width: 0;
}
.ud-download-card:hover { box-shadow: var(--ud-shadow-lg); transform: translateY(-6px); }
.ud-download-card__header {
	display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px;
}
.ud-download-card__header .ud-product-card__icon,
.ud-download-card__header .ud-product-icon--image { width: 48px; height: 48px; border-radius: 10px; font-size: 1.3rem; }
.ud-download-card__header svg { width: 22px; height: 22px; }
.ud-badge--free { background: #dcfce7; color: #16a34a; }
.ud-download-card__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--ud-ink); }
.ud-download-card__desc { font-size: 0.92rem; color: var(--ud-text-muted); margin-bottom: 16px; line-height: 1.5; min-height: 42px; }
.ud-download-card__features { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 20px; }
.ud-download-card__features li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--ud-ink); }
.ud-download-card__features li svg { color: var(--ud-orange); width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.ud-download-card__more { color: var(--ud-text-muted) !important; font-style: italic; }
.ud-download-card__link {
	display: inline-flex; align-items: center; gap: 6px; justify-content: center;
	color: var(--ud-orange); font-weight: 600; font-size: 0.85rem; margin-top: 10px;
}

.ud-btn--outline-download {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: transparent; color: var(--ud-ink); border: 1.5px solid var(--ud-border);
	border-radius: var(--ud-radius-sm); padding: 12px 16px; font-weight: 600; font-size: 0.9rem;
	margin-top: auto; text-decoration: none;
}
.ud-btn--outline-download:hover { border-color: var(--ud-orange); color: var(--ud-orange); }
.ud-btn--outline-download.is-disabled { color: var(--ud-text-muted); cursor: default; opacity: 0.7; }
.ud-btn--outline-download.is-disabled:hover { border-color: var(--ud-border); color: var(--ud-text-muted); }

.ud-security-strip {
	display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
	background: var(--ud-bg-section); border-radius: var(--ud-radius-md);
	padding: 24px 28px;
}
.ud-security-strip__icon {
	width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: #fdecea; color: var(--ud-orange);
}
.ud-security-strip__copy { flex: 1; min-width: 240px; }
.ud-security-strip__copy strong { display: block; font-size: 1rem; color: var(--ud-ink); margin-bottom: 4px; }
.ud-security-strip__copy p { font-size: 0.88rem; color: var(--ud-text-muted); margin: 0; line-height: 1.5; }
@media (max-width: 600px) {
	.ud-security-strip { flex-direction: column; align-items: flex-start; text-align: left; }
}
.wp-caption-text { font-size: 0.85rem; color: var(--ud-text-muted); text-align: center; }

/* ==========================================================================
   Mobile responsiveness fixes — inline two-column grids that had no
   breakpoint of their own (About Us mission+values, Careers why-join-us,
   Contact FAQ+CTA, Support main layout) all collapse to a single column
   below 900px, matching every other two-column section on the site.
   ========================================================================== */
.ud-about-mission-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; }
.ud-contact-faqcta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.ud-support-layout { display: grid; grid-template-columns: 2.5fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) {
	.ud-about-mission-grid,
	.ud-contact-faqcta-grid,
	.ud-support-layout {
		grid-template-columns: 1fr;
	}
}