/* =============================================================================
 * VibeCoding.is — main.css
 *
 * Structure:
 *   1.  Palettes (CSS vars on body[data-palette])
 *   2.  Reset & base
 *   3.  Utilities (eyebrow, buttons, tags, chips, score blocks)
 *   4.  Nav / logo
 *   5.  Theme dock
 *   6.  Hero
 *   7.  Featured card
 *   8.  Gallery (section head, tabs, grid, card)
 *   9.  How it works steps
 *   10. Submit wizard (stepper, fieldset, dropzone, taglist, done state)
 *   11. Project detail (hero, scores, review form, reviews list)
 *   12. Leaderboard (tabs, rows, badges)
 *   13. Footer
 *   14. 404 / generic pages
 *   15. Responsive (≤900px, ≤600px)
 * ========================================================================== */

/* ============================================================================
 * 1. PALETTES
 *
 * Each palette is a set of design tokens applied via body[data-palette]. The
 * default (Sunset) is also defined on :root as a fallback before JS runs.
 * Naming mirrors the Claude Design source: g1/g2 = gradient stops, accent =
 * link/highlight color, tint/tintText = soft chip backgrounds, sh = shadow rgb.
 * ========================================================================== */

:root,
body[data-palette="sunset"] {
	--vc-g1:#f43f5e; --vc-g2:#fb923c; --vc-accent:#f97316;
	--vc-tint:#fdeee4; --vc-tint-text:#ea580c;
	--vc-bg:#fffaf6; --vc-sh:244,63,94;
}
body[data-palette="grape"] {
	--vc-g1:#7c3aed; --vc-g2:#ec4899; --vc-accent:#ec4899;
	--vc-tint:#f3edfd; --vc-tint-text:#7c3aed;
	--vc-bg:#fbfaff; --vc-sh:124,58,237;
}
body[data-palette="electric"] {
	--vc-g1:#4f46e5; --vc-g2:#06b6d4; --vc-accent:#0891b2;
	--vc-tint:#e8edff; --vc-tint-text:#4338ca;
	--vc-bg:#f7faff; --vc-sh:79,70,229;
}
body[data-palette="acid"] {
	--vc-g1:#16a34a; --vc-g2:#06b6d4; --vc-accent:#059669;
	--vc-tint:#e6f9f0; --vc-tint-text:#047857;
	--vc-bg:#f5fdf9; --vc-sh:22,163,74;
}
body[data-palette="bubblegum"] {
	--vc-g1:#ec4899; --vc-g2:#38bdf8; --vc-accent:#db2777;
	--vc-tint:#fdeaf5; --vc-tint-text:#db2777;
	--vc-bg:#fdf7fc; --vc-sh:236,72,153;
}
body[data-palette="mango"] {
	--vc-g1:#f59e0b; --vc-g2:#ef4444; --vc-accent:#ea580c;
	--vc-tint:#fef0e0; --vc-tint-text:#d97706;
	--vc-bg:#fffbf5; --vc-sh:245,158,11;
}

:root {
	--vc-ink:#17151a;
	--vc-ink-soft:#3a3640;
	--vc-muted:#6b6660;
	--vc-subtle:#9a94a0;
	--vc-hairline:#efecf2;
	--vc-paper:#ffffff;
	--vc-footer-bg:#15131a;

	--vc-grad: linear-gradient(135deg, var(--vc-g1), var(--vc-g2));
	--vc-btn-shadow: 0 10px 26px rgba(var(--vc-sh), .36);
	--vc-chip-shadow: 0 6px 16px rgba(var(--vc-sh), .3);

	--vc-radius-sm: 7px;
	--vc-radius-md: 11px;
	--vc-radius-lg: 16px;
	--vc-radius-xl: 18px;

	--vc-container: 1180px;
}

/* ============================================================================
 * 2. RESET & BASE
 * ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--vc-ink);
	background: var(--vc-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	transition: background-color .3s ease;
}
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: var(--vc-ink); }
.vc-main { padding: 0; min-height: 60vh; }

@keyframes vc-blink   { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
@keyframes vc-floaty  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
@keyframes vc-drift   { 0% { transform: translate(0,0) scale(1) } 50% { transform: translate(26px,-20px) scale(1.06) } 100% { transform: translate(0,0) scale(1) } }
@keyframes vc-pop     { 0% { transform: scale(.85); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
@keyframes vc-slide-up { 0% { opacity: 0; transform: translateY(10px) } 100% { opacity: 1; transform: translateY(0) } }

/* ============================================================================
 * 3. UTILITIES
 * ========================================================================== */

.vc-grow { flex: 1; }
.vc-dim { color: var(--vc-subtle); }
.vc-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vc-subtle);
}

