/* =====================================================================
   Invertista — application of the Me & You design system
   ---------------------------------------------------------------------
   Requires meandyou-tokens.css first, then Bootstrap (for grid + JS
   components only). This file:
     1. exposes the Me & You primitives we use (.btn--primary, eyebrow,
        pill, icon-tile, hero, section),
     2. defines the bespoke marketplace components (buyer-card, chips,
        category tiles, steps) and the global chrome (header/nav/footer),
     3. carries a Bootstrap restyle bridge so the still-Bootstrap inner
        pages stay on-palette without being individually rewritten.
   The whole body is wrapped in .product[data-product="invertista"], so
   --theme-accent resolves to Invertista's teal everywhere.
   ===================================================================== */

/* ---- Content links ------------------------------------------------- */
a { color: var(--accent-invertista-deep); text-decoration-color: color-mix(in srgb, var(--accent-invertista) 35%, transparent); }
a:hover { color: var(--accent-invertista); }

/* ---- Layout: section + container ---------------------------------- */
/* Narrow prose container (privacy/terms/article body). Works standalone
   or nested inside Bootstrap's .container. */
.container--sm { width: 100%; max-width: var(--container-sm); margin-inline: auto; padding-inline: var(--container-pad); }
.section { padding-block: var(--sp-24); }
.section--soft { background: var(--bg-soft); }
.section--tint { background: var(--bg-tint); }
@media (max-width: 720px) { .section { padding-block: var(--sp-12); } }

/* ---- Me & You buttons (skins over the Bootstrap .btn base) --------- */
.btn--primary {
  background: var(--theme-accent, var(--accent-invertista));
  color: #fff;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius);
  transition: transform var(--dur-transform) var(--ease),
    background var(--dur-color) var(--ease), box-shadow var(--dur-color) var(--ease);
}
.btn--primary:hover { background: var(--accent-invertista-deep); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius);
  transition: transform var(--dur-transform) var(--ease),
    border-color var(--dur-color) var(--ease), color var(--dur-color) var(--ease);
}
.btn--ghost:hover { border-color: var(--theme-accent); color: var(--theme-accent); transform: translateY(-1px); }
.btn--ghost:active { transform: translateY(0); }

.btn--lg { padding: 0.85rem 1.5rem; font-size: var(--text-base); }

/* ---- Eyebrow, pill, badge, icon-tile ------------------------------ */
.section-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--theme-accent, var(--accent-invertista));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
  background: var(--bg-tint);
  border: 1px solid var(--rule);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
}
.badge-feature {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient);
  color: #fff;
}
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  font-size: 1.5rem;
  line-height: 1;
  background: color-mix(in srgb, var(--theme-accent, var(--accent-invertista)) 12%, transparent);
  color: var(--theme-accent, var(--accent-invertista));
}

/* =====================================================================
   GLOBAL CHROME — header, nav, footer
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: 64px;
}

/* Brand wordmark — a teal "swap" mark (the inversion) + the name. */
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.brand:hover { color: inherit; }
.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-invertista);
  color: #fff;
  font-size: 1.15rem;
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-sm);
}
.brand__text {
  font-size: 1.3rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand__text b { color: var(--accent-invertista-deep); font-weight: var(--fw-extrabold); }

/* Primary nav */
.site-nav { display: flex; align-items: center; gap: var(--sp-1); flex: 1 1 auto; }
.site-nav__list { display: flex; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-color) var(--ease), background var(--dur-color) var(--ease);
}
.site-nav__link:hover { color: var(--accent-invertista-deep); background: var(--bg-tint); }
.site-nav__link.is-active { color: var(--accent-invertista-deep); }
.site-nav__spacer { flex: 1 1 auto; }
.site-nav__actions { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }

/* Inbox unread badge */
.nav-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: var(--accent-invertista);
  border-radius: var(--radius-pill);
}

/* Admin submenu via native <details> */
.nav-sub { position: relative; }
.nav-sub > summary { list-style: none; cursor: pointer; }
.nav-sub > summary::-webkit-details-marker { display: none; }
.nav-sub > summary::after { content: "▾"; margin-left: 4px; font-size: 0.8em; color: var(--ink-mute); }
.nav-sub__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  list-style: none;
  margin: 0;
  z-index: 1040;
}
.nav-sub__menu a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  text-decoration: none;
}
.nav-sub__menu a:hover { background: var(--bg-tint); color: var(--accent-invertista-deep); }

/* Mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle .bar { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-4) var(--container-pad);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    transform: translateY(-120%);
    transition: transform 220ms var(--ease);
  }
  .site-header.is-open .site-nav { transform: translateY(0); }
  .site-nav__list { flex-direction: column; align-items: stretch; width: 100%; }
  .site-nav__link { padding: 0.65rem 0.5rem; }
  .site-nav__spacer { display: none; }
  .site-nav__actions { flex-direction: column; align-items: stretch; width: 100%; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--rule); }
  .nav-sub__menu { position: static; box-shadow: none; border: none; padding-left: var(--sp-4); }
}

/* Footer */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--rule); padding-block: var(--sp-16) var(--sp-8); margin-top: var(--sp-24); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-8); }
@media (max-width: 720px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h5 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-bottom: var(--sp-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer a { color: var(--ink-soft); text-decoration: none; font-size: var(--text-sm); }
.site-footer a:hover { color: var(--accent-invertista-deep); }
.site-footer__tagline { color: var(--ink-soft); max-width: 28ch; margin: var(--sp-3) 0 0; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: center;
  margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--rule);
  font-size: var(--text-xs); color: var(--ink-mute);
}
.site-footer__byline { font-size: var(--text-xs); color: var(--ink-mute); }
.site-footer__byline b { color: var(--ink-soft); }

/* =====================================================================
   HERO — cinematic navy atmosphere
   ===================================================================== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: var(--sp-24) var(--sp-16);
  color: #fff;
  background: radial-gradient(125% 125% at 50% -15%, #27316f 0%, #18204d 46%, #0e1538 100%);
}
/* dotted starfield, faded toward the bottom */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1.4px, transparent 1.5px);
  background-size: 26px 26px; opacity: 0.55;
  -webkit-mask-image: radial-gradient(120% 95% at 50% 0%, #000 38%, transparent 85%);
          mask-image: radial-gradient(120% 95% at 50% 0%, #000 38%, transparent 85%);
}
/* slowly drifting teal + cyan glow blobs */
.hero__glow {
  position: absolute; inset: -25% -10% auto -10%; height: 95%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 56% at 18% 28%, color-mix(in srgb, var(--accent-invertista) 60%, transparent) 0%, transparent 60%),
    radial-gradient(46% 52% at 82% 20%, color-mix(in srgb, var(--accent) 48%, transparent) 0%, transparent 60%);
  filter: blur(42px); opacity: 0.7;
  animation: heroDrift 16s var(--ease) infinite alternate;
}
@keyframes heroDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}
.hero__inner { position: relative; z-index: 1; max-width: 48rem; }
.hero .section-eyebrow { color: #9fb3e6; }
.hero__title {
  font-size: var(--text-hero); font-weight: var(--fw-extrabold);
  letter-spacing: -0.025em; line-height: var(--lh-tight); text-wrap: balance; color: #fff;
  margin: 0 0 var(--sp-4);
}
.hero__title b, .hero__title-accent {
  background: linear-gradient(110deg, #5fe6e3 0%, #62bae0 55%, #8aa8ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: inherit;
}
.hero__sub { font-size: var(--text-lg); color: #c8d1e0; max-width: 42ch; margin: 0 0 var(--sp-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* ghost button legible on the dark hero */
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.04); }
.hero .btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.12); }
@media (prefers-reduced-motion: reduce) { .hero__glow { animation: none; } }

