/*
 * RacerPacer Clubs site chrome. Light theme from brand/dist/tokens.json
 * (color.theme.*), Epunda fonts, regular-weight headings.
 */

@font-face {
	font-family: "Epunda Slab";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/EpundaSlab-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Epunda Slab";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/EpundaSlab-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Epunda Sans";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/EpundaSans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Epunda Sans";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/EpundaSans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--rp-ground: #faf5f3;
	--rp-raised: #ffffff;
	--rp-chip: #f3e7e3;
	--rp-ink: #2c1b18;
	--rp-ink-soft: #5c443e;
	--rp-muted: #7a625b;
	--rp-rule: #e6d8d3;
	--rp-edge: #ac8981;
	--rp-accent: #c93f18;
	--rp-fill: #ff5630;
	--rp-on-fill: #3d0600;
	--rp-dark: #1e0f0c;
	--rp-dark-text: #fadcd5;
	--font-display: "Epunda Slab", "Epunda Sans", Georgia, serif;
	--font-sans: "Epunda Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--rp-ground);
	color: var(--rp-ink);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--rp-ink);
}

a {
	color: var(--rp-accent);
	text-underline-offset: 3px;
}

img {
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: 3px solid var(--rp-accent);
	outline-offset: 2px;
}

.rpct-skip {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 100;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--rp-ink);
	color: var(--rp-ground);
}
.rpct-skip:focus {
	left: 16px;
}

.rpct-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 900px) {
	.rpct-container { padding: 0 40px; }
}
.rpct-narrow {
	max-width: 760px;
}
@media (min-width: 900px) {
	.rpct-narrow.rpct-container { max-width: 840px; }
}
.rpct-wide {
	max-width: 1280px;
}

/* ---- Header ---- */
.rpct-header {
	position: relative;
	z-index: 10;
	background: var(--rp-ground);
	border-bottom: 1px solid var(--rp-rule);
}
.rpct-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	min-height: 64px;
	padding-top: 8px;
	padding-bottom: 8px;
}
.rpct-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.rpct-brand img {
	display: block;
	width: 149px;
	height: auto;
}
.rpct-brand-tag {
	padding: 3px 10px;
	border-radius: 8px;
	background: var(--rp-chip);
	color: var(--rp-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.rpct-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rpct-nav a:not(.rpct-btn) {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 999px;
	color: var(--rp-ink-soft);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}
.rpct-nav a:not(.rpct-btn):hover,
.rpct-nav a[aria-current="page"] {
	background: var(--rp-chip);
	color: var(--rp-ink);
}

/* ---- Buttons ---- */
.rpct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 10px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
}
.rpct-btn-primary {
	background: var(--rp-fill);
	color: var(--rp-on-fill);
}
.rpct-btn-primary:hover {
	background: var(--rp-accent);
	color: var(--rp-raised);
}
.rpct-btn-secondary {
	background: var(--rp-raised);
	color: var(--rp-ink);
	box-shadow: inset 0 0 0 1px var(--rp-edge);
}
.rpct-btn-secondary:hover {
	background: var(--rp-chip);
}
.rpct-btn-sm {
	min-height: 40px;
	padding: 8px 16px;
	font-size: 14px;
}
.rpct-btn-lg {
	min-height: 54px;
	padding: 14px 28px;
	font-size: 17px;
}

/* ---- Pages ---- */
.rpct-main {
	min-height: 60vh;
}
.rpct-page {
	padding-top: 40px;
	padding-bottom: 64px;
}
.rpct-page-title {
	margin: 0 0 12px;
	font-size: clamp(32px, 6vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.rpct-lede {
	margin: 0 0 28px;
	color: var(--rp-ink-soft);
	font-size: 19px;
	line-height: 1.5;
}
.rpct-content > h2 {
	margin: 36px 0 10px;
	font-size: 24px;
}
.rpct-content > p {
	margin: 0 0 16px;
}

/* ---- Home ---- */
.rpct-hero {
	overflow: hidden;
	padding: 48px 0 56px;
}
.rpct-hero-inner {
	display: grid;
	gap: 40px;
	align-items: center;
}
@media (min-width: 960px) {
	.rpct-hero { padding: 72px 0 88px; }
	.rpct-hero-inner { grid-template-columns: 1.25fr 1fr; }
}
.rpct-eyebrow {
	margin: 0 0 12px;
	color: var(--rp-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.rpct-hero-title {
	margin: 0 0 18px;
	font-size: clamp(36px, 7vw, 60px);
	line-height: 1.05;
	letter-spacing: -0.033em;
	text-wrap: balance;
}
.rpct-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 20px;
}
.rpct-hero-url {
	margin: 0;
	color: var(--rp-muted);
	font-size: 15px;
}
.rpct-hero-url strong {
	color: var(--rp-ink);
}

.rpct-hero-phone {
	display: flex;
	justify-content: center;
}
.rpct-mock {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 300px;
	padding: 36px 22px 28px;
	border: 10px solid var(--rp-ink);
	border-radius: 44px;
	background: var(--rp-ground);
	box-shadow: 0 24px 60px rgba(30, 15, 12, 0.18);
	font-size: 14px;
}
.rpct-mock-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--rp-fill);
	color: var(--rp-on-fill);
	font-family: var(--font-display);
	font-size: 26px;
}
.rpct-mock-name {
	font-family: var(--font-display);
	font-size: 21px;
	text-align: center;
}
.rpct-mock-meta {
	margin-top: -6px;
	color: var(--rp-muted);
	font-size: 12px;
}
.rpct-mock-icons {
	display: flex;
	gap: 12px;
	margin: 2px 0 6px;
}
.rpct-mock-icons i {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--rp-ink-soft);
}
.rpct-mock-btn {
	width: 100%;
	padding: 12px;
	border-radius: 999px;
	background: var(--rp-raised);
	box-shadow: inset 0 0 0 1px var(--rp-rule);
	font-weight: 600;
	text-align: center;
}
.rpct-mock-btn.is-hi {
	background: var(--rp-fill);
	color: var(--rp-on-fill);
	box-shadow: none;
}
.rpct-mock-card {
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--rp-raised);
	box-shadow: inset 0 0 0 1px var(--rp-rule);
	color: var(--rp-muted);
}
.rpct-mock-card b {
	display: block;
	color: var(--rp-ink);
}

