/* =========================================================================
   UncommonSleep — design system CSS
   Vanilla CSS (no build step, no Tailwind at runtime) so the theme works
   on any standard WordPress host with zero extra tooling. Mirrors the
   color/spacing/radius/shadow tokens from the original design system.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
	--color-ink: #14211b;
	--color-ink-soft: #252a27;
	--color-cream: #f7f4ed;
	--color-sage: #a9b9a5;
	--color-moss: #6f856e;
	--color-sand: #dccdb8;
	--color-white: #ffffff;

	--color-bg: var(--color-cream);
	--color-text: var(--color-ink);
	--color-text-muted: #4d5a52;
	--color-border: #e4ddce;

	--radius-sm: 0.5rem;
	--radius-md: 0.875rem;
	--radius-lg: 1.25rem;
	--radius-xl: 1.75rem;

	--shadow-soft: 0 1px 2px rgba(20, 33, 27, .04), 0 8px 24px -12px rgba(20, 33, 27, .12);
	--shadow-lift: 0 4px 8px rgba(20, 33, 27, .05), 0 20px 40px -16px rgba(20, 33, 27, .18);

	/* No external font requests — an ordered system-font stack keeps the
	   site fast even when Google Fonts (or any CDN) is unreachable. Swap
	   these for a self-hosted @font-face (assets/fonts/) if a specific
	   brand typeface is required later. */
	--font-heading: "Manrope", "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--container-max: 1280px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: 700; color: var(--color-ink); }
p { margin: 0; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--color-sand); color: var(--color-ink); }

:focus-visible {
	outline: 2px solid var(--color-moss);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Layout helpers ---------- */
.usl-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 20px;
}
@media (min-width: 640px) { .usl-container { padding-inline: 32px; } }
@media (min-width: 1024px) { .usl-container { padding-inline: 40px; } }

.usl-section { padding-block: 72px; }
@media (min-width: 640px) { .usl-section { padding-block: 96px; } }
.usl-section--tight { padding-block: 56px; }
.usl-section--white { background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.usl-section--ink { background: var(--color-ink); color: var(--color-cream); }
.usl-section--ink h2, .usl-section--ink h3 { color: var(--color-cream); }

.usl-grid { display: grid; gap: 20px; }
.usl-grid--2 { grid-template-columns: 1fr; }
.usl-grid--3 { grid-template-columns: 1fr; }
.usl-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.usl-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.usl-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.usl-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.usl-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.usl-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.usl-skip-link {
	position: absolute;
	left: 1rem; top: -3rem;
	background: var(--color-ink); color: var(--color-cream);
	padding: .6rem 1.2rem; border-radius: 999px; z-index: 200;
	transition: top .2s ease;
}
.usl-skip-link:focus { top: 1rem; }

/* ---------- Section heading ---------- */
.usl-section-heading { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.usl-section-heading__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.usl-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-moss); }
.usl-section-heading h2 { font-size: 1.875rem; letter-spacing: -0.01em; }
@media (min-width: 640px) { .usl-section-heading h2 { font-size: 2.25rem; } }
.usl-section-heading p { max-width: 640px; color: var(--color-text-muted); font-size: 1rem; line-height: 1.7; }
.usl-section--ink .usl-section-heading p { color: rgba(247,244,237,.75); }

/* ---------- Buttons ---------- */
.usl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border-radius: 999px; font-weight: 600; font-size: .9rem;
	padding: .7rem 1.4rem; border: 1px solid transparent;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.usl-btn:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .usl-btn:hover { transform: none; } }
.usl-btn--lg { padding: .95rem 1.75rem; font-size: 1rem; }
.usl-btn--primary { background: var(--color-ink); color: var(--color-cream); box-shadow: var(--shadow-soft); }
.usl-btn--primary:hover { background: var(--color-ink-soft); box-shadow: var(--shadow-lift); }
.usl-btn--secondary { background: var(--color-white); color: var(--color-ink); border-color: var(--color-border); }
.usl-btn--secondary:hover { border-color: var(--color-moss); background: var(--color-cream); }
.usl-btn--outline-light { border-color: rgba(247,244,237,.4); color: var(--color-cream); }
.usl-btn--outline-light:hover { background: rgba(247,244,237,.1); }
.usl-btn svg { width: 16px; height: 16px; }

