/* ============================================
   WPFolks — Homepage Styles
   ============================================ */

/* --- Hero --- */
.hero {
  position: relative;
  background: var(--surface-dark, #101517);
  color: var(--text-on-dark, #ffffff);
  padding: 72px 0 48px;
  overflow: hidden;
}

/*
 * Two large drifting orbs — both in the brand primary blue (#2145e6).
 * One rides the top-left → bottom-right axis; the other rides the
 * opposite diagonal so they cross each other in the middle of the hero.
 * Movement range is intentionally large (hundreds of px) so the drift
 * is visible, not just a subtle glow shift.
 */
.hero::before {
  content: "";
  position: absolute;
  top: -260px;
  left: -200px;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle at center, rgba(33,69,230,0.5), rgba(33,69,230,0) 62%);
  pointer-events: none;
  z-index: 0;
  filter: blur(12px);
  animation: hero-orb-a 16s ease-in-out infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -280px;
  right: -220px;
  width: 780px;
  height: 780px;
  background: radial-gradient(circle at center, rgba(33,69,230,0.4), rgba(33,69,230,0) 62%);
  pointer-events: none;
  z-index: 0;
  filter: blur(14px);
  animation: hero-orb-b 20s ease-in-out infinite alternate;
}

@keyframes hero-orb-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(260px, 140px, 0) scale(1.15); }
  66%  { transform: translate3d(140px, 320px, 0) scale(0.95); }
  100% { transform: translate3d(360px, 200px, 0) scale(1.1); }
}

@keyframes hero-orb-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(-240px, -160px, 0) scale(0.9); }
  66%  { transform: translate3d(-360px, -80px, 0) scale(1.12); }
  100% { transform: translate3d(-180px, -280px, 0) scale(0.95); }
}

/*
 * Sparkle field — two layered pseudo-elements, each using a single
 * element with many `box-shadow` dots to render dozens of stars cheaply.
 * Sparkles actually drift (translate Y + X) AND twinkle, so motion is obvious.
 */
.hero__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero__sparkles::before,
.hero__sparkles::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  will-change: transform, opacity;
}

/* Layer 1 — small white dots drifting up + twinkling fast. */
.hero__sparkles::before {
  box-shadow:
    120px 80px rgba(255,255,255,0.95),
    340px 140px rgba(255,255,255,0.85),
    560px 60px rgba(255,255,255,0.9),
    780px 210px rgba(255,255,255,0.8),
    1020px 90px rgba(255,255,255,0.95),
    200px 300px rgba(255,255,255,0.85),
    440px 380px rgba(255,255,255,0.8),
    680px 420px rgba(255,255,255,0.9),
    900px 330px rgba(255,255,255,0.85),
    1180px 260px rgba(255,255,255,0.95),
    80px 500px rgba(255,255,255,0.8),
    380px 540px rgba(255,255,255,0.9),
    620px 600px rgba(255,255,255,0.85),
    860px 520px rgba(255,255,255,0.8),
    1140px 580px rgba(255,255,255,0.95);
  animation: hero-sparkle-drift-up 9s linear infinite, hero-sparkle-twinkle 2.4s ease-in-out infinite;
}

/* Layer 2 — bigger brand-blue stars, drifting the other direction. */
.hero__sparkles::after {
  width: 3px;
  height: 3px;
  box-shadow:
    260px 120px rgba(91,124,247,0.95),
    500px 260px rgba(91,124,247,0.85),
    720px 180px rgba(91,124,247,0.9),
    980px 240px rgba(91,124,247,0.8),
    1220px 200px rgba(91,124,247,0.85),
    160px 460px rgba(91,124,247,0.9),
    540px 520px rgba(91,124,247,0.85),
    820px 500px rgba(91,124,247,0.8),
    1080px 540px rgba(91,124,247,0.9),
    300px 680px rgba(91,124,247,0.85),
    700px 720px rgba(91,124,247,0.8);
  filter: blur(0.5px);
  animation: hero-sparkle-drift-down 14s linear infinite, hero-sparkle-twinkle-slow 3.6s ease-in-out infinite 0.6s;
}

@keyframes hero-sparkle-drift-up {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(30px, -120px, 0); }
}

@keyframes hero-sparkle-drift-down {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-40px, 80px, 0); }
}

@keyframes hero-sparkle-twinkle {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}

@keyframes hero-sparkle-twinkle-slow {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.hero-grid { position: relative; z-index: 1; }

/* Honor users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .hero__sparkles::before,
  .hero__sparkles::after {
    animation: none;
  }
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-bottom: 40px;
}

.hero-copy {
  text-align: left;
}

.hero h1 {
  font-family: var(--font-heading, 'Fraunces'), serif;
  font-size: 56px;
  font-weight: 400;
  margin: 0 0 18px;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.hero p {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-on-dark-2, #c3c4c7);
  max-width: 540px;
  margin: 0 0 32px;
  line-height: 1.65;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* Live pulse badge */
.hero-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  margin-bottom: 20px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-on-dark-2, #c3c4c7);
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.hero-pulse strong {
  color: #ffffff;
  font-weight: 600;
}

.hero-pulse__sep {
  opacity: 0.4;
  margin: 0 2px;
}

.hero-pulse__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
  animation: hero-pulse-dot 2s ease-in-out infinite;
}

@keyframes hero-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}

/* Hero map (right side) */
.hero-map-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #1d2327;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}

.hero-map {
  height: 460px;
  width: 100%;
  background: #1d2327;
}

