/* Public directory layout (mobile first). Tokens and components live in ui.css. */
.site-directory .site-main { max-width: 760px; }
.dir-hero { margin-bottom: 18px; }
.dir-hero h1 { margin: 8px 0 4px; font-size: 1.6rem; line-height: 1.15; }
.dir-hero > p { margin: 0 0 14px; }
.dir-search { display: grid; gap: 10px; }
.dir-search .ui-field { margin: 0; }
.dir-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.dir-chips::-webkit-scrollbar { display: none; }
.dir-chips__sep { flex: 0 0 1px; background: var(--ui-line); margin: 4px 2px; }
.dir-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dir-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--ui-radius); background: var(--ui-surface);
  border: 1px solid var(--ui-line); color: inherit; text-decoration: none; }
.dir-card:hover { border-color: var(--ui-brand); }
.dir-card.is-closed { opacity: .72; }
.dir-card__logo { flex: 0 0 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--ui-ink); color: #fff; }
.dir-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.dir-card__logo .ui-icon { width: 28px; height: 28px; }
.dir-card__body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.dir-card__name { font-size: 1.05rem; }
.dir-card__tagline { color: var(--ui-muted); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-card__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.dir-card__go { color: var(--ui-muted); flex: 0 0 auto; }
.dir-empty { text-align: center; padding: 32px 12px; color: var(--ui-muted); }

@media (min-width: 640px) {
  .dir-hero h1 { font-size: 2rem; }
  .dir-search { grid-template-columns: 1fr 220px auto; align-items: end; }
}

/* Plans and self-service signup */
.plan-grid { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; }
.plan-card { display: grid; gap: 10px; padding: 18px; border-radius: var(--ui-radius); background: var(--ui-surface); border: 1px solid var(--ui-line); }
.plan-card__name { font-size: 1.15rem; }
.plan-card__price { font-size: 1.8rem; font-weight: 800; }
.plan-card__price small { font-size: .9rem; font-weight: 600; color: var(--ui-muted); }
.plan-card p { margin: 0; }
.plan-card__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plan-card__features li { display: flex; gap: 8px; align-items: center; }
.plan-card__features .ui-icon { color: var(--ui-success); width: 18px; height: 18px; }
.signup-form { display: grid; gap: 14px; padding: 18px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
.signup-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup-done__actions { display: grid; gap: 10px; max-width: 360px; margin: 18px auto 0; }
.center { text-align: center; }
.confirm-icon { width: 64px; height: 64px; margin: 8px auto; border-radius: 50%; display: grid; place-items: center; background: var(--ui-success-soft); color: var(--ui-success); }
.confirm-icon .ui-icon { width: 32px; height: 32px; }
@media (min-width: 640px) { .plan-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }