/* ══════════════════════════════════════════════════════════════════════
   CLOSR — marketing site design system
   ══════════════════════════════════════════════════════════════════════
   The look comes from the CLOSR_Website design canvas, which expressed it
   as inline styles on every element. Here it is a vocabulary of classes
   instead: the same values, named once, so a change lands in one place and
   the markup stays readable. Pages that need a one-off still use a style
   attribute — that is the exception, not the layout method.

   Shared by landing.html, buyers, sellers, how-it-works, about, market,
   signup, compare, the sample pages, and the server-rendered listing pages
   in netlify/edge-functions/. The app (index.html) keeps its own styles;
   this file never loads there.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#fbfbfa;
  --surface:#ffffff;
  --ink:#101010;
  --muted:#55555c;
  --faint:#8a8a84;
  --accent:#1d4ed8;
  --accent-dark:#12328c;
  --accent-tint:#eef3ff;
  --line:#e2e2dc;
  --line-2:#ecece7;
  --line-3:#e9e9e6;
  --neutral-300:#d9d9d3;
  --neutral-400:#b9b9b2;
  --neutral-100:#f6f6f4;
  --green:#12b76a;

  --wrap:1240px;
  --pad:40px;
  --nav-h:70px;

  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);

  --sh-card:0 1px 2px rgba(16,16,16,.04),0 9px 20px -12px rgba(16,16,16,.1),0 30px 58px -40px rgba(16,16,16,.3);
  --sh-hero:0 1px 2px rgba(16,16,16,.04),0 10px 22px -12px rgba(16,16,16,.12),0 40px 80px -44px rgba(16,16,16,.34);
  --sh-lift:0 1px 2px rgba(16,16,16,.04),0 8px 18px -8px rgba(16,16,16,.14),0 28px 54px -30px rgba(16,16,16,.28);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.6 'Manrope',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:var(--accent)}
a:hover{color:var(--accent-dark)}
img{display:block;max-width:100%}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:rgba(29,78,216,.16)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Motion vocabulary ───────────────────────────────────────────── */
@keyframes omRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes omFade{from{opacity:0}to{opacity:1}}
@keyframes omPulse{0%{transform:translateY(3px);opacity:.55}100%{transform:none;opacity:1}}
@keyframes omShimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}

.rise{animation:omRise .8s var(--ease-out) both}
.rise-1{animation-delay:.05s}
.rise-2{animation-delay:.12s}
.rise-3{animation-delay:.18s}
.rise-4{animation-delay:.24s}

/* Scroll reveal. Elements start hidden and are shown by site.js as they
   scroll into view. */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .72s var(--ease-out),transform .72s var(--ease-out)}
[data-reveal][data-shown]{opacity:1;transform:none}
[data-reveal][data-stagger]{opacity:1;transform:none}
[data-reveal][data-stagger]>*{opacity:0;transform:translateY(11px);transition:opacity .62s var(--ease-out),transform .62s var(--ease-out)}
[data-reveal][data-stagger][data-shown]>*{opacity:1;transform:none}
[data-reveal][data-stagger][data-shown]>*:nth-child(1){transition-delay:0s}
[data-reveal][data-stagger][data-shown]>*:nth-child(2){transition-delay:.06s}
[data-reveal][data-stagger][data-shown]>*:nth-child(3){transition-delay:.12s}
[data-reveal][data-stagger][data-shown]>*:nth-child(4){transition-delay:.18s}
[data-reveal][data-stagger][data-shown]>*:nth-child(5){transition-delay:.24s}
[data-reveal][data-stagger][data-shown]>*:nth-child(6){transition-delay:.3s}
[data-reveal][data-stagger][data-shown]>*:nth-child(7){transition-delay:.36s}
[data-reveal][data-stagger][data-shown]>*:nth-child(n+8){transition-delay:.42s}

