/* Runway Lyfe — shared tokens and components.
   Brand values are printed on :root from Settings → Runway Lyfe Widgets;
   the fallbacks below match the defaults. */
.rl-w {
	--rl-ease: cubic-bezier(.2, .7, .2, 1);
	font-family: var(--rl-font-body, "Jost", system-ui, sans-serif);
	color: var(--rl-ink, #0E0D0B);
	-webkit-font-smoothing: antialiased;
}
.rl-w *, .rl-w *::before, .rl-w *::after { box-sizing: border-box; }
.rl-w img { max-width: 100%; display: block; }
.rl-w a { color: inherit; text-decoration: none; }
.rl-w p { margin: 0; }
.rl-w :focus-visible { outline: 2px solid var(--rl-gold, #C29B4E); outline-offset: 3px; }
.rl-w h1, .rl-w h2, .rl-w h3, .rl-w h4, .rl-w h5, .rl-w h6 { margin: 0; padding: 0; }

.rl-section { position: relative; padding-block: clamp(72px, 10vw, 128px); background: var(--rl-paper, #FBFAF7); }
.rl-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .rl-container { padding-inline: 32px; } }

.rl-dark { background: var(--rl-ink, #0E0D0B); color: var(--rl-on-ink, #F4EFE5); }

/* Eyebrow */
.rl-eyebrow {
	display: inline-flex; align-items: center; gap: 12px;
	font: 500 12px/1.3 var(--rl-font-mono, monospace);
	letter-spacing: .22em; text-transform: uppercase;
	color: var(--rl-gold-dk, #8C6A2D);
}
.rl-eyebrow::before { content: ""; display: block; flex: none; width: 28px; height: 1px; background: currentColor; }
:where(.rl-dark) .rl-eyebrow { color: var(--rl-gold-lt, #E8CD8A); }

/* Titles */
.rl-title {
	font-family: var(--rl-font-display, Georgia, serif);
	font-weight: 500; line-height: 1.08; letter-spacing: -.01em;
	text-wrap: balance; color: inherit;
}
.rl-title--section { font-size: clamp(36px, 5vw, 64px); }
.rl-title em { font-style: italic; color: var(--rl-gold-dk, #8C6A2D); }
:where(.rl-dark) .rl-title em { color: var(--rl-gold-lt, #E8CD8A); }
.rl-hl-gradient .rl-title em {
	background: linear-gradient(120deg, var(--rl-hl-a, var(--rl-gold-dk, #8C6A2D)) 0%, var(--rl-gold, #C29B4E) 40%, var(--rl-hl-b, var(--rl-gold-lt, #E8CD8A)) 70%, var(--rl-gold, #C29B4E) 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
	padding-right: .06em;
}

/* Description */
.rl-desc { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; font-weight: 300; color: var(--rl-muted, #6B655B); max-width: 58ch; }
.rl-desc p + p { margin-top: 1em; }
:where(.rl-dark) .rl-desc { color: var(--rl-on-ink-mute, #A9A296); }

/* Section heading block */
.rl-sh { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 64px); }
.rl-sh__main, .rl-sh__aside { display: grid; gap: 20px; align-content: end; min-width: 0; }
.rl-sh__main { justify-items: start; }
@media (min-width: 900px) {
	.rl-sh--split { grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: end; }
}
.rl-sh--centered { text-align: center; justify-items: center; }
.rl-sh--centered .rl-sh__main, .rl-sh--centered .rl-sh__aside { justify-items: center; }
.rl-sh--centered .rl-desc { margin-inline: auto; }

/* Buttons */
.rl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	padding: 16px 28px; border: 1px solid transparent; border-radius: 2px;
	font: 500 13px/1 var(--rl-font-body, sans-serif); letter-spacing: .16em; text-transform: uppercase;
	cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: background-color .35s var(--rl-ease), color .35s var(--rl-ease), border-color .35s var(--rl-ease), transform .35s var(--rl-ease), box-shadow .35s var(--rl-ease);
}
.rl-btn__icon { display: inline-flex; line-height: 0; }
.rl-btn__icon svg, .rl-btn__icon i { width: 16px; height: 16px; font-size: 16px; fill: currentColor; transition: transform .35s var(--rl-ease); }
.rl-btn__icon svg.rl-arrow { fill: none; }
.rl-btn:hover .rl-btn__icon svg, .rl-btn:hover .rl-btn__icon i { transform: translateX(4px); }
.rl-btn--gold { background: var(--rl-gold, #C29B4E); color: var(--rl-ink, #0E0D0B); }
.rl-btn--gold:hover { background: var(--rl-gold-lt, #E8CD8A); color: var(--rl-ink, #0E0D0B); }
.rl-btn--ink { background: var(--rl-ink, #0E0D0B); color: var(--rl-on-ink, #F4EFE5); }
.rl-btn--ink:hover { background: var(--rl-gold-dk, #8C6A2D); color: var(--rl-on-ink, #F4EFE5); }
.rl-btn--ghost { border-color: currentColor; color: var(--rl-ink, #0E0D0B); background: transparent; }
.rl-btn--ghost:hover { background: var(--rl-ink, #0E0D0B); color: var(--rl-on-ink, #F4EFE5); border-color: var(--rl-ink, #0E0D0B); }
.rl-btn--ghost-light { border-color: currentColor; color: var(--rl-on-ink, #F4EFE5); background: transparent; }
.rl-btn--ghost-light:hover { background: var(--rl-on-ink, #F4EFE5); color: var(--rl-ink, #0E0D0B); border-color: var(--rl-on-ink, #F4EFE5); }
.rl-btn--link { padding: 0 0 6px; border-width: 0 0 1px; border-color: var(--rl-gold, #C29B4E); border-radius: 0; background: transparent; color: inherit; }
.rl-btn--link:hover { color: var(--rl-gold-dk, #8C6A2D); }
:where(.rl-dark) .rl-btn--link:hover { color: var(--rl-gold-lt, #E8CD8A); }

.rl-btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* Editor-only notice */
.rl-notice { padding: 24px; border: 1px dashed var(--rl-gold, #C29B4E); background: #fff8e8; color: #5b4618; font: 14px/1.5 system-ui, sans-serif; }

.rl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
	.rl-w *, .rl-w *::before, .rl-w *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}