.hero-map__cta {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  background: rgba(17,21,23,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  text-decoration: none;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 0.15s, transform 0.15s;
  z-index: 500;
}

.hero-map__cta:hover {
  background: rgba(33,69,230,0.95);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Make sure Leaflet controls don't overlap the CTA. */
/* 1.22.595 — Mobile-only static placeholder. The live Leaflet map
 * is heavy (~250KB lib + tile fetches) and slow to initialize on
 * mobile GPUs. At <= 768px we hide the live map element and show
 * this static placeholder + the existing "Open map →" CTA. The
 * homepage-map.js short-circuits at the same breakpoint so Leaflet
 * never bootstraps on mobile. */
.hero-map-static {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 220px;
	padding: 32px 20px;
	background: linear-gradient(160deg,
		color-mix(in srgb, #2145e6 8%, #ffffff) 0%,
		#ffffff 100%);
	border: 1px solid var(--border-default, #e2e8f0);
	border-radius: 16px;
	color: var(--color-muted, #475569);
	text-align: center;
}
.hero-map-static__globe {
	color: #2145e6;
	opacity: 0.7;
}
.hero-map-static__caption {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--color-muted, #64748b);
	max-width: 280px;
}

@media (max-width: 768px) {
	#homepageMap.hero-map { display: none; }
	.hero-map-static { display: flex; }
}

.hero-map .leaflet-bottom.leaflet-right,
.hero-map .leaflet-bottom.leaflet-left {
  bottom: 62px;
}

/* Live activity ticker */
.hero-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 0 0 32px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
}

.hero-ticker__label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(239,68,68,0.18);
  color: #fca5a5;
  border-radius: 9999px;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-ticker__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: hero-pulse-dot 1.8s ease-in-out infinite;
}

.hero-ticker__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.hero-ticker__track {
  display: inline-flex;
  gap: 36px;
  white-space: nowrap;
  animation: hero-ticker-scroll 60s linear infinite;
  will-change: transform;
}

.hero-ticker:hover .hero-ticker__track {
  animation-play-state: paused;
}

.hero-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-on-dark-2, #c3c4c7);
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.hero-ticker__icon {
  font-size: 15px;
  flex-shrink: 0;
}

@keyframes hero-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.stats-strip {
  display: grid;
  /* 1.22.145 — bumped to 5 columns for the Themes Showcased stat.
   * 1.22.413 — bumped to 6 columns (Themes dropped, Videos + Snippets
   * added by Homepage V2). Max-width widened so cells stay readable. */
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid var(--surface-dark-3, #2c3338);
}

/* Tablet */
@media (max-width: 960px) {
  .hero {
    padding: 56px 0 40px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-copy {
    text-align: center;
  }
  .hero h1 { font-size: 44px; }
  .hero p { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-map { height: 360px; }
  /* 6 cols cramps on tablet — drop to 3, row wraps to 3+3. */
  .stats-strip { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* Mobile */
@media (max-width: 560px) {
  .hero h1 { font-size: 34px; }
  .hero p { font-size: 16px; }
  .hero-map { height: 300px; }
  .hero-ticker { padding: 10px 12px; gap: 10px; }
  .hero-ticker__item { font-size: 13px; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-family: var(--font-heading, 'Fraunces'), serif;
  font-size: 32px;
  font-weight: 400;
  color: #ffffff;
  display: block;
  margin-bottom: 4px;
}

.stat-label {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-on-dark-3, #8c8f94);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Social Proof --- */
.social-proof {
  background: var(--surface-light-1, #f6f7f7);
  border-top: 1px solid var(--border-default, #dcdcde);
  border-bottom: 1px solid var(--border-default, #dcdcde);
  padding: 24px 0;
  text-align: center;
}

.social-proof-label {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #8c8f94);
  margin-bottom: 16px;
}

.logo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.logo-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #50575e);
}

.logo-pill--img {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  text-decoration: none;
}

.logo-pill--img img {
  height: 28px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.2s, opacity 0.2s;
}

.logo-pill--img:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* --- Features Grid --- */
.features {
  background: var(--surface-white, #ffffff);
  padding: 88px 0;
}

.features-header {
  text-align: center;
  margin-bottom: 48px;
}

.features-header h2 {
  font-family: var(--font-heading, 'Fraunces'), serif;
  font-size: 40px;
  font-weight: 400;
}

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

.feature-card {
  padding: 28px;
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm, 6px);
  background: var(--brand-primary-light, rgba(33,69,230,0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--brand-primary, #2145e6);
}
/* Size the inline Lucide SVGs inside the 44px tile; SVG uses
 * stroke="currentColor" so it picks up the brand-blue color above. */
.feature-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.feature-card h3 {
  font-family: var(--font-heading, 'Fraunces'), serif;
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 8px;
}

.feature-card p {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 14px;
  color: var(--text-secondary, #50575e);
  line-height: 1.6;
}

/* --- Member Spotlight --- */
.member-spotlight {
  background: var(--surface-light-1, #f6f7f7);
  padding: 88px 0;
}

.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.spotlight-text .section-label {
  margin-bottom: 12px;
}

.spotlight-text h2 {
  font-family: var(--font-heading, 'Fraunces'), serif;
  font-size: 40px;
  font-weight: 400;
  margin-bottom: 16px;
  color: var(--text-primary, #1e1e1e);
}

.spotlight-text p {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 16px;
  color: var(--text-secondary, #50575e);
  line-height: 1.7;
  margin-bottom: 24px;
}

.spotlight-text a {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-primary, #2145e6);
  text-decoration: none;
}

.spotlight-text a:hover {
  text-decoration: underline;
}

/* === Spotlight card (homepage) =====================================
 * Mirrors the /folks/ spotlight chrome — soft accent strip, color
 * halo tied to the user's brand color, ringed avatar, refined stats.
 * Stays a single-column card (the homepage layout has CTA copy on
 * the left, this card on the right) so we keep the simpler shape
 * but inherit the visual language.
 */
.member-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sp-color, #2145e6) 6%, #ffffff) 0%,
    #ffffff 60%
  );
  border: 1px solid var(--border-default, #dcdcde);
  border-radius: 8px;
  padding: 24px 26px 26px;
  transition: border-color 0.18s, box-shadow 0.22s, transform 0.22s;
}
.member-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--sp-color, #2145e6) 30%, var(--border-default, #dcdcde));
  box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--sp-color, #2145e6) 50%, transparent);
}
/* Color halo pinned to the top-right corner — adds depth without
   overpowering the white card background. */
.member-card__halo {
  position: absolute;
  top: -70px;
  right: -70px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, color-mix(in srgb, var(--sp-color, #2145e6) 22%, transparent), transparent 65%);
  pointer-events: none;
}
.member-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sp-color, #2145e6), color-mix(in srgb, var(--sp-color, #2145e6) 60%, #000000));
}

/* Eyebrow + archive link row at the top of the card. */
.member-card__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.member-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sp-color, #2145e6);
}
.member-card__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sp-color, #2145e6);
  animation: member-card-pulse 2s ease-in-out infinite;
}
@keyframes member-card-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.25); }
}
.member-card__archive {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #50575e);
  text-decoration: none;
  transition: color 0.15s;
}
.member-card__archive:hover { color: var(--sp-color, #2145e6); }

.member-card-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  min-width: 0;
}

/* Avatar gets a gradient ring tied to the user's color — same
   treatment as /folks/ spotlight. */
.member-card__avatar-wrap {
  flex-shrink: 0;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sp-color, #2145e6), color-mix(in srgb, var(--sp-color, #2145e6) 50%, #ffffff));
}
.member-card-avatar {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--brand-primary, #2145e6);
  border: 3px solid #ffffff;
  font-family: var(--font-body, 'Figtree'), sans-serif;
}
.member-card-avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
}

.member-card-info {
  min-width: 0;
  flex: 1;
}
.member-card-info h3 {
  font-family: var(--font-heading, 'Fraunces'), serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 2px;
  color: var(--sp-color, var(--brand-primary, #2145e6));
}
/* Inline-flex on the name lets Verified + Expert chips ride next
   to the heading without breaking line height. Same pattern as
   /folks/ spotlight. */
.member-card-name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.member-card-name .wpfolks-verified-badge,
.member-card-name .wpfolks-expert-badge {
  display: inline-flex;
  vertical-align: middle;
  position: relative;
  top: 1px;
}

/* Contribution-badge chips row — colored ring + dashicon glyph,
   same chip language as the /folks/ spotlight. */
.member-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -4px 0 16px;
}
.member-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--badge-color, #2145e6);
  color: var(--badge-color, #2145e6);
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}
.member-card-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px -2px color-mix(in srgb, var(--badge-color, #2145e6) 40%, transparent);
}
.member-card-badge .dashicons {
  font-size: 13px;
  width: 13px;
  height: 13px;
  line-height: 1;
}
.member-card-badge .dashicons::before {
  font-size: 13px;
  line-height: 1;
}

.member-card-handle {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 13px;
  color: var(--text-muted, #8c8f94);
}

.member-card-location {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 13px;
  color: var(--text-secondary, #50575e);
  margin-bottom: 12px;
}
.member-card-location::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2350575e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
}

.member-card-building {
  position: relative;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-primary, #1e1e1e);
  margin-bottom: 16px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--sp-color, #2145e6) 5%, transparent);
  border-left: 3px solid var(--sp-color, #2145e6);
  border-radius: 0 6px 6px 0;
}
.member-card-building strong {
  font-weight: 700;
  color: var(--sp-color, #2145e6);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 2px;
}

.member-skills {
  position: relative;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.member-skill-pill {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 11px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary, #50575e);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.member-skill-pill:hover {
  background: color-mix(in srgb, var(--sp-color, #2145e6) 8%, transparent);
  color: var(--sp-color, #2145e6);
  border-color: color-mix(in srgb, var(--sp-color, #2145e6) 30%, transparent);
}

.member-card-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 16px 0;
  border-top: 1px solid var(--border-default, #dcdcde);
  border-bottom: 1px solid var(--border-default, #dcdcde);
  margin-bottom: 20px;
}

.member-card-stat {
  text-align: center;
  position: relative;
}
.member-card-stat + .member-card-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--border-default, #dcdcde);
}

.member-card-stat-num {
  font-family: var(--font-heading, 'Fraunces'), serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-primary, #1e1e1e);
  display: block;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}

.member-card-stat-label {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 11px;
  color: var(--text-muted, #8c8f94);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Filled CTA tied to the user's color — replaces the old outline btn. */
.member-card__cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 11px 18px;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: var(--sp-color, var(--brand-primary, #2145e6));
  border-radius: 8px;
  text-decoration: none;
  transition: filter 0.15s, transform 0.15s;
}
.member-card__cta-btn:hover {
  filter: brightness(0.92);
  transform: translateX(2px);
  color: #ffffff;
}

/* --- Feed Preview --- */
.feed-preview {
  background: var(--surface-white, #ffffff);
  padding: 88px 0;
}

.feed-preview-header {
  text-align: center;
  margin-bottom: 48px;
}

.feed-preview-header h2 {
  font-family: var(--font-heading, 'Fraunces'), serif;
  font-size: 40px;
  font-weight: 400;
}

.feed-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.feed-card {
  padding: 24px;
}

.feed-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.feed-card-meta {
  display: flex;
  flex-direction: column;
}

.feed-card-user {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #1e1e1e);
}

.feed-card-time {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 12px;
  color: var(--text-secondary, #50575e);
}

.feed-card-content {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
  color: var(--text-primary, #1e1e1e);
}

.feed-hashtag {
  display: inline-block;
  background: var(--brand-primary-light, rgba(33,69,230,0.08));
  color: var(--brand-primary, #2145e6);
  border-radius: var(--radius-full, 9999px);
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 500;
}

.feed-card-reactions {
  display: flex;
  gap: 16px;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 13px;
  color: var(--text-secondary, #50575e);
}

.feed-cta {
  text-align: center;
}

.feed-cta a {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-primary, #2145e6);
  text-decoration: none;
}

.feed-cta a:hover {
  text-decoration: underline;
}

/* --- Map Teaser --- */
.map-teaser {
  background: var(--surface-light-1, #f6f7f7);
  color: var(--text-primary, #1e1e1e);
  padding: 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.map-teaser h2 {
  font-family: var(--font-heading, 'Fraunces'), serif;
  font-size: 40px;
  font-weight: 400;
  margin-bottom: 12px;
  color: var(--text-primary, #1e1e1e);
}

.map-teaser p {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  color: var(--text-secondary, #50575e);
  font-size: 17px;
}

.map-visual {
  position: relative;
  max-width: 900px;
  margin: 0 auto 32px;
  height: 360px;
  background: var(--surface-dark-2, #1d2327);
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border-dark, #2c3338);
  overflow: hidden;
}

.map-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5b7cf7;
  box-shadow: 0 0 12px rgba(91,124,247,0.6);
  animation: pulse-dot 3s ease-in-out infinite;
}

.map-dot:nth-child(even) {
  animation-delay: 1.5s;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

.map-filters {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.map-filter-pill {
  padding: 8px 18px;
  border-radius: var(--radius-full, 9999px);
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--text-on-dark-3, #8c8f94);
  border: 1px solid var(--surface-dark-3, #2c3338);
  cursor: pointer;
  transition: all 0.15s;
}

.map-filter-pill:hover {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
  border-color: rgba(255,255,255,0.3);
}

.map-filter-pill.active {
  background: #ffffff;
  color: var(--surface-dark, #101517);
  border-color: #ffffff;
}

/* --- Free Forever --- */
.free-forever {
  background: var(--surface-white, #ffffff);
  padding: 88px 0;
  text-align: center;
}

.free-forever h2 {
  font-family: var(--font-heading, 'Fraunces'), serif;
  font-size: 36px;
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto 16px;
}

.free-forever > .container > p {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 16px;
  color: var(--text-secondary, #50575e);
  max-width: 480px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.value-props {
  display: flex;
  justify-content: center;
  gap: 48px;
}

.value-prop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.value-prop-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-primary-light, rgba(33,69,230,0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary, #2145e6);
}

.value-prop span {
  font-family: var(--font-heading, 'Fraunces'), serif;
  font-size: 18px;
  font-weight: 400;
}

/* --- CTA Section --- */
.cta-section {
  background: var(--brand-primary, #2145e6);
  color: #ffffff;
  padding: 64px 0;
  text-align: center;
}

.cta-section h2 {
  font-family: var(--font-heading, 'Fraunces'), serif;
  font-size: 36px;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 24px;
}

.cta-section .btn--cta-white {
  display: inline-block;
  padding: 14px 32px;
  background: #ffffff;
  color: var(--brand-primary, #2145e6);
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}

.cta-section .btn--cta-white:hover {
  opacity: 0.9;
}

/* --- Responsive overrides --- */
@media (max-width: 768px) {
  .hero {
    padding: 64px 0 48px;
    min-height: auto;
  }
  .hero h1 { font-size: 36px; }
  .hero p { font-size: 16px; }
  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .stat-number { font-size: 24px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .spotlight-grid { grid-template-columns: 1fr; gap: 40px; }
  .feed-cards { grid-template-columns: 1fr; }
  .map-visual { height: 220px; }
  .value-props { flex-direction: column; gap: 24px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 30px; }
  .features-grid { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .logo-strip { gap: 8px; }
  .logo-pill { font-size: 12px; padding: 6px 14px; }
}

/* ────────────────────────────────────────────────────────────────
 * "What's happening in WordPress" — pinned discovery panel above
 * the community feed preview. Four cards in a 4×1 grid, collapses
 * to 2×2 on tablet and 1×4 on phone. Each card lists 4 items with
 * title + meta + outbound link, plus a "more" footer.
 * ──────────────────────────────────────────────────────────────── */

.whats-happening {
  padding: 56px 0 32px;
  background: linear-gradient(180deg, var(--color-off-white, #f6f7f7) 0%, var(--color-white, #fff) 100%);
}
.whats-happening__header {
  text-align: center;
  margin-bottom: 32px;
}
.whats-happening__header h2 {
  font-family: var(--font-display, 'Fraunces'), serif;
  font-size: 32px;
  font-weight: 500;
  margin: 8px 0 6px;
  color: var(--color-text, #1e1e1e);
}
.whats-happening__subtitle {
  font-size: 14px;
  color: var(--color-text-secondary, #50575e);
  margin: 0;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.whats-happening__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* Card */
.wh-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, #dcdcde);
  border-radius: 12px;
  padding: 18px 18px 14px;
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
  min-width: 0;
}
.wh-card:hover {
  border-color: color-mix(in srgb, var(--color-primary, #2145e6) 35%, var(--color-border, #dcdcde));
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--color-primary, #2145e6) 35%, transparent);
  transform: translateY(-2px);
}
/* Per-source accent on the icon — keeps each card visually distinct
   without screaming over the grid. The h3 stays in the body color. */
.wh-card--core      { --wh-accent: #f0a93b; }
.wh-card--plugins   { --wh-accent: #2145e6; }
.wh-card--wordcamps { --wh-accent: #00a32a; }
.wh-card--reddit    { --wh-accent: #ff4500; }

.wh-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border, #dcdcde) 70%, transparent);
}
.wh-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--wh-accent, #2145e6) 12%, #fff);
  color: var(--wh-accent, #2145e6);
  flex-shrink: 0;
}
.wh-card__title {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text, #1e1e1e);
  margin: 0;
  min-width: 0;
}

.wh-card__list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.wh-card__item { min-width: 0; }
.wh-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.wh-card__link:hover {
  background: color-mix(in srgb, var(--wh-accent, #2145e6) 6%, transparent);
}
.wh-card__item-title {
  display: block;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text, #1e1e1e);
  /* 2-line clamp keeps each row to a predictable height — long
     reddit titles and plugin names with mile-long taglines won't
     blow the card out vertically. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wh-card__item-meta {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--color-text-secondary, #50575e);
}

.wh-card__more {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--wh-accent, var(--color-primary, #2145e6));
  text-decoration: none;
  align-self: flex-start;
  margin-top: auto; /* pin to bottom even when lists are short */
}
.wh-card__more:hover { text-decoration: underline; }

.wh-card__empty {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary, #50575e);
  font-style: italic;
}

/* Tablet — single column at the breakpoint where 3-up gets cramped.
   With 3 cards a 2-1 split looks unbalanced, so we collapse straight
   to single-column instead. */
@media (max-width: 880px) {
  .whats-happening__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .whats-happening__header h2 { font-size: 26px; }
}
@media (max-width: 560px) {
  .whats-happening { padding: 36px 0 24px; }
  .whats-happening__header h2 { font-size: 22px; }
}

/* ──────────────────────────────────────────────────────────
   Homepage V2 — shared section heading (1.22.408)
   ────────────────────────────────────────────────────────── */
.hp-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.hp-section-head__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #1a1a1a);
}
.hp-section-head__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-primary, #2145e6);
  text-decoration: none;
}
.hp-section-head__link:hover { text-decoration: underline; }

/* Stats strip — make each cell clickable. */
.stats-strip a.stat-item {
  color: inherit;
  text-decoration: none;
  transition: transform 0.12s ease;
}
.stats-strip a.stat-item:hover { transform: translateY(-1px); }

/* ──────────────────────────────────────────────────────────
   Folks TV strip
   ────────────────────────────────────────────────────────── */
.hp-tv-strip { padding: 36px 0 12px; }
.hp-tv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.hp-tv-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface, #ffffff);
  border: 1px solid var(--color-border, #e2e8f0);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hp-tv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
}
.hp-tv-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-muted, #f1f5f9);
  overflow: hidden;
}
.hp-tv-card__thumb img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
.hp-tv-card__thumb-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted, #94a3b8);
}
.hp-tv-card__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  border-radius: 999px;
  pointer-events: none;
}
.hp-tv-card__duration {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 4px;
}
.hp-tv-card__pick-badge {
  position: absolute; left: 8px; top: 8px;
  background: var(--brand-primary, #2145e6);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hp-tv-card--pick {
  border-color: var(--brand-primary, #2145e6);
}
.hp-tv-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hp-tv-card__title {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
  color: var(--text-primary, #1a1a1a);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-tv-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}
.hp-tv-card__channel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}
.hp-tv-card__source {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  background: var(--color-bg-muted, #f1f5f9);
  border-radius: 3px;
  color: var(--text-secondary, #475467);
}

/* Submit-a-video CTA tile. */
.hp-tv-card--cta {
  background: var(--color-bg-muted, #f8fafc);
  border-style: dashed;
}
.hp-tv-card__cta-body {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  flex: 1;
}
.hp-tv-card__cta-icon { color: var(--brand-primary, #2145e6); }
.hp-tv-card__cta-title { font-size: 15px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.hp-tv-card__cta-desc { font-size: 12.5px; color: var(--text-muted, #6b7280); }

@media (max-width: 960px) {
  .hp-tv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hp-tv-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .hp-tv-card { scroll-snap-align: start; }
}

/* ──────────────────────────────────────────────────────────
   Fresh from the community
   ────────────────────────────────────────────────────────── */
.hp-fresh { padding: 36px 0 24px; }
.hp-fresh-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.hp-fresh-col {
  display: flex;
  flex-direction: column;
  background: var(--surface, #ffffff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 12px;
  padding: 16px 16px 14px;
}
.hp-fresh-col__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.hp-fresh-col__icon {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--brand-primary-soft, rgba(33, 69, 230, 0.10));
  color: var(--brand-primary, #2145e6);
}
.hp-fresh-col__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #1a1a1a);
}
.hp-fresh-col__list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.hp-fresh-col__list li { line-height: 1.4; }
.hp-fresh-col__list a {
  font-size: 14px;
  color: var(--text-primary, #1a1a1a);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-fresh-col__list a:hover {
  color: var(--brand-primary, #2145e6);
  text-decoration: underline;
}
.hp-fresh-col__more {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-primary, #2145e6);
  text-decoration: none;
  margin-top: auto;
}
.hp-fresh-col__more:hover { text-decoration: underline; }
.hp-fresh-col__empty {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin: 0 0 12px;
  flex: 1;
}

.hp-fresh-shipped { flex: 1; margin-bottom: 12px; }
.hp-fresh-shipped__version {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 6px;
}
.hp-fresh-shipped__line {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
}

@media (max-width: 960px) {
  .hp-fresh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .hp-fresh-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────
   Quick actions row (logged-in, 1.22.409)
   ────────────────────────────────────────────────────────── */
.hp-quick-actions { padding: 20px 0 4px; }
.hp-quick-actions__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.hp-quick-actions__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 10px;
  color: var(--text-primary, #1a1a1a);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.hp-quick-actions__btn:hover {
  border-color: var(--brand-primary, #2145e6);
  color: var(--brand-primary, #2145e6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.hp-quick-actions__icon {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--brand-primary-soft, rgba(33, 69, 230, 0.10));
  color: var(--brand-primary, #2145e6);
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .hp-quick-actions__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ──────────────────────────────────────────────────────────
   Top contributors strip
   ────────────────────────────────────────────────────────── */
.hp-contrib { padding: 30px 0 12px; }
.hp-contrib-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.hp-contrib-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hp-contrib-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.hp-contrib-card--top {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.06) 0%, var(--surface, #ffffff) 60%);
}
.hp-contrib-card__avatar-wrap {
  position: relative;
  width: 56px; height: 56px;
}
.hp-contrib-card__avatar-wrap img,
.hp-contrib-card__avatar-wrap .avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50%;
  object-fit: cover;
}
.hp-contrib-card__crown {
  position: absolute;
  top: -8px; right: -6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #f59e0b;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.35);
}
.hp-contrib-card__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  line-height: 1.2;
}
.hp-contrib-card__score {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}
@media (max-width: 720px) {
  .hp-contrib-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 38%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .hp-contrib-card { scroll-snap-align: start; }
}

/* ──────────────────────────────────────────────────────────
   Badges awarded this week
   ────────────────────────────────────────────────────────── */
.hp-badges { padding: 18px 0 24px; }
.hp-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hp-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-primary, #1a1a1a);
  text-decoration: none;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.hp-badge-pill:hover {
  border-color: var(--brand-primary, #2145e6);
  color: var(--brand-primary, #2145e6);
}
.hp-badge-pill__avatar img,
.hp-badge-pill__avatar .avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.hp-badge-pill__text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hp-badge-pill__handle {
  font-weight: 600;
}
.hp-badge-pill__arrow {
  color: var(--text-muted, #94a3b8);
  font-size: 11px;
}
.hp-badge-pill__name {
  font-weight: 600;
  color: var(--brand-primary, #2145e6);
}
.hp-badge-pill--more {
  padding: 6px 12px;
  background: var(--color-bg-muted, #f1f5f9);
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────
   Events + Jobs + Deals 3-col block
   ────────────────────────────────────────────────────────── */
.hp-ejd { padding: 30px 0 12px; }
.hp-ejd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.hp-ejd-col {
  display: flex;
  flex-direction: column;
  background: var(--surface, #ffffff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 12px;
  padding: 16px 16px 14px;
}
.hp-ejd-col__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text-primary, #1a1a1a);
}
.hp-ejd-col__list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.hp-ejd-item { line-height: 1.35; }
.hp-ejd-item__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-ejd-item__title:hover {
  color: var(--brand-primary, #2145e6);
  text-decoration: underline;
}
.hp-ejd-item__meta {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hp-ejd-item__sep { color: var(--text-muted, #94a3b8); }
.hp-ejd-col__more {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-primary, #2145e6);
  text-decoration: none;
  margin-top: auto;
}
.hp-ejd-col__more:hover { text-decoration: underline; }
.hp-ejd-col__empty {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin: 0 0 12px;
  flex: 1;
}
@media (max-width: 960px) {
  .hp-ejd-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────
   Personal Hero (logged-in, 1.22.410)
   ────────────────────────────────────────────────────────── */
.hp-personal-hero {
  padding: 28px 0 22px;
  background: linear-gradient(180deg, var(--brand-primary-soft, rgba(33, 69, 230, 0.06)) 0%, transparent 100%);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.hp-personal-hero__top {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.hp-personal-hero__greeting {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}
.hp-personal-hero__avatar img,
.hp-personal-hero__avatar .avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.hp-personal-hero__text { min-width: 0; }
.hp-personal-hero__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text-primary, #1a1a1a);
  line-height: 1.2;
}
.hp-personal-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.hp-personal-hero__chip {
  font-size: 13px;
  color: var(--text-secondary, #475467);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hp-personal-hero__chip strong { color: var(--text-primary, #1a1a1a); }
.hp-personal-hero__chip + .hp-personal-hero__chip::before {
  content: '·';
  margin-right: 6px;
  color: var(--text-muted, #94a3b8);
}
.hp-personal-hero__delta {
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
}
.hp-personal-hero__delta--up   { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.hp-personal-hero__delta--down { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }

.hp-personal-hero__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.hp-personal-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.hp-personal-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.hp-personal-hero__stat:hover {
  transform: translateY(-1px);
  border-color: var(--brand-primary, #2145e6);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.hp-personal-hero__stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
  line-height: 1.1;
}
.hp-personal-hero__stat-label {
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
}

.hp-personal-hero__since {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin-top: 8px;
  text-align: right;
}

.hp-personal-hero__welcome {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--surface, #ffffff);
  border: 1px dashed var(--color-border, #d9dee5);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hp-personal-hero__welcome p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary, #475467);
}

@media (max-width: 720px) {
  .hp-personal-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-personal-hero__actions { width: 100%; }
  .hp-personal-hero__actions .btn { flex: 1; }
  .hp-personal-hero__since { text-align: left; }
}

/* ──────────────────────────────────────────────────────────
   Personal Hero embedded inside .hero--split (1.22.411)
   The standalone .hp-personal-hero section was dropped; greeting +
   stats now render inside the existing hero so members keep the
   map, ticker, and 6-stat strip.
   ────────────────────────────────────────────────────────── */

/* The .hp-personal-hero__top now lives inside .hero-copy. Override
   any top-level h1 / p / hero-cta rules that would compete. */
.hero--split .hero-copy .hp-personal-hero__top {
  margin: 0;
}
.hero--split .hero-copy .hp-personal-hero__title {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 8px;
}
.hero--split .hero-copy .hp-personal-hero__chip {
  font-size: 14px;
}
/* Stack actions below greeting on the narrow .hero-copy column. */
.hero--split .hero-copy .hp-personal-hero__top {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.hero--split .hero-copy .hp-personal-hero__actions {
  width: 100%;
}
.hero--split .hero-copy .hp-personal-hero__actions .btn {
  flex: 0 0 auto;
}

/* Stats row inside the hero — full container width, sits between
   the hero-grid and the ticker. */
.hero--member .hp-personal-hero__stats {
  margin: 18px 0 4px;
}
.hero--member .hp-personal-hero__welcome {
  margin: 18px 0 4px;
}
.hero--member .hp-personal-hero__since {
  margin-bottom: 6px;
}

@media (max-width: 720px) {
  .hero--split .hero-copy .hp-personal-hero__title { font-size: 24px; }
}

/* ──────────────────────────────────────────────────────────
   Personal Hero v2 (1.22.412) — two-layer treatment.
   Hero stays the dark brand layer with glass-pill chips. Stats
   moved into a light "personal band" rendered AFTER the hero so
   the dark gradient stays clean and the dashboard data has room.
   ────────────────────────────────────────────────────────── */

/* ── Inside the dark hero: greeting + chips + actions ─────── */

.hero--split .hero-copy .hp-personal-hero__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin: 0;
}
.hero--split .hero-copy .hp-personal-hero__greeting {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* Premium avatar — white ring + soft outer halo so it relates to
   the hero's sparkles instead of disappearing into the gradient. */
.hero--split .hero-copy .hp-personal-hero__avatar {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}
.hero--split .hero-copy .hp-personal-hero__avatar::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient( circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 65% );
  pointer-events: none;
  z-index: 0;
}
.hero--split .hero-copy .hp-personal-hero__avatar img,
.hero--split .hero-copy .hp-personal-hero__avatar .avatar {
  position: relative;
  z-index: 1;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

/* Greeting — present, not shouting. Smaller than guest h1. */
.hero--split .hero-copy .hp-personal-hero__title {
  color: #ffffff;
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Glass-pill chips, white-on-dark. */
.hero--split .hero-copy .hp-personal-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.hero--split .hero-copy .hp-personal-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1;
}
.hero--split .hero-copy .hp-personal-hero__chip strong {
  color: #ffffff;
  font-weight: 700;
}
/* Kill the inherited "·" separator from the older standalone-section
   ruleset — chips already read as separate pills. */
.hero--split .hero-copy .hp-personal-hero__chip + .hp-personal-hero__chip::before {
  content: none;
  margin: 0;
}
.hero--split .hero-copy .hp-personal-hero__delta {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}
.hero--split .hero-copy .hp-personal-hero__delta--up {
  background: rgba(74, 222, 128, 0.18);
  color: #86efac;
}
.hero--split .hero-copy .hp-personal-hero__delta--down {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
}

/* Action buttons styled for the dark hero. */
.hero--split .hero-copy .hp-personal-hero__actions {
  display: flex;
  gap: 8px;
  width: auto;
}
.hero--split .hero-copy .hp-personal-hero__actions .btn--primary {
  background: rgba(255, 255, 255, 0.95);
  color: var(--brand-primary, #2145e6);
  border: 1px solid transparent;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.hero--split .hero-copy .hp-personal-hero__actions .btn--primary:hover {
  background: #ffffff;
  transform: translateY(-1px);
}
.hero--split .hero-copy .hp-personal-hero__actions .btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.hero--split .hero-copy .hp-personal-hero__actions .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

@media (max-width: 720px) {
  .hero--split .hero-copy .hp-personal-hero__title { font-size: 22px; }
  .hero--split .hero-copy .hp-personal-hero__actions { width: 100%; }
  .hero--split .hero-copy .hp-personal-hero__actions .btn { flex: 1; }
}

/* ── NEW: light personal band, sits between hero and Quick Actions ── */

.hp-personal-band {
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  padding: 28px 0 32px;
}
.hp-personal-band__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.hp-personal-band__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: var(--text-secondary, #475467);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hp-personal-band__when {
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
}

/* Stat cards */
.hp-personal-band__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.hp-personal-band__stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px 16px;
  background: #ffffff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hp-personal-band__stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  border-color: var(--brand-primary, #2145e6);
}
.hp-personal-band__stat-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--brand-primary-soft, rgba(33, 69, 230, 0.08));
  color: var(--brand-primary, #2145e6);
}
.hp-personal-band__stat-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hp-personal-band__stat-label {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  font-weight: 500;
}

/* Welcome state — replaces the 4-card grid when all are zero. */
.hp-personal-band__welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  flex-wrap: wrap;
}
.hp-personal-band__welcome-text { flex: 1; min-width: 240px; }
.hp-personal-band__welcome-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text-primary, #1a1a1a);
}
.hp-personal-band__welcome-body {
  font-size: 14px;
  color: var(--text-secondary, #475467);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .hp-personal-band__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-personal-band__stat-num { font-size: 24px; }
}
@media (max-width: 380px) {
  .hp-personal-band__stats { grid-template-columns: 1fr; }
}

/* Cleanup: the older .hp-personal-hero (standalone section) background
   gradient at the top of this file is now unreachable. Leaving for one
   ship; sweep on a future cleanup pass. */

/* ──────────────────────────────────────────────────────────
   Continue Watching (logged-in, 1.22.414)
   Reuses .hp-tv-card from the Folks TV strip + adds a progress
   overlay and the "Resume at X of Y" line.
   ────────────────────────────────────────────────────────── */
.hp-continue { padding: 22px 0 10px; }

/* Progress bar overlay pinned to the bottom of the thumb. */
.hp-tv-card__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.hp-tv-card__progress-fill {
  display: block;
  height: 100%;
  background: var(--brand-primary, #2145e6);
  border-radius: 0 2px 2px 0;
  transition: width 0.2s ease;
}

/* Subtle visual cue that this card has resume state. */
.hp-tv-card--resume { position: relative; }
.hp-tv-card--resume .hp-tv-card__thumb { isolation: isolate; }

/* Resume-line styling (replaces the channel line). */
.hp-tv-card__meta--resume {
  justify-content: space-between;
}
.hp-tv-card__resume-line {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-primary, #2145e6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75%;
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────
   Features Grid V2 — grouped, alternating (1.22.421)
   16 tiles in 4 thematic sections, each with a live-data
   visual on one side and a 2x2 tile grid on the other.
   ────────────────────────────────────────────────────────── */
.hp-features {
  padding: 64px 0 72px;
  background: var(--surface, #ffffff);
}
.hp-features__intro {
  text-align: center;
  margin-bottom: 48px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.hp-features__intro .section-label {
  margin-bottom: 8px;
}
.hp-features__intro h2 {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Alternating row: visual on the left by default, reversed when --reverse. */
.hp-features-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
  padding: 56px 0;
  border-top: 1px solid var(--color-border, #e5e7eb);
}
.hp-features-row:first-of-type { border-top: 0; padding-top: 0; }
.hp-features-row__visual { order: 1; }
.hp-features-row__body   { order: 2; }
.hp-features-row--reverse .hp-features-row__visual { order: 2; }
.hp-features-row--reverse .hp-features-row__body   { order: 1; }

/* Section header (above the tiles). */
.hp-features-row__head {
  margin-bottom: 24px;
}
.hp-features-row__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--text-primary, #1a1a1a);
}
.hp-features-row__subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary, #475467);
  max-width: 52ch;
}

/* 2x2 tile grid. */
.hp-features-row__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.hp-features-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 14px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.hp-features-tile:hover {
  transform: translateY(-2px);
  border-color: var(--brand-primary, #2145e6);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}
.hp-features-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--brand-primary-soft, rgba(33, 69, 230, 0.10));
  color: var(--brand-primary, #2145e6);
  flex-shrink: 0;
}
.hp-features-tile__icon svg { display: block; }
.hp-features-tile__body { min-width: 0; }
.hp-features-tile__title {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text-primary, #1a1a1a);
  line-height: 1.3;
}
.hp-features-tile__desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted, #6b7280);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Live data cards (the "visual" side) ─────────────────── */
.hp-feature-card {
  display: block;
  position: relative;
  padding: 28px 28px 26px;
  background: linear-gradient(180deg, var(--brand-primary-soft, rgba(33, 69, 230, 0.06)) 0%, var(--surface, #ffffff) 100%);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.hp-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
}
.hp-feature-card__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-primary, #2145e6);
  margin-bottom: 14px;
}

/* Folk-spotlight live card */
.hp-feature-card--folk { display: flex; flex-direction: column; align-items: flex-start; }
.hp-feature-card--folk .hp-feature-card__avatar {
  display: inline-block;
  margin-bottom: 14px;
}
.hp-feature-card--folk .hp-feature-card__avatar img,
.hp-feature-card--folk .hp-feature-card__avatar .avatar {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--surface, #ffffff);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}
.hp-feature-card__name {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #1a1a1a);
}
.hp-feature-card__handle {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hp-feature-card__location {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary, #475467);
}
.hp-feature-card__stats {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
}
.hp-feature-card__stat {
  color: var(--text-secondary, #475467);
}
.hp-feature-card__stat strong { color: var(--text-primary, #1a1a1a); font-weight: 700; }

/* Plugin live card */
.hp-feature-card--plugin .hp-feature-card__plugin-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hp-feature-card__plugin-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.hp-feature-card__plugin-icon img { width: 100%; height: 100%; object-fit: cover; }
.hp-feature-card__plugin-icon--placeholder { color: var(--brand-primary, #2145e6); }
.hp-feature-card__plugin-meta { min-width: 0; }
.hp-feature-card__plugin-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-feature-card__plugin-author {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}
.hp-feature-card__plugin-stats {
  margin-top: 16px;
  font-size: 13px;
}

/* Video live card */
.hp-feature-card--video .hp-feature-card__video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-muted, #f1f5f9);
  margin-bottom: 14px;
}
.hp-feature-card--video .hp-feature-card__video-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hp-feature-card__video-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted, #94a3b8);
}
.hp-feature-card__video-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  border-radius: 999px;
}
.hp-feature-card__video-duration {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
}
.hp-feature-card__video-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #1a1a1a);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-feature-card__video-channel {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}

/* Post live card */
.hp-feature-card--post .hp-feature-card__post-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.hp-feature-card__post-avatar img,
.hp-feature-card__post-avatar .avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  object-fit: cover;
}
.hp-feature-card__post-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  display: block;
}
.hp-feature-card__post-time {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}
.hp-feature-card__post-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-primary, #1a1a1a);
}

/* Fallback collage (4 icons in a 2x2). */
.hp-feature-card--collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 36px;
}
.hp-feature-card__collage-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--brand-primary-soft, rgba(33, 69, 230, 0.08));
  color: var(--brand-primary, #2145e6);
  border-radius: 14px;
}

/* Responsive */
@media (max-width: 960px) {
  .hp-features { padding: 48px 0 56px; }
  .hp-features__intro h2 { font-size: 26px; }
  .hp-features-row {
    /* minmax(0, 1fr) instead of plain 1fr — plain 1fr has an
       `auto` minimum (= content width) which lets long unwrappable
       text inside the live card push the grid track wider than the
       viewport. Hard cap at zero so the track can shrink to fit. */
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 40px 0;
  }
  /* On mobile, always show the visual FIRST then tiles, regardless
     of --reverse. Consistent reading flow. */
  .hp-features-row__visual,
  .hp-features-row--reverse .hp-features-row__visual { order: 1; }
  .hp-features-row__body,
  .hp-features-row--reverse .hp-features-row__body   { order: 2; }
  /* Hard width caps on both columns so a runaway card can't push
     the page into horizontal scroll. */
  .hp-features-row__visual,
  .hp-features-row__body { min-width: 0; max-width: 100%; }
  .hp-feature-card { max-width: 100%; box-sizing: border-box; }
}
@media (max-width: 560px) {
  .hp-features-row__tiles { grid-template-columns: 1fr; }
  .hp-feature-card { padding: 20px; }
}

/* Legacy .features section (the old flat grid) is no longer rendered
   by front-page.php; leaving the old CSS selectors untouched. */

/* ──────────────────────────────────────────────────────────
   Community Feed Preview V2 (1.22.422)
   Asymmetric: hero post (2fr) + rail (1fr) with trending tags.
   ────────────────────────────────────────────────────────── */
.hp-feed-preview {
  padding: 56px 0 64px;
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

/* Section head */
.hp-feed-preview__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.hp-feed-preview__head-text { min-width: 0; }
.hp-feed-preview__head-text .section-label { margin-bottom: 6px; }
.hp-feed-preview__head-text h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text-primary, #1a1a1a);
}
.hp-feed-preview__head-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hp-feed-preview__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary, #475467);
  padding: 4px 10px 4px 8px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 999px;
}
.hp-feed-preview__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: hp-feed-pulse 1.8s ease-in-out infinite;
}
@keyframes hp-feed-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 6px  rgba(34, 197, 94, 0);    }
  100% { box-shadow: 0 0 0 0    rgba(34, 197, 94, 0);    }
}
.hp-feed-preview__more {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-primary, #2145e6);
  text-decoration: none;
}
.hp-feed-preview__more:hover { text-decoration: underline; }

/* Grid */
.hp-feed-preview__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* ── Hero post ─────────────────────────────────────────── */
.hp-feed-hero {
  background: var(--surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 16px;
  padding: 24px 26px 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.hp-feed-hero__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.hp-feed-hero__avatar img,
.hp-feed-hero__avatar .avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.hp-feed-hero__meta { display: flex; flex-direction: column; line-height: 1.2; }
.hp-feed-hero__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
  text-decoration: none;
}
.hp-feed-hero__name:hover { color: var(--brand-primary, #2145e6); }
.hp-feed-hero__handle {
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
  margin-top: 3px;
}
.hp-feed-hero__body {
  display: block;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-primary, #1a1a1a);
  text-decoration: none;
  margin-bottom: 14px;
}
.hp-feed-hero__body a { color: var(--brand-primary, #2145e6); }
.hp-feed-hero__body br + br { margin-top: 6px; }

.hp-feed-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.hp-feed-hero__tag {
  display: inline-block;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-primary, #2145e6);
  background: var(--brand-primary-soft, rgba(33, 69, 230, 0.08));
  border-radius: 999px;
  text-decoration: none;
}
.hp-feed-hero__tag:hover { background: rgba(33, 69, 230, 0.16); }

.hp-feed-hero__footer {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border, #e5e7eb);
  font-size: 13px;
  color: var(--text-secondary, #475467);
}
.hp-feed-hero__stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hp-feed-hero__open {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-primary, #2145e6);
  text-decoration: none;
}
.hp-feed-hero__open:hover { text-decoration: underline; }

/* ── Rail ──────────────────────────────────────────────── */
.hp-feed-preview__rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hp-feed-rail-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.hp-feed-rail-item:hover {
  transform: translateY(-1px);
  border-color: var(--brand-primary, #2145e6);
}
.hp-feed-rail-item__avatar img,
.hp-feed-rail-item__avatar .avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.hp-feed-rail-item__body { min-width: 0; flex: 1; }
.hp-feed-rail-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.hp-feed-rail-item__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-feed-rail-item__time {
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
  flex-shrink: 0;
}
.hp-feed-rail-item__snippet {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary, #475467);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Trending tags cluster */
.hp-feed-trending {
  padding: 14px 16px 16px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  margin-top: 4px;
}
.hp-feed-trending__label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b7280);
  margin-bottom: 10px;
}
.hp-feed-trending__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hp-feed-trending__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  background: var(--color-bg-muted, #f1f5f9);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.hp-feed-trending__pill:hover {
  background: var(--brand-primary, #2145e6);
  color: #ffffff;
}
.hp-feed-trending__hash {
  color: var(--brand-primary, #2145e6);
  font-weight: 700;
}
.hp-feed-trending__pill:hover .hp-feed-trending__hash { color: #ffffff; }
.hp-feed-trending__count {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 960px) {
  .hp-feed-preview__grid { grid-template-columns: 1fr; gap: 16px; }
  .hp-feed-preview__head h2 { font-size: 24px; }
}
@media (max-width: 480px) {
  .hp-feed-hero { padding: 20px; }
  .hp-feed-hero__body { font-size: 14.5px; }
}

/* Plugin live card — let the long title wrap to 2 lines on mobile
   instead of staying nowrap-ellipsis. Long real-world plugin titles
   ("OTP Verification, Order Notifications & Indian DLT for...") were
   forcing the card wider than the viewport on phones. */
@media (max-width: 560px) {
  .hp-feature-card__plugin-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: clip;
    line-height: 1.3;
  }
}

/* Plugin live card — description + rating chip (1.22.425) */
.hp-feature-card__plugin-desc {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary, #475467);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-feature-card__plugin-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-secondary, #475467);
}
.hp-feature-card__plugin-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.hp-feature-card__plugin-stat strong {
  color: var(--text-primary, #1a1a1a);
  font-weight: 700;
}
.hp-feature-card__plugin-star {
  color: #f59e0b;
  font-size: 14px;
  line-height: 1;
}

/* ──────────────────────────────────────────────────────────
   Founder Note (1.22.426)
   Replaces the legacy Free Forever value-prop strip with a
   first-person letter from the founder. Intimate scale,
   centered, warm off-white background. Page closes on voice.
   ────────────────────────────────────────────────────────── */
.hp-founder-note {
  padding: 72px 0 80px;
  background: linear-gradient(180deg, #fdfbf8 0%, #ffffff 100%);
  border-top: 1px solid var(--color-border, #e5e7eb);
}
.hp-founder-note__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.hp-founder-note__eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--brand-primary, #2145e6);
  margin-bottom: 18px;
}
.hp-founder-note__heading {
  font-family: inherit; /* Override the global serif h2 — needs sans here. */
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 auto 22px;
  color: var(--text-primary, #1a1a1a);
  max-width: 40ch;
  /* Auto-balance line breaks so the heading wraps evenly across lines
     instead of dumping the last word to its own line. */
  text-wrap: balance;
}
.hp-founder-note__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary, #475467);
  /* Prevent single-word orphans on the last line of each paragraph.
     Supported in Chrome 117+, Firefox 121+, Safari 17.4+. Browsers
     without support fall back to native line-breaking — no harm. */
  text-wrap: pretty;
}
.hp-founder-note__body p {
  margin: 0 0 14px;
}
.hp-founder-note__body p:last-child { margin-bottom: 0; }

.hp-founder-note__sig {
  margin-top: 36px;
  padding-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.hp-founder-note__sig::before {
  /* Thin centered hairline — visual close to the letter. */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: var(--color-border, #e5e7eb);
}
.hp-founder-note__avatar {
  display: inline-block;
  flex-shrink: 0;
}
.hp-founder-note__avatar img,
.hp-founder-note__avatar .avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
}
.hp-founder-note__sig-text {
  text-align: left;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.hp-founder-note__sig-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
}
.hp-founder-note__sig-handle {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin-top: 2px;
}
.hp-founder-note__sig-handle:hover {
  color: var(--brand-primary, #2145e6);
}

@media (max-width: 640px) {
  .hp-founder-note { padding: 56px 0 64px; }
  .hp-founder-note__heading { font-size: 22px; }
  .hp-founder-note__body { font-size: 15px; }
}

/* ──────────────────────────────────────────────────────────
   Community pulse alternating bg (1.22.427)
   Four consecutive sections (Folks TV, Top Contrib, Fresh,
   Badges) used to be all-white in a row — read as one big
   wallpaper. Tinting alternates creates rhythm without
   restructuring the markup.
   ────────────────────────────────────────────────────────── */
.hp-contrib,
.hp-badges {
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

/* Soft separator line between consecutive same-bg sections so the
   eye can still parse them as distinct. */
.hp-tv-strip + .hp-contrib,
.hp-fresh   + .hp-badges {
  border-top: 1px solid rgba(15, 23, 42, 0.04);
}