/* ---- Stats band --------------------------------------------------- */
.stats-band { background: var(--bg-soft); border-bottom: 1px solid var(--rule); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); padding-block: var(--sp-8); }
@media (max-width: 560px) { .stats-grid { grid-template-columns: 1fr; gap: var(--sp-4); } }
.stat { text-align: center; }
.stat__num { font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: var(--fw-extrabold); color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat__num b { color: var(--accent-invertista-deep); font-weight: inherit; }
.stat__label { font-size: var(--text-sm); color: var(--ink-mute); margin-top: 4px; }

/* =====================================================================
   MARKET DASHBOARD — "O mercado da procura" (lib-free CSS/SVG charts)
   ===================================================================== */
.stats-grid--wide { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .stats-grid--wide { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stats-grid--wide { grid-template-columns: repeat(2, 1fr); } }

.insight-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 820px) { .insight-grid { grid-template-columns: 1fr; } }
.panel__h2 { font-size: var(--text-xl); margin: 0 0 var(--sp-5); }

/* Region demand — intensity bars that click through to a filtered Browse */
.heat-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.heat-row { display: grid; grid-template-columns: 9rem 1fr 2rem; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; }
.heat-name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat-track { height: 14px; border-radius: var(--radius-pill); background: var(--bg-tint); overflow: hidden; }
.heat-fill { display: block; height: 100%; border-radius: var(--radius-pill); transform-origin: left;
  background: linear-gradient(90deg, var(--accent-invertista-deep), var(--accent-invertista)); animation: growX 0.9s var(--ease) both; }
.heat-count { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--accent-invertista-deep); font-variant-numeric: tabular-nums; text-align: right; }
.heat-row:hover .heat-name { color: var(--accent-invertista-deep); }
@media (max-width: 560px) { .heat-row { grid-template-columns: 6.5rem 1fr 1.6rem; } }

/* Typology donut (conic-gradient) + legend */
.donut-wrap { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.donut { position: relative; width: 160px; height: 160px; border-radius: 50%; flex: none; }
.donut__hole { position: absolute; inset: 26px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; text-align: center; box-shadow: inset 0 0 0 1px var(--rule); }
.donut__big { font-size: var(--text-2xl); font-weight: var(--fw-extrabold); color: var(--ink); line-height: 1; }
.donut__sub { font-size: var(--text-xs); color: var(--ink-mute); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 9rem; flex: 1; }
.legend__row { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; font-size: var(--text-sm); }
.legend__dot { width: 12px; height: 12px; border-radius: 3px; }
.legend__label { color: var(--ink-soft); }
.legend__val { font-weight: var(--fw-bold); color: var(--ink); font-variant-numeric: tabular-nums; }

/* Horizontal bands (budget / financing) */
.band-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.band-row { display: grid; grid-template-columns: 8rem 1fr 2rem; align-items: center; gap: var(--sp-3); }
.band-label { font-size: var(--text-sm); color: var(--ink-soft); white-space: nowrap; }
.band-track { height: 12px; border-radius: var(--radius-pill); background: var(--bg-tint); overflow: hidden; }
.band-fill { display: block; height: 100%; border-radius: var(--radius-pill); transform-origin: left; background: var(--ink-soft); opacity: 0.45; animation: growX 0.9s var(--ease) both; }
.band-fill--accent { background: linear-gradient(90deg, var(--accent-invertista-deep), var(--accent-invertista)); opacity: 1; }
.band-count { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .band-row { grid-template-columns: 6.5rem 1fr 1.6rem; } }

@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .heat-fill, .band-fill { animation: none; } }

/* Closing CTA band */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap;
  margin-top: var(--sp-8); padding: var(--sp-8); border-radius: var(--radius-lg);
  background: radial-gradient(120% 140% at 0% 0%, var(--accent-invertista-soft), var(--bg) 70%);
  border: 1px solid color-mix(in srgb, var(--accent-invertista) 25%, transparent); }
.cta-band h2 { font-size: var(--text-2xl); margin: 0 0 var(--sp-2); }
.cta-band p { color: var(--ink-soft); margin: 0; max-width: 48ch; }

/* =====================================================================
   SELLER MATCHING — "Tenho um imóvel" search + scored match cards
   ===================================================================== */
.sell-form { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-end; margin-top: var(--sp-8);
  padding: var(--sp-6); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.sell-form__field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 9rem; min-width: 8rem; }
.sell-form__field label { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.05em; }
.sell-form__go { flex: 0 0 auto; }
.sell-examples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.sell-examples__label { font-size: var(--text-sm); color: var(--ink-mute); font-weight: var(--fw-semibold); }

/* Natural-language describe box — accent-tinted to read as the "smart" path */
.nl-form { margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6); border-radius: var(--radius-lg);
  background: radial-gradient(120% 140% at 0% 0%, var(--accent-invertista-soft), var(--bg) 78%);
  border: 1px solid color-mix(in srgb, var(--accent-invertista) 28%, transparent); }
