/*
 * Base application styles. No raw color values here — everything routes
 * through the tokens defined in tokens.css via var(--token-name).
 */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

/* Always reserve the vertical scrollbar gutter so centered/max-width content
   doesn't jump sideways when navigating between short pages (no scrollbar)
   and tall pages (scrollbar) — a ~10px horizontal shift otherwise. */
html {
  scrollbar-gutter: stable;
}

/* Backstop, not the fix: every real horizontal-overflow cause should be
   eliminated at the source (shrinkable grid/flex tracks below). This just
   stops a future stray long token from making the whole page draggable
   sideways. `clip` (not `hidden`) so it doesn't disable `position: sticky`
   on the header/admin header. */
html {
  overflow-x: clip;
}

body {
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-bold);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover);
}

/* Wide, breathing container shared by the header, footer and page body —
   capped at --maxw but not boxed, with generous responsive gutters. */
/* Sticky footer: the body is a full-height flex column so the main content
   grows to fill and the footer always pins to the bottom, even on short
   pages (login, thin directory results, etc.). */
.site-body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.site-body > main {
  flex: 1 0 auto;
  width: 100%;
  min-width: 0;
}

.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-6) var(--gut) var(--space-8);
}

/* Small uppercase kicker used above section headings and the hero title
   (one of the two places this design allows heavy/uppercase emphasis). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.eyebrow svg {
  width: 13px;
  height: 13px;
  color: var(--color-star);
  flex-shrink: 0;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn svg {
  width: 17px;
  height: 17px;
}

.btn:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-contrast);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn-secondary:hover {
  background: transparent;
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: 0.85rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  line-height: 1;
}

.badge-success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.badge-info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.flash-success { background: var(--color-success-bg); color: var(--color-success); }
.flash-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.flash-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.flash-info    { background: var(--color-info-bg);    color: var(--color-info); }

.flash-dismiss {
  background: none;
  border: none;
  color: inherit;
  font-size: var(--font-size-lg);
  line-height: 1;
  cursor: pointer;
}

.auth-card {
  max-width: 26rem;
  margin: var(--space-7) auto;
}

.auth-card h1 {
  margin-bottom: var(--space-5);
}

.auth-card-foot {
  margin-top: var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-1);
}

.form-input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.form-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Labeled checkbox row (e.g. the project-submit consent checkbox) — a plain
   checkbox + text label, distinct from the directory's pill-shaped
   .directory-filter-chip toggles. */
/* .directory-filter-checkbox is the same labeled-checkbox-row pattern, used
   by the admin backend's per-field visibility toggles, badge/status
   checkboxes and CSV import options (app/views/admin/*.php) as well as the
   vendor portal's own listing form — kept as one shared rule rather than
   duplicated per call site. */
.form-checkbox,
.directory-filter-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
}

.form-checkbox input,
.directory-filter-checkbox input {
  margin-top: 3px;
  flex-shrink: 0;
}

/* Vertical rhythm for a simple stacked-section page (project submit, tools
   preview) — same flex+gap pattern as .vendor-profile-main, just full page
   width instead of a two-column layout. */
.page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Project-submit thank-you heading — a small success check ahead of the
   headline, same green as .badge-success/the Verified badge check icon. */
.form-success-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-success-heading svg {
  width: 22px;
  height: 22px;
  color: var(--color-success);
  flex-shrink: 0;
}

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-backdrop.is-open {
  display: flex;
}

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  max-width: 32rem;
  width: 90%;
}

/* Public site shell (header.php / footer.php) — businesslike directory
   chrome, distinct from the admin shell in admin.css. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-strong);
}

.site-header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  /* Three zones: brand left, nav centered, account controls right. The equal
     1fr side columns keep the centered nav centered on the full header width
     regardless of how wide the brand or the right-side controls are. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  min-height: 72px;
}

/* nav + account controls are inside .site-menu (display:contents on desktop),
   so they're promoted to grid items of .site-header-inner — justify-self then
   places them in their column. Descendant selectors (not `>`) because the DOM
   parent is still .site-menu. */