/* ---------- Badges ---------- */
.usl-badge {
	display: inline-flex; align-items: center; border-radius: 999px;
	padding: .3rem .8rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.usl-badge--sage { background: rgba(169,185,165,.3); color: var(--color-ink-soft); }
.usl-badge--sand { background: rgba(220,205,184,.5); color: var(--color-ink-soft); }
.usl-badge--ink { background: var(--color-ink); color: var(--color-cream); }
.usl-badge--outline { border: 1px solid var(--color-border); color: var(--color-text-muted); }

/* ---------- Header ---------- */
.usl-header {
	position: sticky; top: 0; z-index: 40; width: 100%;
	border-bottom: 1px solid transparent;
	background: rgba(247,244,237,.7);
	backdrop-filter: blur(6px);
	transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.usl-header.is-scrolled {
	background: rgba(247,244,237,.92);
	border-color: var(--color-border);
	box-shadow: var(--shadow-soft);
}
.usl-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	height: 80px; transition: height .3s ease;
	max-width: var(--container-max); margin-inline: auto; padding-inline: 20px;
}
.usl-header.is-scrolled .usl-header__inner { height: 64px; }
@media (min-width: 640px) { .usl-header__inner { padding-inline: 32px; } }
@media (min-width: 1024px) { .usl-header__inner { padding-inline: 40px; } }

.usl-logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-ink); }
.usl-logo__mark { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--color-ink); color: var(--color-cream); }
.usl-logo__mark svg { width: 16px; height: 16px; }
.usl-logo img { max-height: 32px; width: auto; }

.usl-nav { display: none; align-items: center; gap: 32px; }
@media (min-width: 1024px) { .usl-nav { display: flex; } }
.usl-nav a { font-size: .9rem; font-weight: 500; color: var(--color-text-muted); transition: color .2s ease; }
.usl-nav a:hover, .usl-nav a[aria-current="page"] { color: var(--color-ink); }

.usl-header__actions { display: flex; align-items: center; gap: 8px; }
.usl-icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; color: var(--color-ink); background: transparent; border: none; }
.usl-icon-btn:hover { background: rgba(255,255,255,.7); }
.usl-header__cta { display: none; }
@media (min-width: 1024px) { .usl-header__cta { display: inline-flex; } }
.usl-menu-toggle { display: inline-flex; }
@media (min-width: 1024px) { .usl-menu-toggle { display: none; } }

/* ---------- Mobile menu ---------- */
.usl-mobile-menu { position: fixed; inset: 0; z-index: 50; display: none; }
.usl-mobile-menu.is-open { display: block; }
.usl-mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(20,33,27,.4); backdrop-filter: blur(2px); border: none; }
.usl-mobile-menu__panel {
	position: absolute; inset-block: 0; right: 0; width: 100%; max-width: 360px;
	background: var(--color-cream); box-shadow: var(--shadow-lift);
	padding: 24px; display: flex; flex-direction: column;
}
.usl-mobile-menu__header { display: flex; align-items: center; justify-content: space-between; }
.usl-mobile-menu__nav { margin-top: 28px; display: flex; flex-direction: column; gap: 2px; }
.usl-mobile-menu__nav a { padding: 12px; border-radius: 10px; font-size: 1.1rem; font-weight: 600; color: var(--color-ink); }
.usl-mobile-menu__nav a:hover { background: rgba(255,255,255,.7); }
.usl-mobile-menu__footer { margin-top: auto; padding-top: 28px; }
@media (min-width: 1024px) { .usl-mobile-menu { display: none !important; } }

/* ---------- Hero ---------- */
.usl-hero { position: relative; overflow: hidden; background: var(--color-ink); color: var(--color-cream); }
.usl-hero__inner { position: relative; padding-block: 96px 112px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: var(--container-max); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 640px) { .usl-hero__inner { padding-block: 128px 150px; padding-inline: 32px; } }
@media (min-width: 1024px) { .usl-hero__inner { padding-inline: 40px; } }
.usl-hero__tag { border: 1px solid rgba(247,244,237,.25); background: rgba(247,244,237,.05); border-radius: 999px; padding: .4rem 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(247,244,237,.8); }
.usl-hero h1 { max-width: 46rem; font-size: 2.25rem; line-height: 1.12; letter-spacing: -0.01em; color: var(--color-cream); }
@media (min-width: 640px) { .usl-hero h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .usl-hero h1 { font-size: 3.5rem; } }
.usl-hero p { max-width: 40rem; font-size: 1.125rem; line-height: 1.7; color: rgba(247,244,237,.75); }
.usl-hero__actions { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 640px) { .usl-hero__actions { flex-direction: row; } }
.usl-hero__ambient { position: absolute; inset: 0; pointer-events: none; }
.usl-hero__glow { position: absolute; right: -6rem; top: -6rem; width: 24rem; height: 24rem; border-radius: 999px; background: rgba(169,185,165,.1); filter: blur(60px); }
.usl-hero__star { position: absolute; border-radius: 999px; background: rgba(247,244,237,.6); }