.nl-form__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--accent-invertista-deep); margin-bottom: var(--sp-3); }
.nl-form__spark { color: var(--accent-invertista); }
.nl-form__row { display: flex; gap: var(--sp-3); align-items: stretch; }
.nl-form__row .form-control { flex: 1; min-width: 0; }
.nl-form__row .btn { flex: none; }
.nl-form__hint { font-size: var(--text-xs); color: var(--ink-mute); margin: var(--sp-3) 0 0; }
.nl-form__error { font-size: var(--text-sm); color: var(--ink-soft); margin: var(--sp-3) 0 0; }
@media (max-width: 560px) { .nl-form__row { flex-direction: column; } .nl-form__row .btn { width: 100%; } }
@media (max-width: 560px) { .sell-form__field { flex-basis: 100%; } .sell-form__go { width: 100%; } }

.match-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.match-card { display: flex; align-items: center; gap: var(--sp-5); background: var(--bg); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-6); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-color) var(--ease), box-shadow var(--dur-color) var(--ease), border-color var(--dur-color) var(--ease); }
.match-card:hover { transform: translateY(-2px); border-color: var(--accent-invertista);
  box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--accent-invertista) 50%, transparent), var(--shadow); }
.match-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.match-card__budget { font-size: var(--text-2xl); font-weight: var(--fw-extrabold); color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.match-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.match-card__cta { flex: none; }
@media (max-width: 640px) { .match-card { flex-wrap: wrap; } .match-card__cta { flex-basis: 100%; } .match-card__cta .btn { width: 100%; } }

/* Conic-gradient match score ring */
.match-ring { --pct: 0; flex: none; position: relative; width: 76px; height: 76px; border-radius: 50%;
  background: conic-gradient(var(--accent-invertista) calc(var(--pct) * 1%), var(--bg-tint) 0); }
.match-ring__hole { position: absolute; inset: 8px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; text-align: center; box-shadow: inset 0 0 0 1px var(--rule); }
.match-ring__pct { font-size: var(--text-base); font-weight: var(--fw-extrabold); color: var(--accent-invertista-deep); line-height: 1; }
.match-ring__cap { font-size: 9px; font-weight: var(--fw-bold); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; }

/* Match banner on the buyer Details page (arrived from /vender) */
.match-banner { margin-bottom: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg);
  background: var(--accent-invertista-soft); border: 1px solid color-mix(in srgb, var(--accent-invertista) 30%, transparent); }
.match-banner__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.match-banner__pct { flex: none; font-size: var(--text-base); font-weight: var(--fw-extrabold); color: #fff; background: var(--accent-invertista); border-radius: var(--radius-pill); padding: 2px 10px; font-variant-numeric: tabular-nums; }
.match-banner__title { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--accent-invertista-deep); }

/* Portugal demand choropleth (/mercado) */
.pt-map-wrap { display: flex; gap: var(--sp-8); align-items: center; flex-wrap: wrap; margin-top: var(--sp-2); }
.pt-map { height: 440px; max-width: 100%; flex: none; }
.pt-district { stroke: var(--bg); stroke-width: 70; transition: filter var(--dur-color) var(--ease); }
.pt-district:hover { filter: brightness(0.88); }
.map-side { flex: 1; min-width: 14rem; }
.map-side__lead { color: var(--ink-soft); margin: 0 0 var(--sp-4); max-width: 38ch; }
.map-scale { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-xs); color: var(--ink-mute); }
.map-scale__bar { flex: 1; max-width: 12rem; height: 10px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--bg-tint), var(--accent-invertista)); }
@media (max-width: 720px) { .pt-map { height: 360px; } .pt-map-wrap { justify-content: center; } }

/* ---- Scroll reveal ------------------------------------------------ */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } }

/* Lucide-style category icons inside the tinted tile */
.icon-tile svg { width: 26px; height: 26px; stroke-width: 1.75; }

/* Inline search bar (search-first, idealista-inverted) */
.search-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: end;
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--sp-4); box-shadow: var(--shadow); margin-top: var(--sp-8);
}
.search-bar .field-group { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; }
.search-bar label { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--ink-mute); }
.search-bar .my-field { width: 100%; }
.search-bar .btn { flex: 0 0 auto; }

/* Native field look (used by new markup; bridge also restyles .form-control) */
.my-field {
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink);
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.6rem 0.8rem; transition: border-color var(--dur-color) var(--ease), box-shadow var(--dur-color) var(--ease);
}
.my-field::placeholder { color: var(--ink-mute); }
.my-field:focus { outline: none; border-color: var(--accent-invertista); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-invertista) 18%, transparent); }

