/**
 * Forefind — Home page.
 *
 * Full visual port of forefind-homepage.html (the mockup). The home page has
 * its own accent system — green + purple, DM Sans display / Inter body — on
 * top of the shared `forefind-ui.css` primitives (layout, focus rings,
 * reduced-motion). Every override below is scoped under `.forefind-home` so
 * it never leaks onto the other four redesigned pages, which keep the
 * emerald `--ff-brand` system from forefind-ui.css.
 */

/* ── HOME-SCOPED TOKENS (overrides forefind-ui.css `.forefind-page` tokens) ── */
.forefind-home {
  /* Brand — green primary + purple secondary, straight from the mockup. */
  --ff-brand:        #30B94A;
  --ff-brand-dark:   #26993D;
  --ff-brand-soft:   #E9F8ED;
  --ff-brand-mid:    #CFEFD6;
  --ff-brand-ondark: #8FE6A0;

  --ff-purple:      #3024AE;
  --ff-purple-dark: #241A88;
  --ff-purple-soft: #EEEDFB;

  /* Neutral scale — mockup's warmer, slightly softer greys. */
  --ff-ink:   #0E1117;
  --ff-body:  #3B3D46;
  --ff-muted: #71727E;
  --ff-faint: #9A9BA6;

  --ff-border:        #E7E7EE;
  --ff-border-strong: #D8D8E2;
  --ff-hairline:      #EFEFF4;
  --ff-surface:  #F7F8FB;
  --ff-surface-2:#EFEFF4;
  --ff-white:    #FFFFFF;

  --ff-dark:   #0E1117;
  --ff-dark-2: #171A22;

  /* Amber reserved for star ratings / "hot" accents — mockup's gold. */
  --ff-amber:      #F5A623;
  --ff-amber-soft: #FDF1DD;
  --ff-amber-line: #F5DCA8;

  --ff-r-sm: 10px;
  --ff-r-md: 12px;
  --ff-r-lg: 14px;

  --ff-shadow:    0 1px 2px rgba(16,17,23,.04);
  --ff-shadow-md: 0 1px 2px rgba(16,17,23,.04), 0 12px 30px -18px rgba(16,17,23,.14);

  --ff-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--ff-body);
}

/* ── HERO — dark banner, right-side photo, radial brand glow ── */
.forefind-home .hero { position: relative; min-height: 520px; display: flex; flex-direction: column; overflow: hidden; background: var(--ff-dark); }
.forefind-home .hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 120% at 8% -10%, rgba(48,36,174,.42), transparent 55%),
    radial-gradient(90% 90% at 32% 130%, rgba(48,185,74,.18), transparent 55%);
}
.forefind-home .hero-bg { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; z-index: 0; }
.forefind-home .hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.forefind-home .hero-bg-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ff-dark) 0%, rgba(14,17,23,.72) 24%, rgba(14,17,23,.10) 62%, rgba(14,17,23,.45) 100%); }
.forefind-home .hero-bg-overlay2 { display: none; }
.forefind-home .hero-grid { display: none; }
.forefind-home .hero-inner { position: relative; z-index: 2; max-width: var(--ff-container); margin: 0 auto; padding: 52px var(--ff-gutter) 44px; width: 100%; }
/* No blanket cap here - the reference sizes each element individually, and a
   shared 600px cap forces the "Popular:" pills onto a second line. */
.forefind-home .hero-inner > * { max-width: none; }
.forefind-home .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--ff-r-pill, 100px);
  padding: 6px 14px;
  font-family: var(--ff-font);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}
.forefind-home .hero-h1 {
  font-family: var(--ff-font);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.031em;
  line-height: 1.08;
  max-width: 680px;
  margin: 18px 0 14px;
}
.forefind-home .hero-h1 .teal { color: var(--ff-brand); }
.forefind-home .hero-sub { font-family: 'Inter', sans-serif; font-size: 15px; color: rgba(255,255,255,.55); margin: 0 0 28px; max-width: 500px; line-height: 1.65; }