.vc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: var(--vc-radius-md);
	font-family: 'DM Sans', sans-serif;
	font-weight: 600;
	font-size: 14px;
	border: 1px solid transparent;
	background: var(--vc-paper);
	color: var(--vc-ink-soft);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
	text-decoration: none;
	white-space: nowrap;
}
.vc-btn:hover { transform: translateY(-1px); }
.vc-btn--primary {
	background: var(--vc-grad);
	color: #fff;
	box-shadow: var(--vc-chip-shadow);
	border-color: transparent;
}
.vc-btn--primary:hover { box-shadow: var(--vc-btn-shadow); }
.vc-btn--ghost {
	background: var(--vc-paper);
	color: #2a2630;
	border: 1px solid rgba(20,10,40,.1);
}
.vc-btn--ghost:hover { background: #faf8fd; }
.vc-btn--lg {
	padding: 16px 30px;
	font-size: 16px;
	border-radius: 12px;
	font-weight: 700;
}

.vc-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var(--vc-tint-text);
	background: var(--vc-tint);
	padding: 5px 11px;
	border-radius: var(--vc-radius-sm);
}
.vc-tag--sm { font-size: 11px; padding: 3px 8px; border-radius: 6px; }
.vc-tags { display: flex; gap: 8px; flex-wrap: wrap; }

.vc-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--vc-paper);
	border: 1px solid rgba(20,10,40,.08);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--vc-tint-text);
	box-shadow: 0 4px 14px rgba(20,10,40,.06);
}
.vc-chip__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 3px rgba(34,197,94,.2);
}

.vc-badge--featured {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--vc-grad);
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: 999px;
	box-shadow: var(--vc-chip-shadow);
	position: absolute;
	top: 18px;
	left: 18px;
}

.vc-score { text-align: center; padding-right: 20px; border-right: 1px solid var(--vc-hairline); }
.vc-score__big {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 42px;
	line-height: 1;
	background-image: var(--vc-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.vc-score__axes {
	font-size: 14px;
	color: var(--vc-muted);
	line-height: 1.7;
}
.vc-score__axes b { color: #2a2630; }

.vc-section__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.vc-section__title {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--vc-ink);
	margin: 0;
}
.vc-section__subtitle { font-size: 13px; color: var(--vc-subtle); }
.vc-section__count {
	font-size: 13px;
	color: var(--vc-subtle);
	font-family: 'JetBrains Mono', monospace;
}

.vc-back {
	display: inline-block;
	font-size: 14px;
	color: var(--vc-muted);
	margin-bottom: 20px;
	cursor: pointer;
}
.vc-back:hover { color: var(--vc-ink); }

.vc-page__title {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 36px;
	color: var(--vc-ink);
	margin: 0;
	letter-spacing: -.02em;
}
.vc-page__lede {
	font-size: 16px;
	color: var(--vc-muted);
	margin: 8px 0 0;
	line-height: 1.55;
}

/* honeypot — visually hidden but in DOM so bots fill it */
.vc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ============================================================================
 * 4. NAV / LOGO
 * ========================================================================== */

.vc-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background: rgba(255,255,255,.72);
	border-bottom: 1px solid rgba(20,10,40,.06);
}
.vc-nav__inner {
	max-width: var(--vc-container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 32px;
}
.vc-logo { display: flex; align-items: center; gap: 11px; cursor: pointer; text-decoration: none; }
.vc-logo__mark {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--vc-grad);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 21px;
	box-shadow: var(--vc-chip-shadow);
}
.vc-logo__text {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--vc-ink);
	white-space: nowrap;
}
.vc-logo__dim { color: #a59fb0; }
.vc-logo__sep { color: #cfc8d8; }
.vc-logo__word { color: var(--vc-accent); transition: color .3s ease; }
.vc-logo__caret {
	display: inline-block;
	width: 2px;
	height: 15px;
	background: var(--vc-accent);
	margin-left: 2px;
	vertical-align: -1px;
	animation: vc-blink 1.1s steps(1) infinite;
}

.vc-nav__links {
	display: flex;
	align-items: center;
	gap: 26px;
	font-size: 14px;
	font-weight: 500;
	color: #4a4550;
}
.vc-nav__links a { transition: color .15s; }
.vc-nav__links a:hover { color: var(--vc-ink); }
.vc-nav__links a.vc-btn { color: #fff; }

.vc-nav__toggle {
	display: none;
	width: 34px;
	height: 34px;
	background: transparent;
	border: 1px solid rgba(20,10,40,.12);
	border-radius: 8px;
	padding: 0;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	justify-content: center;
}
.vc-nav__toggle span { display: block; width: 16px; height: 2px; background: var(--vc-ink); border-radius: 1px; }

/* ============================================================================
 * 5. THEME DOCK
 * ========================================================================== */

.vc-dock {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 50;
}
.vc-dock__trigger {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vc-grad);
	border: 3px solid rgba(255,255,255,.85);
	box-shadow: 0 6px 20px rgba(20,10,40,.18);
	cursor: pointer;
	padding: 0;
	display: block;
	transition: transform .15s ease, box-shadow .2s ease;
}
.vc-dock__trigger:hover {
	transform: scale(1.06);
	box-shadow: 0 10px 28px rgba(20,10,40,.24);
}
.vc-dock__trigger:focus-visible {
	outline: 2px solid var(--vc-accent);
	outline-offset: 3px;
}
.vc-dock__panel {
	position: absolute;
	bottom: calc(100% + 12px);
	right: 0;
	display: none;
	align-items: center;
	gap: 12px;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(20,10,40,.08);
	border-radius: var(--vc-radius-lg);
	padding: 12px 16px;
	box-shadow: 0 12px 34px rgba(20,10,40,.16);
	white-space: nowrap;
	animation: vc-pop .15s ease;
	transform-origin: bottom right;
}
.vc-dock.is-open .vc-dock__panel { display: flex; }
.vc-dock__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vc-subtle);
}
.vc-dock__swatches { display: flex; gap: 9px; }
.vc-dock__swatch {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(20,10,40,.18);
	transition: transform .15s, box-shadow .2s;
	border: 0;
	padding: 0;
}
.vc-dock__swatch:hover { transform: translateY(-2px) scale(1.06); }
.vc-dock__swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vc-g1); }
.vc-dock__name {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--vc-ink-soft);
	min-width: 84px;
}

