/* ============================================================
   GPI Homepage v2 — conversion layer styles (gpi2- prefixed)
   2026-11-02 · pairs with gpi-homepage-v2.php [gpi_homepage_v2]
   Brand: navy #0a2540 · cobalt #1d4ed8 · amber conversion #f59e0b
   All selectors prefixed gpi2- → zero collision with v1 CSS.
   ============================================================ */

/* Global conversion chrome (2026-11-02): header join button → amber CTA.
   Specificity raised to beat Blocksy's .ct-header .gpi-btn-primary rule. */
.ct-header .gpi-menu-join, header .gpi-menu-join, a.gpi-btn.gpi-menu-join { background: #f59e0b !important; color: #3a2703 !important; border-color: #f59e0b !important; }
.ct-header .gpi-menu-join:hover, header .gpi-menu-join:hover, a.gpi-btn.gpi-menu-join:hover { background: #d97706 !important; color: #fff !important; border-color: #d97706 !important; }

.gpi2-home { --navy:#0a2540; --cobalt:#1d4ed8; --amber:#f59e0b; --amber-d:#b45309;
	--soft:#f6f8fb; --border:#e2e8f0; --muted:#5b6b82;
	font-size: 15px; line-height: 1.55; color: #10233f; }

/* ---------- sections ---------- */
.gpi2-section { padding: 46px 0; }
.gpi2-section-tight { padding: 30px 0; }
.gpi2-section-soft { background: var(--soft, #f6f8fb); margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
.gpi2-head { margin-bottom: 22px; }
.gpi2-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.gpi2-kicker { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt); margin-bottom: 6px; }
.gpi2-kicker-dark { color: #7ea6e0; }
.gpi2-kicker-amber { color: var(--amber-d); }
.gpi2-h1 { font-size: 42px; line-height: 1.14; letter-spacing: -.02em; font-weight: 800; color: var(--navy); margin: 14px 0 12px; }
.gpi2-h2 { font-size: 27px; letter-spacing: -.015em; font-weight: 800; color: var(--navy); margin: 0; }
.gpi2-h2-dark { color: #fff; }
.gpi2-sub { color: var(--muted); font-size: 16.5px; max-width: 660px; margin: 0; }
.gpi2-note { color: var(--muted); font-size: 12.5px; }
.gpi2-more { font-size: 13.5px; font-weight: 700; color: var(--cobalt); text-decoration: none; white-space: nowrap; }
.gpi2-more:hover { text-decoration: underline; }

/* ---------- chips ---------- */
.gpi2-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
	font-size: 11.5px; font-weight: 700; background: #eef2f7; color: var(--muted); }
.gpi2-chip-sourced { background: #ecfdf5; color: #0f766e; }
.gpi2-chip-verified { background: #eff6ff; color: var(--cobalt); }

/* ---------- hero ---------- */
.gpi2-hero { background: linear-gradient(180deg, #f2f6fd 0%, #fff 100%); border-bottom: 1px solid var(--border);
	padding: 60px 0 48px; margin-top: -20px; }
.gpi2-hero-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
/* Video slot reserved — empty until the explainer video ships (facade pattern, see PHP comment) */
.gpi2-hero-media { aspect-ratio: 16 / 9; border-radius: 16px; }
.gpi2-hero-media:empty { background: transparent; }
.gpi2-trust-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.gpi2-searchbox { display: flex; max-width: 700px; margin-top: 24px; background: #fff;
	border: 2px solid var(--navy); border-radius: 14px; overflow: hidden;
	box-shadow: 0 12px 40px rgba(10,37,64,.10); }
.gpi2-searchbox input { flex: 1; border: 0; padding: 15px 18px; font-size: 16px; outline: none; font-family: inherit; }
.gpi2-searchbox button { border: 0; background: var(--navy); color: #fff; padding: 0 28px; font-size: 15px; font-weight: 700; cursor: pointer; }
.gpi2-searchbox button:hover { background: #14345c; }
.gpi2-trend-tags { margin-top: 12px; font-size: 13px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.gpi2-trend-tags a { color: var(--cobalt); font-weight: 600; text-decoration: none; }
.gpi2-trend-tags a:hover { text-decoration: underline; }
.gpi2-hero-stats { display: flex; gap: 36px; margin-top: 30px; flex-wrap: wrap; }
.gpi2-hstat b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); font-variant-numeric: tabular-nums; }
.gpi2-hstat span { font-size: 12.5px; color: var(--muted); }
.gpi2-h1-brand { display: block; font-size: 15px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); margin-bottom: 8px; }
.gpi2-h1-line { display: block; }
.gpi2-sub strong { color: var(--navy); }

/* ---------- compact event cards (5 per row) ---------- */
.gpi2-event-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.gpi2-event-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--border);
	border-top: 3px solid var(--ev-accent, #2f6df0); border-radius: 12px; padding: 14px 16px;
	text-decoration: none; color: inherit; transition: .15s; }
.gpi2-event-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10,37,64,.12); }
.gpi2-event-date { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ev-accent, #2f6df0); }
.gpi2-event-date b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gpi2-event-date i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.gpi2-event-card strong { font-size: 13.5px; color: var(--navy); line-height: 1.35; }
.gpi2-event-all { align-items: center; justify-content: center; text-align: center; border-top-color: var(--navy); background: var(--navy); }
.gpi2-event-all strong { color: #fff; font-size: 15px; }
.gpi2-event-all .gpi2-note { color: #b9c9e0; }
.gpi2-event-all-icon { font-size: 22px; }
.gpi2-card-all { justify-content: center; border-style: dashed; background: transparent; }
.gpi2-card-all strong { color: var(--cobalt); }

/* ---------- cards & grids ---------- */
.gpi2-grid { display: grid; gap: 16px; }
.gpi2-g3 { grid-template-columns: repeat(3, 1fr); }
.gpi2-g4 { grid-template-columns: repeat(4, 1fr); }
.gpi2-g5 { grid-template-columns: repeat(5, 1fr); }
.gpi2-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--border);
	border-radius: 14px; padding: 20px; text-decoration: none; color: inherit;
	box-shadow: 0 1px 2px rgba(16,35,63,.05); transition: .15s; }
.gpi2-card:hover { border-color: var(--cobalt); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10,37,64,.12); }
.gpi2-card strong { font-size: 15.5px; color: var(--navy); }
.gpi2-card p { color: var(--muted); font-size: 13.5px; margin: 0; }
.gpi2-card-ico { font-size: 24px; }
.gpi2-card-compact { padding: 14px 16px; }
.gpi2-card-compact strong { font-size: 14px; }
.gpi2-go { font-size: 13px; font-weight: 700; color: var(--cobalt); margin-top: auto; }
.gpi2-num { display: block; font-size: 18px; font-weight: 800; color: var(--cobalt); margin-bottom: 6px; }
.gpi2-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- growth rail ---------- */
.gpi2-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.gpi2-rail-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--border);
	border-top: 3px solid var(--cobalt); border-radius: 12px; padding: 16px; text-decoration: none; color: inherit; transition: .15s; }
.gpi2-rail-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10,37,64,.12); }
.gpi2-rail-card strong { font-size: 14.5px; color: var(--navy); }
.gpi2-rail-card p { font-size: 12.5px; color: var(--muted); margin: 0; }
.gpi2-rail-member { border-top-color: var(--amber); }
.gpi2-rail-ads { border-top-color: var(--navy); }
.gpi2-rail-petin { border-top-color: #0f766e; }
.gpi2-rail-jfps { border-top-color: #be185d; }

/* ---------- spotlight gallery ---------- */
.gpi2-spotlight-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.gpi2-spot-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
	background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 14px;
	text-decoration: none; color: inherit; transition: .15s; }
.gpi2-spot-card:hover { border-color: var(--cobalt); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10,37,64,.12); }
.gpi2-spot-card strong { font-size: 13.5px; color: var(--navy); }
.gpi2-spot-logo { width: 52px; height: 52px; border-radius: 12px; object-fit: contain; background: #f1f5f9; }
.gpi2-spot-fallback { display: flex; align-items: center; justify-content: center; font-size: 24px; }

/* ---------- rankings ---------- */
.gpi2-rank-list { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 5px; }
.gpi2-rank-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #10233f; }
.gpi2-rank-num { display: inline-flex; width: 22px; height: 22px; border-radius: 7px; background: #eef2f7;
	align-items: center; justify-content: center; font-weight: 800; font-size: 11.5px; flex: none; }
.gpi2-rank-list li:first-child .gpi2-rank-num { background: var(--navy); color: #fff; }

/* ---------- signals ---------- */
.gpi2-signal { gap: 4px; }
.gpi2-signal-value { font-size: 21px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.gpi2-trend { font-size: 12.5px; font-weight: 700; }
.gpi2-trend-up { color: #15803d; }
.gpi2-trend-down { color: #b91c1c; }
.gpi2-trend-flat { color: var(--muted); }

/* ---------- type index ---------- */
.gpi2-type-count { display: flex; align-items: baseline; gap: 6px; }
.gpi2-type-count b { font-size: 20px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.gpi2-type-bar { display: block; height: 6px; background: #eef2f7; border-radius: 99px; overflow: hidden; margin-top: 6px; }
.gpi2-type-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cobalt), #60a5fa); border-radius: 99px; }

/* ---------- ecosystem band ---------- */
.gpi2-eco { background: var(--navy); color: #fff; border-radius: 18px; padding: 38px; }
.gpi2-eco-badge { display: inline-block; background: rgba(245,158,11,.16); color: #fbbf24;
	border: 1px solid rgba(245,158,11,.4); border-radius: 999px; padding: 3px 11px;
	font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.gpi2-eco-steps { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr; gap: 14px; align-items: stretch; margin-top: 20px; }
.gpi2-eco-step { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
	padding: 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.gpi2-eco-step strong { color: #fff; font-size: 15px; }
.gpi2-eco-step p { color: #b9c9e0; font-size: 13px; margin: 0; }
.gpi2-eco-st { font-size: 11px; letter-spacing: .1em; color: #8fb3e8; font-weight: 800; text-transform: uppercase; }
.gpi2-eco-arrow { display: flex; align-items: center; justify-content: center; color: #5c83bd; font-size: 20px; }
.gpi2-eco-btn-wrap { margin-top: auto; }
.gpi2-eco-btn { display: inline-flex; padding: 8px 14px; border-radius: 9px; border: 1px solid rgba(255,255,255,.35);
	color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.gpi2-eco-link:hover { background: rgba(255,255,255,.10); }

/* ---------- member band ---------- */
.gpi2-member { background: linear-gradient(120deg, #fffbeb, #fef3c7); border: 1px solid #fde68a;
	border-radius: 18px; padding: 34px 38px; display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.gpi2-member-txt { flex: 1; min-width: 280px; }
.gpi2-member-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.gpi2-member-list li { font-size: 14px; color: #573f0b; padding-left: 22px; position: relative; }
.gpi2-member-list li::before { content: "✓"; position: absolute; left: 0; color: var(--amber-d); font-weight: 800; }
.gpi2-member-cta { display: flex; flex-direction: column; gap: 10px; }

/* ---------- buttons ---------- */
.gpi2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 24px;
	border-radius: 11px; font-weight: 700; font-size: 14.5px; border: 1px solid transparent; text-decoration: none; transition: .15s; }
.gpi2-btn-amber { background: var(--amber); color: #3a2703; }
.gpi2-btn-amber:hover { background: var(--amber-d); color: #fff; }
.gpi2-btn-ghost { background: transparent; border-color: var(--border); color: #10233f; }
.gpi2-btn-ghost:hover { border-color: var(--cobalt); color: var(--cobalt); }

/* ---------- newsletter ---------- */
.gpi2-newsletter { text-align: center; }
.gpi2-newsletter .gpi-newsletter-form { justify-content: center; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
	.gpi2-g4, .gpi2-g5, .gpi2-rail, .gpi2-spotlight-grid, .gpi2-event-grid { grid-template-columns: repeat(3, 1fr); }
	.gpi2-eco-steps { grid-template-columns: 1fr; }
	.gpi2-eco-arrow { transform: rotate(90deg); }
}
@media (max-width: 680px) {
	.gpi2-h1 { font-size: 28px; }
	.gpi2-hero { padding: 36px 0 32px; }
	.gpi2-hero-inner { grid-template-columns: 1fr; gap: 0; }
	.gpi2-hero-media { display: none; } /* reserved slot collapses on mobile */
	.gpi2-sub { font-size: 15px; }
	.gpi2-searchbox { margin-top: 18px; }
	.gpi2-searchbox input { padding: 13px 14px; font-size: 15px; }
	.gpi2-searchbox button { padding: 0 18px; }
	.gpi2-hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; margin-top: 22px; }
	.gpi2-hstat b { font-size: 21px; }
	.gpi2-section { padding: 34px 0; }
	.gpi2-head-row { align-items: flex-start; flex-direction: column; gap: 8px; }
	.gpi2-g3, .gpi2-g4 { grid-template-columns: repeat(2, 1fr); }
	.gpi2-g5, .gpi2-rail, .gpi2-event-grid { grid-template-columns: repeat(2, 1fr); }
	.gpi2-rail-card:last-child { grid-column: 1 / -1; } /* 5th rail card spans full width */
	.gpi2-spotlight-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.gpi2-spot-card { padding: 14px 10px; }
	.gpi2-spot-logo { width: 42px; height: 42px; }
	.gpi2-member { padding: 24px; flex-direction: column; align-items: stretch; }
	.gpi2-member-cta { width: 100%; }
	.gpi2-eco { padding: 24px 18px; }
	.gpi2-section-soft { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
}