/* ==========================================================================
   Galleon — HALAMAN HOME
   Hanya dimuat saat is_front_page().

   Konvensi file ini:
   - Satu blok bernomor per section, urut sesuai urutan tampil di halaman.
   - Media query diletakkan DI DALAM blok section-nya, bukan dikumpulkan
     di akhir file. Satu section = satu tempat edit.
   - Breakpoint yang dipakai hanya tiga: 1024px, 900px, 600px.
   - Angka yang dipakai berulang dijadikan custom property di awal blok.

   Urutan section:
     1. Hero
     2. Product & Service
     3. Client Logos
     4. Testimonials
     5. Latest News
     6. Contact CTA + Follow Us
     7. Feature Grid (belum dipakai)
   ========================================================================== */


/* ==========================================================================
   1. HERO
   ========================================================================== */

.hero {
	--hero-overlay-top:    0.72;
	--hero-overlay-mid:    0.48;
	--hero-overlay-bottom: 0.88;

	position: relative;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding-block: calc(var(--header-h) + var(--sp-9)) var(--sp-9);
	color: var(--c-on-dark);
	overflow: hidden;
	isolation: isolate;
	background: var(--c-ink);
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero__video,
.hero__fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(26, 25, 23, var(--hero-overlay-top)) 0%,
		rgba(26, 25, 23, var(--hero-overlay-mid)) 45%,
		rgba(26, 25, 23, var(--hero-overlay-bottom)) 100%
	);
}

.hero__inner {
	position: relative;
	max-width: 84ch;
	margin-inline: auto;
	text-align: center;
}
.hero__spacer {
	height: var(--sp-7);
}

.hero__eyebrow {
	margin-bottom: var(--sp-5);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-accent);
}

.hero__title {
	margin-bottom: var(--sp-5);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	color: var(--c-on-dark);
	text-wrap: balance;
}

.hero__desc {
	max-width: 80ch;
	margin-inline: auto;
	margin-bottom: var(--sp-7);
	font-size: var(--fs-md);
	font-weight: var(--fw-normal);
	line-height: var(--lh-body);
	color: var(--c-on-dark-muted);
}

.hero__actions {
	display: flex;
	justify-content: center;
	gap: var(--sp-3);
	margin: 0;
}

.hero__eyebrow,
.hero__desc,
.hero__actions {
	animation: galleon-enter var(--dur-reveal) var(--ease-out) both;
}

.hero__title {
	animation: galleon-unmask 900ms var(--ease-out) both;
}

.hero__eyebrow { animation-delay: 100ms; }
.hero__title   { animation-delay: 200ms; }
.hero__desc    { animation-delay: 420ms; }
.hero__actions { animation-delay: 540ms; }

.hero__cue {
	position: absolute;
	left: 50%;
	bottom: var(--sp-6);
	translate: -50% 0;
	display: grid;
	place-items: center;
	width: 26px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--radius-pill);
	animation: galleon-enter var(--dur-reveal) var(--ease-out) 900ms both;
}

.hero__cue-line {
	width: 2px;
	height: 8px;
	border-radius: 1px;
	background: var(--c-accent);
	animation: galleon-cue 1.8s var(--ease) infinite;
}

@media (max-width: 900px) {
	.hero { padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-9); }
}

@media (max-width: 600px) {
	.hero {
		--hero-overlay-mid: 0.58;

		min-height: 88svh;
	}

	.hero__inner { max-width: none; }

	/* .hero__actions { flex-direction: column; } */
	/* .hero__actions .btn { width: 100%; } */

	.hero__actions .btn { width: fit-content; }

	.hero__cue { display: none; }
}

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

/* ==========================================================================
   2. PRODUCT & SERVICE

   Kartu bersih: gambar di atas (rounded di dua sudut atas saja),
   panel putih di bawah (rounded di dua sudut bawah) — radius seragam
   lewat satu token --card-radius, konsisten dengan komponen .card
   lain di project.

   Default: panel hanya menampilkan judul.
   Deskripsi disembunyikan lewat max-height: 0 dan muncul halus saat
   hover — tinggi KARTU itu sendiri tetap sama, deskripsi mengisi
   ruang tambahan di dalam body tanpa mendorong kartu tetangga di
   grid yang sama (karena semua kartu tumbuh bersamaan, grid tetap
   sejajar — bukan absolute/overlay).
   ========================================================================== */

.product-section {
	--card-radius:      16px;
	--card-title-lines: 2;
	--card-text-lines:  3;

	background: var(--c-surface-alt);
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sp-5);
	align-items: start;
}

.product-card {
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--card-radius);
	overflow: hidden;
	text-decoration: none;
	transition:
		transform var(--dur) var(--ease-out),
		box-shadow var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out);
}

.product-card:hover,
.product-card:focus-visible {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
	border-color: var(--c-accent-border);
}

.product-card:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}

/* --- Media --- */
.product-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--c-surface-alt);
	overflow: hidden;
}

.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.product-card:hover .product-card__media img {
	transform: scale(1.06);
}

.product-card__media--empty {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #EDEAE4 0%, #F7F6F3 100%);
}

.product-card__media--empty::before {
	content: "";
	width: 32px;
	height: 24px;
	border: 2px solid var(--c-line-strong);
	border-radius: 4px;
	opacity: 0.7;
}

/* --- Ikon panah, pojok kanan-bawah gambar --- */
.product-card__arrow {
	position: absolute;
	right: var(--sp-3);
	bottom: var(--sp-3);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--c-surface);
	color: var(--c-ink);
	box-shadow: var(--shadow-sm);
	transition:
		background-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur) var(--ease-out);
}

.product-card:hover .product-card__arrow {
	background: var(--c-accent);
	transform: rotate(45deg);
}

.product-card__arrow svg { flex: 0 0 auto; }

/* --- Isi kartu --- */
.product-card__body {
	display: flex;
	flex-direction: column;
	padding: var(--sp-4) var(--sp-4) var(--sp-4);
}

.product-card__title {
	display: -webkit-box;
	-webkit-line-clamp: var(--card-title-lines);
	line-clamp: var(--card-title-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(var(--card-title-lines) * 1em * var(--lh-snug));
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
	color: var(--c-ink);
	text-wrap: pretty;
	/* text-align: center; */
}

/* --- Deskripsi, disembunyikan lewat max-height ---
   Nilai max-height di state terbuka sengaja dibuat cukup besar
   (lebih dari tinggi konten sebenarnya) supaya teks dengan panjang
   berbeda-beda tidak terpotong transisinya; grid-template-rows
   dihindari di sini karena masih kurang didukung untuk transisi
   pada beberapa browser, jadi max-height dipilih sebagai pendekatan
   yang lebih aman lintas browser. */
.product-card__reveal {
	max-height: 0;
	opacity: 0;
	transition:
		max-height var(--dur-slow) var(--ease-out),
		opacity var(--dur) var(--ease-out),
		margin-top var(--dur-slow) var(--ease-out);
}

.product-card--has-reveal:hover .product-card__reveal,
.product-card--has-reveal:focus-visible .product-card__reveal {
	max-height: 160px;
	opacity: 1;
	margin-top: var(--sp-3);
}

.product-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: var(--card-text-lines);
	line-clamp: var(--card-text-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
}

/* --- Perangkat tanpa hover (touch): deskripsi selalu terlihat
   dalam alur normal, tanpa animasi max-height. --- */
@media (hover: none) {
	.product-card__reveal {
		max-height: none;
		opacity: 1;
		margin-top: var(--sp-3);
		transition: none;
	}
}

/* --- Responsive --- */
@media (max-width: 1200px) {
	.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

@media (max-width: 560px) {
	.product-grid { grid-template-columns: 1fr; }

	.product-card__body { padding: var(--sp-5); }

	.product-card__title {
		-webkit-line-clamp: none;
		line-clamp: none;
		overflow: visible;
		min-height: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-card:hover .product-card__media img { transform: none; }
	.product-card:hover .product-card__arrow { transform: none; }
}

/* ==========================================================================
   3. CLIENT LOGOS

   Satu wave logo, bergerak ke kiri, penuh selebar layar. Logo tampil
   dengan warna aslinya (tidak grayscale) — tinggi logo diturunkan dari
   --logo-row-h supaya tidak pernah melebihi kotaknya sendiri.
   ========================================================================== */

.client-section {
	--logo-row-h: 200px;
	--logo-max-w: 320px;
	--logo-gap:   var(--sp-4);

	background: var(--c-surface);
	overflow: hidden;
}

.client-section .section-head { margin-bottom: var(--sp-8); }

.logo-marquee {
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 10%,
		#000 90%,
		transparent 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 10%,
		#000 90%,
		transparent 100%
	);
}

.logo-marquee__row { overflow: hidden; }

.logo-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--logo-gap);
	width: max-content;
	padding-block: var(--sp-3);
	animation: logo-marquee var(--marquee-duration, 40s) linear infinite;
	will-change: transform;
}