/* ============================================================================
 * 6. HERO
 * ========================================================================== */

.vc-hero { position: relative; overflow: hidden; }
.vc-hero__blobs { position: absolute; inset: 0; pointer-events: none; }
.vc-hero__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(10px);
}
.vc-hero__blob--a {
	width: 560px; height: 560px; left: -160px; top: -180px;
	background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--vc-g1) 55%, transparent) 0%, transparent 70%);
	animation: vc-drift 14s ease-in-out infinite;
}
.vc-hero__blob--b {
	width: 520px; height: 520px; right: -140px; top: -40px;
	background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--vc-g2) 50%, transparent) 0%, transparent 70%);
	animation: vc-drift 18s ease-in-out infinite reverse;
}
.vc-hero__blob--c {
	width: 380px; height: 380px; left: 44%; top: 280px;
	background: radial-gradient(circle, color-mix(in srgb, var(--vc-g2) 40%, transparent) 0%, transparent 70%);
	filter: blur(12px);
	animation: vc-floaty 9s ease-in-out infinite;
}

.vc-hero__inner {
	position: relative;
	max-width: var(--vc-container);
	margin: 0 auto;
	padding: 64px 32px 72px;
	text-align: center;
}
.vc-hero__title {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	/* Scale the headline with viewport width so it never overflows on narrow screens. */
	font-size: clamp(34px, 5.5vw, 62px);
	line-height: 1.04;
	letter-spacing: -.03em;
	color: var(--vc-ink);
	margin: 24px auto 0;
	max-width: 840px;
}
.vc-hero__wordmark {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	/* Same trick — wordmark scales down on narrow viewports rather than being clipped. */
	font-size: clamp(40px, 8.5vw, 84px);
	letter-spacing: -.03em;
	margin: 22px 0 0;
	line-height: 1;
	/* Allow breaking onto two lines on very small screens if scaling alone isn't enough. */
	overflow-wrap: anywhere;
}
.vc-hero__wordmark-dim { color: #cbc4d4; }
.vc-hero__wordmark-word {
	background-image: var(--vc-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: opacity .2s ease;
}
.vc-hero__wordmark-caret {
	display: inline-block;
	width: clamp(4px, 0.6vw, 6px);
	/* Caret tracks the wordmark height so it stays visually proportional. */
	height: clamp(34px, 7vw, 68px);
	background: var(--vc-accent);
	margin-left: 7px;
	vertical-align: -7px;
	border-radius: 3px;
	animation: vc-blink 1.1s steps(1) infinite;
}
.vc-hero__lede {
	font-size: 19px;
	color: var(--vc-muted);
	margin: 26px auto 0;
	max-width: 580px;
	line-height: 1.55;
}
.vc-hero__ctas {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-top: 32px;
	flex-wrap: wrap;
}

.vc-justshipped {
	margin-top: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}
.vc-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--vc-paper);
	border: 1px solid rgba(20,10,40,.07);
	border-radius: var(--vc-radius-md);
	padding: 8px 14px;
	box-shadow: 0 2px 8px rgba(20,10,40,.05);
	transition: transform .15s, box-shadow .2s;
}
.vc-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,10,40,.1); }
.vc-pill__color { width: 24px; height: 24px; border-radius: 7px; }
.vc-pill__name { font-size: 13px; font-weight: 600; color: #2a2630; }
.vc-pill__votes { font-size: 12px; color: var(--vc-subtle); }

/* ============================================================================
 * 7. FEATURED CARD
 * ========================================================================== */

.vc-featured {
	max-width: var(--vc-container);
	margin: 0 auto;
	padding: 24px 32px 12px;
}
.vc-featured__card {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 0;
	border-radius: var(--vc-radius-xl);
	overflow: hidden;
	box-shadow: 0 10px 36px rgba(20,10,40,.1);
	background: var(--vc-paper);
}
.vc-featured__media {
	position: relative;
	min-height: 340px;
	background: repeating-linear-gradient(135deg, #f1eef5, #f1eef5 13px, #f8f5fb 13px, #f8f5fb 26px);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vc-featured__placeholder {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: #a99fc0;
}
.vc-featured__body {
	padding: 34px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.vc-featured__name {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 32px;
	color: var(--vc-ink);
	margin: 0;
}
.vc-featured__pitch {
	font-size: 16px;
	color: var(--vc-muted);
	margin: 8px 0 18px;
	line-height: 1.5;
}
.vc-featured__footer {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--vc-hairline);
}

/* ============================================================================
 * 8. GALLERY
 * ========================================================================== */

.vc-gallery {
	max-width: var(--vc-container);
	margin: 0 auto;
	padding: 44px 32px 12px;
}
.vc-tabs { display: inline-flex; gap: 6px; }
.vc-tab {
	font-size: 13px;
	font-weight: 500;
	color: #5c564a;
	background: rgba(20,10,40,.05);
	padding: 8px 15px;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.vc-tab.is-active {
	font-weight: 600;
	color: #fff;
	background: var(--vc-ink);
}

.vc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.vc-card {
	border: 1px solid var(--vc-hairline);
	border-radius: 14px;
	overflow: hidden;
	background: var(--vc-paper);
	box-shadow: 0 2px 10px rgba(20,10,40,.04);
	transition: transform .15s, box-shadow .15s;
	display: block;
	text-decoration: none;
	color: inherit;
}
.vc-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,10,40,.12); }

.vc-card__media {
	position: relative;
	height: 150px;
	background: repeating-linear-gradient(135deg, #f1eef5, #f1eef5 11px, #f7f4fa 11px, #f7f4fa 22px);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vc-card__chip {
	width: 38px;
	height: 38px;
	border-radius: 9px;
}
.vc-card__votes {
	position: absolute;
	top: 11px;
	right: 11px;
	font-size: 12px;
	font-weight: 700;
	color: var(--vc-ink);
	background: rgba(255,255,255,.9);
	backdrop-filter: blur(4px);
	padding: 4px 9px;
	border-radius: 999px;
}
.vc-card__body { padding: 15px 16px; }
.vc-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.vc-card__name {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--vc-ink);
}
.vc-card__score {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--vc-tint-text);
}
.vc-card__pitch {
	font-size: 13px;
	color: var(--vc-muted);
	margin-top: 4px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.vc-card__foot {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 13px;
}
.vc-card__author-dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	opacity: .85;
}
.vc-card__handle { font-size: 12px; color: var(--vc-subtle); }

/* ============================================================================
 * 9. HOW IT WORKS
 * ========================================================================== */

.vc-howitworks {
	max-width: var(--vc-container);
	margin: 0 auto;
	padding: 56px 32px 24px;
}
.vc-howitworks .vc-section__title { display: block; margin-bottom: 24px; }
.vc-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.vc-step {
	background: var(--vc-paper);
	border: 1px solid var(--vc-hairline);
	border-radius: 14px;
	padding: 22px;
}
.vc-step__n {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--vc-grad);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 17px;
	box-shadow: var(--vc-chip-shadow);
}
.vc-step__title {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--vc-ink);
	margin-top: 16px;
}
.vc-step__body {
	font-size: 14px;
	color: var(--vc-muted);
	margin-top: 6px;
	line-height: 1.5;
}

/* ============================================================================
 * 10. SUBMIT WIZARD
 * ========================================================================== */

.vc-submit {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 32px 80px;
}

.vc-stepper {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 28px 0 24px;
	flex-wrap: wrap;
}
.vc-stepper__dot {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.vc-stepper__n {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--vc-paper);
	color: var(--vc-subtle);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 13px;
	border: 1px solid #e6e2ea;
	transition: background-color .2s, color .2s, border-color .2s;
}
.vc-stepper__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--vc-subtle);
	transition: color .2s;
}
.vc-stepper__line {
	width: 28px;
	height: 2px;
	background: #e6e2ea;
}
.vc-stepper__dot.is-current .vc-stepper__n,
.vc-stepper__dot.is-done .vc-stepper__n {
	background: var(--vc-grad);
	color: #fff;
	border-color: transparent;
}
.vc-stepper__dot.is-current .vc-stepper__label,
.vc-stepper__dot.is-done .vc-stepper__label {
	color: var(--vc-ink);
}

.vc-card--form {
	background: var(--vc-paper);
	border: 1px solid var(--vc-hairline);
	border-radius: var(--vc-radius-lg);
	padding: 30px;
	box-shadow: 0 6px 24px rgba(20,10,40,.06);
}

.vc-fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.vc-field { display: block; }
.vc-field__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--vc-ink-soft);
	margin-bottom: 7px;
}
.vc-field__hint { color: var(--vc-subtle); font-weight: 400; }
.vc-field input[type="text"],
.vc-field input[type="email"],
.vc-field input[type="url"],
.vc-field textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #e6e2ea;
	border-radius: 10px;
	padding: 13px 14px;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	color: var(--vc-ink);
	outline: none;
	background: var(--vc-paper);
	transition: border-color .15s, box-shadow .15s;
}
.vc-field input:focus,
.vc-field textarea:focus {
	border-color: var(--vc-accent);
	box-shadow: 0 0 0 3px rgba(var(--vc-sh), .12);
}
.vc-field textarea { resize: vertical; min-height: 90px; }
.vc-field input[type="color"] {
	width: 60px;
	height: 40px;
	padding: 4px;
	border: 1px solid #e6e2ea;
	border-radius: 8px;
}