.site-brand { justify-self: start; }
.site-nav { justify-self: center; }
.site-head-cta { justify-self: end; }

.site-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.site-brand:hover {
  color: var(--color-text);
}

.site-brand-mark {
  position: relative;
  width: 37px;
  height: 37px;
  flex: none;
  border-radius: 9px;
  background: var(--color-text);
  display: grid;
  place-items: center;
  color: var(--color-text-inverse);
}

.site-brand-mark svg {
  width: 20px;
  height: 20px;
}

.site-brand-mark .site-brand-star {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 15px;
  height: 15px;
  color: var(--color-star);
}

.site-brand-text b {
  display: block;
  font-size: 1.02rem;
  line-height: 1;
}

.site-brand-tagline {
  display: block;
  font-size: 0.57rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 3px;
  font-weight: var(--font-weight-medium);
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.site-nav-link {
  color: var(--color-text-muted);
  font-size: 0.93rem;
  font-weight: var(--font-weight-medium);
}

.site-nav-link:hover {
  color: var(--color-primary);
}

.site-head-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: none;
}

.site-nav-link-quiet {
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.site-nav-link-quiet:hover {
  color: var(--color-primary);
}

/* Desktop: the menu wrapper is transparent, so the nav + account controls lay
   out directly in the header row exactly as before. The hamburger is hidden. */
.site-menu { display: contents; }

.nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 880px) {
  /* Mobile: the desktop 3-column grid becomes a simple flex row — brand on the
     left, hamburger pushed to the right (its own margin-left:auto). */
  .site-header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  /* Mobile: collapse the nav + account controls behind the hamburger; opening
     it drops a full-width stacked menu below the header. */
  .nav-toggle { display: inline-flex; }
  .site-menu { display: none; }
  .site-header.nav-open .site-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: var(--space-4) var(--gut) var(--space-5);
  }
  .site-header.nav-open .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .site-header.nav-open .site-nav-link {
    padding: var(--space-2) 0;
    font-size: 1.05rem;
  }
  .site-header.nav-open .site-head-cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin: 0;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
  }
  .site-header.nav-open .nav-logout-form { display: block; }
  .site-header.nav-open .site-head-cta .btn,
  .site-header.nav-open .nav-logout-btn { width: 100%; }
}

/* Mobile polish: breathing room in the header, tighter section rhythm, smaller
   band padding, and long words (emails/URLs) always wrap instead of overflow. */
body { overflow-wrap: break-word; }
img, svg, table, pre { max-width: 100%; }

@media (max-width: 640px) {
  .site-header-inner { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .section-shell { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .community-band { padding: var(--space-5); }
}

/* Logout posts a CSRF form; its submit button must read as a nav link. */
.nav-logout-form {
  margin: 0;
  display: inline;
}

.nav-logout-btn {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
}

.site-footer {
  background: var(--color-text);
  color: var(--color-on-dark-copy);
  border-top: 4px solid var(--color-primary);
  margin-top: var(--space-8);
}

.site-footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-6) var(--gut);
}

.site-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.8rem;
  color: var(--color-on-dark-faint);
}

.site-footer-link {
  font-weight: var(--font-weight-medium);
  color: var(--color-on-dark-link);
}

.site-footer-link:hover {
  color: var(--color-text-inverse);
}

/* "Browse by city" internal-linking row (SEO-2) — same muted/link color
   pairing as .site-footer-row, just wrapped onto its own line above the
   disclaimer so the 5 metro links read as a distinct nav, not copy. */
.site-footer-cities {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-size: 0.8rem;
}

.site-footer-cities-label {
  color: var(--color-on-dark-faint);
  font-weight: var(--font-weight-medium);
}

.site-footer-disclaimer {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-on-dark-border);
  font-size: 0.78rem;
  color: var(--color-on-dark-faint);
  max-width: 70ch;
}

