/* ============================================================
   ROSTER HOME  —  the front door for businesses.
   ============================================================ */

/* ---------- hero ---------- */
.hero { padding-block: clamp(72px, 13vw, 176px) clamp(40px, 6vw, 72px); }
.hero .display { max-width: 15ch; }
.hero .pitch {
  margin-top: 26px; max-width: 46ch;
  font-size: clamp(16px, 1.9vw, 21px); color: var(--muted); line-height: 1.65;
}
.hero .cta-row { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 12px; }

.stat-strip {
  margin-top: clamp(48px, 7vw, 88px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.stat-strip div { background: var(--ink); padding: 24px 22px; }
.stat-strip b { display: block; font-family: var(--displayfont); font-size: clamp(28px, 3.6vw, 44px); font-weight: 400; line-height: 1; }
[dir="rtl"] .stat-strip b { font-family: var(--sans); font-weight: 600; }
.stat-strip small { display: block; margin-top: 9px; color: var(--muted); font-size: 12.5px; }

/* ---------- filter bar ---------- */
.filters {
  position: sticky; top: 57px; z-index: 90;
  padding-block: 16px;
  background: color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter: blur(14px);
  border-block: 1px solid var(--line);
}
.filters .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.chip {
  padding: 8px 16px; border-radius: 100px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 400; white-space: nowrap;
  transition: all .3s var(--ease);
}
.chip:hover { color: var(--paper); border-color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 600; }

.filters select {
  padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line);
  background: var(--ink2); color: var(--paper);
  font-family: var(--sans); font-size: 13px; cursor: pointer;
}
.filters .spacer { flex: 1; }
.filters .count { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ---------- creator grid ---------- */
.grid {
  display: grid; gap: clamp(16px, 2.2vw, 26px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr));
}

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--ink3); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.card:hover { transform: translateY(-5px); border-color: var(--accent); }

.card .frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(160deg, var(--frameA), var(--frameB));
}
.card .frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.card:hover .frame img { transform: scale(1.05); }

/* portrait placeholder: initials, so a missing photo reads as intentional */
.card .initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: 62px; letter-spacing: .04em;
  color: color-mix(in srgb, var(--paper) 14%, transparent);
}
/* the scrim under card text stays dark in BOTH themes — it sits on photos */
.card .frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(var(--scrim),.92) 0%, rgba(var(--scrim),.1) 45%, transparent 70%);
}

.card .meta { position: absolute; inset-inline: 0; bottom: 0; padding: 18px 20px; z-index: 2; color: var(--onphoto); }
.card .name { font-family: var(--serif); font-size: 26px; line-height: 1.05; }
[dir="rtl"] .card .name { font-family: var(--sans); font-weight: 600; font-size: 23px; }
.card .tagline { margin-top: 5px; font-size: 13px; color: var(--onphoto-muted); line-height: 1.45; }

.card .foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 20px; border-top: 1px solid var(--line);
}
.card .nichelist { display: flex; flex-wrap: wrap; gap: 6px; }
.card .nichelist span {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding: 3px 9px; border-radius: 100px;
}
[dir="rtl"] .card .nichelist span { letter-spacing: 0; text-transform: none; font-size: 12px; }
.card .headline { font-size: 12.5px; color: var(--muted); text-align: end; white-space: nowrap; }

.card--onboarding { opacity: .58; pointer-events: none; }
.card--onboarding .frame { background: repeating-linear-gradient(45deg, var(--frameA), var(--frameA) 10px, var(--ink2) 10px, var(--ink2) 20px); }

.empty { padding: 72px 0; text-align: center; color: var(--muted); }

/* ---------- how it works ---------- */
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.steps article { background: var(--ink); padding: 32px 28px; }
.steps .n { font-family: var(--serif); font-size: 42px; color: var(--accent); line-height: 1; }
.steps h3 { margin-top: 14px; font-size: 18px; font-weight: 500; }
.steps p { margin-top: 8px; color: var(--muted); font-size: 14.5px; }

@media (max-width: 640px) {
  .filters { top: 55px; }
  .filters .wrap { gap: 8px; }
  .filters .count { width: 100%; }
}

/* ============ v13: mobile pass ============ */
@media (max-width: 760px) {
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 12px; }
  .steps { grid-template-columns: 1fr; }
}