/* ==========================================================================
   trenz.codes — Landingpage-Komponenten (WordPress-Port)
   Sektionsgrammatik der P1-Landingpages:
   Eyebrow → Headline → Body → CTA; Antwort-Karten, Checklisten, Tabellen,
   Prozess-Rail, Proof-Sheets, FAQ, CTA-Band).

   Alle Regeln sind unter `.tc-lp` gescopet — die Klasse liegt auf dem
   <main> des Templates `page-landing`. Die Klassennamen im Scope sind
   bewusst das gemeinsame Seitenvokabular (`.section`, `.answer-card`, …).
   Basis-, Header-, Footer- und Button-Styles liegen in theme.css/theme.json.
   Konsumiert ausschließlich Tokens aus tokens.css.
   ========================================================================== */

/* --- Content-Achse (Prototyp-„container“-Innenkante) ------------------------
   Core zentriert Constrained-Kinder mit margin:auto !important. Der Ausdruck
   repliziert die Zentrierung der vollen Content-Spalte, lässt schmalere
   Elemente (Headlines mit ch-Maß, Copy mit --measure) aber links auf der
   Achse beginnen — wie im Prototyp. */
.tc-lp {
	--tc-content-axis: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}

.tc-lp .is-layout-constrained > :not(.bp-corner) {
	margin-left: var(--tc-content-axis) !important;
	margin-right: auto !important;
}

/* Sektionen stapeln wie im Prototyp ohne blockGap-Zwischenräume —
   Rhythmus kommt ausschließlich aus den Sektions-Paddings. */
.tc-lp .wp-block-post-content > * + * {
	margin-block-start: 0;
}

/* --- Hero ------------------------------------------------------------------ */
.tc-lp .hero {
	padding-top: clamp(3.5rem, 7vw, 6rem);
	padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* Grid + Glow reichen hinter den transparenten Header hinauf (wie tc-hero). */
.tc-lp .hero.tc-has-blueprint::before,
.tc-lp .hero.tc-has-glow-cyan::after {
	top: calc(-1 * var(--tc-header-h));
}

/* Bezugsrahmen für die absoluten Blueprint-Ecken-Labels. */
.tc-lp .hero .is-layout-constrained {
	position: relative;
}

.tc-lp .bp-corner {
	position: absolute;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
}

.tc-lp .bp-corner--tl {
	top: -1.5rem;
	left: max(var(--gutter), var(--tc-content-axis));
}

.tc-lp .bp-corner--br {
	bottom: -1.5rem;
	right: max(var(--gutter), var(--tc-content-axis));
}

.tc-lp .hero h1 {
	margin-top: 0;
	margin-bottom: var(--space-5);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--text-display-lg);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tighter);
	color: var(--text-heading);
	text-wrap: balance;
	max-width: 24ch;
}

.tc-lp .lead {
	font-size: var(--text-lg);
	line-height: var(--lh-normal);
	color: var(--text-body);
	max-width: var(--measure-lp);
}

.tc-lp .hero .lead strong {
	color: var(--text-secondary);
}

.tc-lp .stack-layer-meta {
	display: inline-block;
	margin-top: var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--index-label);
}

/* --- Sektionen --------------------------------------------------------------- */
.tc-lp .section {
	padding-top: clamp(3.5rem, 7vw, 6rem);
	padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.tc-lp .section-alt {
	background: var(--bg-raised);
	border-top: var(--border-w) solid var(--border-subtle);
	border-bottom: var(--border-w) solid var(--border-subtle);
}

.tc-lp .section--tight-top {
	padding-top: clamp(2rem, 4vw, 3rem);
}

.tc-lp .section--after-hero {
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.tc-lp .section-panel {
	background: var(--bg-panel);
}

.tc-lp .section-alt + .section-alt {
	border-top: none;
}

.tc-lp hr.bp-divider {
	height: 1px;
	margin-top: 0;
	margin-bottom: 0;
	border: 0;
	background: var(--border-subtle);
}

.tc-lp hr.bp-divider--dense-break {
	background: linear-gradient(90deg, var(--border-strong), var(--border-subtle) 40%, transparent);
}

.tc-lp .section h2 {
	margin-bottom: var(--space-5);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--text-display-md);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tighter);
	color: var(--text-heading);
	text-wrap: balance;
	max-width: 28ch;
}