.hero {
  max-width: 42rem;
  margin: 0 auto var(--space-7);
  text-align: center;
}

.hero .eyebrow {
  margin-bottom: var(--space-3);
  justify-content: center;
}

.hero h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-4);
}

.hero-lede {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  margin: 0;
}

/* ---- Home page: hero with search + stats + lone-star art ---- */

.home-hero {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 80%);
  border-bottom: 1px solid var(--color-border-strong);
  margin: calc(var(--space-6) * -1) calc(var(--gut) * -1) var(--space-8);
  padding: 0 var(--gut);
}

.home-hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-8);
  align-items: center;
  padding: 88px 0 78px;
}

.home-hero-title {
  margin-top: var(--space-4);
  font-size: clamp(2.8rem, 5.2vw, 4.6rem);
  font-weight: var(--font-weight-heavy);
  letter-spacing: -0.03em;
  line-height: 1;
}

.home-hero-title em {
  font-style: normal;
  color: var(--color-primary);
}

.home-hero-lede {
  color: var(--color-text-muted);
  font-size: 1.16rem;
  max-width: 40ch;
  margin-top: var(--space-5);
}

.home-search {
  margin-top: var(--space-6);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: 6px;
  max-width: 680px;
  box-shadow: var(--shadow-sm);
}

.home-search-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px var(--space-4);
}

.home-search-field + .home-search-field {
  border-left: 1px solid var(--color-border);
}

.home-search-field label {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-weight: var(--font-weight-medium);
}

.home-search-field select {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  outline: none;
  width: 100%;
}

.home-search-submit {
  justify-content: center;
}

.home-stats {
  margin-top: var(--space-7);
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.home-stat b {
  display: block;
  font-size: 2.1rem;
  font-weight: var(--font-weight-heavy);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.home-stat span {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  margin-top: 6px;
  display: block;
}

.home-hero-art {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  max-width: 460px;
  justify-self: end;
  width: 100%;
}

.home-hero-disc {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-bg) 0%, var(--color-border-strong) 100%);
  border: 1px solid var(--color-border-strong);
}

.home-hero-art svg.home-hero-star {
  width: 52%;
  height: 52%;
  color: var(--color-primary);
  position: relative;
  filter: drop-shadow(var(--shadow-accent));
}

.home-hero-cap {
  position: absolute;
  bottom: 8%;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-weight: var(--font-weight-medium);
}

.home-hero-chip {
  position: absolute;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-sm);
}

.home-hero-chip-a { top: 11%; right: -4%; }
.home-hero-chip-b { bottom: 20%; left: -6%; }

.home-hero-chip-mark {
  color: var(--color-star);
  font-weight: var(--font-weight-bold);
}

@media (max-width: 900px) {
  .home-hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .home-hero-art { display: none; }
  .home-stats { justify-content: center; text-align: center; }
  .home-search { grid-template-columns: 1fr; }
  .home-search-field + .home-search-field { border-left: none; border-top: 1px solid var(--color-border); }
}

/* ---- Home page: generic section shell reused by trades / how-it-works /
   preferred contractors / community band ---- */

.section-shell {
  padding: 78px 0;
  border-bottom: 1px solid var(--color-border);
}

.section-shell-paper {
  background: var(--color-bg);
  margin-left: calc(var(--gut) * -1);
  margin-right: calc(var(--gut) * -1);
  padding-left: var(--gut);
  padding-right: var(--gut);
}

.section-shell-flush {
  border-bottom: none;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
  flex-wrap: wrap;
}

.section-head h2 {
  margin-top: var(--space-3);
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
}

.section-head p {
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  max-width: 48ch;
}

.trades-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.trade-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.trade-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  color: var(--color-text);
}

.trade-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  flex: none;
}

.trade-card-icon svg {
  width: 23px;
  height: 23px;
}