/* Native select styled to match text inputs. */
.vc-select,
.vc-field select {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid #e6e2ea;
	border-radius: 10px;
	background: var(--vc-paper);
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	color: var(--vc-ink);
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23938aa3'><path d='M5.5 7.5l4.5 5 4.5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
	padding-right: 38px;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.vc-select:focus,
.vc-field select:focus {
	outline: 0;
	border-color: var(--vc-accent);
	box-shadow: 0 0 0 3px rgba(var(--vc-sh), .12);
}

/* Radio-row groups for vibe %, auth, status. */
.vc-radio-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.vc-radio-row label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid #e6e2ea;
	border-radius: 10px;
	background: var(--vc-paper);
	font-size: 14px;
	color: var(--vc-ink-soft);
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
.vc-radio-row label:hover {
	border-color: #d3ccdb;
}
.vc-radio-row input[type="radio"] {
	margin: 0;
	accent-color: var(--vc-accent);
}
.vc-radio-row label:has(input:checked) {
	border-color: var(--vc-accent);
	background: var(--vc-tint);
	color: var(--vc-ink);
}

.vc-input-prefix {
	display: flex;
	align-items: center;
	border: 1px solid #e6e2ea;
	border-radius: 10px;
	padding: 0 14px;
	background: var(--vc-paper);
	transition: border-color .15s, box-shadow .15s;
}
.vc-input-prefix:focus-within {
	border-color: var(--vc-accent);
	box-shadow: 0 0 0 3px rgba(var(--vc-sh), .12);
}
.vc-input-prefix__pre {
	color: #b3aabf;
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
}
.vc-input-prefix input {
	flex: 1;
	border: 0 !important;
	padding: 13px 6px !important;
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 14px !important;
	background: transparent !important;
	box-shadow: none !important;
}

.vc-dropzone {
	position: relative;
	border: 2px dashed #e6e2ea;
	border-radius: 12px;
	padding: 40px 20px;
	text-align: center;
	transition: border-color .2s, background-color .2s;
	cursor: pointer;
}
.vc-dropzone:hover, .vc-dropzone.is-drag {
	border-color: var(--vc-accent);
	background: rgba(var(--vc-sh), .04);
}
.vc-dropzone input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}
.vc-dropzone__icon { font-size: 28px; color: var(--vc-accent); margin-bottom: 6px; }
.vc-dropzone__main { font-weight: 600; color: var(--vc-ink-soft); }
.vc-dropzone__sub { font-size: 12px; color: var(--vc-subtle); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
.vc-dropzone__preview { width: 100%; max-height: 280px; overflow: hidden; border-radius: 10px; }
.vc-dropzone__preview img { width: 100%; height: auto; display: block; }

.vc-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.vc-tag-toggle {
	background: rgba(20,10,40,.04);
	color: #5c564a;
	border: 1px solid #e6e2ea;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}
.vc-tag-toggle:hover { background: rgba(20,10,40,.06); }
.vc-tag-toggle.is-active {
	background: var(--vc-grad);
	color: #fff;
	border-color: transparent;
	font-weight: 600;
	box-shadow: var(--vc-chip-shadow);
}

.vc-form__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 28px;
	gap: 12px;
}
.vc-form__nav--single {
	justify-content: center;
}
.vc-form__nav--single .vc-btn { min-width: 240px; }
.vc-form__back {
	background: transparent;
	border: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--vc-muted);
	cursor: pointer;
	padding: 8px 4px;
}
.vc-form__back:disabled { color: #cfc8d8; cursor: default; }

.vc-form__error {
	margin-top: 16px;
	padding: 12px 14px;
	background: #fee2e2;
	color: #b91c1c;
	border-radius: 10px;
	font-size: 14px;
}

/* Email-confirmation notice — sits just above the submit button on the
   submission form. Uses the tint pair so it picks up whichever palette
   is active without explicit per-palette overrides. */
.vc-form__notice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-top: 22px;
	padding: 14px 18px;
	background: var(--vc-tint);
	color: var(--vc-tint-text);
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.55;
}
.vc-form__notice-icon {
	font-size: 18px;
	line-height: 1.3;
	flex-shrink: 0;
}

/* Verification result banner — shown on the home page after the magic-link
   redirect. Centered, max-width matches the section container. */