.tc-lp .section h3 {
	margin-top: var(--space-6);
	margin-bottom: var(--space-2);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--text-xl);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--text-heading);
}

.tc-lp .section p {
	max-width: var(--measure-lp);
}

.tc-lp .section p strong {
	color: var(--text-secondary);
}

/* Fliesstextlinks nicht nur ueber Farbe kennzeichnen (WCAG 1.4.1).
   Buttons und die bereits gerahmten Pfad-Chips haben eine eigene Form. */
.tc-lp .entry-content p a:not(.wp-block-button__link):not(.planned-link),
.tc-lp .wp-block-post-content p a:not(.wp-block-button__link):not(.planned-link),
.tc-lp p.wp-block-paragraph a:not(.wp-block-button__link):not(.planned-link) {
	text-decoration: underline;
	text-decoration-thickness: var(--border-w);
	text-underline-offset: var(--space-1);
}

/* Eyebrow-/Index-Label über der Headline (Mono, Marker-Cyan) */
.tc-lp .spec {
	margin-bottom: var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--marker);
}

.tc-lp .short-answer {
	font-size: var(--text-lg);
	line-height: var(--lh-normal);
	color: var(--text-secondary);
	max-width: var(--measure-lp);
}

.tc-lp .note {
	color: var(--text-muted);
	font-size: var(--text-base);
	max-width: var(--measure-lp);
}

/* --- CTA-Zeile (wp:buttons) ---------------------------------------------------- */
.tc-lp .cta-group {
	margin-top: var(--space-6);
}

/* --- Antwort-Karten (Kurz beantwortet) ---------------------------------------- */
.tc-lp .answer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-5);
	margin-top: var(--space-6);
}

.tc-lp .answer-grid > * {
	margin-block-start: 0;
}

.tc-lp .answer-card {
	background: var(--surface-card);
	background-image: var(--card-sheen);
	border: var(--border-w) solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	box-shadow: var(--shadow-card);
}

.tc-lp .answer-card h3 {
	margin: 0 0 var(--space-3);
	font-size: var(--text-lg);
}

.tc-lp .answer-card p {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
}

/* --- Checkliste (Slash-Marker — Brand-Glyph) ---------------------------------- */
.tc-lp ul.checklist {
	list-style: none;
	margin: var(--space-5) 0 0;
	padding: 0;
	max-width: var(--measure-lp);
}

.tc-lp ul.checklist li {
	position: relative;
	padding: 0.45rem 0 0.45rem 1.75rem;
	margin: 0;
	border-bottom: var(--border-w) solid var(--border-subtle);
}

.tc-lp ul.checklist li:last-child {
	border-bottom: none;
}

.tc-lp ul.checklist li::before {
	content: "/";
	position: absolute;
	left: 0.25rem;
	top: 0.45rem;
	font-family: var(--font-mono);
	font-weight: var(--fw-bold);
	color: var(--marker);
}

/* --- Warn-Karten (Callout-Stil, roter Akzent) --------------------------------- */
.tc-lp .dont-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-5);
	margin-top: var(--space-6);
}

.tc-lp .dont-grid > * {
	margin-block-start: 0;
}

.tc-lp .dont-card {
	background: var(--red-tint);
	border-left: 2px solid var(--accent);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	padding: var(--space-5);
}

.tc-lp .dont-card h3 {
	margin: 0 0 var(--space-2);
	font-size: var(--text-base);
}

.tc-lp .dont-card p {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
}

/* --- Prozess-Rail (nummerierte Schritte, Cyan-Index) --------------------------- */
.tc-lp ol.process-rail {
	list-style: none;
	counter-reset: step;
	margin: var(--space-6) 0 0;
	padding: 0;
	max-width: var(--measure-lp);
}

.tc-lp ol.process-rail > li {
	counter-increment: step;
	position: relative;
	padding: var(--space-4) 0 var(--space-4) 3.25rem;
	border-left: var(--border-w) solid var(--border-strong);
	margin: 0 0 0 0.5rem;
}

.tc-lp ol.process-rail > li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 1rem;
	top: var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	letter-spacing: 0.1em;
	color: var(--index-label);
}

.tc-lp ol.process-rail > li strong {
	color: var(--text-heading);
}

/* --- Geplante Links (Chips) --------------------------------------------------- */
.tc-lp .planned-link {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--marker);
	background: var(--cyan-tint);
	border: var(--border-w) solid rgba(111, 199, 219, 0.35);
	border-radius: var(--radius-xs);
	padding: 0.1rem 0.45rem;
	margin-right: 0.35rem;
	white-space: nowrap;
}

.tc-lp a.planned-link:hover {
	color: var(--accent-hover);
	border-color: var(--border-strong);
}

.tc-lp .related-links {
	margin-top: var(--space-6);
	max-width: var(--measure-lp);
}

.tc-lp .related-links strong {
	color: var(--text-heading);
}

.tc-lp .related-links ul {
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
}

.tc-lp .related-links li {
	padding: 0.4rem 0;
	margin: 0;
	border-bottom: var(--border-w) solid var(--border-subtle);
}

.tc-lp .related-links li:last-child {
	border-bottom: none;
}

/* --- Tabellen ------------------------------------------------------------------ */
.tc-lp .table-wrap {
	overflow-x: auto;
	margin-top: var(--space-6);
	border: var(--border-w) solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	background-image: var(--card-sheen);
}

.tc-lp .comparison-table,
.tc-lp .spec-table,
.tc-lp .related-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.tc-lp .comparison-table th,
.tc-lp .spec-table th,
.tc-lp .related-table th,
.tc-lp .comparison-table td,
.tc-lp .spec-table td,
.tc-lp .related-table td {
	padding: var(--space-4) var(--space-5);
	text-align: left;
	vertical-align: top;
	border-bottom: var(--border-w) solid var(--border-subtle);
	line-height: var(--lh-normal);
}

.tc-lp .comparison-table thead th,
.tc-lp .spec-table thead th,
.tc-lp .related-table thead th {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: var(--border-w) solid var(--border-strong);
}

.tc-lp .comparison-table tbody th[scope="row"],
.tc-lp .spec-table tbody th[scope="row"] {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	color: var(--text-heading);
}

.tc-lp .comparison-table tbody tr:last-child th,
.tc-lp .comparison-table tbody tr:last-child td,
.tc-lp .spec-table tbody tr:last-child th,
.tc-lp .spec-table tbody tr:last-child td,
.tc-lp .related-table tbody tr:last-child td {
	border-bottom: none;
}

.tc-lp .spec-table td strong,
.tc-lp .comparison-table td strong {
	color: var(--text-secondary);
}

/* Mobile-Alternative zur Vergleichstabelle (nur wenn Blocks vorhanden) */
.tc-lp .comparison-blocks {
	display: none;
}

@media (max-width: 720px) {
	.tc-lp .table-wrap:has(+ .comparison-blocks) {
		display: none;
	}

	.tc-lp .comparison-blocks {
		display: grid;
		gap: var(--space-4);
		margin-top: var(--space-6);
	}

	.tc-lp .comparison-block {
		background: var(--surface-card);
		background-image: var(--card-sheen);
		border: var(--border-w) solid var(--border-subtle);
		border-radius: var(--radius-md);
		padding: var(--space-5);
	}

	.tc-lp .comparison-block__label {
		margin: 0 0 var(--space-2);
		font-family: var(--font-mono);
		font-size: var(--text-2xs);
		letter-spacing: var(--ls-eyebrow);
		text-transform: uppercase;
		color: var(--marker);
	}

	.tc-lp .comparison-block__row {
		margin: 0.35rem 0 0;
		font-size: var(--text-sm);
		line-height: var(--lh-normal);
	}

	.tc-lp .comparison-block__prefix {
		font-weight: var(--fw-semibold);
		color: var(--text-heading);
	}
}