/* Wraps the b/span text pair next to .trade-card-icon. A flex child's
   default min-width is auto (its content's min-content), which — combined
   with the icon's fixed width — set an ~192px floor on .trade-card that
   blocked the grid track from ever shrinking below it, overflowing narrow
   viewports. min-width: 0 lets it shrink so the trade name wraps instead. */
.trade-card-body {
  min-width: 0;
}

.trade-card b {
  font-size: 0.99rem;
  display: block;
  font-weight: var(--font-weight-medium);
}

.trade-card span {
  font-size: 0.75rem;
  color: var(--color-text-faint);
}

@media (max-width: 900px) {
  .trades-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below ~640px two side-by-side columns leave only ~18px for the label next
   to the fixed-width icon — not enough room for the longest category names
   ("Countertops & Stone", "Concrete & Foundation") to wrap on word
   boundaries, so overflow-wrap: break-word (app.css line ~495) starts
   splitting mid-word. Stacking the icon above the label reclaims that width
   for text instead, so it wraps normally. */
@media (max-width: 640px) {
  .trade-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
  }
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.step {
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-text);
}

.step-num {
  font-size: 2rem;
  font-weight: var(--font-weight-heavy);
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.03em;
}

.step h3 {
  font-size: 1.26rem;
  margin: var(--space-3) 0 var(--space-2);
  font-weight: var(--font-weight-bold);
}

.step p {
  color: var(--color-text-muted);
  font-size: 0.96rem;
}

@media (max-width: 820px) {
  .steps-grid { grid-template-columns: 1fr; }
}

.home-vgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .home-vgrid { grid-template-columns: 1fr; }
}

.home-empty {
  color: var(--color-text-muted);
}

.community-band {
  background: var(--color-text);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.community-band-star {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 230px;
  height: 230px;
  color: var(--color-accent-tint-on-dark);
}

.community-band h2 {
  font-size: 1.9rem;
  position: relative;
  color: var(--color-text-inverse);
}

.community-band p {
  color: var(--color-on-dark-band);
  margin-top: var(--space-2);
  position: relative;
  max-width: 48ch;
}

.community-band-cta {
  position: relative;
  flex-shrink: 0;
}

.community-band-soon {
  position: relative;
  color: var(--color-on-dark-faint);
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
}

.cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-5);
}

.cta-card {
  display: block;
  color: var(--color-text);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.cta-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}

.cta-card h2 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-2);
}

.cta-card p {
  color: var(--color-text-muted);
  margin: 0;
}

.cta-card-disabled {
  cursor: default;
  opacity: 0.6;
}

/* Vendor directory (app/views/public/directory.php + partials/{filters,
   vendor_card,badges,pagination}.php) — businesslike listing grid, not a
   social feed. */

.directory-header {
  margin-bottom: var(--space-6);
}

.directory-header h1 {
  margin-top: var(--space-3);
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  line-height: var(--line-height-tight);
}

.directory-subhead {
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
  max-width: 60ch;
}

/* Filter bar — same bordered-surface, divided-field language as the homepage
   hero search (.home-search/.home-search-field), extended with a row of
   pill "chip" toggles for the Verified/Preferred quick filters and an Apply
   button. Fields stay real <select>/<input> elements — this only restyles
   their container; app/assets/js/directory.js still owns the auto-submit
   behavior via the unchanged data-directory-filters attribute. */
.directory-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.directory-filter-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-4);
  border-left: 1px solid var(--color-border);
  justify-content: center;
}

.directory-filter-field:first-child {
  border-left: none;
}

.directory-filter-field .form-label {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-weight: var(--font-weight-medium);
  margin: 0;
}

.directory-filter-field .form-input {
  border: none;
  background: transparent;
  padding: var(--space-1) 0 0;
  font-size: 0.98rem;
  font-weight: var(--font-weight-medium);
}

.directory-filter-field .form-input:focus {
  outline: none;
}

.directory-filter-field-keyword {
  flex: 1 1 12rem;
  min-width: 12rem;
}