/* Search bar — frosted glass on the dark hero, exactly as the mockup. */
/* Matches the reference: one compact row, label sitting inline before the
   input rather than stacked above it (stacking is what made this too tall). */
.forefind-home .hero-search {
  margin-top: 0;
  margin-bottom: 22px;
  display: flex;
  align-items: stretch;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--ff-r-lg);
  box-shadow: none;
  overflow: hidden;
  max-width: 700px;
}
.forefind-home .hs-field { flex: 1; display: flex; flex-direction: row; align-items: center; gap: 0; padding: 0; min-width: 0; }
.forefind-home .hs-field:last-of-type { flex: .8; }
.forefind-home .hs-label { font-family: var(--ff-font); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.35); padding: 0 0 0 16px; white-space: nowrap; }
/* Scoped through .hero-search so this outranks forefind-ui.css's
   `.forefind-page .hero-search input`, which otherwise forces 14px/18px. */
.forefind-home .hero-search .hs-input { background: none; border: 0; outline: 0; padding: 16px 12px; font-family: 'Inter', sans-serif; font-size: 13.5px; color: #fff; width: 100%; }
.forefind-home .hs-input::placeholder { color: rgba(255,255,255,.42); }
.forefind-home .hs-input option { color: var(--ff-ink); }
.forefind-home .hs-sep { width: 1px; height: auto; align-self: stretch; margin: 0; background: rgba(255,255,255,.1); flex-shrink: 0; }
.forefind-home .hero-search-btn {
  background: var(--ff-brand);
  color: #fff;
  border: none;
  margin: 0;
  border-radius: 0;
  padding: 0 26px;
  font-family: var(--ff-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s;
  flex-shrink: 0;
}
.forefind-home .hero-search-btn:hover { background: var(--ff-brand-dark); }

.forefind-home .hero-quick { margin-top: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.forefind-home .hq-label { font-family: var(--ff-font); font-size: 12.5px; color: rgba(255,255,255,.5); font-weight: 600; margin-right: 2px; }
.forefind-home .hq-pill {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 100px;
  padding: 5px 13px;
  transition: .15s;
}
.forefind-home .hq-pill:hover { border-color: var(--ff-brand); color: #fff; }

/* Stats shelf - matches the reference: left-aligned inside each column,
   separated by hairline rules rather than a 1px gap over a lighter backdrop. */
.forefind-home .hero-stats {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.08);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: none;
  max-width: var(--ff-container);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--ff-gutter);
}
.forefind-home .hstat { background: none; padding: 18px 0 18px 48px; text-align: left; border-right: 1px solid rgba(255,255,255,.07); }
.forefind-home .hstat:first-child { padding-left: 0; }
.forefind-home .hstat:last-child { border-right: none; }
.forefind-home .hstat-val { font-family: var(--ff-font); font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.03em; margin-bottom: 3px; }
.forefind-home .hstat-val em { color: var(--ff-brand-ondark); font-style: normal; }
.forefind-home .hstat-label { font-family: 'Inter', sans-serif; font-size: 10.5px; color: rgba(255,255,255,.38); text-transform: uppercase; letter-spacing: .06em; margin-top: 0; }

/* ── SECTION SCAFFOLD ── */
.forefind-home .sec { padding: 84px 0; }
.forefind-home .sec-title { font-family: var(--ff-font); font-size: clamp(24px, 3vw, 34px); color: var(--ff-ink); letter-spacing: -.02em; }
.forefind-home .sec-sub { font-family: 'Inter', sans-serif; color: var(--ff-muted); font-size: 15px; }
.forefind-home .sec-link { font-family: var(--ff-font); color: var(--ff-brand-dark); }
.forefind-home .sec-link:hover { color: var(--ff-brand); }
.forefind-home .fri-ey {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-font); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ff-brand-ondark);
  margin-bottom: 10px;
}
.forefind-home .fri-ey::before { content: ''; width: 22px; height: 2px; background: var(--ff-brand-ondark); border-radius: 2px; }