/* Gestapelte Tabellen auf Mobile (ohne horizontalen Scroll)
   - spec-table & comparison-table: 1. Spalte als Label oben
   - related-table: Link als Item-Titel, Beschreibung darunter
*/
@media (max-width: 720px) {
	.tc-lp .table-wrap--stack-mobile table thead {
		display: none;
	}

	.tc-lp .table-wrap--stack-mobile table tbody tr {
		display: block;
		border-bottom: var(--border-w) solid var(--border-subtle);
		padding: var(--space-2) 0;
	}

	.tc-lp .table-wrap--stack-mobile table tbody td,
	.tc-lp .table-wrap--stack-mobile table tbody th {
		display: block;
		border-bottom: none;
		padding-top: 0.35rem;
		padding-bottom: 0.35rem;
	}

	/* Key/Label-Spalte (z.B. Technologie, Aspekt) als kleine Mono-Überschrift */
	.tc-lp .table-wrap--stack-mobile .spec-table tbody td:first-child,
	.tc-lp .table-wrap--stack-mobile .comparison-table tbody td:first-child,
	.tc-lp .table-wrap--stack-mobile .comparison-table tbody th[scope="row"] {
		font-family: var(--font-mono);
		font-size: var(--text-2xs);
		letter-spacing: var(--ls-eyebrow);
		text-transform: uppercase;
		color: var(--text-muted);
		padding-bottom: 0.1rem;
	}

	/* Verwandte Themen: Thema-Link prominent, Beschreibung darunter */
	.tc-lp .table-wrap--stack-mobile .related-table tbody td:first-child {
		font-weight: var(--fw-semibold);
		color: var(--text-heading);
		padding-bottom: 0.1rem;
	}

	.tc-lp .table-wrap--stack-mobile .related-table tbody td:last-child {
		font-size: var(--text-sm);
		color: var(--text-muted);
		padding-top: 0;
	}

	/* Bestehende data-label Unterstützung für comparison (falls genutzt) */
	.tc-lp .table-wrap--stack-mobile .comparison-table td[data-label] {
		display: block;
		border-bottom: none;
		padding-top: 0.35rem;
		padding-bottom: 0.35rem;
	}

	.tc-lp .table-wrap--stack-mobile .comparison-table td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-family: var(--font-mono);
		font-size: var(--text-2xs);
		letter-spacing: var(--ls-eyebrow);
		text-transform: uppercase;
		color: var(--text-muted);
	}
}

/* --- Proof-Sheets (Fallbeispiele / Projekte) ------------------------------------ */
.tc-lp .proof-sheet {
	background: var(--surface-card);
	background-image: var(--card-sheen);
	border: var(--border-w) solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	box-shadow: var(--shadow-card);
	margin-top: var(--space-6);
	max-width: calc(var(--container) - 2 * var(--gutter));
}

.tc-lp .proof-sheet h3 {
	margin: 0 0 var(--space-3);
}

.tc-lp .proof-sheet p {
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
	max-width: none;
}

.tc-lp .proof-sheet p:last-child {
	margin-bottom: 0;
}

.tc-lp .proof-sheet__label {
	display: block;
	margin-bottom: var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--marker);
}

.tc-lp .proof-fields {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4rem var(--space-5);
	margin: 0;
}

.tc-lp .proof-fields dt {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
	padding-top: 0.2rem;
}

.tc-lp .proof-fields dd {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
}

@media (max-width: 560px) {
	.tc-lp .proof-fields {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.tc-lp .proof-fields dd {
		margin-bottom: var(--space-2);
	}
}

/* --- Fit-Panels (passend / nicht passend) ---------------------------------------- */
.tc-lp .fit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-5);
	margin-top: var(--space-6);
}

.tc-lp .fit-grid > * {
	margin-block-start: 0;
}

.tc-lp .fit-panel {
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	padding: var(--space-5) var(--space-6);
}

.tc-lp .fit-panel h3 {
	margin: 0 0 var(--space-3);
	font-size: var(--text-base);
}

.tc-lp .fit-panel--yes {
	background: var(--cyan-tint);
	border-left: 2px solid var(--marker);
}