[data-lift]{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
[data-lift]:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
[data-lift] img{transition:transform .55s var(--ease-soft)}
[data-lift]:hover img{transform:scale(1.035)}

.pulse{animation:omPulse .34s var(--ease-out) both}

/* ── Layout ──────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sec{padding-bottom:100px}
.sec-tight{padding-bottom:56px}
.sec-top{padding-top:72px}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
/* Split layouts are modifiers on one class rather than inline
   grid-template-columns, because an inline value outranks a media query —
   a two-column grid stated inline stays two columns on a phone. */
.split{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:56px;align-items:start}
.split-72{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:64px}
.split-even{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split-start{align-items:start}
.panel-split{display:grid;grid-template-columns:1.55fr 1fr}
.stat-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding-top:20px;min-width:min(340px,100%)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row-between{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}

/* ── Type ────────────────────────────────────────────────────────── */
.eyebrow{font-weight:700;font-size:12px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.eyebrow-mute{color:var(--faint)}
.display{font-weight:800;font-size:clamp(74px,10.2vw,148px);line-height:.84;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.h1{font-weight:800;font-size:clamp(32px,3.8vw,54px);line-height:1;letter-spacing:-.04em;margin:0}
.h2{font-weight:800;font-size:clamp(34px,3.8vw,54px);line-height:1;letter-spacing:-.04em;margin:0}
.h2-big{font-weight:800;font-size:clamp(38px,4.4vw,66px);line-height:.96;letter-spacing:-.045em;margin:0}
.h3{font-weight:800;font-size:clamp(28px,3vw,42px);line-height:1.05;letter-spacing:-.035em;margin:0}
.h4{font-weight:800;font-size:22px;line-height:1.2;letter-spacing:-.025em;margin:0}
.lede{font-weight:400;font-size:18px;line-height:1.62;color:var(--muted);margin:16px 0 0;max-width:520px}
.body{font-weight:400;font-size:16px;line-height:1.65;color:var(--muted);margin:0}
.small{font-weight:400;font-size:14.5px;line-height:1.5;color:var(--faint);margin:0}
.fine{font-weight:400;font-size:13px;line-height:1.5;color:var(--faint);margin:0}
.num{font-variant-numeric:tabular-nums}
.ink{color:var(--ink)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:15px;line-height:1;white-space:nowrap;cursor:pointer;
  padding:17px 34px;border-radius:999px;border:1.5px solid transparent;
  background:transparent;color:var(--ink);
  transition:background .2s var(--ease-out),border-color .2s var(--ease-out),transform .2s var(--ease-out);
}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{color:#fff;transform:translateY(-2px)}
.btn-blue{background:var(--accent);color:#fff}
.btn-blue:hover{background:var(--accent-dark);color:#fff}
.btn-outline{border-color:var(--neutral-300);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);color:var(--ink)}
.btn-sm{font-size:14px;padding:13px 24px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.pill{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px;line-height:1;
  color:var(--ink);background:#fff;border:1.5px solid var(--line);
  padding:12px 20px;border-radius:999px;white-space:nowrap;cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}

.badge{
  font-weight:700;font-size:11px;line-height:1;letter-spacing:.1em;text-transform:uppercase;
  background:#fff;color:var(--ink);padding:8px 12px;border-radius:999px;
}
.tag{
  font-weight:700;font-size:11.5px;line-height:1;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);
}

/* ── Surfaces ────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line-3);border-radius:16px;box-shadow:var(--sh-card)}
.card-pad{padding:32px 34px}
.card-flat{background:var(--surface);border:1px solid var(--line-3);border-radius:16px}
.panel{background:var(--surface);border:1px solid var(--line-3);border-radius:16px;overflow:hidden;box-shadow:var(--sh-hero)}
.panel-bar{display:flex;align-items:center;gap:9px;padding:15px 20px;background:#f7f7f6;border-bottom:1px solid var(--line-2)}
.panel-dot{width:10px;height:10px;border-radius:50%;background:var(--neutral-300)}

/* ── Rules & ledgers ─────────────────────────────────────────────── */
.rule-top{border-top:2px solid var(--ink)}
.hr{height:1px;border:0;background:var(--line);margin:0}

.ledger{border-top:2px solid var(--ink)}
.ledger-row{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:32px;
  padding:26px 0;border-bottom:1px solid var(--line);
}
.ledger-wide{grid-template-columns:190px minmax(0,1fr)}
.ledger-row .k{font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ledger-row .t{font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.02em;margin:0}
.ledger-row .d{font-weight:400;font-size:15.5px;line-height:1.6;color:var(--muted);margin:8px 0 0;max-width:640px}

.kv{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid var(--line);font-weight:500;font-size:16px;line-height:1.4;color:var(--muted)}
.kv strong{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.kv:last-child{border-bottom:0}

/* ── Stats ───────────────────────────────────────────────────────── */
.stat .v{font-weight:800;font-size:40px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat .k{font-weight:700;font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:8px}
.stat-lg .v{font-weight:800;font-size:clamp(34px,4vw,46px);letter-spacing:-.04em}

/* ── Steps ───────────────────────────────────────────────────────── */
.step{padding:26px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:64px minmax(0,1fr);gap:26px;align-items:start}
.step .n{font-weight:800;font-size:15px;line-height:1.2;letter-spacing:-.01em;color:var(--accent);font-variant-numeric:tabular-nums}
.step .t{font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.02em;margin:0}
.step .d{font-weight:400;font-size:15.5px;line-height:1.6;color:var(--muted);margin:7px 0 0;max-width:680px}

/* ── Listing cards ───────────────────────────────────────────────── */
.lcard{display:block;color:var(--ink);border-radius:14px}
.lcard:hover{color:var(--ink)}
.lcard .shot{position:relative;overflow:hidden;border-radius:14px;background:var(--neutral-100)}
.lcard .shot img{width:100%;height:280px;object-fit:cover}
.lcard .shot .badge{position:absolute;left:14px;top:14px}
.lcard .head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px}
.lcard .price{font-weight:800;font-size:30px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.lcard .ppsf{font-weight:600;font-size:13.5px;line-height:1;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.lcard .addr{font-weight:600;font-size:16px;line-height:1.4;margin-top:9px}
.lcard .meta{font-weight:400;font-size:14.5px;line-height:1.4;color:var(--faint);margin-top:2px}

/* Empty state — shown wherever live listings are expected and none are
   active yet. Better than a grid of nothing, and honest about why. */
.empty{
  border:1px dashed var(--neutral-300);border-radius:16px;
  padding:56px 40px;text-align:center;background:var(--surface);
}
.empty .t{font-weight:800;font-size:22px;letter-spacing:-.025em;margin:0}
.empty .d{font-weight:400;font-size:15.5px;line-height:1.6;color:var(--muted);margin:10px auto 0;max-width:440px}

/* Skeletons while listings load */
.sk{background:#efefec;background-image:linear-gradient(90deg,#efefec 0px,#f7f7f5 180px,#efefec 360px);background-repeat:no-repeat;animation:omShimmer 1.15s linear infinite;border-radius:14px}
.sk-shot{height:280px}
.sk-line{height:14px;margin-top:14px;border-radius:6px}
.sk-line.short{width:52%}

/* ── Forms ───────────────────────────────────────────────────────── */
.field{display:block;margin-bottom:18px}
.field>span{display:block;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.input,select.input{
  width:100%;padding:14px 20px;font:600 15px/1.2 'Manrope',system-ui,sans-serif;
  color:var(--ink);background:#fff;border:1.5px solid var(--neutral-300);border-radius:999px;
  transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out);
}
.input:hover,select.input:hover{border-color:var(--neutral-400)}
.input:focus,select.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(29,78,216,.12)}
.input[aria-invalid="true"]{border-color:var(--accent)}
textarea.input{border-radius:16px;min-height:110px;resize:vertical;line-height:1.6}
.note{font-weight:600;font-size:13px;color:var(--accent);margin:8px 0 0;min-height:1px}

.choice{
  display:block;text-align:left;width:100%;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:22px 24px;
  transition:border-color .18s var(--ease-out),background .18s var(--ease-out);
}
.choice:hover{border-color:var(--neutral-400)}
.choice[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint)}
.choice .t{font-weight:700;font-size:17px;letter-spacing:-.02em;display:flex;justify-content:space-between;gap:12px}
.choice .d{font-weight:400;font-size:14.5px;line-height:1.55;color:var(--muted);margin:6px 0 0}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:999px;background:var(--line);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:grab;box-shadow:0 1px 2px rgba(16,16,16,.18),0 3px 10px rgba(29,78,216,.34);transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.14);box-shadow:0 1px 2px rgba(16,16,16,.2),0 5px 16px rgba(29,78,216,.44)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.06);cursor:grabbing}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:0;background:var(--accent);cursor:grab}

.slider{margin-bottom:22px}
.slider .lab{display:flex;justify-content:space-between;gap:16px;font-weight:600;font-size:14px;color:var(--muted);margin-bottom:10px}
.slider .lab b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;
  background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;
  padding:24px 0;text-align:left;font:700 18px/1.35 'Manrope',sans-serif;
  letter-spacing:-.02em;color:var(--ink);
}
.faq-q .x{flex:none;width:16px;height:16px;position:relative;transition:transform .28s var(--ease-out)}
.faq-q .x::before,.faq-q .x::after{content:'';position:absolute;background:var(--accent);border-radius:2px}
.faq-q .x::before{left:0;top:7px;width:16px;height:2px}
.faq-q .x::after{top:0;left:7px;width:2px;height:16px}
.faq-q[aria-expanded="true"] .x{transform:rotate(45deg)}
.faq-a{overflow:hidden;max-height:0;transition:max-height .32s var(--ease-out)}
.faq-a>p{font-weight:400;font-size:16px;line-height:1.7;color:var(--muted);margin:0;padding:0 0 26px;max-width:760px;border-bottom:1px solid var(--line)}

/* ── Tables ──────────────────────────────────────────────────────── */
.table-scroll{overflow-x:auto}
.table{width:100%;border-collapse:collapse;min-width:640px}
.table th{
  text-align:left;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:0 20px 16px 0;border-bottom:2px solid var(--ink);white-space:nowrap;
}
.table td{
  font-weight:500;font-size:16px;color:var(--ink);padding:18px 20px 18px 0;
  border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;
}
.table td:first-child{font-weight:700}
.table .best{background:rgba(29,78,216,.08);font-weight:700;color:var(--accent-dark)}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:64px;align-items:center;padding-top:72px;padding-bottom:96px}
.hero-shot{overflow:hidden;border-radius:16px}
.hero-shot img{width:100%;height:600px;object-fit:cover;object-position:center 42%}

/* ── The two-column commission comparison ───────────────────────── */
.vs{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink)}
.vs>div{padding:34px 44px 34px 0}
.vs>div+div{padding:34px 0 34px 44px;border-right:0}
.vs>div:first-child{border-right:1px solid var(--line)}
.vs .net{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:22px 0 0}
.vs .net span:first-child{font-weight:700;font-size:15px}
.vs .net span:last-child{font-weight:800;font-size:44px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.vs .dim .net span:last-child{color:var(--faint)}

/* ── Image bands ─────────────────────────────────────────────────── */
.band{position:relative;overflow:hidden;border-radius:20px;isolation:isolate}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(16,16,16,.92) 6%,rgba(16,16,16,.66) 56%,rgba(16,16,16,.34))}
/* A band carrying a form needs the whole width readable, not just the
   left column where a headline would sit. */
.band-dark::before{background:linear-gradient(100deg,rgba(16,16,16,.95) 6%,rgba(16,16,16,.86) 52%,rgba(16,16,16,.78))}
.band-in{position:relative;padding:56px;min-height:420px;display:flex;flex-direction:column;justify-content:center}
.band-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:48px;align-items:center}
.band h2,.band h3{color:#fff;margin:16px 0 0}
.band p{color:rgba(255,255,255,.74);font-size:17px;line-height:1.6;margin:16px 0 0;max-width:460px}
.band .eyebrow{color:#8faeff}
.band .btn-white{background:#fff;color:var(--ink)}
.band .btn-white:hover{color:var(--ink)}

/* ── Dark call to action ─────────────────────────────────────────── */
.cta-dark{background:var(--ink);border-radius:20px;padding:72px 56px;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.cta-dark h2{color:#fff;max-width:560px}
.cta-dark p{color:rgba(255,255,255,.7);font-size:17px;line-height:1.6;margin:16px 0 0}
.cta-dark .btn-white{background:#fff;color:var(--ink)}
.cta-dark .btn-white:hover{color:var(--ink)}
.cta-dark .btn-line{border-color:rgba(255,255,255,.35);color:#fff}
.cta-dark .btn-line:hover{border-color:#fff;color:#fff}

/* ── Seven-step deal grid ────────────────────────────────────────── */
.deal-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.deal-grid>div{padding:20px 0;border-top:1px solid var(--line)}
.deal-grid .n{font-weight:800;font-size:13px;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.deal-grid h4{font-weight:800;font-size:21px;line-height:1.1;letter-spacing:-.02em;margin:10px 0 6px}
.deal-grid p{font-weight:400;font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}

/* ── Product panels ──────────────────────────────────────────────── */
.tech-card{background:var(--surface);border:1px solid var(--line-3);border-radius:16px;padding:26px 28px}
.tech-card .top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.tech-card .status{font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.tech-card h4{font-weight:800;font-size:22px;line-height:1.12;letter-spacing:-.025em;margin:0 0 14px}
.tech-card .r{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid #f2f2ef;font-weight:500;font-size:13.5px;line-height:1.35;color:var(--muted)}
.tech-card .r b{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}

/* ── Transaction thread ──────────────────────────────────────────── */
.thread-row{display:flex;gap:14px;padding:16px 0;border-top:1px solid #f0f0ec}
.thread-row .dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex:none;background:var(--neutral-300)}
.thread-row .dot.done{background:var(--green)}
.thread-row .dot.now{background:var(--accent)}
.thread-row .thread-body{flex:1;min-width:0}
.thread-row .hd{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.thread-row .t{font-weight:700;font-size:16.5px;line-height:1.2}
.thread-row .meta{font-weight:700;font-size:13px;line-height:1;white-space:nowrap;color:var(--faint)}
.thread-row .d{font-weight:400;font-size:14.5px;line-height:1.55;color:var(--muted);margin-top:4px}

/* ── Listing detail ──────────────────────────────────────────────
   The thumbnail rail is pinned to the hero's height rather than left to
   size itself: photo counts vary between listings, and a column that
   grows with them leaves a tall empty gutter beside the hero. */
.pdp-gallery{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:14px;margin-top:18px}
.pdp-gallery>img{width:100%;height:500px;object-fit:cover;border-radius:14px}
.pdp-thumbs{display:grid;gap:14px;height:500px}
.pdp-thumbs img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:10px}

.facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line);margin-top:28px}
.facts .stat{padding:22px 0}
.facts .stat .v{font-size:30px}

/* ── Inner-page hero ─────────────────────────────────────────────── */
.page-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:60px;align-items:center;padding-top:64px;padding-bottom:88px}
.page-hero h1{font-weight:800;font-size:clamp(46px,5.6vw,84px);line-height:.94;letter-spacing:-.05em;margin:22px 0 0}
.page-hero img{width:100%;height:520px;object-fit:cover;border-radius:16px}
.page-hero-solo{max-width:760px}

/* ── Calculators ─────────────────────────────────────────────────── */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:48px;align-items:start}
.calc-result{background:var(--ink);color:#fff;border-radius:16px;padding:34px 36px}
.calc-result .k{font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.calc-result .v{font-weight:800;font-size:clamp(38px,4.4vw,58px);line-height:1;letter-spacing:-.045em;margin-top:14px;font-variant-numeric:tabular-nums}
.calc-result .r{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.16);font-weight:500;font-size:14.5px;color:rgba(255,255,255,.72)}
.calc-result .r:first-of-type{margin-top:22px}
.calc-result .r b{color:#fff;font-variant-numeric:tabular-nums}
.calc-note{font-weight:400;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.5);margin:20px 0 0}

/* ── Showing slots ───────────────────────────────────────────────── */
.slot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:10px}
.slot .when{font-weight:700;font-size:15px}
.slot .when span{font-weight:500;color:var(--faint);margin-left:8px}
.slot .state{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* ── Notification cards ──────────────────────────────────────────── */
.push{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.push .k{font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);width:96px;flex:none;padding-top:3px}
.push .t{font-weight:700;font-size:16px;line-height:1.3}
.push .d{font-weight:400;font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:3px}
.push .ago{margin-left:auto;font-weight:600;font-size:12.5px;color:var(--faint);white-space:nowrap}

/* ── Small feature cards ─────────────────────────────────────────── */
.mini{background:var(--surface);border:1px solid var(--line-3);border-radius:14px;padding:22px 24px}
.mini .k{font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.mini .t{font-weight:700;font-size:17px;letter-spacing:-.02em;margin:10px 0 6px}
.mini .d{font-weight:400;font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}

.photo-option{background:var(--surface);border:1px solid var(--line-3);border-radius:16px;overflow:hidden}
.photo-option img{width:100%;height:280px;object-fit:cover}
.photo-option .in{padding:26px 28px}

/* ── Feed cards (landing page "discover" feed) ──────────────────────
   A listing card with a duration badge standing in for a video
   walkthrough — CLOSR has photos, not video, today — plus a CLOSR
   estimate row and an action strip. Illustrative content only; the real
   marketplace grid below it uses .lcard and live data. */
.feed-strip{display:flex;gap:22px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.feed-strip::-webkit-scrollbar{display:none}
.feed-card{flex:0 0 280px;scroll-snap-align:start}
.feed-card .shot{position:relative;overflow:hidden;border-radius:14px;background:var(--neutral-100)}
.feed-card .shot img{width:100%;height:360px;object-fit:cover}
.feed-card .shot .badge{position:absolute;left:14px;top:14px}
.feed-card .shot .dur{position:absolute;right:14px;bottom:14px;background:rgba(16,16,16,.68);color:#fff;font-weight:700;font-size:12px;letter-spacing:.02em;padding:5px 10px;border-radius:999px}
.feed-card .head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:16px}
.feed-card .price{font-weight:800;font-size:24px;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.feed-card .addr{font-weight:600;font-size:15px;line-height:1.4;margin-top:8px}
.feed-card .meta{font-weight:400;font-size:13.5px;line-height:1.4;color:var(--faint);margin-top:2px}
.feed-card .est{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.feed-card .est b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.feed-card .delta{font-weight:700;font-size:12.5px;color:var(--accent)}
.feed-actions{display:flex;gap:7px;margin-top:12px}
.feed-actions span{flex:1;text-align:center;font-weight:700;font-size:11.5px;padding:9px 0;border:1px solid var(--line);border-radius:999px;color:var(--muted)}

/* ── The CLOSR estimate example ─────────────────────────────────── */
.est-card{background:var(--surface);border:1px solid var(--line-3);border-radius:16px;padding:34px 36px}
.est-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.est-compare .v{font-weight:800;font-size:clamp(26px,2.8vw,34px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:6px}
.est-range{position:relative;height:6px;border-radius:999px;background:var(--line-2);margin:34px 4px 12px}
.est-range .fill{position:absolute;top:0;bottom:0;background:var(--accent-tint);border-radius:999px}
.est-range .mark{position:absolute;top:-8px;width:2px;height:22px;background:var(--ink);border-radius:1px}
.est-range .mark.accent{background:var(--accent)}
.est-range .lab{position:absolute;top:16px;font-weight:700;font-size:12px;white-space:nowrap;transform:translateX(-50%);color:var(--muted)}
.comp-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.comp-row .addr{font-weight:700;font-size:14.5px}
.comp-row .meta{font-weight:400;font-size:13px;color:var(--faint);margin-top:3px}
.comp-row .figs{text-align:right;flex:none}
.comp-row .price{font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums}
.comp-row .ppsf{font-weight:500;font-size:12.5px;color:var(--faint);margin-top:2px}

/* ── Five-screen "end to end" strip ─────────────────────────────── */
.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}

/* ── Nav ─────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:rgba(251,251,250,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-2)}
.nav-row{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:36px;height:var(--nav-h)}
.nav-brand{font-weight:800;font-size:24px;line-height:1;letter-spacing:-.035em;color:var(--ink);flex:none}
.nav-brand:hover{color:var(--ink)}
.nav-links{display:flex;gap:26px;align-items:center;min-width:0;flex:0 1 auto}
.nav-link{position:relative;font-weight:600;font-size:15px;line-height:1;color:rgba(16,16,16,.72);white-space:nowrap;transition:color .18s var(--ease-out)}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--accent-dark)}
.nav-link::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease-out)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
.nav-util{font-weight:600;font-size:14px;line-height:1;color:var(--muted);white-space:nowrap}
.nav-util:hover{color:var(--ink)}

/* ── Footer ──────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:#fff;padding:80px 0 32px;margin-top:40px}
.foot a{color:rgba(255,255,255,.8)}
.foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.6fr));gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-brand{font-weight:800;font-size:30px;line-height:1;letter-spacing:-.035em}
.foot-tag{font-weight:500;font-size:16px;line-height:1.5;color:rgba(255,255,255,.6);margin:12px 0 0}
.foot-legal{font-weight:400;font-size:13px;line-height:1.65;color:rgba(255,255,255,.45);margin:24px 0 0;max-width:400px}
.foot-h{font-weight:700;font-size:11.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:18px}
.foot-col{display:flex;flex-direction:column;gap:12px;font-weight:500;font-size:14.5px;line-height:1}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-weight:400;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.42)}

/* ── Pre-launch gate ─────────────────────────────────────────────
   Carried over from the old landing page: the marketing front door is
   password-gated until launch. A page opts in with <body data-gate="…">,
   and site.js removes the attribute once the visitor is through.

   Content is hidden by CSS from first paint rather than covered by an
   overlay, so nothing flashes before the gate appears — and if the
   script never runs, the page stays closed rather than open. */
body[data-gate] > *:not(.pw-gate){display:none !important}
.pw-gate{
  position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.pw-gate form{width:100%;max-width:340px;text-align:center}
.pw-gate .brand{font-weight:800;font-size:26px;letter-spacing:-.04em;margin-bottom:8px}
.pw-gate .brand i{color:var(--accent);font-style:normal}
.pw-gate .hint{font-size:13px;color:var(--muted);margin-bottom:24px}
.pw-gate .err{font-size:12px;color:#ef4444;margin:12px 0 0;min-height:1px}
.pw-gate .input{margin-bottom:12px;text-align:center}

/* ── Toast ───────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:200;
  background:var(--ink);color:#fff;padding:14px 26px;border-radius:999px;
  font-weight:700;font-size:14px;line-height:1;
  animation:omRise .3s var(--ease-out) both;box-shadow:0 18px 40px -18px rgba(16,16,16,.6);
}

/* ── Responsive ──────────────────────────────────────────────────
   Tablet gets its own tuning rather than the mobile fallback. Below
   ~1000px the nav's link group scrolls horizontally while the brand and
   the Sign up CTA stay pinned; Compare and Dashboard fold away and stay
   reachable from the footer. */
@media (max-width:1000px){
  .nav-row{gap:20px;padding:0 24px}
  .nav-links{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:1 1 auto;min-width:0}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-util{display:none}
  .nav-actions{margin-left:0}
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .est-compare{grid-template-columns:1fr 1fr}
  .split,.split-72,.split-even{grid-template-columns:minmax(0,1fr);gap:40px}
  .panel-split{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}
}
@media (max-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr);gap:36px}
  .page-hero{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:44px;padding-bottom:64px}
  .page-hero img{height:340px}
  .calc{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero-shot img{height:380px}
  .deal-grid{grid-template-columns:minmax(0,1fr)}
  .band-split{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:820px){
  :root{--pad:22px}
  .sec{padding-bottom:72px}
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:minmax(0,1fr)}
  .feed-card{flex-basis:240px}
  .feed-card .shot img{height:300px}
  .est-card{padding:26px 24px}
  .vs{grid-template-columns:minmax(0,1fr)}
  .vs>div,.vs>div+div{padding:28px 0;border-right:0;border-bottom:1px solid var(--line)}
  .band-in{padding:34px 26px}
  .push{flex-wrap:wrap}
  .push .k{width:auto}
  .calc-result{padding:26px 24px}
  .cta-dark{padding:44px 28px}
  .hero{padding-top:44px;padding-bottom:64px}
  .nav-row{gap:16px;padding:0 18px}
  .nav-brand{font-size:21px}
  .ledger-row,.ledger-wide{grid-template-columns:minmax(0,1fr);gap:10px}
  .panel-split>div+div{border-top:1px solid var(--line-2)}
  .step{grid-template-columns:44px minmax(0,1fr);gap:16px}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .lcard .shot img{height:230px}
  .pdp-gallery{grid-template-columns:minmax(0,1fr)}
  .pdp-gallery>img{height:300px}
  .pdp-thumbs{height:88px;min-width:0;grid-auto-flow:column;grid-auto-columns:118px;grid-template-rows:1fr;overflow-x:auto}
  /* "Semi-detached" at 30px does not fit a third of a phone screen; the
     figures step down and long single words are allowed to break. */
  .facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
  .facts .stat{overflow-wrap:anywhere}
  .facts .stat .v{font-size:22px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal],[data-reveal][data-stagger]>*{opacity:1 !important;transform:none !important}
  [data-lift]:hover{transform:none}
}