/* ---------- Cards (problem / category / article / comparison / review) ---------- */
.usl-card {
	display: flex; flex-direction: column; gap: 16px;
	background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	padding: 24px; box-shadow: var(--shadow-soft);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.usl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--color-moss); }
@media (prefers-reduced-motion: reduce) { .usl-card:hover { transform: none; } }
.usl-card__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: rgba(169,185,165,.25); color: var(--color-ink); transition: background-color .2s ease, color .2s ease; }
.usl-card:hover .usl-card__icon { background: var(--color-ink); color: var(--color-cream); }
.usl-card h3 { font-size: 1.125rem; }
.usl-card p { color: var(--color-text-muted); font-size: .92rem; line-height: 1.65; }
.usl-card__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--color-moss); }
.usl-card__cta svg { width: 14px; height: 14px; transition: transform .3s ease; }
.usl-card:hover .usl-card__cta svg { transform: translateX(4px); }

.usl-category-card__top { display: flex; align-items: center; justify-content: space-between; }
.usl-category-card__number { font-family: var(--font-heading); font-weight: 700; font-size: .85rem; color: rgba(111,133,110,.6); }

.usl-article-card { padding: 0; overflow: hidden; }
.usl-article-card__image { aspect-ratio: 4/3; width: 100%; background: linear-gradient(135deg, rgba(169,185,165,.4), var(--color-cream), rgba(220,205,184,.4)); }
.usl-article-card__body { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; }
.usl-article-card__meta { margin-top: auto; display: flex; gap: 8px; padding-top: 8px; font-size: .78rem; color: var(--color-text-muted); }

.usl-comparison-card--soon { border-style: dashed; opacity: .8; }

/* ---------- Sections: featured program/product ---------- */
.usl-feature {
	display: grid; gap: 40px; align-items: center;
	border: 1px solid var(--color-border); border-radius: var(--radius-xl);
	padding: 32px; background: var(--color-white); box-shadow: var(--shadow-soft);
}
@media (min-width: 1024px) { .usl-feature { grid-template-columns: 1fr 1fr; gap: 64px; padding: 48px; } }
.usl-feature__media { aspect-ratio: 4/3; width: 100%; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(220,205,184,.5), var(--color-cream), rgba(169,185,165,.3)); }
.usl-feature__content { display: flex; flex-direction: column; gap: 18px; }
.usl-feature__content .usl-btn-row { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
@media (min-width: 640px) { .usl-feature__content .usl-btn-row { flex-direction: row; } }

.usl-pc-columns { display: grid; grid-template-columns: 1fr; gap: 16px; padding-top: 8px; }
@media (min-width: 640px) { .usl-pc-columns { grid-template-columns: 1fr 1fr; } }
.usl-pc-columns h4 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-moss); margin-bottom: 8px; }
.usl-pc-columns li { display: flex; gap: 8px; align-items: flex-start; font-size: .875rem; color: var(--color-text-muted); padding-block: 3px; }
.usl-pc-columns svg { flex-shrink: 0; margin-top: 3px; width: 14px; height: 14px; }
.usl-pc-columns .is-pro svg { color: var(--color-moss); }

/* ---------- Pillars (How We Evaluate) ---------- */
.usl-pillar { display: flex; flex-direction: column; gap: 14px; }
.usl-pillar__top { display: flex; align-items: center; gap: 12px; }
.usl-pillar__number { font-family: var(--font-heading); font-weight: 700; font-size: .85rem; color: rgba(220,205,184,.8); }
.usl-pillar__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: rgba(247,244,237,.1); color: var(--color-cream); }
.usl-pillar h3 { font-size: 1.1rem; }
.usl-pillar p { color: rgba(247,244,237,.7); font-size: .9rem; line-height: 1.65; }