/* =====================================================================
   CATEGORY TILES — compradores de garagem / terreno / casas / apartamentos
   ===================================================================== */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 720px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-tile {
  display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start;
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--sp-6); text-decoration: none; color: var(--ink);
  transition: transform var(--dur-color) var(--ease), box-shadow var(--dur-color) var(--ease), border-color var(--dur-color) var(--ease);
}
.cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent-invertista); color: var(--ink); }
.cat-tile__name { font-weight: var(--fw-bold); font-size: var(--text-base); }
.cat-tile__hint { font-size: var(--text-sm); color: var(--ink-mute); }

/* =====================================================================
   BUYER CARD — the atom of the marketplace.
   Lead with the budget (the money), then category/zona, criteria.
   ===================================================================== */
.buyer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 960px) { .buyer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .buyer-grid { grid-template-columns: 1fr; } }

.buyer-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--sp-6); box-shadow: var(--shadow-sm); overflow: hidden; isolation: isolate;
  text-decoration: none; color: inherit; height: 100%;
  transition: transform var(--dur-color) var(--ease), box-shadow var(--dur-color) var(--ease), border-color var(--dur-color) var(--ease);
}
/* Gradient accent rail along the top — teal deepening to the signature accent. */
.buyer-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--accent-invertista-deep), var(--accent-invertista)); }
.buyer-card:hover { transform: translateY(-3px); border-color: var(--accent-invertista); color: inherit;
  box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--accent-invertista) 55%, transparent), var(--shadow); }
.buyer-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* Budget — the hero number of the card. */
.buyer-card__budget { display: flex; flex-direction: column; gap: 2px; }
.buyer-card__budget small { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.buyer-card__amount { font-size: var(--text-3xl); font-weight: var(--fw-extrabold); color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }

.buyer-card__want { font-size: var(--text-sm); color: var(--ink-soft); margin: 0; }
.buyer-card__want b { color: var(--accent-invertista-deep); font-weight: var(--fw-bold); }
.buyer-card__exclude { font-size: var(--text-xs); color: var(--ink-mute); margin: auto 0 0; display: flex; gap: 5px; }
.buyer-card__exclude::before { content: "⊘"; font-weight: var(--fw-bold); flex: none; }
.buyer-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--rule); }
.buyer-card__who { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.buyer-card__name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buyer-card__date { font-size: var(--text-xs); color: var(--ink-mute); }

/* Buyer avatar monogram — teal-tinted initial. */
.avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: var(--radius-pill); background: var(--accent-invertista-soft); color: var(--accent-invertista-deep);
  font-size: var(--text-sm); font-weight: var(--fw-bold); line-height: 1; }

/* Hover affordance — "Ver proposta →" that wakes up on hover. */
.buyer-card__cta { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--fw-bold);
  color: var(--ink-mute); transition: color var(--dur-color) var(--ease); }
.buyer-card__cta::after { content: "\2192"; transition: transform var(--dur-color) var(--ease); }
.buyer-card:hover .buyer-card__cta { color: var(--accent-invertista-deep); }
.buyer-card:hover .buyer-card__cta::after { transform: translateX(3px); }

/* Category / zona chips on a card */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--fw-semibold); padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); }
.tag--cat { background: var(--accent-invertista-soft); color: var(--accent-invertista-deep); }
.tag--zone { background: var(--bg-tint); color: var(--ink-soft); border: 1px solid var(--rule); }
.tag--zone .pin { width: 12px; height: 12px; color: var(--accent-invertista); flex: none; }

/* =====================================================================
   ARTICLE CARD — image-led editorial card (Home + Articles index)
   ===================================================================== */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 960px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .article-grid { grid-template-columns: 1fr; } }

.article-card { position: relative; display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit; height: 100%;
  transition: transform var(--dur-color) var(--ease), box-shadow var(--dur-color) var(--ease), border-color var(--dur-color) var(--ease); }
.article-card:hover { transform: translateY(-3px); border-color: var(--accent-invertista); color: inherit;
  box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--accent-invertista) 50%, transparent), var(--shadow); }

/* flex:none + absolute-fill img => the cover can never be compressed by the
   grid/flex stretch algorithm, and the image fills it regardless of how the
   cover's height resolves (guards against the collapsed/cut-to-a-sliver case). */