.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track {
	animation-play-state: paused;
}

.logo-marquee__item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: calc(var(--logo-row-h) * 1.4);
	height: var(--logo-row-h);
	padding-inline: var(--sp-5);
}

/* Warna asli logo dipertahankan — tidak ada grayscale/blend mode.
   Opacity sedikit diturunkan sebagai default yang tenang, lalu naik
   penuh + sedikit membesar saat hover sebagai penekanan interaktif. */
.logo-marquee__img {
	width: auto;
	height: auto;
	max-height: calc(var(--logo-row-h) * 0.72 * var(--logo-scale, 1));
	max-width: calc(var(--logo-max-w) * var(--logo-scale, 1));
	object-fit: contain;
	opacity: 0.92;
	transform: scale(1);
	transition:
		opacity var(--dur) var(--ease),
		transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
	.logo-marquee__item:hover .logo-marquee__img {
		opacity: 1;
		transform: scale(1.05);
	}
}

@keyframes logo-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 900px) {
	.client-section {
		--logo-row-h: 160px;
		--logo-max-w: 250px;
		--logo-gap:   var(--sp-6);
	}

	.logo-marquee__item { padding-inline: var(--sp-4); }
}

@media (max-width: 600px) {
	.client-section {
		--logo-row-h: 112px;
		--logo-max-w: 180px;
		--logo-gap:   var(--sp-5);
	}

	.logo-marquee__item { padding-inline: var(--sp-3); }

	.logo-marquee {
		-webkit-mask-image: linear-gradient(
			90deg, transparent 0, #000 6%, #000 94%, transparent 100%
		);
		mask-image: linear-gradient(
			90deg, transparent 0, #000 6%, #000 94%, transparent 100%
		);
	}
}

@media (prefers-reduced-motion: reduce) {
	.logo-marquee__track {
		animation: none;
		will-change: auto;
	}

	.logo-marquee__row {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.logo-marquee__row::-webkit-scrollbar { display: none; }

	.logo-marquee__item:hover .logo-marquee__img {
		transform: none;
	}
}

/* ==========================================================================
   4. TESTIMONIALS — Centered

   Semua elemen berpusat: quote → avatar/logo kecil + nama/perusahaan
   sebaris → dot navigasi → progress bar auto-slide tipis. Panah
   prev/next diposisikan absolute di kiri-kanan teks, bukan di alur
   normal, supaya tidak menambah tinggi konten saat berpindah slide.

   Semua ukuran (font, spacing, avatar, panah) memakai token dari
   base.css supaya konsisten dengan section lain dan otomatis
   fluid/responsive tanpa breakpoint berlebihan.
   ========================================================================== */

.testimonial-section {
	background: var(--c-surface-alt);
}

.testimonial-center {
	position: relative;
	max-width: 100ch;
	margin-inline: auto;
	padding-inline: clamp(24px, 9vw, calc(var(--sp-9) * 1.6));
	text-align: center;
}

.testimonial-center__dot-mark {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--c-accent);
	margin-inline-end: var(--sp-2);
}

