/* ══════════════════════════════════════════════════════════════════════════════
   Escargo — /find customer marketplace homepage. PAGE-SCOPED LAYOUT ONLY.
   Every component comes from the DS: os-ui.css (.os-* + --os-* tokens) and the
   site chrome (.eo-*). This file only adds the hero band + search-card layout +
   the enlarged category-chip tap target that os-ui.css does not provide.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── HERO: marketplace front door ─────────────────────────────────────────────
   Structure benchmarked against best-in-class booking marketplaces (compact bold
   H1 + ONE segmented search bar on a light canvas), rendered entirely in Escargo's
   own identity — our tokens, our copy, our chrome. No third-party colour, type,
   imagery or wording. No webfont/CDN (estate CSP bans both): motion is CSS-only
   and honours prefers-reduced-motion. ─────────────────────────────────────── */
.find-hero{
  background:
    radial-gradient(1100px 460px at 12% -10%, rgba(128,191,32,.14), transparent 62%),
    radial-gradient(900px 420px at 92% 4%, rgba(7,59,36,.10), transparent 60%),
    var(--os-white);
  color:var(--os-ink);
  padding:56px 0 40px;
  position:relative;
  overflow:hidden;
}
.find-hero .os-kicker{color:var(--os-forest)}
.find-head{max-width:720px}
/* NB specificity: the estate's editorial style is light headings (`.eo main h1`
   = 300, specificity 0,1,2). The marketplace front door is a different register —
   a bold, scannable promise — so this rule is scoped one level deeper (0,2,1) to
   win deliberately rather than by accident. Site-wide heading style is untouched. */
.find-hero .find-head h1{
  color:var(--os-ink);
  font-size:clamp(1.9rem,4.6vw,2.6rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.025em;
  margin:10px 0 10px;
}
.find-sub{color:var(--os-text);font-size:clamp(1rem,2.2vw,1.1rem);line-height:1.5;max-width:54ch;margin:0}

/* ── the one-row segmented search bar ─────────────────────────────────────────
   Mobile: fields stack full-width (thumb-friendly). ≥860px: a single pill row with
   hairline dividers and the action inside the bar. */
.find-searchcard{
  max-width:980px;margin-top:26px;padding:10px;
  border-radius:var(--os-r-pill);
  box-shadow:0 2px 6px rgba(7,59,36,.08), 0 18px 44px rgba(7,59,36,.13);
  border:1px solid var(--os-line);
  background:var(--os-white);
}
@media (max-width:859px){ .find-searchcard{border-radius:var(--os-r-lg);padding:16px} }

.find-grid{display:grid;gap:10px}
.find-field{margin:0}
@media (min-width:860px){
  .find-grid{grid-template-columns:1.15fr 1fr 1fr;gap:0;align-items:stretch}
  .find-field{position:relative;padding:6px 18px}
  .find-field + .find-field::before{
    content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--os-line);
  }
  .find-field--full{grid-column:auto}
  .find-searchcard .os-input,
  .find-searchcard .os-select{border:0;background:transparent;padding:6px 0;min-height:38px;font-size:.98rem}
  .find-searchcard .os-input:focus,
  .find-searchcard .os-select:focus{outline:none}
  .find-searchcard .os-label{
    font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
    color:var(--os-muted);margin-bottom:2px;
  }
}

.find-geo{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:10px}
.find-geo-btn{padding:9px 14px;font-size:.85rem}      /* keeps os-btn min-height:44px (tap target) */
.find-geo-note{font-size:.82rem;color:var(--os-muted);margin:0;flex:1 1 180px}
@media (min-width:860px){ .find-geo{margin-top:4px} .find-geo-note{flex-basis:100%} }

.find-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.find-actions .os-btn{flex:1 1 200px}
@media (min-width:860px){
  .find-searchcard form{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
  .find-actions{margin-top:0;flex-wrap:nowrap;gap:8px}
  .find-actions .os-btn{flex:0 0 auto;border-radius:var(--os-r-pill);padding:12px 24px}
}

.find-roadside-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:18px}
.find-roadside-btn{flex:0 0 auto;border-radius:var(--os-r-pill)}
.find-roadside-note{font-size:.86rem;color:var(--os-muted);margin:0;flex:1 1 200px}