.article-card__cover { position: relative; flex: none; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-tint); }
.article-card__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-color) var(--ease); }
.article-card:hover .article-card__cover img { transform: scale(1.04); }
.article-card__cover.is-placeholder { display: grid; place-items: center;
  background: radial-gradient(120% 120% at 0% 0%, var(--accent-invertista-deep), var(--ink) 72%); }
.article-card__mark { font-size: 2.6rem; font-weight: var(--fw-extrabold); color: rgba(255,255,255,0.88); }
.article-card__cat { position: absolute; left: var(--sp-3); top: var(--sp-3);
  background: rgba(255,255,255,0.92); color: var(--accent-invertista-deep); }

.article-card__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); flex: 1; }
.article-card__title { font-size: var(--text-lg); line-height: 1.25; margin: 0; color: var(--ink); }
.article-card__summary { font-size: var(--text-sm); color: var(--ink-soft); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--rule); }
.article-card__by { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--text-xs); color: var(--ink-mute); }
.article-card__by > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Byline hierarchy: author gets weight + ink, date stays quiet */
.article-card__byline b { font-weight: var(--fw-semibold); color: var(--ink-soft); }
.article-card__byline time { color: var(--ink-mute); }
.article-card__cta { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs);
  font-weight: var(--fw-bold); color: var(--ink-mute); transition: color var(--dur-color) var(--ease); }
.article-card__cta::after { content: "\2192"; transition: transform var(--dur-color) var(--ease); }
.article-card:hover .article-card__cta { color: var(--accent-invertista-deep); }
.article-card:hover .article-card__cta::after { transform: translateX(3px); }
.avatar--sm { width: 22px; height: 22px; font-size: var(--text-xs); }
@media (prefers-reduced-motion: reduce) { .article-card:hover .article-card__cover img { transform: none; } }

/* Section header with a right-aligned vitality pill */
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.count-pill { flex: none; display: inline-flex; align-items: baseline; gap: 6px; margin-top: var(--sp-2);
  padding: 0.45rem 0.9rem; border-radius: var(--radius-pill); background: var(--accent-invertista-soft);
  color: var(--accent-invertista-deep); font-weight: var(--fw-extrabold); font-size: var(--text-lg);
  font-variant-numeric: tabular-nums; border: 1px solid color-mix(in srgb, var(--accent-invertista) 25%, transparent); }
.count-pill small { font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; }
.count-pill__dot { align-self: center; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--accent-invertista);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-invertista) 60%, transparent); animation: pulseDot 2s var(--ease) infinite; }
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-invertista) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .count-pill__dot { animation: none; } }

/* ---- Trust signals (financing / urgency / verified) -------------- */
.signals { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
/* Financing chip — cash/approved read positive (teal), credit stays neutral. */
.fin { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: var(--fw-semibold); padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); border: 1px solid transparent; }
.fin::before { content: "€"; font-weight: var(--fw-bold); }
.fin--cash     { background: var(--accent-invertista-soft); color: var(--accent-invertista-deep); border-color: color-mix(in srgb, var(--accent-invertista) 30%, transparent); }
.fin--approved { background: var(--accent-invertista-soft); color: var(--accent-invertista-deep); border-color: color-mix(in srgb, var(--accent-invertista) 30%, transparent); }
.fin--credit   { background: var(--bg-tint); color: var(--ink-mute); border-color: var(--rule); }
/* Urgent badge — solid accent so it stands out without using red. */
.badge-urgent { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.18rem 0.55rem; border-radius: var(--radius-pill); background: var(--accent-invertista); color: #fff; }
.badge-urgent::before { content: "\23F1"; /* ⏱ */ font-weight: 400; }
/* Verified-phone badge */
.verified-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--accent-invertista-deep); }
.verified-badge::before { content: "\2713"; /* ✓ */ display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; font-size: 10px; font-weight: var(--fw-bold); color: #fff; background: var(--accent-invertista); border-radius: var(--radius-pill); }

/* =====================================================================
   CRITERIA CHIPS — must-have (accent) vs exclude (muted, struck ⊘)
   ===================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); font-weight: var(--fw-medium);
  padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); border: 1px solid var(--rule);
}
.chip--accent { background: var(--accent-invertista-soft); color: var(--accent-invertista-deep); border-color: color-mix(in srgb, var(--accent-invertista) 30%, transparent); }
.chip--exclude { background: transparent; color: var(--ink-mute); border-color: var(--rule); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-mute) 50%, transparent); }
.chip--exclude::before { content: "⊘"; text-decoration: none; display: inline-block; font-weight: var(--fw-bold); }
/* Chips used as links (landing cross-links) */
a.chip { text-decoration: none; color: var(--ink-soft); transition: border-color var(--dur-color) var(--ease), color var(--dur-color) var(--ease); }
a.chip:hover { border-color: var(--accent-invertista); color: var(--accent-invertista-deep); }
a.chip.chip--accent { color: var(--accent-invertista-deep); }

/* Form section headings (e.g. publish form) — quiet dividers that group fields */
.form-section { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-mute); margin: var(--sp-6) 0 var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--rule); }
.form-section:first-of-type { margin-top: var(--sp-2); padding-top: 0; border-top: 0; }
.form-section__opt { font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0; color: var(--ink-mute); opacity: 0.7; }
/* Want vs. exclude labels mirror the card chips: accent for wants, muted ⊘ for exclusions (never red) */
.form-label--want { color: var(--accent-invertista-deep); }
.form-label--want::before { content: "✓ "; font-weight: var(--fw-bold); }
.form-label--exclude { color: var(--ink-mute); }
.form-label--exclude::before { content: "⊘ "; font-weight: var(--fw-bold); }

