/* SonarDeals — light-first, data-forward design system.
   One job per color; green == money, never decorative. */
:root {
  --ink: #0F172A; --body: #475569; --muted: #64748B;  /* slate-500: WCAG-AA (≥4.5:1) on light bg; was #94A3B8 (2.5:1, failed) */
  --surface: #FFFFFF; --bg: #F8FAFC; --border: #E2E8F0;
  --brand: #2563EB; --brand-ink: #1D4ED8;
  --deal: #059669; --deal-bg: #ECFDF5; --deal-border:#A7F3D0;
  --amber: #D97706; --amber-bg:#FFFBEB; --red: #DC2626;
  /* AA-safe text tones (≥4.5:1 on light bg) — use these when the semantic color is TEXT, not a fill */
  --deal-ink:#047857; --amber-ink:#B45309; --red-ink:#B91C1C;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.06);
  --radius: 14px; --radius-sm: 9px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Space Grotesk", var(--sans);
}
* { box-sizing: border-box; }
/* Native `hidden` must win over component display rules such as `.lead-form`
   and `.as-panel`; otherwise logged-out forms and closed dialogs leak open. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
h1,h2,h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; margin: 0; }
a { color: var(--brand); text-decoration: none; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border);
}
.hrow { max-width: 1200px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; }
.brand { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.03em; display: flex; align-items: center; gap: 8px; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--deal); box-shadow: 0 0 0 4px var(--deal-bg); }
nav.main { display: flex; gap: 20px; margin-left: 8px; }
nav.main a { color: var(--body); font-weight: 500; font-size: 14px; }
nav.main a:hover { color: var(--ink); }
.spacer { flex: 1; }
.btn { border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  padding: 8px 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; cursor: pointer; font-family: var(--sans); }
.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-ink); }
.lang { color: var(--muted); font-size: 13px; display: flex; gap: 6px; }
.lang b { color: var(--ink); }

/* mobile header: collapse secondary nav, keep brand + primary CTA (no overflow) */
@media (max-width: 760px){
  nav.main, .hrow .btn:not(.primary), .hrow > .radar-badge { display: none; }
  .hrow { gap: 8px; padding: 11px 12px; }
  /* Keep language choice reachable on phones. Browser/geo detection selects the initial
     language, while this compact control lets visitors override and persist that choice. */
  .hrow .lang { display: flex; flex: 0 0 82px; min-width: 0; overflow: hidden; }
  .hrow .langsel { width: 82px; max-width: 82px; padding: 4px 3px; font-size: 12px; }
  /* collapsed header = brand + currency + language + CTA; keep all controls inside 390px */
  .hrow .curdsel { width: 110px; max-width: 110px; padding: 4px 4px; }
  .hrow .btn.primary { padding: 8px 10px; font-size: 13px; white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .brand { font-size: 18px; flex: 0 0 auto; }
  .crow .fgroup { flex-wrap: wrap; max-width: 100%; }   /* fuel-chip row wraps, never widens the page */
  .hero { padding: 24px 16px 6px; }
  .hero h1 { font-size: 27px; }
  .hero p { font-size: 15.5px; }
  .crow { padding: 10px 14px; gap: 7px 10px; }
  .doc { padding: 26px 16px 60px; }
  .doc h1 { font-size: 27px; }
}

/* On narrow phones the four useful header controls must remain real tap targets.  The previous
   flex shrink left the Browse link as an unreadable blue sliver in Arabic.  Keep both selectors,
   present Browse as a compact icon, and remove only that redundant home link on 320px-class
   screens (the SonarDeals brand remains a full home link on secondary pages). */
@media (max-width: 430px){
  .hrow .curdsel { width: 90px; max-width: 90px; }
  .hrow .lang { flex-basis: 72px; }
  .hrow .langsel { width: 72px; max-width: 72px; }
  .hrow .btn.primary { flex: 0 0 38px; width: 38px; max-width: 38px; padding-inline: 0; font-size: 0; text-align: center; }
  .hrow .btn.primary::before { content: "☷"; font-size: 18px; line-height: 1; }
}
@media (max-width: 360px){
  .hrow .curdsel { width: 84px; max-width: 84px; }
  .hrow .lang { flex-basis: 66px; }
  .hrow .langsel { width: 66px; max-width: 66px; }
  .hrow .btn.primary { display: none; }
}

/* ---------- hero ---------- */
.hero { max-width: 1200px; margin: 0 auto; padding: 34px 20px 8px; display: flex; gap: 44px; align-items: center; }
.hero-text { flex: 1 1 auto; min-width: 0; }
.hero-showcase { flex: 0 0 372px; }
@media (max-width: 900px){ .hero { flex-direction: column; align-items: stretch; gap: 22px; } .hero-showcase { flex-basis: auto; } }
.hero h1 { font-size: 34px; line-height: 1.08; max-width: 18ch; }
.hero p { color: var(--body); font-size: 17px; margin: 12px 0 0; max-width: 60ch; }
.live { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--body);
  background: var(--surface); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); }
.live .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--deal); position: relative; }
.live .pulse::after { content:""; position:absolute; inset:-4px; border-radius:50%; background:var(--deal); opacity:.35; animation: pulse 2s infinite; }
@keyframes pulse { 0%{transform:scale(1);opacity:.35} 70%{transform:scale(2.4);opacity:0} 100%{opacity:0} }
.live b { color: var(--ink); font-weight: 700; }
.screened-proof { display: block; width: fit-content; max-width: 68ch; margin-top: 10px; color: #065f46;
  background: var(--deal-bg); border: 1px solid var(--deal-border); border-radius: 9px; padding: 6px 10px;
  font-size: 13px; font-weight: 650; line-height: 1.35; }
.pledge { color: var(--muted); font-size: 12.5px; margin-top: 10px; }