.tc-lp .fit-panel--no {
	background: var(--red-tint);
	border-left: 2px solid var(--accent);
}

.tc-lp ul.fit-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tc-lp ul.fit-list li {
	position: relative;
	padding: 0.35rem 0 0.35rem 1.4rem;
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
}

.tc-lp ul.fit-list li::before {
	content: "/";
	position: absolute;
	left: 0.1rem;
	font-family: var(--font-mono);
	font-weight: var(--fw-bold);
}

.tc-lp .fit-panel--yes ul.fit-list li::before {
	color: var(--marker);
}

.tc-lp .fit-panel--no ul.fit-list li::before {
	color: var(--accent);
}

/* --- FAQ --------------------------------------------------------------------------- */
.tc-lp .faq-base h2 {
	max-width: 32ch;
}

.tc-lp .faq-group-label {
	margin-top: var(--space-8);
	margin-bottom: var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--marker);
}

.tc-lp details.faq-item {
	background: var(--surface-card);
	background-image: var(--card-sheen);
	border: var(--border-w) solid var(--border-subtle);
	border-radius: var(--radius-md);
	margin-block-start: var(--space-3);
	transition: border-color var(--dur-base) var(--ease-out);
}

.tc-lp details.faq-item:hover {
	border-color: var(--border-strong);
}

.tc-lp details.faq-item summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding: var(--space-4) var(--space-8) var(--space-4) var(--space-5);
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--text-base);
	color: var(--text-heading);
	line-height: var(--lh-snug);
}

.tc-lp details.faq-item summary::-webkit-details-marker {
	display: none;
}

.tc-lp details.faq-item summary::after {
	content: "+";
	position: absolute;
	right: var(--space-5);
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-mono);
	font-weight: var(--fw-bold);
	color: var(--accent);
}

.tc-lp details.faq-item[open] summary::after {
	content: "–";
}

.tc-lp .faq-answer {
	margin: 0;
	padding: 0 var(--space-5) var(--space-5);
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
	max-width: none;
}

/* --- CTA-Band ------------------------------------------------------------------------ */
.tc-lp .cta-band {
	position: relative;
	overflow: hidden;
	padding-top: clamp(4rem, 8vw, 6.5rem);
	padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

.tc-lp .cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.6;
	background-image: var(--bg-blueprint);
	background-size: var(--grid-size) var(--grid-size);
}

.tc-lp .cta-band .is-layout-constrained {
	position: relative;
	background: var(--surface-card);
	background-image: var(--card-sheen);
	border: var(--border-w) solid var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	max-width: calc(var(--container) - 2 * var(--gutter));
	margin-left: auto;
	margin-right: auto;
	padding: clamp(2rem, 4vw, 3.5rem);
}

.tc-lp .cta-band h2 {
	margin-bottom: var(--space-4);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--text-display-md);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tighter);
	color: var(--text-heading);
	text-wrap: balance;
}

.tc-lp .cta-band .lead {
	color: var(--text-muted);
	margin-bottom: var(--space-5);
}

.tc-lp .cta-band .cta-group {
	margin-top: var(--space-4);
}

/* --- Visually hidden (Tabellen-Captions) ------------------------------------------- */
.tc-lp .visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Content graphics (große dekorative Bilder zur Auflockerung textlastiger Abschnitte) --- */
/* Integriert aus den generierten Grafiken (clarity-filter, repaired-platform, product-architecture, layered-stack) */
.tc-lp .content-graphic {
	margin: var(--space-8) 0 var(--space-10);
	border-radius: var(--radius-md);
	overflow: hidden;
	border: var(--border-w) solid var(--border-subtle);
	background: var(--surface-card);
	box-shadow: var(--shadow-sm);
}

.tc-lp .content-graphic img,
.tc-lp .content-graphic figure,
.tc-lp .content-graphic .wp-block-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.tc-lp .content-graphic figure {
	margin: 0;
}

@media (max-width: 720px) {
	.tc-lp .content-graphic {
		margin: var(--space-6) 0 var(--space-8);
		border-radius: var(--radius-sm);
	}
}