/* Block heading for the want / exclude lists */
.crit-block { margin-bottom: var(--sp-6); }
.crit-block__label { display: block; font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); margin-bottom: var(--sp-3); }
.crit-block--want .crit-block__label { color: var(--accent-invertista-deep); }

/* =====================================================================
   STEPS — "como funciona" 1-2-3
   ===================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; gap: var(--sp-6); } }
.step__n { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--accent-invertista); color: #fff; font-weight: var(--fw-bold); margin-bottom: var(--sp-3); }
.step h3 { font-size: var(--text-xl); margin: 0 0 var(--sp-2); }
.step p { margin: 0; color: var(--ink-soft); }

/* =====================================================================
   GENERIC CARD (MY) — used in converted pages for content panels.
   Namespaced as .panel so it never collides with Bootstrap .card.
   ===================================================================== */
.panel { background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.panel--sticky { position: sticky; top: 88px; }

/* =====================================================================
   BOOTSTRAP BRIDGE — restyle the framework components used by the
   still-Bootstrap inner views (Admin, Inbox, SavedSearches, Reports,
   Articles, Identity) to the Me & You palette. Grid + JS stay Bootstrap.
   ===================================================================== */
.btn-primary { --bs-btn-bg: var(--accent-invertista); --bs-btn-border-color: var(--accent-invertista); --bs-btn-hover-bg: var(--accent-invertista-deep); --bs-btn-hover-border-color: var(--accent-invertista-deep); --bs-btn-active-bg: var(--accent-invertista-deep); --bs-btn-active-border-color: var(--accent-invertista-deep); --bs-btn-disabled-bg: var(--accent-invertista); --bs-btn-disabled-border-color: var(--accent-invertista); }
.btn-outline-primary { --bs-btn-color: var(--accent-invertista-deep); --bs-btn-border-color: var(--accent-invertista); --bs-btn-hover-bg: var(--accent-invertista); --bs-btn-hover-border-color: var(--accent-invertista); --bs-btn-active-bg: var(--accent-invertista-deep); --bs-btn-active-border-color: var(--accent-invertista-deep); }
.btn-link { --bs-btn-color: var(--accent-invertista-deep); --bs-btn-hover-color: var(--accent-invertista); }

.form-control, .form-select { border-color: var(--rule); border-radius: var(--radius); color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: var(--accent-invertista); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-invertista) 18%, transparent); }
.form-label { font-weight: var(--fw-semibold); color: var(--ink); }