/* hero showcase — "today's top find" */
.showcase { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 8px 30px rgba(15,23,42,.08); overflow: hidden; }
.showcase .sc-h { display:flex; align-items:center; gap:8px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing:.05em; color: var(--deal-ink); }
.showcase .sc-body { padding: 16px; display:flex; flex-direction:column; gap: 12px; }
.showcase .sc-top { display:flex; align-items:center; gap: 14px; }
.showcase .sc-score { width: 58px; height: 58px; border-radius: 14px; background: var(--deal); color:#fff; font-family: var(--display); font-weight:700; font-size: 26px; display:flex; align-items:center; justify-content:center; box-shadow: 0 4px 14px rgba(5,150,105,.35); flex:none; }
.showcase .sc-tt { min-width:0; }
.showcase .sc-title { font-family: var(--display); font-weight: 700; font-size: 17px; line-height:1.15; }
.showcase .sc-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.showcase .sc-nums { display:flex; align-items:baseline; gap: 10px; }
.showcase .sc-price { font-family: var(--display); font-weight: 700; font-size: 24px; }
.showcase .sc-mkt { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.showcase .sc-save { margin-left:auto; background: var(--deal-bg); border:1px solid var(--deal-border); color:#047857; font-weight:700; font-size: 12.5px; padding: 4px 10px; border-radius: 8px; }
.showcase .sc-foot { display:flex; gap: 8px; align-items:center; color: var(--body); font-size: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.showcase .sc-cta { background: var(--brand); color:#fff; text-align:center; padding: 11px; font-weight:700; font-size: 13.5px; cursor:pointer; }
.showcase .sc-cta:hover { background: var(--brand-ink); }

/* ---------- controls / filter bar ---------- */
.buyer-market { max-width:1200px; margin:18px auto 12px; padding:0 20px; }
.buyer-market-row { display:grid; grid-template-columns:minmax(220px,1fr) minmax(210px,280px) auto;
  align-items:center; gap:14px 18px; padding:15px 17px; background:linear-gradient(110deg,#eff6ff,#f0fdf4);
  border:1px solid #bfdbfe; border-radius:14px; box-shadow:var(--shadow); }
.buyer-market-copy h2 { font-size:17px; }
.buyer-market-copy p { margin:3px 0 0; color:var(--body); font-size:12.5px; }
.buyer-country { display:flex; flex-direction:column; gap:4px; color:var(--body); font-size:12px; font-weight:700; }
.buyer-country select { width:100%; min-height:36px; }
.local-switch { display:flex; align-items:center; gap:9px; min-height:38px; padding:7px 12px;
  border:1px solid #a7f3d0; border-radius:10px; background:#fff; color:var(--ink); font-size:13px;
  font-weight:700; cursor:pointer; white-space:nowrap; }
.local-switch input { width:18px; height:18px; accent-color:var(--deal); }
.local-switch:has(input:checked) { background:var(--deal-bg); border-color:var(--deal); color:var(--deal-ink); }
.local-switch:has(input:disabled) { opacity:.55; cursor:not-allowed; }
.buyer-market-note { min-height:20px; margin:6px 4px 0; color:var(--body); font-size:12.5px; }
.buyer-market-note[data-state="local"] { color:var(--deal-ink); font-weight:650; }
.buyer-market-note[data-state="recommended"] { color:#1e40af; font-weight:650; }
.buyer-market-note[data-state="empty"] { color:var(--amber-ink); font-weight:650; }
.controls { position: sticky; top: 57px; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(15,23,42,.02); }
.crow { max-width: 1200px; margin: 0 auto; padding: 11px 20px; display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.fgroup { display: flex; align-items: center; gap: 6px; }
.fgroup > label { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.search-group { flex: 1 1 285px; min-width: 230px; }
.search-group .search-input { width: 100%; min-width: 170px; }
.chip { white-space: nowrap; border: 1px solid var(--border); background: var(--surface); color: var(--body);
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.chip:hover { border-color: var(--muted); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.sm { padding: 5px 10px; font-size: 12.5px; }
.chip.toggle.on { background: var(--amber); border-color: var(--amber); }
.crow .sep { width:1px; height: 22px; background: var(--border); flex: none; }
select.f, input.f { border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-family: var(--sans);
  padding: 6px 9px; border-radius: 8px; font-size: 13px; font-weight: 500; }
select.f:focus, input.f:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
input.f.num { width: 78px; text-align: right; font-variant-numeric: tabular-nums; }
input.f.yr { width: 62px; text-align: center; }
/* normal wrapping — translated counter lines (fr/de…) are long and must never widen the page */
.crow .count { margin-inline-start: auto; font-size: 13px; color: var(--body); font-weight: 600; white-space: normal; max-width: 100%; }
.crow .count b { color: var(--ink); }
.reset { border: none; background: none; color: var(--brand); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.account-action { border: 1px solid var(--border); background: var(--bg); padding: 6px 10px; border-radius: 8px; }
.account-action:hover,.account-action:focus-visible { border-color: var(--brand); background: var(--surface); }
@media (max-width:760px) {
  .buyer-market { margin:12px auto 8px; padding:0 12px; }
  .buyer-market-row { grid-template-columns:1fr; gap:10px; padding:13px; }
  .buyer-country { width:100%; }
  .local-switch { width:100%; white-space:normal; }
  .buyer-market-note { margin-inline:2px; }
  .search-group { flex-basis:100%; width:100%; min-width:0; }
}

/* ---------- feed ---------- */
.feed { max-width: 1200px; margin: 0 auto; padding: 20px; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); transition: opacity .15s ease; }
.feed[aria-busy="true"] { opacity: .55; pointer-events: none; }
@media (max-width: 620px){ .feed { grid-template-columns: 1fr; padding: 14px; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); display: grid; grid-template-columns: 168px 1fr; overflow: hidden; transition: box-shadow .15s, transform .15s; cursor: pointer; }
.card:hover { box-shadow: 0 6px 20px rgba(15,23,42,.10); transform: translateY(-2px); border-color: #cbd5e1; }
.card:active { transform: scale(.985); }
@media (max-width: 620px){ .card { grid-template-columns: 1fr; } }

.thumb { position: relative; background: linear-gradient(135deg,#EEF2F7,#E2E8F0); min-height: 150px; display:flex; align-items:center; justify-content:center; }
.thumb .ph { display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px; }
.thumb .ph-ico { font-size: 34px; opacity: .55; filter: grayscale(.3); }
.thumb .ph-make { color: var(--body); font-size: 12.5px; font-weight: 700; letter-spacing:.02em; text-transform: uppercase; }
.scorechip { position: absolute; top: 10px; left: 10px; background: var(--deal); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 19px; width: 46px; height: 46px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 8px rgba(5,150,105,.4); }
.scorechip.mid { background: #0EA5A4; box-shadow:0 2px 8px rgba(14,165,164,.4); }
.flagpill { position:absolute; bottom: 10px; left: 10px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(15,23,42,.72); color:#fff; }

.body { padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.titlerow { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.title { font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.2; }
.flag { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.specs { color: var(--body); font-size: 13.5px; }
.specs b { color: var(--ink); font-weight: 600; }
.listing-city { color: var(--body); font-size: 12.5px; line-height: 1.35; min-width: 0; max-width: 100%;
  white-space: normal; overflow-wrap: anywhere; word-break: normal; }
.listing-city-label { color: var(--muted); font-weight: 600; }
.listing-city-value { unicode-bidi: isolate; }

/* saving headline: visually the largest element on the card, above the price line */
.saving { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; }
.saving-amt { font-family: var(--display); font-weight: 700; font-size: 23px; line-height: 1.1; color: var(--deal-ink, #047857); }
.saving-ev { font-size: 11.5px; color: var(--muted); font-weight: 600; }
/* no link without verification - a statement, not a button */
.unverified { border: 1px dashed var(--border); color: var(--muted); background: transparent; font-weight: 600;
  font-size: 12.5px; padding: 6px 12px; border-radius: 8px; display: inline-flex; align-items: center; cursor: default; }

.dealline { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.band { display: inline-flex; align-items: center; gap: 7px; background: var(--deal-bg); border: 1px solid var(--deal-border);
  color: #047857; font-weight: 700; font-size: 12.5px; padding: 5px 10px; border-radius: 8px; }
.band .pct { font-family: var(--display); font-size: 14px; }
.price { margin-left: auto; text-align: right; }
.price .now { font-family: var(--display); font-weight: 700; font-size: 20px; }
.price .mkt { color: var(--muted); font-size: 12px; text-decoration: line-through; }

.xborder { display:flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; color: var(--body); margin-top: 2px; }
.xborder .pw { font-weight: 600; }
.pw.easy { color: var(--deal-ink); } .pw.moderate { color: var(--amber-ink); } .pw.complex { color: var(--red-ink); }
.buyer-fit { margin-top:7px; padding:7px 9px; border:1px solid #bfdbfe; border-radius:9px;
  background:#eff6ff; color:#1e3a8a; font-size:11.75px; line-height:1.42; font-weight:650;
  overflow-wrap:anywhere; }
.buyer-fit::before { content:"◎"; display:inline-block; margin-inline-end:6px; }
.buyer-fit.local { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.buyer-fit.local::before { content:"⌂"; }
.buyer-fit.import-strong { background:#fffbeb; border-color:#fcd34d; color:#92400e;
  box-shadow:0 0 16px rgba(245,158,11,.12); }
.buyer-fit.import-strong::before { content:"✦"; }
.buyer-fit.import-modeled { background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.buyer-fit.import-modeled::before { content:"≈"; }
.buyer-fit.import-deliverable::before { content:"⇢"; }
.buyer-fit.import-source { background:#f8fafc; border-color:#cbd5e1; color:#475569; }
.buyer-fit.import-source::before { content:"◌"; }
/* intelligence badges (from lifecycle moat) */
.intel { display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:3px; }
.warn { display:inline-flex; align-items:center; gap:5px; background:#FEF2F2; border:1px solid #FECACA; color:var(--red-ink);
  font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:7px; }
.drop { display:inline-flex; align-items:center; gap:4px; background:var(--deal-bg); border:1px solid var(--deal-border);
  color:#047857; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:7px; }
.nego { display:inline-flex; align-items:center; gap:4px; background:#EFF6FF; border:1px solid #BFDBFE; color:var(--brand-ink);
  font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:7px; }
.age { color:var(--muted); font-size:11.5px; }
.price .now .strike { color: var(--muted); text-decoration: line-through; font-size: 13px; font-weight: 500; margin-right: 6px; }

.meta { display:flex; align-items:center; gap: 8px; margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.meta .src { font-weight: 600; color: var(--body); }
.unlock { margin-left: auto; }
.unlock button { border: 1px solid var(--brand); color: var(--brand); background: #fff; font-weight: 700; font-size: 12.5px;
  padding: 6px 12px; border-radius: 8px; cursor: pointer; display:inline-flex; gap:6px; align-items:center; font-family: var(--sans); }
.unlock button:hover { background: var(--brand); color:#fff; }
.conf { font-size: 11px; color: var(--muted); }
.dot-sep::before { content: "·"; margin: 0 2px; color: var(--muted); }

/* damaged card accent */
.card.damaged .scorechip { background: var(--amber); box-shadow:0 2px 8px rgba(217,119,6,.4); }
.card.damaged .band { background: var(--amber-bg); border-color:#FDE68A; color:#B45309; }

footer.site { border-top: 1px solid var(--border); margin-top: 30px; background: var(--surface); }
.frow { max-width:1200px; margin:0 auto; padding: 22px 20px; color: var(--muted); font-size: 13px; display:flex; gap: 18px; flex-wrap: wrap; }
.frow .pledge2 { color: var(--body); font-weight: 600; }

.empty { text-align:center; color: var(--muted); padding: 50px 20px; }
.feed-error { display:flex; flex-direction:column; align-items:center; gap:14px; }
.feed-error .btn { min-width: 120px; }

/* documentation / methodology page */
.doc { max-width: 760px; margin: 0 auto; padding: 40px 22px 70px; }
.doc h1 { font-size: 34px; letter-spacing: -.02em; }
.doc .lead { font-size: 18px; color: var(--body); margin: 14px 0 8px; line-height: 1.55; }
.doc section { padding: 22px 0; border-bottom: 1px solid var(--border); }
.doc h2 { font-size: 20px; margin-bottom: 8px; }
.doc p { color: var(--body); font-size: 15.5px; line-height: 1.62; margin: 10px 0; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul.bands { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.doc ul.bands li { color: var(--body); font-size: 14.5px; }
.b { display: inline-block; font-weight: 700; font-size: 12.5px; padding: 3px 9px; border-radius: 7px; margin-right: 8px; min-width: 132px; }
.b-exc { background: var(--deal-bg); color: #047857; border: 1px solid var(--deal-border); }
.b-grt { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }   /* emerald-700: AA on the tinted bg (was #059669, 3.6:1) */
.b-good { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }  /* green-700: AA on the tinted bg (was #16A34A, 3.2:1) */
.b-fair { background: #F8FAFC; color: var(--body); border: 1px solid var(--border); }
.pledge-box { background: var(--deal-bg); border: 1px solid var(--deal-border); border-radius: var(--radius); padding: 22px; margin-top: 24px; }
.pledge-box h2 { color: #047857; }
.pledge-box .fresh { color: #047857; font-size: 13.5px; }
.btn.big { display: inline-block; margin-top: 28px; padding: 13px 22px; font-size: 15px; text-decoration: none; }

/* pricing page */
.pricing .p-hero { text-align: center; padding: 10px 0 20px; }
.p-badge { display:inline-block; background: var(--deal-bg); border:1px solid var(--deal-border); color:#047857;
  font-weight:700; font-size:12.5px; padding:5px 14px; border-radius:999px; letter-spacing:.02em; }
.pricing .p-hero h1 { font-size: 32px; margin-top: 14px; }
.pricing .p-hero .lead { max-width: 62ch; margin: 12px auto 0; }
.tiers { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 0; }
@media (max-width: 820px){ .tiers { grid-template-columns: 1fr; } }
.tier { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display:flex; flex-direction: column; }
.tier.live { border-color: var(--deal); box-shadow: 0 8px 30px rgba(5,150,105,.12); }
.tier.soon { opacity: .92; }
.tier-tag { font-size: 11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--muted); }
.tier.live .tier-tag { color: #047857; }  /* emerald-700: AA on white (var(--deal) #059669 was 3.8:1) */
.tier h2 { font-size: 24px; margin: 8px 0 4px; }
.tier-price { font-family: var(--display); font-weight:700; font-size: 30px; color: var(--ink); }
.tier-price span { display:block; font-family: var(--sans); font-weight:500; font-size: 12px; color: var(--muted); margin-top:2px; }
.tier ul { list-style:none; padding:0; margin: 16px 0; display:flex; flex-direction:column; gap: 9px; flex: 1; }
.tier li { font-size: 14px; color: var(--body); }
.tier.live li { color: var(--ink); }
.tier .btn { width: 100%; padding: 11px; text-align:center; text-decoration:none; }
.tier .btn[disabled] { opacity:.5; cursor:not-allowed; }
.tier-note { font-size: 12px; color: var(--muted); margin-top: 12px; line-height:1.45; }
.p-how { background: var(--bg); border:1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-top: 8px; }
.p-how h2 { font-size: 19px; margin-bottom: 8px; }

/* deal-detail overlay (the decision page) */
.detail-bg { position: fixed; inset: 0; background: rgba(15,23,42,.55); display:none; z-index: 70; padding: 0; }
.detail-bg.on { display: block; }
.detail-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(560px, 100%); background: var(--surface);
  box-shadow: -10px 0 40px rgba(15,23,42,.25); overflow-y: auto; padding: 0; animation: slidein .18s ease; }
@keyframes slidein { from { transform: translateX(24px); opacity: .4 } to { transform: none; opacity: 1 } }
.dh { padding: 20px 22px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); }
.dh .x { float: right; cursor: pointer; color: var(--muted); font-size: 24px; line-height: 1; border:none; background:none; }
.dh h2 { font-size: 22px; }
.dh .sub { color: var(--body); font-size: 13.5px; margin-top: 4px; }
.dh .detail-city { margin-top: 4px; }
.dh .hprice { display:flex; align-items:baseline; gap: 12px; margin-top: 12px; }
.dh .hprice .now { font-family: var(--display); font-weight: 700; font-size: 28px; }
.dh .hprice .mkt { color: var(--muted); text-decoration: line-through; font-size: 15px; }
.dh .hprice .badge { margin-left:auto; }
.dsec { padding: 18px 22px; border-bottom: 1px solid var(--border); }
.dsec h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 12px; font-family: var(--sans); font-weight: 700; }
.specgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.specgrid .k { color: var(--muted); font-size: 12.5px; }
.specgrid .v { color: var(--ink); font-weight: 600; font-size: 14px; }
.chart { width: 100%; }
.chart .cap { display:flex; justify-content:space-between; color: var(--muted); font-size: 12px; margin-top: 6px; }
.why { display:flex; flex-direction: column; gap: 9px; }
.why .row { display:flex; justify-content: space-between; font-size: 13.5px; }
.why .row .k { color: var(--body); } .why .row .v { font-weight: 600; }
.bar { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; margin-top: 3px; }
.bar > i { display:block; height:100%; background: var(--deal); border-radius: 4px; }
.landgrid { display:flex; flex-direction: column; gap: 10px; }
.landrow { display:flex; align-items:center; gap: 10px; padding: 10px 12px; background: var(--bg); border:1px solid var(--border); border-radius: 10px; }
.landrow .cc { font-size: 20px; }
.landrow .lc { flex:1; }
.landrow .lc .tot { font-family: var(--display); font-weight: 700; font-size: 15px; }
.landrow .lc .br { color: var(--muted); font-size: 11.5px; }
.dcta { padding: 18px 22px 30px; }
.dcta .btn { width: 100%; padding: 12px; font-size: 15px; }
.disc { color: var(--muted); font-size: 11.5px; margin-top: 10px; text-align:center; }

/* unlock modal */
.modal-bg { position: fixed; inset: 0; background: rgba(15,23,42,.5); display:none; align-items:center; justify-content:center; z-index: 80; padding: 20px; }
.modal-bg.on { display:flex; }
.modal { background:#fff; border-radius: var(--radius); max-width: 440px; width: 100%; padding: 26px; box-shadow: 0 20px 60px rgba(15,23,42,.3); }
.modal h3 { font-size: 20px; }
.modal p { color: var(--body); margin: 10px 0 0; font-size: 14px; }
.modal .count { font-family: var(--display); font-weight:700; color: var(--brand); }
.modal .actions { margin-top: 18px; display:flex; gap: 10px; }
.modal .x { float:right; cursor:pointer; color:var(--muted); font-size: 20px; line-height:1; }

/* ---- email capture (subscribe.js) ---- */
.sub-bg{position:fixed;inset:0;background:rgba(15,23,42,.62);backdrop-filter:blur(3px);display:none;place-items:center;z-index:60;padding:20px}
.sub-bg[data-open="1"]{display:grid}
.sub-modal{position:relative;background:#fff;border-radius:16px;max-width:420px;width:100%;padding:28px 26px;box-shadow:0 24px 60px rgba(2,6,23,.35)}
.sub-modal h3{margin:.2rem 0 .4rem;font-family:'Space Grotesk',system-ui,sans-serif;font-size:1.35rem;color:var(--ink,#0F172A)}
.sub-sub{color:var(--muted,#64748b);font-size:.92rem;margin:0 0 1rem}
.sub-input{width:100%;box-sizing:border-box;padding:12px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:1rem;margin-bottom:.6rem}
.sub-input:focus{outline:none;border-color:var(--blue,#2563EB)}
.sub-modal .btn.primary{width:100%;justify-content:center}
/* "Continue with Google" — official G logo self-hosted (CSP-safe: img-src 'self'), no external SDK */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box;
  background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:10px;padding:11px 14px;
  font-weight:600;font-size:14px;font-family:var(--sans);cursor:pointer;text-decoration:none;margin-bottom:10px}
.btn-google::before{content:"";width:18px;height:18px;flex:none;background:url("/assets/google-g.svg") center/contain no-repeat}
.btn-google:hover{background:#f8f9fa;border-color:#c6c8ca}
.btn-google:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.auth-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:4px 0 10px}
.auth-or::before,.auth-or::after{content:"";height:1px;background:var(--border);flex:1}
/* gentle "while you're here" discovery strip after a completed action */
.next-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.next-lbl{font-size:12px;color:var(--muted);font-weight:700;width:100%}
.next-act{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:var(--brand);
  background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:6px 12px;text-decoration:none;line-height:1.2}
.next-act:hover{border-color:var(--brand);background:var(--surface)}
.next-act:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sub-status{font-size:.86rem;margin:.6rem 0 0;min-height:1.1em}
.sub-status[data-state="ok"]{color:var(--green,#059669)}
.sub-status[data-state="err"]{color:#dc2626}
.sub-x{position:absolute;top:12px;right:16px;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;user-select:none}
.sub-x:hover{color:var(--ink,#0F172A)}
.subscribe-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:1rem 0}
/* flex-basis 200 but shrinkable (min-width:0): long translated button labels (fr/de) must
   never push the row past the viewport on mobile — the input yields instead. */
.subscribe-form input[type=email]{flex:1 1 200px;min-width:0;padding:12px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:1rem}
.subscribe-form .btn{flex:0 0 auto}

/* honeypot (hidden without inline style — CSP-safe) */
/* Honeypot: stays in the DOM (bots fill it) but off-screen for humans. clip-path instead of
   left:-9999px so it never widens the page in RTL (which flips the scroll origin). */
.hp{position:absolute!important;inset-inline-start:0!important;top:auto!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none;overflow:hidden!important;clip-path:inset(50%)!important}
.subscribe-form .sub-status{width:100%}
.modal-disc{color:var(--muted);font-size:12.5px;margin:.6rem 0 0}

/* account modal — saved searches */
.acct-h{margin:1rem 0 .4rem;font-size:.95rem;font-family:'Space Grotesk',system-ui,sans-serif}
.acct-list{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;max-height:220px;overflow:auto}
.acct-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:var(--surface,#f1f5f9);border-radius:8px;padding:.5rem .7rem}
.acct-desc{font-size:.85rem;color:var(--ink,#0F172A)}
.acct-del{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:2px 6px}
.acct-del:hover{color:#dc2626}

/* lead / sourcing form */
.lead-form{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.lead-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;font-weight:500;color:var(--ink,#0F172A)}
.lead-form input,.lead-form select,.lead-form textarea{padding:11px 13px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:1rem;font-family:inherit}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:none;border-color:var(--blue,#2563EB)}
.lf-row{display:flex;gap:.8rem;flex-wrap:wrap}
.lf-row label{flex:1;min-width:130px}
.lf-consent{flex-direction:row!important;align-items:flex-start;gap:.6rem!important;font-weight:400!important;font-size:.85rem;color:var(--muted,#64748b)}
.lf-consent input{width:18px;height:18px;flex:0 0 auto;margin-top:2px}

/* buyer-journey affiliate services (deal detail) */
.services{margin:.9rem 0 .3rem}
.svc-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#64748b);margin-bottom:.45rem}
.svc-row{display:flex;flex-wrap:wrap;gap:.5rem}
.svc{display:inline-flex;align-items:center;gap:.3rem;padding:8px 12px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:.85rem;font-weight:600;color:var(--ink,#0F172A);text-decoration:none;background:#fff}
.svc:hover{border-color:var(--blue,#2563EB);color:var(--blue,#2563EB)}

/* landed-cost country picker */
.landpick{margin:.6rem 0}
.landpick select{width:100%;padding:10px 12px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:.92rem;background:#fff}
.landpick select:focus{outline:none;border-color:var(--blue,#2563EB)}
.feed-sentinel{height:1px;width:100%}

/* breadcrumbs */
.crumbs{font-size:.82rem;color:var(--muted,#64748b);margin:0 0 1.1rem}
.crumbs a{color:var(--muted,#64748b);text-decoration:none}
.crumbs a:hover{color:var(--blue,#2563EB)}
.crumbs span{margin:0 .35rem;opacity:.55}

/* flip mode (arbitrage margin in destination market) */
.flip{margin-top:5px;font-size:12.5px;line-height:1.45}
.flip.pos .flip-t{color:#0f7b3f;font-weight:600}
.flip.neg .flip-t{color:var(--muted,#64748b)}
.flip-n{color:var(--muted,#94a3b8)}

/* positive freshness signal (trust for a new brand) */
.meta .fresh{color:#0f7b3f;font-weight:600}

/* a11y: skip link (visually hidden until keyboard-focused) */
/* Off-screen but RTL-safe: clip technique (width/height 1px + clip) never contributes to
   horizontal scrollWidth, unlike left:-9999px which made RTL pages scroll sideways. */
.skip-link{position:absolute;top:0;inset-inline-start:0;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;z-index:1000;
  background:var(--ink,#0f172a);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip-link:focus{width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}
/* a11y: honour reduced-motion — kill non-essential animation for users who ask */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* 🛡️ Trust Check — first-party buyer-safety panel */
.dsec.trust .tchecks{display:flex;flex-direction:column;gap:7px;margin:8px 0}
.tcheck{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.4}
.tcheck .ti{flex:0 0 auto;font-weight:700;width:16px;text-align:center}
.tcheck.ok .ti{color:#0f7b3f}
.tcheck.warn .ti{color:#c2410c}
.tcheck.info .ti{color:var(--muted,#64748b)}
.tcheck.warn .tt{color:#9a3412}

/* Sonar radar CTA in the controls row (flagship feature — draw the eye) */
.sonar-cta{border-color:rgba(0,187,51,.5)!important;color:#0b7a35!important;font-weight:600}
.sonar-cta:hover{background:rgba(0,187,51,.08)!important}

/* 📊 arbitrage table */
.tbl-scroll{overflow-x:auto;border-radius:12px;border:1px solid var(--line,#e2e8f0)}
.deal-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px}
.deal-table th,.deal-table td{padding:9px 11px;text-align:left;white-space:nowrap}
.deal-table thead th{background:var(--surface,#f8fafc);color:var(--muted,#64748b);font-weight:600;position:sticky;top:0;border-bottom:1px solid var(--line,#e2e8f0)}
.deal-table th.sortable{cursor:pointer;user-select:none}
.deal-table th.sortable:hover{color:var(--ink,#0f172a)}
.deal-table th.on{color:#0b7a35}
.deal-table tbody tr{border-bottom:1px solid var(--line,#eef2f7);cursor:pointer}
.deal-table tbody tr:hover{background:rgba(0,187,51,.05)}
.deal-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.deal-table td.prof{font-weight:700}
.deal-table tr.pos td.prof{color:#0f7b3f}
.deal-table tr.neg td.prof{color:#b91c1c}
.deal-table td.car b{display:block;font-weight:600}
.deal-table td.car .sub{color:var(--muted,#94a3b8);font-size:11.5px}
.deal-table td.rk{color:var(--muted,#94a3b8);font-variant-numeric:tabular-nums}
.scorepill{display:inline-block;min-width:26px;text-align:center;padding:2px 6px;border-radius:6px;background:#eef2f7;font-weight:700;font-size:12px}
.scorepill.gold{background:#fff2c4;color:#7a5900}.scorepill.green{background:#dcfce7;color:#0f7b3f}

/* auto language suggestion banner */
.lang-banner{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;background:linear-gradient(90deg,#0f172a,#124b39);color:#fff;padding:10px 16px;font-size:14px}
.lang-banner .lang-msg{font-weight:500}
.lang-banner .btn{padding:5px 13px;font-size:13px}
.lang-x{background:transparent;border:1px solid rgba(255,255,255,.3);color:#cbd5e1;border-radius:6px;padding:5px 11px;font-size:12.5px;cursor:pointer}
.lang-x:hover{background:rgba(255,255,255,.12)}

/* language picker + RTL */
.langsel{background:transparent;border:1px solid var(--line,#e2e8f0);border-radius:7px;padding:4px 8px;font-size:13px;color:inherit;cursor:pointer;font-family:inherit;max-width:140px}
.curdsel{background:transparent;border:1px solid var(--line,#e2e8f0);border-radius:7px;padding:4px 8px;font-size:13px;color:inherit;cursor:pointer;font-family:inherit;max-width:150px;margin-inline-end:6px}
/* 🔧 repair-parts estimator (deal detail) */
.dsec.parts .prt-intro{color:var(--muted,#64748b);font-size:13px;margin:.2rem 0 .6rem}
.prt-toggle{display:inline-flex;border:1px solid var(--border,#e2e8f0);border-radius:8px;overflow:hidden;margin-bottom:.6rem}
.prt-tg{background:var(--surface,#fff);border:0;padding:6px 12px;font-size:12.5px;cursor:pointer;color:var(--body,#475569);font-family:inherit}
.prt-tg.on{background:var(--ink,#0f172a);color:#fff}
.prt-list{display:flex;flex-direction:column;gap:2px}
.prt-row{display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:8px;cursor:pointer}
.prt-row:hover{background:var(--bg,#f8fafc)}
.prt-cb{width:16px;height:16px;flex:0 0 auto;accent-color:#059669}
.prt-name{flex:1;font-size:13.5px}
.prt-price{font-size:13px;color:var(--ink,#0f172a);white-space:nowrap;font-variant-numeric:tabular-nums}
.prt-buy{font-size:12px;color:#059669;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.prt-total{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--border,#e2e8f0)}
.prt-total .prt-tl{color:var(--body,#475569);font-size:13.5px}
.prt-total .prt-tv{font-size:16px;color:#059669;font-variant-numeric:tabular-nums}
.prt-sample{margin-top:.5rem;font-size:12px;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:6px 10px}
html[dir="rtl"] .hero-text,html[dir="rtl"] .doc,html[dir="rtl"] .radar-wrap{text-align:right}
/* Data-led SEO reports currently ship in English.  Keep their numeric/statistical content LTR
   even when the visitor's saved chrome/assistant language is Arabic or another RTL language. */
html[dir="rtl"] .doc[dir="ltr"]{direction:ltr;text-align:left}
html[dir="rtl"] .deal-table th,html[dir="rtl"] .deal-table td{text-align:right}
html[dir="rtl"] .deal-table td.num{text-align:left}

/* homepage map dashboard section */
.home-map-sec{max-width:1200px;margin:0 auto;padding:.5rem 1rem 0}
.home-map-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.4rem 0}
.home-map-head h2{font-size:1.1rem;margin:0}
.home-map-head .btn.sm{padding:5px 12px;font-size:13px}
#homeMap{width:100%;height:400px;border-radius:14px;background:#04140f;box-shadow:0 0 0 2px rgba(0,255,140,.12),0 14px 40px rgba(0,0,0,.25)}
html[dir="rtl"] .home-map-head{flex-direction:row-reverse}

/* homepage dashboard v2: BIG map (like the full map page) + table below */
#homeMap{height:66vh;min-height:480px}
.home-table-sec{max-width:1200px;margin:.8rem auto 0;padding:0 1rem}
.mk-img{display:block;width:230px;max-width:60vw;border-radius:8px;margin-bottom:6px}
.leaflet-popup-content{margin:10px 12px}

/* COMPACT hero (user: shrink the intro so the map+table get noticed) */
.hero{padding:.8rem 1rem .4rem;min-height:0}
.hero-text h1{font-size:1.4rem;line-height:1.3;margin:0 0 .3rem}
.hero-text>p{font-size:.85rem;line-height:1.45;margin:.15rem 0 .45rem;max-width:760px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero .live{margin:.25rem 0;font-size:.85rem}
.hero .screened-proof{margin:.2rem 0;font-size:.78rem;padding:5px 9px}
.hero .subscribe-form{margin:.4rem 0 .2rem}
.hero .pledge{font-size:.72rem;margin-top:.25rem}
.hero-showcase{display:none}   /* the map's golden pins are the "top find" now */
#homeMap{height:58vh;min-height:440px}

/* hero ultra-compact pass 2: headline + live count + email only */
.hero-text h1{font-size:1.25rem;margin-bottom:.15rem}
.hero-text>p{display:none}
.hero .pledge{display:none}
.hero{padding-bottom:.2rem}
#homeMap{height:54vh;min-height:420px}

/* city search (Google-Maps-style, self-hosted) */
.hm-tools{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.city-hold{position:relative;display:inline-block}
#citySearch{min-width:200px}
.city-sug{position:absolute;top:calc(100% + 4px);left:0;z-index:1300;background:#fff;border:1px solid var(--line,#e2e8f0);
  border-radius:10px;box-shadow:0 14px 34px rgba(15,23,42,.16);min-width:240px;max-height:280px;overflow:auto;display:none}
.city-it{display:block;width:100%;text-align:left;padding:8px 12px;border:0;background:none;cursor:pointer;font:inherit;font-size:13.5px}
.city-it:hover{background:#f1f5f9}
html[dir="rtl"] .city-sug{left:auto;right:0}
/* smooth anchors + livelier cards (reduced-motion already zeroes these globally) */
html{scroll-behavior:smooth}
.card{transition:transform .16s ease, box-shadow .16s ease;cursor:pointer}
/* a11y: clear keyboard focus ring on the now-focusable cards / CTAs (mouse clicks stay ring-free) */
.card:focus-visible,.sc-cta:focus-visible{outline:3px solid var(--blue,#2563EB);outline-offset:2px}
.card:focus:not(:focus-visible){outline:none}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,23,42,.13)}

/* market-context (fair per-country pricing) */
.market-note{max-width:1200px;margin:.5rem auto 0;padding:8px 14px;background:#f0fdf4;border:1px solid #bbf7d0;
  border-radius:10px;font-size:13px;color:#14532d}
.map-ctx{position:absolute;top:10px;right:10px;z-index:1000;background:rgba(4,20,15,.85);color:#c9f7dd;
  padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;pointer-events:none;border:1px solid rgba(0,255,140,.25)}
html[dir="rtl"] .map-ctx{right:auto;left:10px}

/* sell: photo grid */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:.5rem 0}
.pcell{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:#f1f5f9}
.pcell img{width:100%;height:100%;object-fit:cover;display:block}
.pcell .px{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(15,23,42,.75);color:#fff;cursor:pointer;line-height:1}
.pcell .pcover{position:absolute;left:4px;bottom:4px;background:rgba(0,187,51,.9);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px}

/* community strip (member listings) */
.crow2{display:grid;grid-auto-flow:column;grid-auto-columns:260px;gap:12px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory}
.ccard{scroll-snap-align:start;border:1px solid var(--line,#e2e8f0);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;position:relative}
.ccard.csold .cimg{filter:grayscale(.85);opacity:.72}
.csold-badge{position:absolute;top:10px;inset-inline-start:10px;background:#DC2626;color:#fff;font-weight:800;font-size:12px;letter-spacing:.5px;padding:3px 10px;border-radius:8px;transform:rotate(-6deg);box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:1}
.ccard .cimg{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#f1f5f9}
.ccard .cph{display:flex;align-items:center;justify-content:center;font-size:34px}
.ccard .cbody{padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.ccard .ctitle{font-weight:600;font-size:14px}
.ccard .cmeta{color:var(--muted,#64748b);font-size:12px}
.ccard .cprice{font-weight:700;font-size:16px}
.ccard .cdesc{color:var(--muted,#64748b);font-size:12px;line-height:1.4}
.ccard .cact{margin-top:6px}

/* seller listing — owner-priced neutral badge (founder directive: never a deal score) */
.cowner-badge{position:absolute;top:10px;inset-inline-start:10px;background:#1E293B;color:#fff;font-weight:600;font-size:11px;letter-spacing:.2px;padding:3px 9px;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.18);z-index:1;max-width:88%}
@media (max-width:520px){.cowner-badge{font-size:10px;padding:2px 7px}}

/* light listing form (founder directive: minimal required, gentle location nudge) */
.sell-required-hint{font-size:.85rem;color:var(--muted,#64748b);margin:0 0 .25rem}
.sell-loc-nudge{font-size:.83rem;color:var(--muted,#64748b);margin:.1rem 0 0}
.lead-form .opt{font-weight:400;color:var(--muted,#64748b);font-size:.78rem}
.sell-more{border:1px solid var(--line,#e2e8f0);border-radius:11px;padding:.1rem .9rem;background:#f8fafc}
.sell-more>summary{cursor:pointer;list-style:none;padding:.7rem .2rem;font-weight:600;color:var(--ink,#0F172A);user-select:none}
.sell-more>summary::-webkit-details-marker{display:none}
.sell-more[open]>summary{margin-bottom:.4rem;border-bottom:1px dashed var(--line,#e2e8f0)}
.sell-more .lf-row,.sell-more label{margin-top:.5rem}
.sell-ok{margin-top:1.5rem;padding:1.2rem 1.3rem;border:1.5px solid var(--green,#059669);border-radius:14px;background:#ECFDF5;color:var(--ink,#0F172A);outline:none}
.sell-ok h2{margin:0 0 .5rem;color:var(--green,#059669);font-size:1.2rem}
.sell-ok p{margin:.3rem 0}
.sell-ok .sell-ok-sub{color:var(--muted,#64748b);font-size:.85rem}

/* LAYERING FIX (user bug report): Leaflet panes/markers use z-index up to 9999 and were
   escaping ABOVE the header and the deal-detail overlay. isolation:isolate traps ALL of
   Leaflet's stacking inside the map box; page chrome gets explicit higher layers. */
#homeMap, #lmap { isolation: isolate; position: relative; z-index: 0; }

/* Final launch map proportions: a dominant, screenshot-like desktop radar without
   forcing a phone visitor to scroll through an oversized empty viewport. */
#homeMap { height: clamp(500px, 68vh, 720px); min-height: 500px; }
@media (max-width: 760px) {
  #homeMap { height: 58vh; min-height: 400px; }
}
header.site { position: sticky; top: 0; z-index: 1500; }
.controls { z-index: 1400; }
.market-note { position: relative; z-index: 10; }
.detail-bg { z-index: 2000; }
.modal-bg { z-index: 2100; }
.lang-banner { position: relative; z-index: 2200; }
.city-sug { z-index: 2300; }

/* paged results (page-size picker + prev/next) */
.pager{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;max-width:1200px;margin:.6rem auto;padding:0 1rem}
#pagerTop{margin-top:.2rem}
.pager .psize{font-size:13px;color:var(--muted,#64748b);display:flex;align-items:center;gap:6px}
.pager .psize select{padding:4px 8px}
.pbtn{border:1px solid var(--line,#e2e8f0);background:#fff;border-radius:8px;padding:6px 14px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink,#0f172a)}
.pbtn:hover:not(:disabled){background:rgba(0,187,51,.06);border-color:rgba(0,187,51,.4)}
.pbtn:disabled{opacity:.4;cursor:default}
.pinfo{font-size:13px;color:var(--muted,#64748b);font-variant-numeric:tabular-nums}
html[dir="rtl"] .pbtn{transform:scaleX(1)}

/* 📍 near-me filter */
.radius-where{display:block;font-size:10.5px;color:var(--muted,#94a3b8);max-width:110px;line-height:1.2;margin-top:2px}

/* Mobile: filters belong to the document flow. Keeping the entire filter panel pinned under
   the header consumed most of a phone viewport and made the results feel locked while scrolling. */
@media (max-width:760px){
  .controls{position:static;top:auto;z-index:auto;box-shadow:none}
}