.testimonial-center__mark {
	display: block;
	margin-bottom: var(--sp-3);
	font-family: var(--font-display);
	font-size: clamp(3rem, 5vw, 4.5rem);
	line-height: 0.7;
	font-weight: var(--fw-black);
	color: var(--c-accent-border);
}

/* --- Panah, di kiri-kanan teks quote --- */
.testimonial-center__arrow {
	position: absolute;
	top: clamp(2.5rem, 6vw, 3.5rem);
	left: 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--c-surface);
	border: 1px solid var(--c-line-strong);
	border-radius: 50%;
	color: var(--c-ink);
	box-shadow: var(--shadow-sm);
	transition:
		background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}

.testimonial-center__arrow:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-ink);
}

.testimonial-center__arrow:active { transform: scale(0.94); }

.testimonial-center__arrow--prev { left: 0; }
.testimonial-center__arrow--next { right: 0; left: auto; }

/* --- Slide --- */
.testimonial-center__slides {
	position: relative;
	display: grid;
}

.testimonial-center__slide {
	grid-area: 1 / 1;
	margin: 0;
	visibility: hidden;
	pointer-events: none;
}

.testimonial-center__slide.is-active {
	visibility: visible;
	pointer-events: auto;
}

.testimonial-center__slide.is-entering {
	animation: galleon-enter var(--dur-slow) var(--ease-out) both;
}

.testimonial-center__quote { margin: 0 0 var(--sp-6); }

.testimonial-center__quote p {
	margin: 0;
	font-family: var(--font-quote);
	font-style: italic;
	font-size: var(--fs-xl);
	font-weight: var(--fw-medium);
	line-height: 1.5;
	color: var(--c-ink);
	text-wrap: pretty;
}

.testimonial-center__quote p + p { margin-top: var(--sp-4); }

.testimonial-center__quote--md p { font-size: var(--fs-lg); }
.testimonial-center__quote--sm p { font-size: var(--fs-md); }
.testimonial-center__quote--xs p { font-size: var(--fs-base); line-height: 1.6; }

/* --- Avatar/logo + nama sebaris, berpusat --- */
.testimonial-center__author {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	margin: 0;
}

.testimonial-center__avatar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--c-surface);
	border: 2px solid var(--c-surface);
	box-shadow: var(--shadow-sm);
}

.testimonial-center__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonial-center__avatar--empty {
	background: var(--c-ink);
	color: var(--c-accent);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: var(--fw-black);
}

.testimonial-center__author-text {
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
	text-align: left;
}

.testimonial-center__name {
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

.testimonial-center__role {
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

/* --- Dots, center di bawah quote+author --- */
.testimonial-center__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	margin-top: var(--sp-7);
}

.testimonial-center__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--c-line-strong);
	transition:
		width var(--dur) var(--ease-out),
		background-color var(--dur-fast) var(--ease);
}

.testimonial-center__dot.is-active {
	width: 28px;
	background: var(--c-accent);
}

/* --- Progress bar auto-slide, center di bawah dots --- */
.testimonial-center__progress {
	width: 160px;
	height: 3px;
	margin: var(--sp-5) auto 0;
	border-radius: var(--radius-pill);
	background: var(--c-line);
	overflow: hidden;
}

.testimonial-center__progress-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--c-accent);
	border-radius: inherit;
}

.testimonial-center__progress-fill.is-animating {
	animation: testimonial-progress var(--testimonial-duration, 6000ms) linear forwards;
}