.card { border-color: var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

.badge.bg-primary, .badge.text-bg-primary { background-color: var(--accent-invertista) !important; }

.text-primary { color: var(--accent-invertista-deep) !important; }
.link-primary { color: var(--accent-invertista-deep) !important; }

.alert-info { --bs-alert-bg: var(--accent-invertista-soft); --bs-alert-border-color: color-mix(in srgb, var(--accent-invertista) 30%, transparent); --bs-alert-color: var(--accent-invertista-deep); }
.alert-success { --bs-alert-bg: var(--bg-tint); --bs-alert-border-color: var(--rule); --bs-alert-color: var(--ink); }

.page-link { color: var(--accent-invertista-deep); }
.page-item.active .page-link { background-color: var(--accent-invertista); border-color: var(--accent-invertista); }

.breadcrumb { --bs-breadcrumb-divider-color: var(--ink-mute); font-size: var(--text-sm); }
.breadcrumb-item a { color: var(--ink-mute); text-decoration: none; }
.breadcrumb-item.active { color: var(--ink-soft); }

/* ---- Booksaw leftovers — map the old template's button/utility classes
        onto Me & You so the not-yet-converted views (Articles/Create,
        Articles/Detail, Admin/Users, BuyerNeeds/Index) stay presentable. */
.btn-outline-accent {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.6rem 1.1rem; border-radius: var(--radius);
  background: transparent; color: var(--accent-invertista-deep);
  border: 1px solid var(--accent-invertista); font-weight: var(--fw-semibold);
  text-decoration: none; transition: background var(--dur-color) var(--ease), color var(--dur-color) var(--ease);
}
.btn-outline-accent:hover { background: var(--accent-invertista); color: #fff; }
/* the back/forward arrow link used on its own (no .btn base) */
.btn-accent-arrow:not(.btn-outline-accent) {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--accent-invertista-deep); font-weight: var(--fw-semibold); text-decoration: none;
}
.btn-accent-arrow:not(.btn-outline-accent):hover { color: var(--accent-invertista); }

.section-title { font-size: var(--text-3xl); color: var(--ink); }
.section-header { margin-bottom: var(--sp-8); }
.section-header.align-center { text-align: center; }
.section-header .title span,
.section-header .title { display: inline-block; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--accent-invertista-deep); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-2); }
.meta-date { font-size: var(--text-xs); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }

/* =====================================================================
   POLISH — mobile refinement, empty states, micro-interactions
   ===================================================================== */

/* ---- Mobile: full-width CTAs + stacked search bar ----------------- */
@media (max-width: 560px) {
  .hero__cta { gap: var(--sp-2); }
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; }
  .search-bar { flex-direction: column; align-items: stretch; }
  .search-bar .field-group { flex: 1 1 auto; width: 100%; }
  .search-bar .btn { width: 100%; }
  h1, .hero__title { word-break: normal; overflow-wrap: anywhere; }
}

/* ---- Empty / zero-result state ------------------------------------ */
.empty-state {
  text-align: center;
  padding: var(--sp-16) var(--sp-6);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}
.empty-state__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: var(--sp-4);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-invertista) 12%, transparent);
  color: var(--accent-invertista-deep);
}
.empty-state__icon svg { width: 28px; height: 28px; stroke-width: 1.75; }
.empty-state h2 { font-size: var(--text-xl); margin: 0 0 var(--sp-2); }
.empty-state p { color: var(--ink-mute); margin: 0 auto var(--sp-6); max-width: 42ch; }

/* ---- Micro-interactions ------------------------------------------- */
/* Gentle page fade-in */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
main#main { animation: pageIn 0.45s var(--ease) both; }

/* Alerts/toasts slide in and read as notifications */
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.alert { border-radius: var(--radius); animation: toastIn 0.35s var(--ease) both; }

/* Buttons settle a touch faster on press for a tactile feel */
.btn:active, .btn--primary:active, .btn--ghost:active { transform: translateY(0) scale(0.985); }

/* Card/tile press feedback on touch */
.buyer-card:active, .cat-tile:active { transform: translateY(0) scale(0.992); }

@media (prefers-reduced-motion: reduce) {
  main#main { animation: none; }
  .alert { animation: none; }
  .btn:active, .btn--primary:active, .btn--ghost:active,
  .buyer-card:active, .cat-tile:active { transform: none; }
}

/* ---- Seller shortlist item (card + remove action stacked) --------- */
.saved-item { display: flex; flex-direction: column; gap: var(--sp-2); }
.saved-item .buyer-card { height: auto; }

/* ---- Hero trust row (light chips on the navy hero) ---------------- */
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
.hero-trust__item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: #c8d1e0; }
.hero-trust__item::before {
  content: "\2713"; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; font-size: 11px; font-weight: var(--fw-bold);
  color: #0e1538; background: #5fe6e3; border-radius: var(--radius-pill);
}

/* ---- Verified-agent badge (navy, official) ------------------------ */
.agent-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: #fff; background: var(--brand);
  padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.agent-badge svg { width: 13px; height: 13px; stroke-width: 2; }