@media (max-width:420px){ .find-actions .os-btn{flex:1 1 100%} }

/* trust strip — real, non-numeric assurances only (never invented counts) */
.find-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:20px 0 0;padding:0;list-style:none}
.find-trust li{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--os-text)}
.find-trust svg{width:16px;height:16px;stroke:var(--os-lime-press);flex:0 0 auto}

/* entrance: quiet, CSS-only */
@keyframes findRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.find-head{animation:findRise .5s ease both}
.find-searchcard{animation:findRise .5s ease .08s both}
.find-trust{animation:findRise .5s ease .16s both}
@media (prefers-reduced-motion:reduce){ .find-head,.find-searchcard,.find-trust{animation:none} }

/* ── category chips band (pale) ─────────────────────────────────────────────── */
.find-cats{background:var(--os-pale);padding:44px 0 60px}
.find-cats h2{font-size:clamp(1.3rem,3.5vw,1.7rem);letter-spacing:-.015em;color:var(--os-ink);margin:8px 0 6px}
.find-cats .find-cats-sub{color:var(--os-muted);max-width:58ch;margin:0 0 20px}
.find-chips{display:flex;flex-wrap:wrap;gap:10px}

/* enlarge .os-chip into a comfortable >=44px tappable category link */
.find-chip{min-height:44px;padding:10px 16px;font-size:.9rem;font-weight:600;
  background:var(--os-white);color:var(--os-ink);border-color:var(--os-line);
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.find-chip:hover{border-color:var(--os-lime);background:#f2fbe3}

/* ── verified providers (data-driven cards; Fresha-structured, real data only) ─ */
.find-featured{padding:48px 0 8px}
.find-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.find-featured h2{font-size:clamp(1.3rem,3.5vw,1.7rem);letter-spacing:-.015em;color:var(--os-ink);margin:8px 0 0}
.find-sec-link{font-weight:700;color:var(--os-forest);text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.find-sec-link:hover{color:var(--os-lime-press)}
.find-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.find-cards--msg{display:block}
.find-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.find-card:hover{box-shadow:var(--os-shadow-hover);transform:translateY(-2px)}
.find-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.find-card-name{font-weight:800;color:var(--os-ink);font-size:1.02rem;line-height:1.2}
.find-card-meta{font-size:.86rem;color:var(--os-muted)}
.find-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px}
.find-rate{font-weight:700;color:var(--os-ink);font-size:.9rem}
.find-rate-c{color:var(--os-muted);font-weight:600}
.find-rate-new{font-size:.78rem;font-weight:700;color:var(--os-forest);background:#e9f7dd;border:1px solid #cdebae;border-radius:999px;padding:2px 9px}
.find-card-go{font-weight:700;color:var(--os-forest);font-size:.86rem}
.find-skelcard{min-height:118px}
.find-empty{text-align:center}
.find-empty-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}

/* ── how it works (flywheel) ────────────────────────────────────────────────── */
.find-how{padding:56px 0}
.find-how h2{font-size:clamp(1.3rem,3.5vw,1.7rem);letter-spacing:-.015em;color:var(--os-ink);margin:8px 0 24px;max-width:24ch}
.find-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.find-steps li{padding-top:20px}
.find-step-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--os-lime);color:var(--os-forest-deep);font-weight:800;font-size:1rem;margin-bottom:8px}
.find-steps h3{margin:0 0 6px;color:var(--os-ink);font-size:1.05rem}
.find-steps p{margin:0;color:var(--os-text);font-size:.92rem;line-height:1.5}

/* ── for businesses band ────────────────────────────────────────────────────── */
.find-biz{padding:8px 0 60px}
.find-bizcard{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:32px}
.find-bizcard-copy{max-width:60ch}
.find-bizcard .os-kicker{color:var(--os-lime)}
.find-bizcard h2{color:#fff;font-size:clamp(1.3rem,3.5vw,1.7rem);letter-spacing:-.015em;margin:8px 0 8px}
.find-bizcard p{color:var(--os-d-text);margin:0;line-height:1.55}
.find-bizcard-cta{display:flex;flex-wrap:wrap;gap:12px}
.find-biz-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.find-biz-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}