.directory-filter-chips {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.directory-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.directory-filter-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.directory-filter-chip:has(input:checked) {
  border-color: transparent;
}

.directory-filter-chip-verified:has(input:checked) {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.directory-filter-chip-preferred:has(input:checked) {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.directory-filter-submit {
  justify-content: center;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  border-left: none;
}

.directory-result-count {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-4);
}

@media (max-width: 900px) {
  .directory-filters { flex-direction: column; }
  .directory-filter-field { border-left: none; border-top: 1px solid var(--color-border); }
  .directory-filter-field:first-child { border-top: none; }
  .directory-filter-chips { flex-wrap: wrap; }
  .directory-filter-submit { justify-content: stretch; }
  .directory-filter-submit .btn { width: 100%; }
}

.directory-empty {
  text-align: center;
  color: var(--color-text-muted);
}

/* Breadcrumb nav (city x trade landing page, app/views/public/
   city_trade.php) — plain-text trail matching the BreadcrumbList JSON-LD
   (city_trade_breadcrumb_schema(), app/seo.php) so the visible trail and the
   schema can never drift apart. Wraps on narrow viewports instead of
   overflowing horizontally. */
.breadcrumb-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.breadcrumb-nav a {
  color: var(--color-text-muted);
}

.breadcrumb-nav a:hover {
  color: var(--color-primary);
}

.breadcrumb-current {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.breadcrumb-sep {
  color: var(--color-border-strong);
}

/* City page (app/views/public/city.php) — "Why hire local" reuses the
   icon+title+text .benefit item built for the vendor-signup pitch
   (.benefit-list), just arranged in a 3-column grid instead of a single
   stacked column. */
.city-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

@media (max-width: 820px) {
  .city-why-grid { grid-template-columns: 1fr; }
}

/* City page FAQ — a stacked, divided Q&A list. Deliberately not an
   accordion: every answer stays visible and indexable, matching the
   FAQPage JSON-LD emitted alongside it (faq_schema(), app/seo.php). */
.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
}

.faq-item:first-child {
  border-top: none;
  padding-top: 0;
}

.faq-question {
  font-size: 1.02rem;
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-2);
}

.faq-answer {
  color: var(--color-text-muted);
  margin: 0;
  max-width: 68ch;
}

/* Directory page (app/views/public/directory.php) — real-count trust strip
   under the H1/value line, and a slim CTA banner pointing to /submit. */
.directory-trust-strip {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: var(--space-3) 0 0;
}

.directory-trust-strip strong {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.directory-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}

.directory-cta-banner p {
  margin: 0;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.directory-cta-banner .btn {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .directory-cta-banner { flex-direction: column; align-items: stretch; text-align: center; }
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.vendor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-width: 1.5px;
  border-radius: var(--radius-lg);
  transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

.vendor-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--color-text);
}

.vendor-card--featured {
  border-color: var(--color-primary);
}

.vendor-card--featured::before {
  content: "";
  position: absolute;
  top: -1.5px;
  left: -1.5px;
  right: -1.5px;
  height: 4px;
  background: var(--color-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.vendor-card-featured-tag {
  position: absolute;
  top: 16px;
  right: 18px;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
}

.vendor-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.vendor-card-logo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

.vendor-card-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-text));
  border: none;
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
  font-size: 1.2rem;
}

.vendor-card-heading {
  flex: 1;
  min-width: 0;
}

.vendor-card-name {
  font-size: 1.16rem;
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.vendor-card-trade {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 2px 0 0;
}

.vendor-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.badge-featured {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.vendor-card-description {
  color: var(--color-text-muted);
  font-size: 0.93rem;
  margin: 0;
  flex: 1;
}

.vendor-card-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.vendor-card-footer {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.vendor-card-footer .btn {
  flex: 1;
  justify-content: center;
}

/* Vendor showcase profile (app/views/public/vendor_profile.php +
   partials/{status_badge,badges}.php) — single-vendor page reached from a
   directory card's "View profile" link. Two-column layout: scrolling main
   content (header/about/services/gallery) + a sticky contact card, matching
   the mockup's warm, businesslike showcase treatment. */

.vendor-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--space-6);
  align-items: start;
}

.vendor-profile-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.vendor-profile-aside {
  /* Sticks below the sticky site header (72px tall) rather than under it. */
  position: sticky;
  top: calc(72px + var(--space-5));
}

@media (max-width: 900px) {
  .vendor-profile-layout { grid-template-columns: 1fr; }
  .vendor-profile-aside { position: static; }
}

.vendor-profile-header {
  margin-bottom: 0;
}

.vendor-profile-top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.vendor-profile-logo {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

.vendor-profile-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-text));
  border: none;
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl);
}

