/* Style guide page only. */
.sg-hero {
	background:
		radial-gradient(ellipse 60% 80% at 85% 0%, rgba(var(--gold-rgb), 0.16), transparent 60%),
		radial-gradient(ellipse 50% 60% at 0% 100%, rgba(var(--gold-rgb), 0.08), transparent 60%),
		var(--black-900);
	border-bottom: var(--border);
}
.sg-hero__title { font-size: var(--fs-display); font-family: var(--font-en-head); direction: ltr; text-align: start; }
[dir="rtl"] .sg-hero__title { text-align: right; }
.sg-label {
	margin: var(--sp-8) 0 var(--sp-4);
	font-family: var(--font-en-head);
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--text-secondary);
	padding-bottom: var(--sp-2);
	border-bottom: var(--border);
}
.sg-label:first-of-type { margin-top: 0; }
.sg-block { margin-bottom: var(--sp-4); }
.sg-grid-2 { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .sg-grid-2 { grid-template-columns: 1fr 1fr; align-items: start; } }
#brand .sg-grid-2 { align-items: center; }
.sg-emblem-wrap { display: grid; place-items: center; padding: var(--sp-6); }
.sg-emblem { width: min(260px, 70vw); animation: mst-glow 4s ease-in-out infinite; }
.sg-lockups { padding: var(--sp-5); border: var(--border); border-radius: var(--r-card); background: var(--black-900); display: inline-flex; }
.sg-tagline { margin-top: var(--sp-4); font-family: var(--font-en-head); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-500); direction: ltr; text-align: start; }
.sg-swatches { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: var(--sp-6); }
.sg-swatch { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.sg-swatch--wide { grid-column: span 2; }
.sg-swatch__chip { height: 84px; border-radius: var(--r-md); border: var(--border); margin-bottom: var(--sp-2); }
.sg-glow { background: var(--black-700); box-shadow: var(--glow-md); border-color: transparent; }
.sg-swatch code, .sg-space code, .sg-radii code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--gold-400); direction: ltr; }
.sg-type__row { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-4); align-items: baseline; padding: var(--sp-4) 0; border-bottom: var(--border); }
.sg-type__row > small { font-family: var(--font-en-body); color: var(--text-muted); font-size: 12px; direction: ltr; }
.sg-reset { margin: 0; }
.sg-display { margin: 0; font-family: var(--font-head); font-size: var(--fs-display); font-weight: 800; line-height: 1.15; }
.sg-en-head { font-family: var(--font-en-head); font-size: var(--fs-h2); font-weight: 800; }
.sg-en-body { font-family: var(--font-en-body); }
.sg-en { direction: ltr; }
.sg-spaces { display: flex; flex-direction: column; gap: var(--sp-2); }
.sg-space { display: grid; grid-template-columns: 70px 1fr 44px; gap: var(--sp-3); align-items: center; }
.sg-space span { height: 14px; background: var(--gold-gradient); border-radius: 3px; }
.sg-radii { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.sg-radii div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 1; border: var(--border-gold); background: var(--black-700); font-size: var(--fs-xs); color: var(--text-secondary); }
.sg-sep { width: 1px; height: 28px; background: var(--black-600); margin-inline: var(--sp-2); }
.sg-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sp-2); }
.sg-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-3) var(--sp-2); border: var(--border); border-radius: var(--r-md); background: var(--black-700); color: var(--gold-500); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.sg-icon:hover { border-color: rgba(var(--gold-rgb), .5); box-shadow: var(--glow-sm); }
.sg-icon .mst-icon { width: 26px; height: 26px; }
.sg-icon small { font-size: 10px; color: var(--text-muted); font-family: var(--font-en-body); }
.sg-cat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); color: var(--text-primary); }
.sg-cat:hover { color: var(--text-primary); }
.sg-cat__name { margin-top: var(--sp-2); font-size: var(--fs-h4); font-weight: 700; }
.sg-cat__en { font-family: var(--font-en-head); font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-500); }
.sg-stats { display: flex; gap: var(--sp-8); }