/* ── CATEGORY / INDUSTRY GRID — horizontal cards, matches mockup .cat ── */
.forefind-home .cat-grid-all { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.forefind-home .cat-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-r-lg);
  transition: border-color .15s, box-shadow .15s, transform .15s;
  text-align: left;
}
.forefind-home .cat-tile:hover { border-color: var(--ff-brand); box-shadow: var(--ff-shadow-md); transform: translateY(-2px); background: var(--ff-white); }
.forefind-home .ct-icon-wrap { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #fff; position: static; }
.forefind-home .ct-icon-default { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; opacity: 1; position: static; }
.forefind-home .ct-icon-svg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.forefind-home .ct-icon-svg svg { width: 30px; height: 30px; }
.forefind-home .ct-icon-svg svg [stroke="white"] { stroke: var(--ff-muted); }
.forefind-home .cat-tile-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.forefind-home .ct-name { font-family: var(--ff-font); font-weight: 600; font-size: 15px; color: var(--ff-ink); letter-spacing: -.01em; }
.forefind-home .ct-count { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--ff-muted); margin-top: 2px; }
.forefind-home .cat-tile-arw { width: 16px; height: 16px; color: var(--ff-faint); flex: 0 0 auto; transition: transform .15s, color .15s; }
.forefind-home .cat-tile:hover .cat-tile-arw { color: var(--ff-brand); transform: translateX(3px); }

/* ── FRI PANEL — purple split panel, sample scored profile on the right ── */
.forefind-home .fri-wrap { padding-top: 84px; padding-bottom: 84px; }
.forefind-home .fri-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ff-purple);
  border-radius: 22px;
  overflow: hidden;
}
.forefind-home .fri-copy { padding: 52px 48px; }
.forefind-home .fri-eyebrow {
  font-family: var(--ff-font); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ff-brand-ondark); margin-bottom: 18px;
}
.forefind-home .fri-h {
  font-family: var(--ff-font); font-size: clamp(28px, 3vw, 38px); font-weight: 700;
  color: #fff; letter-spacing: -.025em; line-height: 1.18; margin: 0 0 18px;
}
.forefind-home .fri-h span { color: var(--ff-brand-ondark); display: block; }
.forefind-home .fri-lead { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.72); margin: 0 0 28px; }
.forefind-home .fri-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.forefind-home .fri-points li { display: flex; align-items: flex-start; gap: 14px; }
.forefind-home .fri-pt-ic {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px; background: rgba(255,255,255,.12);
  color: var(--ff-brand-ondark);
  display: flex; align-items: center; justify-content: center;
}
.forefind-home .fri-pt-ic svg { width: 17px; height: 17px; }
.forefind-home .fri-pt-tx { font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.75); padding-top: 5px; }
.forefind-home .fri-pt-tx strong { color: #fff; font-weight: 700; }

/* Right half — the sample brand profile card. */
.forefind-home .fri-card { margin: 34px 34px 34px 0; padding: 26px 26px 22px; background: rgba(255,255,255,.08); border-radius: 16px; align-self: center; }
.forefind-home .fc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.forefind-home .fc-kicker { font-family: 'Inter', sans-serif; font-size: 12.5px; color: rgba(255,255,255,.6); }
.forefind-home .fc-tier { font-family: var(--ff-font); font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.9); }
.forefind-home .fc-brand { font-family: var(--ff-font); font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -.02em; margin-bottom: 22px; }
.forefind-home .fc-rows { display: flex; flex-direction: column; gap: 13px; }
.forefind-home .fc-row { display: grid; grid-template-columns: 108px 1fr 26px; align-items: center; gap: 12px; }
.forefind-home .fc-row-lb { font-family: 'Inter', sans-serif; font-size: 12.5px; color: rgba(255,255,255,.62); line-height: 1.3; }
.forefind-home .fc-bar { height: 6px; border-radius: 100px; background: rgba(255,255,255,.16); overflow: hidden; }
.forefind-home .fc-bar i { display: block; height: 100%; border-radius: 100px; background: var(--ff-brand); }
.forefind-home .fc-bar i.is-warn { background: var(--ff-amber); }
.forefind-home .fc-row-vl { font-family: var(--ff-font); font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.88); text-align: right; }
.forefind-home .fc-foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.forefind-home .fc-score-row { display: flex; align-items: center; justify-content: space-between; }
.forefind-home .fc-score-lb { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.forefind-home .fc-score { font-family: var(--ff-font); font-size: 30px; font-weight: 700; color: var(--ff-brand-ondark); letter-spacing: -.03em; line-height: 1; }
.forefind-home .fc-stars { color: var(--ff-amber); font-size: 13px; letter-spacing: 2px; margin-top: 6px; }
.forefind-home .fc-status {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; color: #fff;
  background: rgba(48,185,74,.22); border-radius: 100px; padding: 5px 13px;
}
.forefind-home .fc-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ff-brand-ondark); }