.vc-verify-banner {
	max-width: var(--vc-container);
	margin: 24px auto 0;
	padding: 14px 22px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	box-shadow: 0 4px 14px rgba(20,10,40,.06);
}
.vc-verify-banner--success { background: #dcfce7; color: #166534; }
.vc-verify-banner--error   { background: #fee2e2; color: #b91c1c; }

.vc-done {
	text-align: center;
	padding: 30px 0;
	animation: vc-slide-up .35s ease;
}
.vc-done__star {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--vc-grad);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 34px;
	box-shadow: var(--vc-btn-shadow);
}
.vc-done__title {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 34px;
	color: var(--vc-ink);
	margin: 24px 0 0;
	letter-spacing: -.02em;
}
.vc-done__lede {
	font-size: 16px;
	color: var(--vc-muted);
	margin: 10px auto 0;
	max-width: 460px;
	line-height: 1.55;
}
.vc-done__preview {
	max-width: 420px;
	margin: 30px auto 0;
	background: var(--vc-paper);
	border: 1px solid var(--vc-hairline);
	border-radius: 14px;
	padding: 20px;
	text-align: left;
	box-shadow: 0 6px 24px rgba(20,10,40,.06);
	display: flex;
	align-items: center;
	gap: 12px;
}
.vc-done__preview-mark {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: var(--vc-grad);
	flex-shrink: 0;
}
.vc-done__preview-text { flex: 1; min-width: 0; }
.vc-done__preview-name {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--vc-ink);
}
.vc-done__preview-pitch { font-size: 13px; color: var(--vc-muted); }
.vc-done__preview-status {
	font-size: 12px;
	font-weight: 700;
	color: var(--vc-tint-text);
	background: var(--vc-tint);
	padding: 5px 11px;
	border-radius: 999px;
	white-space: nowrap;
}
.vc-done__ctas {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 28px;
	flex-wrap: wrap;
}

/* ============================================================================
 * 11. PROJECT DETAIL
 * ========================================================================== */

.vc-detail {
	max-width: var(--vc-container);
	margin: 0 auto;
	padding: 32px 32px 80px;
}
.vc-detail__layout {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 32px;
	align-items: start;
}
.vc-detail__hero {
	position: relative;
	height: 330px;
	border-radius: var(--vc-radius-lg);
	background: repeating-linear-gradient(135deg, #f1eef5, #f1eef5 13px, #f8f5fb 13px, #f8f5fb 26px);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: #a99fc0;
	overflow: hidden;
}
.vc-detail__chip {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 40px;
	height: 40px;
	border-radius: 10px;
}

.vc-detail__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-top: 24px;
}
.vc-detail__title {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 34px;
	color: var(--vc-ink);
	margin: 0;
	letter-spacing: -.02em;
}
.vc-detail__sub {
	font-size: 16px;
	color: var(--vc-muted);
	margin: 8px 0 14px;
}
.vc-detail__actions {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}
.vc-vote {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 12px 18px;
	border-radius: var(--vc-radius-md);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	color: #2a2630;
	background: var(--vc-paper);
	border: 1px solid rgba(20,10,40,.1);
	transition: all .15s;
}
.vc-vote.is-voted {
	color: #fff;
	background: var(--vc-grad);
	border-color: transparent;
	box-shadow: var(--vc-chip-shadow);
}

.vc-detail__scores {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
	padding: 22px 24px;
	background: var(--vc-paper);
	border: 1px solid var(--vc-hairline);
	border-radius: var(--vc-radius-lg);
	box-shadow: 0 4px 18px rgba(20,10,40,.05);
}
.vc-detail__axes {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 28px;
}
.vc-axis__row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 600;
	color: var(--vc-ink-soft);
	margin-bottom: 6px;
}
.vc-axis__val { color: var(--vc-tint-text); }
.vc-axis__bar {
	height: 7px;
	border-radius: 5px;
	background: var(--vc-hairline);
	overflow: hidden;
}
.vc-axis__fill {
	height: 100%;
	border-radius: 5px;
	background: var(--vc-grad);
	transition: width .3s ease;
}

.vc-detail__body {
	margin-top: 28px;
	font-size: 16px;
	color: var(--vc-ink-soft);
	line-height: 1.65;
}
.vc-detail__body p { margin: 0 0 14px; }

/* Project metadata chips — shown below the score axes, key/value pairs for
   category, status, stack, etc. Each chip has a uppercase small key on top
   and a heavier value below. Wraps freely. */
.vc-detail__meta {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.vc-meta-chip {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	border: 1px solid var(--vc-hairline);
	border-radius: 10px;
	background: var(--vc-paper);
	min-width: 110px;
}
.vc-meta-chip--wide { min-width: 200px; flex: 1 1 240px; }
.vc-meta-chip__k {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vc-subtle);
}
.vc-meta-chip__v {
	font-size: 14px;
	font-weight: 600;
	color: var(--vc-ink);
}

/* review form */
.vc-review-form {
	background: var(--vc-paper);
	border: 1px solid var(--vc-hairline);
	border-radius: var(--vc-radius-lg);
	padding: 24px;
	box-shadow: 0 6px 24px rgba(20,10,40,.06);
}
.vc-review-form__title {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--vc-ink);
}
.vc-review-form__sub { font-size: 13px; color: var(--vc-subtle); margin-top: 3px; }
.vc-review-form .vc-axis { margin-top: 16px; }
.vc-review-form .vc-axis:first-of-type { margin-top: 20px; }