.rpct-section {
	padding: 56px 0;
}
.rpct-section-alt {
	background: var(--rp-raised);
	border-top: 1px solid var(--rp-rule);
	border-bottom: 1px solid var(--rp-rule);
}
.rpct-h2 {
	margin: 0 0 18px;
	font-size: clamp(26px, 4vw, 34px);
}
.rpct-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
}
.rpct-steps {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}
@media (min-width: 800px) {
	.rpct-steps { grid-template-columns: repeat(3, 1fr); }
}
.rpct-steps li {
	padding: 24px;
	border-radius: 24px;
	background: var(--rp-raised);
	box-shadow: inset 0 0 0 1px var(--rp-rule);
	counter-increment: step;
}
.rpct-steps li::before {
	content: counter(step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--rp-chip);
	color: var(--rp-ink);
	font-family: var(--font-display);
	font-size: 18px;
}
.rpct-steps h3 {
	margin: 0 0 6px;
	font-size: 20px;
}
.rpct-steps p {
	margin: 0;
	color: var(--rp-ink-soft);
}
.rpct-features {
	display: grid;
	gap: 32px 64px;
}
@media (min-width: 900px) {
	.rpct-features { grid-template-columns: 1fr 1fr; }
}
.rpct-features p {
	color: var(--rp-ink-soft);
}
.rpct-features .rpct-h2 + p + .rpct-h2 {
	margin-top: 32px;
}
.rpct-ticks {
	margin: 0;
	padding: 0;
	list-style: none;
}
.rpct-ticks li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 30px;
	color: var(--rp-ink-soft);
}
.rpct-ticks li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 14px;
	height: 8px;
	border-left: 3px solid var(--rp-accent);
	border-bottom: 3px solid var(--rp-accent);
	transform: rotate(-45deg);
}
.rpct-cta {
	text-align: center;
}

/* ---- Footer ---- */
.rpct-footer {
	padding: 40px 0 48px;
	background: var(--rp-chip);
	color: var(--rp-ink-soft);
	font-size: 15px;
}
.rpct-footer-inner {
	display: grid;
	gap: 24px;
}
@media (min-width: 900px) {
	.rpct-footer-inner {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}
.rpct-footer-main p {
	max-width: 36em;
	margin: 10px 0 0;
}
.rpct-footer-rp img {
	display: block;
	width: 124px;
}
.rpct-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 900px) {
	.rpct-footer-links { justify-content: flex-end; }
}
.rpct-footer-links a {
	color: var(--rp-ink);
}

/* ---- Home: four-step how it works ---- */
@media (min-width: 800px) {
	.rpct-steps-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.rpct-steps-4 { grid-template-columns: repeat(4, 1fr); }
}
.rpct-section-lede {
	max-width: 40em;
	margin: -6px 0 28px;
	color: var(--rp-ink-soft);
	font-size: 17px;
}

/* ---- Home: example pages ----
 * Each phone takes its colours from the example club's resolved theme (the --rpc-*
 * custom properties set inline), so no colour here is a literal. */