.vendor-profile-heading {
  flex: 1;
  min-width: 12rem;
}

.vendor-profile-name {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-2);
}

/* Wraps status_badge.php (lifecycle) + badges.php (Featured/Premium/
   Preferred/Verified) in one visual row; badges.php contributes its own
   nested .vendor-badges flex row, which flows correctly inside this one. */
.vendor-profile-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.vendor-profile-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.vendor-profile-cta {
  flex-shrink: 0;
}

.vendor-profile-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--space-4) 0 0;
}

.vendor-profile-section {
  margin-bottom: 0;
}

.vendor-profile-section h2 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-3);
}

.vendor-profile-description {
  color: var(--color-text);
  margin: 0;
}

/* Placeholder About copy for a vendor with no description yet — quieter
   than a vendor's own written blurb so it never reads as authored copy. */
.vendor-profile-description-placeholder {
  color: var(--color-text-muted);
}

.vendor-profile-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.vendor-profile-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}

.vendor-profile-subheading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-2);
}

/* Specialty tag chips (app/tags.php) — a vendor's admin-curated specialty
   labels (e.g. "Cabinet Painter"), rendered on directory/home cards
   (.vendor-card) and the public profile's Services section. Deliberately
   neutral/outline and quieter than .vendor-profile-chip (used for broad
   categories) and the colored Verified/Preferred/Featured .badge-* status
   badges, so a visitor reads them as finer-grained labels, not status. */
.tag-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

.vendor-profile-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
}

.vendor-profile-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.vendor-profile-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  color: var(--color-text-faint);
}

.vendor-profile-photo-placeholder svg {
  width: 28px;
  height: 28px;
}

.vendor-profile-gallery-empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: var(--space-3) 0 0;
}

.vendor-profile-contact-card h2 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-3);
}

.vendor-profile-contact-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.vendor-profile-no-contact {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.vendor-profile-cta-secondary {
  display: flex;
  width: 100%;
  justify-content: center;
}

.vendor-profile-trust-note {
  font-size: 0.8rem;
  color: var(--color-text-faint);
  margin: var(--space-4) 0 0;
}

.vendor-not-found {
  max-width: 32rem;
  margin: var(--space-7) auto;
  text-align: center;
}

/* Vendor portal (app/views/vendor/{dashboard,listing}.php +
   partials/vendor_nav.php) — renders inside the shared public shell; no
   dedicated portal layout exists yet. */

.vendor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
}

.vendor-nav-link {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.vendor-nav-link:hover {
  color: var(--color-primary);
}

.vendor-nav-link.is-active {
  color: var(--color-primary);
}

.vendor-listing-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
}

/* Photos page (app/views/vendor/photos.php) — reuses .vendor-profile-gallery/
   .vendor-profile-photo from the public profile for the thumbnail grid itself;
   this adds the per-photo action-button row underneath each thumbnail. */

.vendor-photo-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.vendor-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.vendor-photo-actions form {
  margin: 0;
}

/* Documents page (app/views/vendor/documents.php) — a plain list rather than
   a thumbnail grid (documents aren't visual). */

.vendor-document-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.vendor-document-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.vendor-document-row form {
  margin: 0;
}

.vendor-document-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}

.vendor-document-kind {
  font-weight: var(--font-weight-medium);
}