.vc-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	border-radius: 6px;
	background: var(--vc-hairline);
	outline: none;
	accent-color: var(--vc-accent);
}
.vc-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--vc-paper);
	border: 3px solid var(--vc-accent);
	cursor: grab;
	box-shadow: 0 2px 6px rgba(var(--vc-sh), .4);
}
.vc-range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--vc-paper);
	border: 3px solid var(--vc-accent);
	cursor: grab;
	box-shadow: 0 2px 6px rgba(var(--vc-sh), .4);
}

.vc-review-form__text {
	width: 100%;
	box-sizing: border-box;
	margin-top: 18px;
	border: 1px solid #e6e2ea;
	border-radius: 10px;
	padding: 12px 14px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	color: var(--vc-ink-soft);
	resize: vertical;
	min-height: 70px;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.vc-review-form__text:focus {
	border-color: var(--vc-accent);
	box-shadow: 0 0 0 3px rgba(var(--vc-sh), .12);
}

.vc-review-form__identity {
	display: grid;
	gap: 8px;
	margin-top: 14px;
}
.vc-review-form__identity input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #e6e2ea;
	border-radius: 10px;
	padding: 10px 12px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	color: var(--vc-ink);
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.vc-review-form__identity input:focus {
	border-color: var(--vc-accent);
	box-shadow: 0 0 0 3px rgba(var(--vc-sh), .12);
}

.vc-review-form__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
	gap: 12px;
}
.vc-review-form__overall {
	font-size: 13px;
	color: var(--vc-subtle);
}
.vc-review-form__overall b {
	font-family: 'Space Grotesk', sans-serif;
	color: var(--vc-tint-text);
	font-size: 16px;
	margin-left: 4px;
}
.vc-review-form__msg {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 13px;
}
.vc-review-form__msg.is-success { background: #dcfce7; color: #166534; }
.vc-review-form__msg.is-error { background: #fee2e2; color: #b91c1c; }

/* reviews list */
.vc-reviews { margin-top: 22px; }
.vc-reviews__title {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--vc-ink);
	margin-bottom: 16px;
}
.vc-reviews__list { display: flex; flex-direction: column; gap: 18px; }
.vc-review { display: flex; gap: 12px; }
.vc-review__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--vc-grad);
	color: #fff;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 14px;
}
.vc-review__body { flex: 1; min-width: 0; }
.vc-review__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vc-review__name { font-size: 14px; font-weight: 600; color: #2a2630; }
.vc-review__score { font-size: 12px; font-weight: 700; color: var(--vc-tint-text); }
.vc-review__text {
	font-size: 14px;
	color: #4a4550;
	line-height: 1.5;
	margin-top: 3px;
}

/* ============================================================================
 * 12. LEADERBOARD
 * ========================================================================== */

.vc-board {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 32px 80px;
}
.vc-board__tabs {
	display: inline-flex;
	gap: 4px;
	margin: 26px 0 22px;
	background: rgba(20,10,40,.05);
	padding: 5px;
	border-radius: 12px;
}
.vc-board__tab {
	font-size: 14px;
	font-weight: 600;
	padding: 9px 20px;
	border-radius: 9px;
	cursor: pointer;
	background: transparent;
	border: 0;
	color: var(--vc-muted);
	transition: background-color .15s, color .15s, box-shadow .15s;
}
.vc-board__tab.is-active {
	color: var(--vc-ink);
	background: var(--vc-paper);
	box-shadow: 0 2px 8px rgba(20,10,40,.1);
}

.vc-board__list {
	background: var(--vc-paper);
	border: 1px solid var(--vc-hairline);
	border-radius: var(--vc-radius-lg);
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(20,10,40,.06);
}
.vc-board__row {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 22px;
	border-bottom: 1px solid #f4f1f7;
	text-decoration: none;
	color: inherit;
	transition: background-color .15s;
}
.vc-board__row:last-child { border-bottom: 0; }
.vc-board__row:hover { background: #faf8fd; }
.vc-board__row.is-leader { background: var(--vc-tint); }
.vc-board__rank {
	width: 30px;
	text-align: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 18px;
}
.vc-board__thumb {
	width: 46px;
	height: 46px;
	border-radius: 11px;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* Legacy alias — old markup may still reference .vc-board__color. */
.vc-board__color {
	width: 46px;
	height: 46px;
	border-radius: 11px;
	flex-shrink: 0;
}
.vc-board__avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--vc-grad);
	color: #fff;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 16px;
}
.vc-board__main { flex: 1; min-width: 0; }
.vc-board__name {
	display: block;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--vc-ink);
}
.vc-board__sub {
	display: block;
	font-size: 13px;
	color: var(--vc-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vc-board__stat { text-align: center; min-width: 64px; }
.vc-board__stat-n {
	display: block;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--vc-tint-text);
}
.vc-board__stat:last-child .vc-board__stat-n { color: var(--vc-ink); }
.vc-board__badge {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	padding: 5px 11px;
	border-radius: 999px;
}
.vc-board__points {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--vc-ink);
	width: 60px;
	text-align: right;
}

