/* NCFN Guest Landing */
:root {
	--ncfn-purple: #3B0764;
	--ncfn-purple-dark: #2A0548;
	--ncfn-orange: #F2600C;
	--ncfn-orange-dark: #D9500A;
	--ncfn-text: #1F2937;
	--ncfn-muted: #6B7280;
	--ncfn-border: #E5E7EB;
	--ncfn-bg-soft: #F9FAFB;
	--ncfn-bg-page: #FBF8FC;
	--ncfn-success: #16A34A;
}

#ncfn-guest-app {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--ncfn-text);
	background: var(--ncfn-bg-page);
	line-height: 1.5;
}

#ncfn-guest-app * { box-sizing: border-box; }

.ncfn-guest-loading {
	text-align: center;
	padding: 80px 20px;
	color: var(--ncfn-muted);
	font-size: 14px;
}

.ncfn-g-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Top bar */
.ncfn-g-topbar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 20px; max-width: 1120px; margin: 0 auto;
}
.ncfn-g-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ncfn-purple); font-size: 17px; }
.ncfn-g-brand img { height: 38px; width: auto; }
.ncfn-g-topbar-actions { display: flex; gap: 10px; align-items: center; }

.ncfn-g-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--ncfn-orange); color: #fff; border: none; border-radius: 8px;
	padding: 11px 22px; font-size: 13.5px; font-weight: 600; cursor: pointer;
	text-decoration: none; transition: background .15s ease;
}
.ncfn-g-btn:hover { background: var(--ncfn-orange-dark); color: #fff; }
.ncfn-g-btn-ghost {
	background: transparent; color: var(--ncfn-purple); border: 1px solid var(--ncfn-border);
}
.ncfn-g-btn-ghost:hover { background: #fff; color: var(--ncfn-purple); }
.ncfn-g-btn-light { background: #fff; color: var(--ncfn-purple); }
.ncfn-g-btn-light:hover { background: #f4f0f9; color: var(--ncfn-purple); }

/* Hero */
.ncfn-g-hero {
	background: linear-gradient(135deg, var(--ncfn-purple) 0%, var(--ncfn-purple-dark) 100%);
	color: #fff; padding: 64px 20px 72px; text-align: center;
}
.ncfn-g-hero h1 { font-size: 40px; line-height: 1.15; margin: 0 auto 16px; max-width: 760px; font-weight: 800; }
.ncfn-g-hero p { font-size: 16px; color: #E9D5F5; max-width: 620px; margin: 0 auto 28px; }
.ncfn-g-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ncfn-g-hero-stats { display: flex; gap: 40px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.ncfn-g-stat strong { display: block; font-size: 30px; font-weight: 800; color: #fff; }
.ncfn-g-stat span { font-size: 12.5px; color: #C9AEDD; text-transform: uppercase; letter-spacing: .04em; }

/* Sections */
.ncfn-g-section { padding: 56px 0; }
.ncfn-g-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.ncfn-g-section-head h2 { font-size: 24px; margin: 0 0 4px; font-weight: 800; }
.ncfn-g-section-head p { margin: 0; color: var(--ncfn-muted); font-size: 13.5px; }

.ncfn-g-card {
	background: #fff; border: 1px solid var(--ncfn-border); border-radius: 14px;
	box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

/* Newsfeed */
.ncfn-g-feed { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 640px; margin: 0 auto; }
.ncfn-g-post { padding: 20px; }
.ncfn-g-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ncfn-g-avatar {
	width: 40px; height: 40px; border-radius: 50%; background: #FFECE5; color: var(--ncfn-orange);
	display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.ncfn-g-post-author { font-size: 13.5px; font-weight: 600; }
.ncfn-g-post-meta { font-size: 11.5px; color: var(--ncfn-muted); }
.ncfn-g-post-body { font-size: 14px; color: var(--ncfn-text); white-space: pre-wrap; }
.ncfn-g-post-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.ncfn-g-post-images img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; }
.ncfn-g-post-actions { display: flex; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ncfn-border); font-size: 12.5px; color: var(--ncfn-muted); }
.ncfn-g-share { display: inline-flex; align-items: center; gap: 6px; background: #25D366; color: #fff; border: none; border-radius: 7px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ncfn-g-badge { display: inline-block; background: #F4EBFB; color: var(--ncfn-purple); border-radius: 999px; padding: 2px 9px; font-size: 9.5px; font-weight: 700; }

/* Gate strip */
.ncfn-g-gate {
	max-width: 640px; margin: 16px auto 0; text-align: center; padding: 28px 20px;
	background: #fff; border: 1px dashed var(--ncfn-orange); border-radius: 14px;
}
.ncfn-g-gate strong { display: block; font-size: 15px; margin-bottom: 6px; }
.ncfn-g-gate p { margin: 0 0 16px; color: var(--ncfn-muted); font-size: 13px; }

/* Directory preview */
.ncfn-g-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.ncfn-g-dir-card { padding: 20px; text-align: center; cursor: pointer; position: relative; }
.ncfn-g-dir-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--ncfn-bg-soft); margin: 0 auto 12px; filter: blur(1px); }
.ncfn-g-dir-name { height: 12px; width: 70%; margin: 0 auto 8px; background: var(--ncfn-bg-soft); border-radius: 4px; filter: blur(2px); }
.ncfn-g-dir-type { font-size: 12.5px; font-weight: 600; color: var(--ncfn-purple); }
.ncfn-g-dir-loc { font-size: 11.5px; color: var(--ncfn-muted); margin-top: 2px; }
.ncfn-g-dir-verified { position: absolute; top: 12px; right: 12px; color: var(--ncfn-orange); font-size: 13px; }

/* Resources */
.ncfn-g-res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.ncfn-g-res-card { overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
.ncfn-g-res-cover { height: 140px; background: var(--ncfn-bg-soft) center/cover; }
.ncfn-g-res-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ncfn-g-res-body h4 { margin: 0; font-size: 15px; line-height: 1.35; }
.ncfn-g-res-body p { margin: 0; font-size: 12.5px; color: var(--ncfn-muted); flex: 1; }
.ncfn-g-res-meta { font-size: 11px; color: var(--ncfn-muted); }

/* Article reader */
.ncfn-g-article { max-width: 760px; margin: 0 auto; padding: 28px; }
.ncfn-g-article img.cover { width: 100%; border-radius: 12px; margin-bottom: 18px; }
.ncfn-g-article h1 { font-size: 28px; margin: 0 0 14px; line-height: 1.25; }
.ncfn-g-article-body { font-size: 15px; line-height: 1.75; color: var(--ncfn-text); }
.ncfn-g-back { background: none; border: none; color: var(--ncfn-orange); font-weight: 600; font-size: 13px; cursor: pointer; margin-bottom: 16px; padding: 0; }

/* Final CTA */
.ncfn-g-final {
	background: var(--ncfn-purple); color: #fff; text-align: center; padding: 56px 20px; border-radius: 18px;
	margin: 40px auto; max-width: 1080px;
}
.ncfn-g-final h2 { font-size: 28px; margin: 0 0 10px; font-weight: 800; }
.ncfn-g-final p { color: #E9D5F5; margin: 0 0 24px; font-size: 15px; }

/* Modal */
.ncfn-g-modal-backdrop {
	position: fixed; inset: 0; background: rgba(20,10,30,.55); display: flex;
	align-items: center; justify-content: center; padding: 20px; z-index: 9999;
}
.ncfn-g-modal { background: #fff; border-radius: 16px; padding: 32px; max-width: 400px; text-align: center; }
.ncfn-g-modal h3 { margin: 0 0 8px; font-size: 18px; }
.ncfn-g-modal p { margin: 0 0 20px; color: var(--ncfn-muted); font-size: 13.5px; }

.ncfn-g-footer { text-align: center; padding: 30px 20px; color: var(--ncfn-muted); font-size: 12px; }

@media (max-width: 640px) {
	.ncfn-g-hero h1 { font-size: 30px; }
	.ncfn-g-section { padding: 40px 0; }
}

/* ============================================================
   3-column landing layout (overrides the earlier single-column)
   ============================================================ */
.ncfn-g-main { padding: 40px 0 20px; }
.ncfn-g-grid {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr) 320px;
	gap: 24px;
	align-items: start;
}
.ncfn-g-left, .ncfn-g-right { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.ncfn-g-center { min-width: 0; }

/* Center column heading — left-aligned, no more centered flex */
.ncfn-g-col-head { text-align: left; margin: 0 0 16px; }
.ncfn-g-col-head h2 { font-size: 20px; margin: 0 0 2px; font-weight: 800; }
.ncfn-g-col-head p { margin: 0; color: var(--ncfn-muted); font-size: 13px; }

/* Feed fills the center column */
.ncfn-g-center .ncfn-g-feed { max-width: none; margin: 0; }
.ncfn-g-center .ncfn-g-gate { max-width: none; margin-top: 16px; }

/* Sidebar cards */
.ncfn-g-side-card { padding: 18px; }
.ncfn-g-side-card h3 { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; color: var(--ncfn-purple); }
.ncfn-g-side-text { margin: 0; font-size: 12.5px; color: var(--ncfn-muted); line-height: 1.55; }
.ncfn-g-side-sub { margin: 0 0 12px; font-size: 11.5px; color: var(--ncfn-muted); }

/* Why-join perks */
.ncfn-g-perks { display: flex; flex-direction: column; gap: 12px; }
.ncfn-g-perk { display: flex; gap: 10px; align-items: flex-start; }
.ncfn-g-perk-icon { font-size: 16px; line-height: 1.2; flex-shrink: 0; }
.ncfn-g-perk strong { display: block; font-size: 12.5px; color: var(--ncfn-text); }
.ncfn-g-perk span { display: block; font-size: 11px; color: var(--ncfn-muted); line-height: 1.4; }

/* Directory preview rows (compact, blurred) */
.ncfn-g-dir-list { display: flex; flex-direction: column; gap: 4px; }
.ncfn-g-dir-row { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 8px; cursor: pointer; transition: background .12s ease; }
.ncfn-g-dir-row:hover { background: var(--ncfn-bg-soft); }
.ncfn-g-dir-av { width: 38px; height: 38px; border-radius: 50%; background: var(--ncfn-bg-soft); flex-shrink: 0; filter: blur(1px); }
.ncfn-g-dir-info { flex: 1; min-width: 0; }
.ncfn-g-dir-blurname { height: 9px; width: 60%; background: #E9D5F5; border-radius: 4px; margin-bottom: 5px; filter: blur(2.5px); }
.ncfn-g-dir-blurline { height: 8px; width: 45%; background: var(--ncfn-bg-soft); border-radius: 4px; filter: blur(2px); }
.ncfn-g-dir-type { font-size: 12px; font-weight: 600; color: var(--ncfn-purple); }
.ncfn-g-dir-loc { font-size: 10.5px; color: var(--ncfn-muted); margin-top: 1px; }
.ncfn-g-skeleton { opacity: .8; }

/* Latest resources rows (compact) */
.ncfn-g-res-list { display: flex; flex-direction: column; gap: 10px; }
.ncfn-g-res-row { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.ncfn-g-res-thumb { width: 46px; height: 46px; border-radius: 8px; background: var(--ncfn-bg-soft) center/cover; flex-shrink: 0; }
.ncfn-g-res-rowinfo { flex: 1; min-width: 0; }
.ncfn-g-res-rowtitle { font-size: 12.5px; font-weight: 600; color: var(--ncfn-text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ncfn-g-res-rowmeta { font-size: 10.5px; color: var(--ncfn-muted); margin-top: 3px; }

/* Responsive: collapse to single column, drop sticky */
@media (max-width: 960px) {
	.ncfn-g-grid { grid-template-columns: 1fr; }
	.ncfn-g-left, .ncfn-g-right { position: static; flex-direction: column; }
	.ncfn-g-right { order: 3; }
}