.vendor-document-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.pagination-link {
  display: inline-flex;
  align-items: center;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.pagination-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination-status {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.pagination-link-disabled {
  pointer-events: none;
  color: var(--color-text-faint);
  border-color: var(--color-border);
  opacity: 0.6;
}

.pagination-link-disabled:hover {
  border-color: var(--color-border);
  color: var(--color-text-faint);
}

/* Shared form layout helper — groups two fields onto one row on desktop,
   stacks to one column on mobile. Used by the project-submit form
   (app/views/public/project_submit.php) so a long intake form reads as a
   handful of short rows rather than one tall vertical stack. Each field
   stays a normal .form-group inside, so vertical rhythm between rows is
   unchanged (still driven by .form-group's own margin-bottom). */
.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--space-4);
}

@media (max-width: 820px) {
  .form-row { grid-template-columns: 1fr; }
}

/* Submit-a-project page (app/views/public/project_submit.php) — two-column
   layout: the intake form + a sticky sidebar card explaining how the
   process works and what to expect. Same 1fr/20rem split and 900px
   breakpoint as .vendor-profile-layout, for visual consistency between the
   site's two-column pages. */
.submit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--space-6);
  align-items: start;
}

.submit-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: sticky;
  top: calc(72px + var(--space-5));
}

.submit-aside h2 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-4);
}

@media (max-width: 900px) {
  .submit-layout { grid-template-columns: 1fr; }
  .submit-aside { position: static; }
}

/* Compact vertical numbered-step list — a smaller, sidebar-friendly cousin
   of the homepage's 3-column .steps-grid. Reused by the project-submit
   sidebar's "How it works" and the vendor-signup pitch's "How listing
   works". */
.steps-inline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.steps-inline li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.steps-inline-num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-weight: var(--font-weight-bold);
  font-size: 0.78rem;
  display: grid;
  place-items: center;
}

.steps-inline h3 {
  font-size: 0.92rem;
  font-weight: var(--font-weight-bold);
  margin: 0 0 2px;
}

.steps-inline p {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

/* Reassurance bullet list (checkmark + line of copy) — the project-submit
   sidebar's "What to expect" list. Same green check as
   .form-success-heading/.badge-success. */
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.88rem;
  color: var(--color-text);
}

.check-list svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  color: var(--color-success);
}

/* Vendor-signup landing page (app/views/auth/signup.php) — a two-column
   sell page: the pitch (benefits, how-listing-works, membership teaser) on
   the left, the actual signup form in a sticky card on the right. */
.signup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-8);
  align-items: start;
}

.signup-pitch {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.signup-pitch h1 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin: var(--space-3) 0 var(--space-3);
}

.signup-pitch-lede {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  max-width: 54ch;
  margin: 0;
}

.signup-pitch h2 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-4);
}

.signup-form-card {
  position: sticky;
  top: calc(72px + var(--space-5));
}

.signup-form-card h2 {
  margin: 0 0 var(--space-4);
}

@media (max-width: 820px) {
  .signup-layout { grid-template-columns: 1fr; }
  .signup-form-card { position: static; }
}

/* Benefit list (icon + title + one-liner) — the signup pitch's "why list
   here" points. */
.benefit-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.benefit-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-primary);
  display: grid;
  place-items: center;
}

.benefit-icon svg {
  width: 22px;
  height: 22px;
}

.benefit h3 {
  font-size: 0.98rem;
  font-weight: var(--font-weight-bold);
  margin: 0 0 2px;
}

.benefit p {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin: 0;
}

/* Membership-tier teaser — a compact one-line-each list reusing the same
   Verified/Preferred/Premium .badge-* colors as badges.php, so a prospective
   vendor sees the same visual vocabulary here as on a live vendor profile. */
.tier-teaser {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.tier-teaser li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.tier-teaser li:first-child {
  border-top: none;
  padding-top: 0;
}

.tier-teaser-name {
  flex: none;
  min-width: 5.6rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  font-size: 0.85rem;
}