/* ── INVESTOR-PROFILE LISTING CARDS ── */
.forefind-home .profile-label { display: flex; align-items: baseline; gap: 12px; margin: 32px 0 18px; flex-wrap: wrap; }
.forefind-home .profile-label:first-of-type { margin-top: 0; }
.forefind-home .pl-badge { font-family: var(--ff-font); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ff-brand-dark); background: none; padding: 0; border-radius: 0; }
.forefind-home .pl-lbl { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--ff-muted); }

.forefind-home .lcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.forefind-home .lcard {
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.forefind-home .lcard:hover { transform: translateY(-4px); box-shadow: var(--ff-shadow-md); border-color: var(--ff-border); }
.forefind-home .lcard-img { position: relative; height: 118px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #EAF9EE, #D3F0DB); }
.forefind-home .lcard-img img { width: 100%; height: 100%; object-fit: cover; }
.forefind-home .lcard-img-text { font-family: var(--ff-font); font-weight: 700; font-size: 34px; letter-spacing: -.02em; }
.forefind-home .lcard-tier { position: absolute; top: 13px; left: 13px; display: inline-flex; align-items: center; gap: 6px; background: var(--ff-purple); border-radius: 100px; padding: 4px 10px 4px 4px; }
.forefind-home .lcard-tier-l { width: 16px; height: 16px; border-radius: 50%; background: var(--ff-brand); display: flex; align-items: center; justify-content: center; font-family: var(--ff-font); font-size: 8px; font-weight: 700; color: #fff; }
.forefind-home .lcard-tier-t { font-family: var(--ff-font); font-size: 10.5px; color: #fff; font-weight: 600; }
.forefind-home .lcard-lbl { position: absolute; top: 13px; right: 13px; font-family: var(--ff-font); font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: normal; padding: 4px 11px; border-radius: 100px; }
.forefind-home .ll-inv, .forefind-home .ll-est, .forefind-home .ll-fast { background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.9); color: var(--ff-ink); }
.forefind-home .lcard-body { padding: 20px 20px 0; flex: 1; display: flex; flex-direction: column; gap: 13px; }
.forefind-home .lcard-name { font-family: var(--ff-font); font-weight: 700; font-size: 17px; color: var(--ff-ink); letter-spacing: -.01em; margin-bottom: 0; }
.forefind-home .lcard-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 0; }
.forefind-home .lcard-chip { font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--ff-body); background: var(--ff-surface); border: 1px solid var(--ff-border); border-radius: 100px; padding: 3px 10px; }
.forefind-home .lcard-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ff-border); border-radius: 10px; overflow: hidden; margin: 0; }
.forefind-home .lcard-stat { padding: 9px 8px; text-align: left; border-right: 1px solid var(--ff-border); border-bottom: none; }
.forefind-home .lcard-stat:last-child { border-right: none; }
.forefind-home .ls-val { font-family: var(--ff-font); font-size: 12px; font-weight: 700; color: var(--ff-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forefind-home .ls-lbl { font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: var(--ff-faint); margin-top: 2px; }
.forefind-home .lcard-sigs { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 20px; }
.forefind-home .lcard-sig { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; border-radius: 100px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 5px; }
.forefind-home .sig-op, .forefind-home .sig-h { color: var(--ff-brand-dark); background: var(--ff-brand-soft); border: 1px solid var(--ff-brand-mid); }
.forefind-home .sig-m { color: var(--ff-amber); background: var(--ff-amber-soft); border: 1px solid var(--ff-amber-line); }
.forefind-home .lcard-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 20px 20px; border-top: 1px solid var(--ff-hairline); }
.forefind-home .lcard-band { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--ff-muted); }
.forefind-home .lcard-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ff-brand); flex-shrink: 0; }
.forefind-home .lcard-stars { color: var(--ff-amber); font-size: 11px; letter-spacing: 1px; margin-left: auto; }
.forefind-home .lcard-cta { background: var(--ff-purple); color: #fff; font-family: var(--ff-font); font-weight: 600; font-size: 12px; border-radius: 9px; padding: 9px 13px; white-space: nowrap; transition: background .15s; }
.forefind-home .lcard:hover .lcard-cta { background: var(--ff-purple-dark); }

/* ── BUDGET / INVESTMENT RANGE CARDS ── */
.forefind-home .budget-sec { background: var(--ff-white); padding: 84px 0; }
.forefind-home .budget-heading { font-family: var(--ff-font); font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; color: var(--ff-ink); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 36px; max-width: 640px; }
.forefind-home .budget-heading span { color: var(--ff-brand); }
/* One green-outlined frame split into four columns by hairline dividers. */
.forefind-home .budget-frame {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1.5px solid var(--ff-brand);
  border-radius: 18px;
  background: var(--ff-white);
  overflow: hidden;
}
.forefind-home .bc {
  display: flex; flex-direction: column;
  background: none;
  border: 0;
  border-left: 1px solid var(--ff-border);
  border-radius: 0;
  padding: 30px 28px 32px;
  transition: background .18s;
}
.forefind-home .bc:first-child { border-left: 0; }
.forefind-home .bc:hover { background: var(--ff-brand-soft); transform: none; box-shadow: none; }
.forefind-home .bc-hot {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ff-font); font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ff-brand-dark); background: none;
  padding: 0; margin-bottom: 14px;
}
.forefind-home .bc-hot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ff-brand); flex-shrink: 0; }
/* Bands without the flag keep the badge row's height so all four align. */
.forefind-home .bc-hot--empty { visibility: hidden; }
.forefind-home .bc-hot--empty::before { display: none; }
.forefind-home .bc-hot::after { content: ''; display: inline-block; width: 0; height: 17px; }
.forefind-home .bc-range { font-family: var(--ff-font); font-size: clamp(28px, 2.6vw, 34px); font-weight: 700; color: var(--ff-purple); letter-spacing: -.03em; line-height: 1; margin: 0 0 10px; }
.forefind-home .bc-label { display: block; font-family: var(--ff-font); font-size: 15px; font-weight: 700; color: var(--ff-purple); margin-bottom: 10px; }
.forefind-home .bc-desc { font-family: 'Inter', sans-serif; color: var(--ff-muted); font-size: 13.5px; flex: 1; margin-bottom: 18px; line-height: 1.6; }
.forefind-home .bc-count {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ff-font); font-weight: 600; font-size: 13.5px;
  color: var(--ff-brand-dark);
}
.forefind-home .bc-count::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ff-brand); flex-shrink: 0; }
.forefind-home .bc-arw { color: var(--ff-brand-dark); transition: transform .15s; }
.forefind-home .bc:hover .bc-arw { transform: translateX(3px); }
.forefind-home .bc-link { display: none; }