.vc-empty {
	background: var(--vc-paper);
	border: 1px dashed var(--vc-hairline);
	border-radius: var(--vc-radius-lg);
	padding: 40px;
	text-align: center;
	color: var(--vc-muted);
}

/* ============================================================================
 * 13. FOOTER
 * ========================================================================== */

.vc-footer {
	background: var(--vc-footer-bg);
	margin-top: 80px;
}
.vc-footer__inner {
	max-width: var(--vc-container);
	margin: 0 auto;
	padding: 48px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
}
.vc-footer__logo {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 26px;
	color: #fff;
}
.vc-footer__logo .vc-logo__dim { color: #6b6680; }
.vc-footer__logo .vc-logo__sep { color: #4a4860; }
.vc-footer__tag {
	font-size: 14px;
	color: #8a8594;
	margin: 8px 0 0;
}
.vc-footer__bottom {
	max-width: var(--vc-container);
	margin: 0 auto;
	padding: 0 32px 24px;
	font-size: 13px;
	color: #6b6680;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.vc-footer__link {
	color: #6b6680;
	text-decoration: none;
	transition: color .15s;
}
.vc-footer__link:hover { color: var(--vc-paper); }

/* ============================================================================
 * 14. 404 / GENERIC
 * ========================================================================== */

.vc-404 {
	max-width: 600px;
	margin: 0 auto;
	padding: 80px 32px;
	text-align: center;
}

/* ============================================================================
 * 15. RESPONSIVE
 * ========================================================================== */

@media (max-width: 900px) {
	.vc-nav__links { display: none; }
	.vc-nav__toggle { display: flex; }
	.vc-nav__inner.is-open + .vc-nav__links,
	.vc-nav.is-open .vc-nav__links {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		background: var(--vc-paper);
		padding: 16px 32px;
		gap: 14px;
		border-bottom: 1px solid var(--vc-hairline);
	}

	.vc-hero__title { font-size: 44px; }
	.vc-hero__wordmark { font-size: 56px; }
	.vc-hero__wordmark-caret { height: 46px; }
	.vc-hero__inner { padding: 48px 24px 56px; }

	.vc-featured__card { grid-template-columns: 1fr; }
	.vc-featured__media { min-height: 220px; }
	.vc-featured__body { padding: 24px; }
	.vc-featured__footer { flex-wrap: wrap; gap: 14px; }

	.vc-grid { grid-template-columns: repeat(2, 1fr); }
	.vc-steps { grid-template-columns: repeat(2, 1fr); }

	.vc-detail__layout { grid-template-columns: 1fr; }
	.vc-detail__head { flex-direction: column; align-items: flex-start; }
	.vc-detail__hero { height: 240px; }
	.vc-detail__title { font-size: 28px; }
	.vc-detail__scores { flex-wrap: wrap; }
	.vc-score { border-right: 0; padding-right: 0; padding-bottom: 12px; border-bottom: 1px solid var(--vc-hairline); width: 100%; display: flex; align-items: baseline; gap: 12px; justify-content: center; }

	.vc-board__row { gap: 12px; padding: 14px 16px; flex-wrap: wrap; }
	.vc-board__sub { white-space: normal; }

	.vc-dock { right: 12px; bottom: 12px; }
}

@media (max-width: 600px) {
	.vc-hero__title { font-size: 34px; }
	.vc-hero__wordmark { font-size: 42px; }
	.vc-hero__wordmark-caret { height: 34px; width: 4px; }
	.vc-hero__lede { font-size: 16px; }
	.vc-hero__ctas .vc-btn { width: 100%; }
	.vc-hero__ctas { flex-direction: column; }

	.vc-grid { grid-template-columns: 1fr; }
	.vc-steps { grid-template-columns: 1fr; }

	.vc-nav__inner { padding: 14px 20px; }
	.vc-logo__text { font-size: 16px; }
	.vc-logo__mark { width: 30px; height: 30px; font-size: 18px; }

	.vc-section__head { gap: 8px; }
	.vc-section__title { font-size: 18px; }
	.vc-tabs { width: 100%; overflow-x: auto; }

	.vc-card--form { padding: 20px; }
	.vc-page__title { font-size: 28px; }
	.vc-stepper__label { display: none; }

	.vc-board__stat { min-width: 50px; }
	.vc-board__stat-n { font-size: 14px; }

	.vc-footer__inner { flex-direction: column; align-items: flex-start; padding: 32px 24px; }

	/* Phone: tighten the expanded dock so it doesn't run off the edge */
	.vc-dock__panel { padding: 10px 12px; gap: 8px; }
	.vc-dock__label, .vc-dock__name { display: none; }
	.vc-dock__swatches { gap: 6px; }
	.vc-dock__swatch { width: 26px; height: 26px; border-radius: 7px; }
}