/* ---------- Newsletter ---------- */
.usl-newsletter-box {
	display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
	border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-white);
	box-shadow: var(--shadow-soft); padding: 56px 24px;
}
@media (min-width: 640px) { .usl-newsletter-box { padding: 56px 64px; } }
.usl-newsletter-box__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; background: rgba(169,185,165,.25); color: var(--color-ink); }
.usl-newsletter-form { margin-top: 8px; width: 100%; max-width: 28rem; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px) { .usl-newsletter-form { flex-direction: row; } }
.usl-newsletter-form input[type="email"] {
	width: 100%; border: 1px solid var(--color-border); background: var(--color-cream); border-radius: 999px;
	padding: .75rem 1.25rem; font-size: .9rem; color: var(--color-ink);
}
.usl-newsletter-form input[type="email"]:focus { border-color: var(--color-moss); outline: none; }
.usl-newsletter-form button { flex-shrink: 0; }
.usl-newsletter-msg { font-size: .875rem; color: var(--color-moss); min-height: 1.2em; }
.usl-newsletter-msg[data-state="error"] { color: #a4453a; }
.usl-newsletter-fineprint { max-width: 28rem; font-size: .75rem; color: var(--color-text-muted); line-height: 1.6; }

/* ---------- Footer ---------- */
.usl-footer { margin-top: 96px; border-top: 1px solid var(--color-border); background: var(--color-ink); color: var(--color-cream); }
.usl-footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; padding-block: 56px; }
@media (min-width: 640px) { .usl-footer__grid { grid-template-columns: repeat(4, 1fr); } }
.usl-footer__brand { grid-column: span 2; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 640px) { .usl-footer__brand { grid-column: span 1; } }
.usl-footer__brand p { max-width: 20rem; font-size: .9rem; line-height: 1.6; color: rgba(247,244,237,.7); }
.usl-footer h3 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(247,244,237,.5); }
.usl-footer ul { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.usl-footer a { font-size: .9rem; color: rgba(247,244,237,.8); }
.usl-footer a:hover { color: var(--color-cream); }
.usl-footer__bottom { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid rgba(247,244,237,.15); padding-block: 32px; font-size: .78rem; color: rgba(247,244,237,.6); }
@media (min-width: 640px) { .usl-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.usl-footer__bottom p { max-width: 42rem; line-height: 1.6; }

/* ---------- Breadcrumbs ---------- */
.usl-breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 6px; font-size: .875rem; color: var(--color-text-muted); }
.usl-breadcrumbs__item { display: flex; align-items: center; gap: 6px; }
.usl-breadcrumbs__item:not(:first-child)::before { content: "/"; }
.usl-breadcrumbs__item a:hover { color: var(--color-ink); text-decoration: underline; }
.usl-breadcrumbs__item [aria-current="page"] { color: var(--color-ink); font-weight: 600; }

/* ---------- Disclosure ---------- */
.usl-disclosure { font-size: .78rem; line-height: 1.6; color: var(--color-text-muted); }
.usl-disclosure a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Prose (articles, legal pages) ---------- */
.usl-prose { max-width: 46rem; line-height: 1.75; }
.usl-prose p { margin-block: 1.25em; color: var(--color-text-muted); }
.usl-prose h2 { font-size: 1.5rem; margin-top: 2.2em; margin-bottom: .6em; }
.usl-prose ul, .usl-prose ol { margin-block: 1.25em; padding-left: 1.4em; color: var(--color-text-muted); }
.usl-prose ul { list-style: disc; }
.usl-prose ol { list-style: decimal; }
.usl-prose li { margin-block: .4em; }
.usl-prose a { color: var(--color-moss); text-decoration: underline; text-underline-offset: 2px; }
.usl-prose blockquote { border-left: 3px solid var(--color-moss); padding-left: 1.25rem; margin: 2em 0; font-style: italic; }

.usl-placeholder-notice { border: 1px dashed var(--color-border); background: var(--color-cream); border-radius: var(--radius-md); padding: 16px 20px; font-size: .9rem; color: var(--color-text-muted); }
.usl-placeholder-notice strong { color: var(--color-ink); }

/* ---------- Review template ---------- */
.usl-review-hero { display: grid; gap: 40px; }
@media (min-width: 1024px) { .usl-review-hero { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.usl-spec-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .usl-spec-grid { grid-template-columns: 1fr 1fr; } }
.usl-spec-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); padding: 14px 18px; }
.usl-spec-row dt { font-size: .875rem; color: var(--color-text-muted); }
.usl-spec-row dd { margin: 0; font-size: .875rem; font-weight: 600; text-align: right; }

.usl-rating { display: flex; flex-direction: column; gap: 4px; }
.usl-rating__stars { display: flex; align-items: center; gap: 2px; }
.usl-rating__stars svg { width: 16px; height: 16px; color: var(--color-border); }
.usl-rating__stars svg.is-filled { color: var(--color-moss); }
.usl-rating__value { margin-left: 6px; font-size: .875rem; font-weight: 700; }
.usl-rating__basis { font-size: .75rem; color: var(--color-text-muted); }