/* ── CITY GRID — full-bleed gradient tiles ── */
.forefind-home .city-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.forefind-home .city-card {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  color: #fff;
  border: none;
  transition: transform .2s, box-shadow .2s;
}
.forefind-home .city-card:hover { transform: translateY(-4px); box-shadow: var(--ff-shadow-md); border-color: transparent; }
.forefind-home .city-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 60% at 85% 0, rgba(255,255,255,.14), transparent 60%); pointer-events: none; }
.forefind-home .city-pin { position: absolute; top: 16px; left: 16px; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; z-index: 1; }
.forefind-home .city-pin svg { width: 16px; height: 16px; }
.forefind-home .city-initial { position: absolute; top: -8px; right: 8px; font-family: var(--ff-font); font-weight: 700; font-size: 84px; line-height: 1; color: rgba(255,255,255,.10); letter-spacing: -.04em; z-index: 0; }
.forefind-home .city-img { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 20px; height: auto; display: block; }
.forefind-home .city-name { font-family: var(--ff-font); font-weight: 700; font-size: 21px; letter-spacing: -.02em; color: #fff; position: static; display: block; }
.forefind-home .city-meta-line { display: block; font-family: 'Inter', sans-serif; font-size: 12.5px; color: rgba(255,255,255,.82); margin-top: 2px; }
.forefind-home .city-count { display: none; }
.forefind-home .city-meta { display: none; }
.forefind-home .city-go {
  position: absolute; right: 16px; bottom: 18px; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.forefind-home .city-go svg { width: 14px; height: 14px; color: #fff; }
.forefind-home .city-card:hover .city-go { background: var(--ff-brand); transform: translateX(2px); }

/* ── HOW IT WORKS — dark connected timeline ── */
.forefind-home .steps-sec { background: var(--ff-ink); padding: 84px 0; }
.forefind-home .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; margin-top: 40px; }
.forefind-home .steps-grid::before {
  content: '';
  position: absolute; top: 24px; left: 12.5%; right: 12.5%; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(48,185,74,.5), rgba(255,255,255,.06));
}
.forefind-home .step { position: relative; text-align: center; padding: 0 8px; }
.forefind-home .step-node {
  width: 50px; height: 50px; margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(var(--ff-brand), var(--ff-brand-dark));
  color: #fff;
  font-family: var(--ff-font); font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  box-shadow: 0 0 0 6px var(--ff-ink);
}
.forefind-home .step-h { font-family: var(--ff-font); font-weight: 700; color: #fff; font-size: 17px; margin: 20px 0 8px; }
.forefind-home .step-body { font-family: 'Inter', sans-serif; color: #A9AAB6; font-size: 13.5px; max-width: 24ch; margin: 0 auto; line-height: 1.6; }

/* ── TESTIMONIALS ── */
.forefind-home .hiw-sec { background: var(--ff-white); padding: 84px 0; }
.forefind-home .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.forefind-home .testi-card {
  position: relative;
  border: 1px solid var(--ff-border);
  border-radius: 18px;
  padding: 30px;
  background: var(--ff-white);
  transition: transform .2s, box-shadow .2s;
}
.forefind-home .testi-card:hover { transform: translateY(-3px); box-shadow: var(--ff-shadow-md); }
.forefind-home .testi-stars { color: var(--ff-amber); font-size: 13px; letter-spacing: 3px; margin-bottom: 14px; }
.forefind-home .testi-q { font-family: var(--ff-font); font-size: 15.5px; font-weight: 500; color: var(--ff-ink); line-height: 1.55; letter-spacing: -.01em; margin-bottom: 0; }
.forefind-home .testi-div { display: none; }
.forefind-home .testi-meta { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ff-hairline); }
.forefind-home .testi-av { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ff-font); font-weight: 700; font-size: 14px; color: #fff !important; background: var(--ff-purple) !important; }
.forefind-home .testi-name { font-family: var(--ff-font); font-size: 14px; font-weight: 700; color: var(--ff-ink); }
.forefind-home .testi-det { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--ff-muted); }

/* ── CTA BANNER — purple gradient, centered ── */
/* .hiw-sec is only used by the testimonials block, which sits directly above
   the closing CTA. Its bottom padding is trimmed so the CTA doesn't float in a
   large empty gap. (An earlier :last-of-type selector here never matched - the
   CTA's own div is the last sibling of that type.) */
.forefind-home .hiw-sec { padding-bottom: 40px; }
.forefind-home .cta-wrap { padding-bottom: 48px; }
.forefind-home .cta-banner {
  background: linear-gradient(120deg, var(--ff-purple), var(--ff-purple-dark));
  border-radius: 20px;
  padding: 38px 40px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.forefind-home .cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 90% -20%, rgba(48,185,74,.35), transparent 60%);
  pointer-events: none;
}
/* Wider than the old 560px so the second sentence fits on one line instead of
   wrapping to a third, which was adding ~40px of banner height. */
