/* Club landing base styles. Layout and spacing live in Tailwind classes;
   this file holds the brand wordmark and the few things Tailwind cannot express. */

html, body {
	background-color: #f6f5f3;
	color: #232323;
	font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-variant-numeric: proportional-nums lining-nums;
}

/* Exact wordmark extracted from the supplied master artwork. The em-based width
   lets one source scale cleanly from the navigation to the hero. */
.mark {
	display: inline-block;
	width: min(100%, 8.1em);
	vertical-align: middle;
}

.mark__image {
	display: block;
	width: 100%;
	height: auto;
}

.brand-nav .mark { width: 6em; }

/* Flame gradient reused by buttons and the numbered steps. */
.flame-bg {
	background-image: linear-gradient(160deg, #ffb703 0%, #ff7a1a 45%, #ef3b00 100%);
}

.flame-text {
	background-image: linear-gradient(160deg, #ffb703 0%, #ff7a1a 45%, #ef3b00 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.card-icon { width: 16px; height: 25px; flex: none; }
.perk-icon { width: 18px; height: 18px; flex: none; }

/* FAQ accordion — <details> needs the marker suppressed on WebKit. */
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+";
	margin-left: auto;
	font-size: 24px;
	line-height: 1;
	color: #ef3b00;
}
.faq details[open] summary::after { content: "\2013"; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}