.usl-editorial-note { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-cream); padding: 24px; }
.usl-editorial-note h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-moss); }
.usl-editorial-note p { margin-top: 8px; font-size: .9rem; color: var(--color-text-muted); }

.usl-cta-banner { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); padding: 32px; }
@media (min-width: 640px) { .usl-cta-banner { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- FAQ ---------- */
.usl-faq { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); overflow: hidden; }
.usl-faq details { border-bottom: 1px solid var(--color-border); padding: 20px; }
.usl-faq details:last-child { border-bottom: none; }
.usl-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; }
.usl-faq summary::-webkit-details-marker { display: none; }
.usl-faq summary .usl-faq__plus { flex-shrink: 0; font-size: 1.2rem; color: var(--color-moss); transition: transform .2s ease; }
.usl-faq details[open] summary .usl-faq__plus { transform: rotate(45deg); }
.usl-faq p { margin-top: 12px; font-size: .9rem; color: var(--color-text-muted); line-height: 1.65; }

/* ---------- Comparison table ---------- */
.usl-comparison-table-wrap { display: none; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
@media (min-width: 640px) { .usl-comparison-table-wrap { display: block; } }
.usl-comparison-table-wrap table { background: var(--color-white); text-align: left; font-size: .9rem; }
.usl-comparison-table-wrap thead th { background: var(--color-cream); padding: 16px 20px; font-family: var(--font-heading); font-size: 1rem; }
.usl-comparison-table-wrap thead th:first-child { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); font-weight: 700; }
.usl-comparison-table-wrap tbody th { padding: 16px 20px; font-weight: 600; text-align: left; }
.usl-comparison-table-wrap tbody td { padding: 16px 20px; color: var(--color-text-muted); }
.usl-comparison-table-wrap tbody tr:nth-child(even) { background: rgba(247,244,237,.5); }

.usl-comparison-cards { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 640px) { .usl-comparison-cards { display: none; } }
.usl-comparison-cards > div { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); padding: 20px; }
.usl-comparison-cards dl { margin-top: 16px; display: flex; flex-direction: column; }
.usl-comparison-cards > div > dl > div { padding-block: 12px; border-top: 1px solid var(--color-border); }
.usl-comparison-cards > div > dl > div:first-child { border-top: none; }
.usl-comparison-cards dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.usl-comparison-cards dd { margin: 4px 0 0; font-size: .9rem; }

/* ---------- Forms: search & contact ---------- */
.usl-search-form { display: flex; gap: 10px; }
.usl-search-form input[type="search"] { flex: 1; border: 1px solid var(--color-border); border-radius: 999px; padding: .7rem 1.1rem; background: var(--color-white); font-size: .9rem; }
.usl-search-form input[type="search"]:focus { outline: none; border-color: var(--color-moss); }

.usl-search-results { display: flex; flex-direction: column; gap: 20px; }
.usl-search-result { display: flex; gap: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); padding: 20px; }
.usl-search-result__thumb { flex-shrink: 0; width: 96px; height: 72px; border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(169,185,165,.4), var(--color-cream)); overflow: hidden; }
.usl-search-result__thumb img { width: 100%; height: 100%; object-fit: cover; }
.usl-search-empty { border: 1px dashed var(--color-border); border-radius: var(--radius-lg); padding: 40px; text-align: center; color: var(--color-text-muted); }

.usl-contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); padding: 32px; max-width: 32rem; }

/* ---------- Empty states ---------- */
.usl-empty-state { border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); padding: 32px; text-align: center; color: var(--color-text-muted); }

/* ---------- 404 ---------- */
.usl-404 { position: relative; overflow: hidden; background: var(--color-ink); color: var(--color-cream); min-height: 60vh; display: flex; align-items: center; }
.usl-404__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-block: 96px; }
.usl-404 h1 { color: var(--color-cream); font-size: 2rem; }
@media (min-width: 640px) { .usl-404 h1 { font-size: 2.5rem; } }
.usl-404 p { color: rgba(247,244,237,.75); font-size: 1.1rem; max-width: 32rem; }

/* ---------- Pagination ---------- */
.usl-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.usl-pagination a, .usl-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding-inline: 10px; border-radius: 999px; border: 1px solid var(--color-border); font-size: .875rem; }
.usl-pagination .current { background: var(--color-ink); color: var(--color-cream); border-color: var(--color-ink); }
.usl-pagination a:hover { border-color: var(--color-moss); }

/* ---------- Screen-reader only ---------- */
.usl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Utility ---------- */
.usl-mt-8 { margin-top: 32px; }
.usl-flex-center { display: flex; align-items: center; justify-content: center; }