.forefind-home .cta-h { font-family: var(--ff-font); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; color: #fff; letter-spacing: -.02em; max-width: 720px; position: relative; z-index: 1; line-height: 1.25; }
.forefind-home .cta-h span { color: var(--ff-brand-ondark); }
.forefind-home .cta-acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; flex-shrink: 0; }
.forefind-home .cta-btn { font-family: var(--ff-font); border-radius: var(--ff-r-sm); padding: 14px 26px; font-size: 15px; }
.forefind-home .cta-t { background: var(--ff-brand); color: #fff; }
.forefind-home .cta-t:hover { background: var(--ff-brand-dark); }
.forefind-home .cta-g { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.forefind-home .cta-g:hover { background: #fff; color: var(--ff-purple); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .forefind-home .cat-grid-all { grid-template-columns: repeat(2, 1fr); }
  .forefind-home .feats, .forefind-home .lcard-grid, .forefind-home .city-grid, .forefind-home .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .forefind-home .steps-grid, .forefind-home .budget-frame { grid-template-columns: repeat(2, 1fr); }
  .forefind-home .hero-stats { grid-template-columns: repeat(2, 1fr); }
  /* Budget frame wraps to 2x2 — restore the dividers row by row. */
  .forefind-home .bc:nth-child(odd) { border-left: 0; }
  .forefind-home .bc:nth-child(n+3) { border-top: 1px solid var(--ff-border); }
  /* FRI panel stacks: copy first, sample card below. */
  .forefind-home .fri-panel { grid-template-columns: 1fr; }
  .forefind-home .fri-copy { padding: 40px 32px 8px; }
  .forefind-home .fri-card { margin: 8px 32px 34px; align-self: stretch; }
}
@media (max-width: 1000px) {
  .forefind-home .hero-bg { display: none; }
  .forefind-home .hero-inner > * { max-width: none; }
}
@media (max-width: 768px) {
  .forefind-home .hero-inner { padding: 40px var(--ff-gutter) 32px; }
  .forefind-home .fri-wrap { padding-top: 52px; padding-bottom: 52px; }
  .forefind-home .sec, .forefind-home .budget-sec, .forefind-home .steps-sec, .forefind-home .hiw-sec { padding: 52px 0; }
  .forefind-home .hero-search { flex-wrap: wrap; }
  .forefind-home .hs-field { flex: 1 1 100%; border-bottom: 1px solid rgba(255,255,255,.1); }
  .forefind-home .hs-field:last-of-type { flex: 1 1 100%; }
  .forefind-home .hs-sep { display: none; }
  .forefind-home .hero-search-btn { flex: 1 1 100%; justify-content: center; padding: 14px 26px; }
  .forefind-home .cat-grid-all { grid-template-columns: 1fr; }
  .forefind-home .budget-heading { font-size: 26px; }
}
@media (max-width: 480px) {
  .forefind-home .feats, .forefind-home .lcard-grid, .forefind-home .city-grid, .forefind-home .testi-grid,
  .forefind-home .steps-grid, .forefind-home .budget-frame, .forefind-home .hero-stats { grid-template-columns: 1fr; }
  .forefind-home .cta-banner { padding: 30px 22px; }
  /* Single column — every band divides from the one above it. */
  .forefind-home .bc { border-left: 0; border-top: 1px solid var(--ff-border); }
  .forefind-home .bc:first-child { border-top: 0; }
  .forefind-home .bc-hot--empty { display: none; }
  .forefind-home .fri-copy { padding: 32px 24px 8px; }
  .forefind-home .fri-card { margin: 8px 24px 28px; padding: 22px 20px 18px; }
  .forefind-home .fc-row { grid-template-columns: 92px 1fr 24px; gap: 9px; }
}