.testimonial-center__arrow i {
	font-size: 20px;
	line-height: 1;
}

@keyframes testimonial-progress {
	from { width: 0%; }
	to   { width: 100%; }
}

/* --- Responsive ---
   Tiga breakpoint: 900px (tablet, panah masuk ke tepi teks karena
   padding-inline sudah menyempit), 600px (mobile, panah disembunyikan
   karena ruang tidak cukup — swipe tetap berfungsi lewat JS), dan
   360px (HP sangat kecil, avatar+nama ditumpuk vertikal). */
@media (max-width: 900px) {
	.testimonial-head {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}

	.testimonial-head__aside {
		max-width: none;
		padding-top: 0;
	}

	.testimonial-center__arrow {
		width: 38px;
		height: 38px;
	}
}

@media (max-width: 600px) {
	.testimonial-center {
		padding-inline: 0;
	}

	.testimonial-center__arrow { display: none; }

	.testimonial-center__quote p { font-size: var(--fs-lg); }
	.testimonial-center__quote--md p { font-size: var(--fs-md); }
	.testimonial-center__quote--sm p,
	.testimonial-center__quote--xs p { font-size: var(--fs-sm); }

	.testimonial-center__dots { margin-top: var(--sp-6); }
}

@media (max-width: 380px) {
	.testimonial-center__author {
		flex-direction: column;
		gap: var(--sp-2);
	}

	.testimonial-center__author-text {
		flex-direction: column;
		align-items: center;
		gap: var(--sp-1);
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.testimonial-center__progress-fill.is-animating {
		animation: none;
		width: 100%;
	}
}
/* ==========================================================================
   5. LATEST NEWS
   ========================================================================== */

.news-section { background: var(--c-surface); }


/* ==========================================================================
   6. CONTACT CTA + FOLLOW US
   ========================================================================== */

.contact-cta-section { background: var(--c-surface); }

.contact-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: var(--sp-8);
	align-items: center;
	margin-bottom: var(--sp-section);
}

.contact-cta__title {
	margin-bottom: var(--sp-5);
	font-size: var(--fs-2xl);
	font-weight: 800;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}

.contact-cta__desc {
	max-width: 44ch;
	margin-bottom: var(--sp-7);
	font-size: var(--fs-md);
	color: var(--c-text-muted);
}

.contact-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.contact-cta__media { justify-self: end; }

.contact-cta__img {
	width: 100%;
	height: auto;
}

.follow-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	padding: var(--sp-7) var(--sp-8);
	background: var(--c-accent);
	border-radius: var(--radius-lg);
}

.follow-band__title {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-xl);
	font-weight: 800;
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
}

.follow-band__desc {
	margin: 0;
	font-size: var(--fs-sm);
	color: rgba(20, 22, 26, 0.78);
}

.follow-band__list {
	display: flex;
	flex: 0 0 auto;
	gap: var(--sp-3);
}

.follow-band__link {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--c-ink);
	color: var(--c-accent);
	text-decoration: none;
	transition:
		transform var(--dur) var(--ease-out),
		background-color var(--dur-fast) var(--ease);
}

.follow-band__link:hover {
	transform: translateY(-3px);
	background: var(--c-ink-soft);
}

@media (max-width: 900px) {
	.contact-cta {
		grid-template-columns: 1fr;
		gap: var(--sp-7);
	}

	.contact-cta__media {
		justify-self: stretch;
		order: -1;
	}

	.contact-cta__desc { max-width: none; }
}

@media (max-width: 600px) {
	.contact-cta__actions .btn { width: 100%; }

	.follow-band {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--sp-6);
	}
}


/* ==========================================================================
   7. FEATURE GRID
   ========================================================================== */

.feature-grid__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--sp-7);
}

.feature__icon {
	width: 44px;
	margin-bottom: var(--sp-5);
}

.feature__title {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-md);
}

.feature__desc {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
}