.rpct-examples {
	display: grid;
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	.rpct-examples { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.rpct-examples { grid-template-columns: repeat(4, 1fr); }
}
.rpct-example {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--rp-ink);
	text-align: center;
	text-decoration: none;
}
.rpct-ex-phone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 250px;
	min-height: 440px;
	margin-bottom: 16px;
	padding: 30px 16px 22px;
	overflow: hidden;
	border: 8px solid var(--rp-ink);
	border-radius: 38px;
	background: var(--rpc-bg);
	color: var(--rpc-text);
	font-family: var(--rpc-font-body);
	font-size: 12px;
	line-height: 1.35;
	box-shadow: 0 18px 44px rgba(30, 15, 12, 0.16);
	transition: transform 150ms, box-shadow 150ms;
}
.rpct-example:hover .rpct-ex-phone {
	transform: translateY(-4px);
	box-shadow: 0 24px 54px rgba(30, 15, 12, 0.22);
}
.rpct-ex-phone > span:not(.rpct-ex-backdrop) {
	position: relative;
}
.rpct-ex-backdrop {
	position: absolute;
	inset: 0;
}
.rpct-ex-phone.rpc-bg-gradient .rpct-ex-backdrop {
	background: radial-gradient(120% 70% at 50% 0%, var(--rpc-glow) 0%, var(--rpc-bg) 70%);
}
.rpct-ex-phone.rpc-bg-contour .rpct-ex-backdrop {
	background: var(--rpc-pattern);
	-webkit-mask: var(--rpct-contour) center / cover no-repeat;
	mask: var(--rpct-contour) center / cover no-repeat;
}
.rpct-ex-phone.rpc-bg-dots .rpct-ex-backdrop {
	background-image: radial-gradient(var(--rpc-pattern) 1.2px, transparent 1.4px);
	background-size: 14px 14px;
}
.rpct-ex-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--rpc-accent);
	color: var(--rpc-on-accent);
	font-family: var(--rpc-font-head);
	font-weight: var(--rpc-head-weight);
	font-size: 20px;
}
.rpct-ex-phone.rpc-logo-rounded .rpct-ex-logo {
	border-radius: 14px;
}
.rpct-ex-name {
	font-family: var(--rpc-font-head);
	font-weight: var(--rpc-head-weight);
	font-size: 17px;
	line-height: 1.2;
}
.rpct-ex-meta {
	margin-top: -4px;
	color: var(--rpc-muted);
	font-size: 11px;
}
.rpct-ex-icons {
	display: flex;
	gap: 9px;
	margin: 2px 0 4px;
}
.rpct-ex-icons i {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--rpc-text);
	opacity: 0.75;
}
.rpct-ex-btn {
	width: 100%;
	padding: 9px 10px;
	border-radius: var(--rpc-radius);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rpct-ex-phone.rpc-btn-filled .rpct-ex-btn {
	background: var(--rpc-accent);
	color: var(--rpc-on-accent);
}
.rpct-ex-phone.rpc-btn-filled .rpct-ex-btn.is-hi {
	box-shadow: 0 0 0 2px var(--rpc-bg), 0 0 0 4px var(--rpc-accent);
}
.rpct-ex-phone.rpc-btn-outline .rpct-ex-btn {
	color: var(--rpc-accent-text);
	box-shadow: inset 0 0 0 2px var(--rpc-accent-text);
}
.rpct-ex-phone.rpc-btn-soft .rpct-ex-btn {
	background: var(--rpc-surface);
	color: var(--rpc-text);
	box-shadow: inset 0 0 0 1px var(--rpc-edge);
}
.rpct-ex-phone.rpc-btn-outline .rpct-ex-btn.is-hi,
.rpct-ex-phone.rpc-btn-soft .rpct-ex-btn.is-hi {
	background: var(--rpc-accent);
	color: var(--rpc-on-accent);
	box-shadow: none;
}
.rpct-ex-card {
	width: 100%;
	margin-top: 4px;
	padding: 9px 11px;
	border-radius: 12px;
	background: var(--rpc-surface);
	box-shadow: inset 0 0 0 1px var(--rpc-border);
	color: var(--rpc-muted);
	text-align: left;
}
.rpct-ex-card b {
	display: block;
	color: var(--rpc-text);
}
.rpct-ex-title {
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1.25;
}
.rpct-ex-style {
	margin-top: 4px;
	color: var(--rp-ink-soft);
	font-size: 15px;
}
.rpct-ex-open {
	margin-top: 8px;
	color: var(--rp-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Home: good to know ---- */
.rpct-faq {
	display: grid;
	gap: 16px;
	margin: 0;
}
@media (min-width: 800px) {
	.rpct-faq { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.rpct-faq { grid-template-columns: repeat(3, 1fr); }
}
.rpct-faq > div {
	padding: 22px 24px;
	border-radius: 24px;
	background: var(--rp-ground);
	box-shadow: inset 0 0 0 1px var(--rp-rule);
}
.rpct-faq dt {
	margin: 0 0 6px;
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1.25;
}
.rpct-faq dd {
	margin: 0;
	color: var(--rp-ink-soft);
}