/* Palette (redesigned 2026-10-02, at the owner's request, after Spotify, Shopify
   and Claude): white pages, near-black for the strong things (buttons, the home
   band, selection), and a neutral grey for surfaces. The orange stays the brand:
   the logo and the verification marks, nothing else. One strong colour, used with
   confidence, is what makes a page look made rather than generated. */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F3F3; --surface-3:#E9E9E9;
  --ink:#0A0A0A; --ink-2:#3F3F3F; --muted:#717171;
  --line:#E6E6E6; --line-strong:#CDCDCD;
  --accent:#C25836; --accent-ink:#A0462A; --accent-soft:#F6E9E3;
  /* The colour of doing: buttons, the chosen option, the switch that is on. */
  --primary:#0A0A0A; --primary-hover:#2E2E2E; --on-primary:#FFFFFF;
  /* The dark bands: the top of the home page and the tool bands. */
  --night:#0B0B0B; --night-2:#1A1A1A; --night-line:#2B2B2B; --night-ink:#FFFFFF; --night-muted:#A1A1A1;
  --side:#F7F7F7;
  --gold:#8A6A2F; --gold-soft:#F1EADC; --gold-mark:#B08A35;
  /* Green belongs to one thing only: a deal already agreed between two people. */
  --deal:#2E6A4E; --deal-soft:#E8F1EB;
  --danger:#B4321F; --danger-soft:#FBE9E6;
  --shadow:none;
  --r:16px;       /* panels and cards */
  --r-sm:12px;    /* fields */
  --r-pill:999px; /* buttons and chips */
  --r-chat:22px;  /* the reply box and the bubbles either side of it */
}
/* The dark palette, kept for a switch that does not exist yet. */
:root[data-theme="dark"]{
  --bg:#111010; --surface:#191817; --surface-2:#221F1E; --surface-3:#2A2726; --side:#141312;
  --primary:#F2F0EE; --primary-hover:#D9D6D3; --on-primary:#111010;
  --ink:#F2F0EE; --ink-2:#BFB9B4; --muted:#8B837C;
  --line:#2A2725; --line-strong:#3A3532;
  --accent:#D9714B; --accent-ink:#E79372; --accent-soft:#2A1C16;
  --gold:#B99356; --gold-soft:#241F16; --gold-mark:#C29A4A;
  --deal:#6FAF8C; --deal-soft:#16241C;
  --danger:#C96B57; --danger-soft:#2A1815;
  --shadow:none;
}

*{box-sizing:border-box}
html{direction:ltr}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter","Segoe UI",Tahoma,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Headings in the same clean sans-serif as the text — plain and easy to read, the way
   Google and Instagram set theirs. The serif (Fraunces) is kept for the logo only. */
h1,h2,h3{font-family:"Inter",Tahoma,sans-serif;margin:0;text-wrap:balance;
  letter-spacing:-.025em;font-weight:700;color:var(--ink)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 16px}}
/* Small caps label — used above sections and beside figures. It gives the page an
   editorial voice and does the work a coloured pill would otherwise be doing. */
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:600}
/* For digits sitting inside a sentence. inline-block is what keeps them from being
   split by the surrounding text direction — but it also stops being a table cell,
   so a td carrying this class dropped out of its row and drew its underline in the
   wrong place. On a cell, the class is for the figures alone. */
.num{font-variant-numeric:tabular-nums;direction:ltr;display:inline-block;unicode-bidi:isolate}
td.num,th.num{display:table-cell}

/* ---- the menu ----
   Down the left, the way Spotify and Claude do it: a light grey column with the logo
   at the top, each place an icon and a word, and who you are at the foot. On a phone
   it folds into one bar with a button. */
.nav-toggle{position:fixed;top:20px;inset-inline-start:204px;z-index:40;
  width:32px;height:32px;padding:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:3.5px;cursor:pointer;border-radius:10px;
  background:transparent;border:0;transition:inset-inline-start .18s ease,background .15s ease}
.nav-toggle span{display:block;width:15px;height:1.8px;border-radius:2px;background:var(--ink-2)}
.nav-toggle:hover{background:var(--surface-3)}
body.nav-collapsed .nav-toggle{inset-inline-start:16px;background:var(--surface-2)}
body.nav-collapsed .side{display:none}
@media(max-width:900px){
  .nav-toggle{display:none}
  body.nav-collapsed .side{display:flex}
}

.shell{display:flex;align-items:flex-start;min-height:100vh}
.side{width:248px;flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;
  background:var(--side);display:flex;flex-direction:column;gap:22px;padding:18px 12px 16px;z-index:20}
.colmain{flex:1;min-width:0}
.sideend{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.sideend form{display:flex}
.sideend .btn{justify-content:center;width:100%}
.side .me{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;min-width:0}
.side .me:hover{background:var(--surface-3)}
.side .me.on{background:var(--surface-3)}
.side .me.on b{font-weight:800}
.me-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.me-text b{font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-text small{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sidetop{display:flex;align-items:center;gap:12px;padding:4px 10px 0;min-height:36px}
.menu-btn{display:none}

@media(max-width:900px){
  .shell{flex-direction:column;align-items:stretch;min-height:0}
  .side{width:auto;height:auto;overflow:visible;position:sticky;top:0;flex-direction:column;align-items:stretch;
    gap:0;padding:10px 16px;background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
    border-bottom:1px solid var(--line)}
  .sidetop{justify-content:space-between;padding:0}
  .menu-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
    width:40px;height:40px;padding:0;margin-inline-start:auto;cursor:pointer;
    background:var(--surface-2);border:0;border-radius:var(--r-pill)}
  .menu-btn span{display:block;width:16px;height:1.8px;border-radius:2px;background:var(--ink);
    transition:transform .18s ease,opacity .15s ease}
  body.menu-open .menu-btn span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
  body.menu-open .menu-btn span:nth-child(2){opacity:0}
  body.menu-open .menu-btn span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

  body.has-menu-btn .side nav.main,
  body.has-menu-btn .side .sideend{display:none}
  body.has-menu-btn.menu-open .side nav.main{display:flex;flex-direction:column;gap:2px;margin-top:12px}
  body.has-menu-btn.menu-open .side .sideend{display:flex;gap:8px;margin:12px 0 6px;
    padding-top:12px;border-top:1px solid var(--line)}
  body.has-menu-btn.menu-open nav.main a{padding:12px 12px;font-size:16px}
  .colmain{width:100%}
}

.brand{display:flex;align-items:center;gap:10px;font-family:"Fraunces",Tahoma,sans-serif;font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.mark{display:flex;align-items:center;justify-content:center;flex:none}
.mark svg{display:block;border-radius:7px}
/* The two rings sit opposite each other, so half a turn swaps them and the mark
   lands where it started — the handover, played once on arrival and again on hover. */
@keyframes markSwap{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}
@keyframes markSwapAgain{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}
.brand .mark svg{animation:markSwap 1.1s cubic-bezier(.2,.7,.2,1) both .15s}
.brand:hover .mark svg{animation:markSwapAgain .7s cubic-bezier(.4,0,.2,1)}
nav.main{display:flex;flex-direction:column;gap:2px}
nav.main a{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:12px;
  font-size:15px;font-weight:500;color:var(--ink-2);white-space:nowrap;
  transition:background .15s ease,color .15s ease}
nav.main a svg{flex:none;width:22px;height:22px}
nav.main a:hover{background:var(--surface-3);color:var(--ink)}
nav.main a.on{background:var(--surface-3);color:var(--ink);font-weight:700}
nav.main a.on svg{stroke-width:2.3}
.avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;color:#fff;flex:none}
.avatar-photo{display:block;object-fit:cover;background:var(--surface-2)}

/* ---- buttons ----
   Round-ended and solid, the way Spotify and Shopify draw theirs: black for the thing
   to do, an outline for the other choice. Weight carries the hierarchy, not effects. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
     padding:10px 22px;border-radius:var(--r-pill);font-size:15px;font-weight:600;letter-spacing:-.005em;
     border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap;
     transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-ghost{background:var(--bg);border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--bg)}
.btn-light{background:#fff;color:#0A0A0A}
.btn-light:hover{background:#E9E9E9}
.btn-sm{min-height:36px;padding:7px 16px;font-size:14px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---- the home band ----
   One dark panel at the top of the home page, rounded and set in from the edges the
   way Spotify sets its banners: a big white headline, a search box, and the owner's
   drawing beside it. The page under it is white, so the band is the one loud thing. */
.home-band{padding:12px 12px 0;animation:none}
.hb{background:var(--night);color:var(--night-ink);border-radius:28px;overflow:hidden;position:relative}
.hb-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:24px;
  padding:72px 56px 64px;max-width:1240px;margin:0 auto}
.hb h1{color:var(--night-ink);font-size:clamp(40px,6vw,76px);line-height:1;letter-spacing:-.045em;font-weight:800}
.hb h1 .accent-mark{color:var(--night-muted)}
.hb-lead{margin:22px 0 0;max-width:40ch;font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:var(--night-muted)}
.hb-search{display:flex;align-items:center;gap:8px;margin-top:32px;max-width:520px;
  background:#fff;border-radius:var(--r-pill);padding:6px 6px 6px 18px}
.hb-search svg{flex:none;color:#717171}
.hb-search input{flex:1;min-width:0;border:0;background:transparent;padding:10px 4px;font-size:16px;color:#0A0A0A;min-height:0}
.hb-search input:focus{box-shadow:none}
.hb-search .btn{flex:none}
.hb-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:15px}
.hb-links a{color:var(--night-ink);font-weight:600;border-bottom:1px solid #4a4a4a;padding-bottom:2px}
.hb-links a:hover{border-bottom-color:#fff}
/* Behind the whole band: a quiet sky, faded out behind the text so it never gets in the way. */
.hb-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 38%,#000 72%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 38%,#000 72%)}
.hb-grid{position:relative}
.hb-sky .tw{transform-box:fill-box;transform-origin:center;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:.75;transform:scale(1)}}
@media(prefers-reduced-motion: reduce){.hb-sky .tw{animation:none;opacity:.45}}
@media(max-width:980px){
  .hb-grid{grid-template-columns:1fr;padding:44px 24px 36px;gap:8px}
  .hb-sky{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.15) 55%,#000 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.15) 55%,#000 100%)}
}
@media(max-width:640px){
  .home-band{padding:8px 8px 0}
  .hb{border-radius:22px}
  .hb-grid{padding:36px 20px 30px}
  .hb-search{padding-left:14px}
  .hb-search .btn{padding:8px 16px;min-height:40px}
}
.accent-mark{color:var(--muted);font-style:normal}

/* Kinds of business, as chips under the band: Spotify's row of filters. */
.kind-chips{display:flex;gap:8px;overflow-x:auto;padding:22px 0 4px;scrollbar-width:none}
.kind-chips::-webkit-scrollbar{display:none}
.kind-chips a{flex:none;padding:9px 16px;border-radius:var(--r-pill);background:var(--surface-2);
  font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;transition:background .15s ease}
.kind-chips a:hover{background:var(--surface-3)}
.kind-chips a.on{background:var(--primary);color:var(--on-primary)}

/* ---- layout ---- */
section{padding:48px 0;animation:fadeInUp .4s ease both}
.sec-title{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.sec-title h2{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.03em;font-weight:800}
/* :not(.btn) matters — without it this quiet "see all" styling lands on buttons that
   happen to sit in a section heading and washes their label out. */
.sec-title a:not(.btn){font-size:14px;color:var(--muted);font-weight:700}
.sec-title a:not(.btn):hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px 12px}
/* A grid track will not go narrower than its content unless told it may — the offers
   table carries min-width:480px so its columns stay readable, and the scroll box
   around it could not shrink past that, so the page grew wider than the phone.
   The permission belongs on the track (minmax(0, 1fr)), not on the children:
   min-width:0 on every child let the track collapse to nothing instead, and the
   table spilled out of a two-pixel box. */
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}
/* Browse puts the filters first. Written as a class, not an inline style — an inline
   grid-template beats the media query below and leaves two columns on a phone. */
/* The browse page is one column now: the filters are a bar across the top. */
@media(max-width:880px){.split{grid-template-columns:minmax(0,1fr)}}

/* ---- listing card ---- */
/* A listing is a real object, so it keeps a surface — but it sits on the page with a
   hairline and no shadow, and lifts only its border on hover. */
/* Spotify's card: no frame at rest, the picture does the work; the whole card takes a
   grey ground when the pointer is on it. */
.lcard{background:transparent;border:0;border-radius:20px;padding:10px;display:flex;flex-direction:column;gap:11px;
       transition:background .18s ease}
.lcard:hover{background:var(--surface-2)}
.cards > *{animation:fadeInUp .5s ease both}
.cards > *:nth-child(1){animation-delay:.02s}
.cards > *:nth-child(2){animation-delay:.06s}
.cards > *:nth-child(3){animation-delay:.10s}
.cards > *:nth-child(4){animation-delay:.14s}
.cards > *:nth-child(5){animation-delay:.18s}
.cards > *:nth-child(6){animation-delay:.22s}
.lcard .row1{display:flex;align-items:flex-start;gap:9px}
.lcard h3{font-size:16.5px;font-weight:600;line-height:1.5;flex:1}
.lcard .url{font-size:13px;color:var(--muted);direction:ltr;text-align:left}
.lcard .desc{font-size:14.5px;color:var(--ink-2);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.figs{display:flex;gap:0;border-top:1px solid var(--line);padding-top:12px;margin-top:auto}
.figs div{flex:1;text-align:center;border-inline-start:1px solid var(--line)}
.figs div:first-child{border:none}
.figs b{display:block;font-size:15.5px;font-weight:600}
.figs span{font-size:11.5px;color:var(--muted)}

/* ---- badges ---- */
/* Tags, not pills: squared off, letterspaced, and carried by an outline rather than
   a filled colour chip. */
.badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;display:inline-flex;
  align-items:center;gap:4px;border:1px solid var(--line-strong);color:var(--muted);background:none}
.b-ok{border-color:var(--ink);color:var(--ink)}
.b-gold{border-color:var(--gold);color:var(--gold)}
.b-mut{border-color:var(--line-strong);color:var(--muted)}
.b-warn{border-color:var(--danger);color:var(--danger)}

/* ---- filters ---- */
/* Filters are page furniture, not an object — so no card. A single dividing rule
   separates them from the results instead of wrapping them in another identical box.
   (Boxing everything the same way is what makes a layout look machine-made.) */
/* Left over from when this was a column down the side: a vertical direction, a rule
   down its right edge and a sticky position. All three fought the bar it is now, and
   the direction was what stacked every control against the right margin. The layout
   belongs to the media queries below; this only says the pieces sit in a line. */
.filters{display:flex;gap:14px}
@media(max-width:880px){
  .filters{position:static;padding-inline-end:0;border-inline-end:0;
    padding-bottom:22px;border-bottom:1px solid var(--line)}
}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:600;color:var(--ink)}
input,select,textarea{
  font-family:inherit;font-size:15px;padding:11px 14px;border-radius:var(--r-sm);min-height:46px;
  border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
input[type=checkbox],input[type=radio]{min-height:0;width:auto;accent-color:var(--primary)}
input:hover,select:hover,textarea:hover{border-color:#A8A8A8}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(10,10,10,.08)}
/* Avatar colour swatches — each one is its own submit button, so picking a colour
   is a single click with no JavaScript involved. */
.hue-picker{display:flex;flex-wrap:wrap;gap:10px}
.hue-dot{width:38px;height:38px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  padding:0;color:#fff;font-size:15px;font-weight:700;line-height:1;
  transition:transform .15s ease,border-color .15s ease}
.hue-dot:hover{transform:scale(1.09)}
.hue-dot.on{border-color:var(--ink)}

/* Show/hide control on password fields — typing a password you can't read is how
   people end up locked out of a new account. */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-inline-end:62px}
.pw-toggle{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:6px 8px;cursor:pointer;font:inherit;font-size:13px;
  font-weight:600;color:var(--ink-2);border-radius:8px}
.pw-toggle:hover{background:var(--surface-2)}
textarea{resize:vertical;min-height:96px;line-height:1.7}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:13px;color:var(--muted);line-height:1.6}

/* ---- detail ---- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px}
@media(max-width:640px){.panel{padding:20px}}
/* A sidebar is one column of related facts, not three separate objects. Dropping the
   boxes and separating with rules removes the stack of identical rectangles. */
.split > aside > .panel{background:none;border:0;border-radius:0;padding:24px 0;
  border-top:1px solid var(--line)}
.split > aside > .panel:first-child{padding-top:0;border-top:0}
.split > aside > .panel + .panel{margin-top:0}
.panel + .panel{margin-top:16px}
.panel h2{font-size:20px;margin-bottom:14px;letter-spacing:-.02em}
/* Figures used to sit in a ruled grid, which read as a spreadsheet dropped into a
   page that is otherwise made of space — every cell boxed, nothing breathing. The
   lines are gone; the numbers are large enough to find on their own. */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:2px 28px;
  padding:4px 2px}
.kv div{padding:12px 0}
.kv span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;letter-spacing:.02em}
/* Long values (an email, a phone) have to wrap — the panel clips overflow, so
   without this they get cut off mid-word. */
.kv b{font-size:18px;font-weight:600;overflow-wrap:anywhere;line-height:1.25}
.price-big{font-family:"Inter",Tahoma,sans-serif;font-size:36px;font-weight:800;line-height:1.1;letter-spacing:-.03em}

/* ---- escrow tracker ---- */
ol.track{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
ol.track li{display:flex;gap:14px;padding-bottom:20px;position:relative}
ol.track li:last-child{padding-bottom:0}
ol.track li::after{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line)}
ol.track li:last-child::after{display:none}
ol.track li.done::after{background:var(--ink)}
.dot{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
     font-size:13px;font-weight:700;background:var(--surface-2);color:var(--muted);border:2px solid var(--line);z-index:1}
li.done .dot{background:var(--ink);color:var(--bg);border-color:var(--ink)}
li.now .dot{background:var(--bg);color:var(--ink);border-color:var(--ink)}
.track b{display:block;font-weight:600;font-size:15.5px}
.track p{margin:2px 0 0;font-size:14px;color:var(--ink-2);line-height:1.65}
.track .when{font-size:12.5px;color:var(--muted);margin-top:4px}

/* ---- tables ---- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:480px}
th,td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--surface-2);font-weight:600;font-size:13px;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td{color:var(--ink-2)}
td.pos{color:var(--deal);font-weight:600}
td.neg{color:var(--danger)}

/* ---- tabs ---- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}
.tabs a{padding:10px 15px;font-size:15px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s ease,border-color .15s ease}
.tabs a.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:700}

/* An empty state is a sentence, not an object. Stripping the panel styling off it
   keeps one more identical rectangle off the page. */
.empty{text-align:center;padding:48px 20px;color:var(--muted);font-size:15px}
.panel.empty{background:none;border:0;box-shadow:none;padding:56px 20px}
.notice{background:var(--surface-2);color:var(--ink);border-radius:var(--r-sm);padding:14px 16px;font-size:14.5px;margin-bottom:18px}
.demo-note{background:var(--gold-soft);color:var(--gold);border-radius:var(--r);padding:12px 16px;font-size:13.5px;line-height:1.65}
/* ---------- the foot of every page ----------
   The name on the left and the site in columns on the right, on the page's own white.
   Kept compact — it is a map of the site, not a second page — and held at the bottom
   of the screen on a short page instead of floating up into the middle of it. */
footer.site{--foot-ink:var(--ink);--foot-muted:var(--muted);--foot-line:var(--line);
  margin-top:48px;padding:36px 0 18px;background:var(--bg);color:var(--foot-muted);font-size:13px;
  border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:start}
.foot-logo{display:inline-flex;align-items:center;gap:8px;color:var(--foot-ink);
  font-family:"Fraunces",Tahoma,sans-serif;font-size:19px;font-weight:600}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
/* The twelve kinds of business: two short columns under one heading, so the foot stays as low as before. */
.foot-cols{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.foot-col.foot-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:6px;align-content:start}
.foot-cats .foot-h{grid-column:1/-1}
.foot-stack{display:flex;flex-direction:column;gap:16px}
.foot-col{display:flex;flex-direction:column;gap:6px}
.foot-h{margin:0 0 4px;font-size:13px;font-weight:700;color:var(--foot-ink)}
footer.site .foot-col a{color:var(--foot-muted);text-decoration:none;font-size:14px;line-height:1.5}
footer.site .foot-col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot-base{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:24px;padding-top:12px;border-top:1px solid var(--foot-line);font-size:12px}
.foot-word{font-family:"Fraunces",Tahoma,sans-serif;font-size:16px;font-weight:600;color:var(--foot-muted);line-height:1}
@media (min-width:901px){
  /* The page column is at least the screen's height, so the foot sits at the bottom. */
  .colmain{display:flex;flex-direction:column;min-height:100vh}
  .colmain > main{flex:1 0 auto}
}
@media (max-width:1000px){ .foot-grid{grid-template-columns:1fr;gap:22px} }
@media (max-width:640px){
  footer.site{padding-top:24px}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  .foot-cats{grid-column:1/-1}
}

@media(prefers-reduced-motion: reduce){.brand .mark svg{animation:none}}

/* ---- auth pages ---- */
.auth{max-width:420px;margin:0 auto;padding:52px 0}
.auth h2{font-size:30px;font-weight:800;letter-spacing:-.035em;margin-bottom:8px;text-align:center}
.auth .lead{text-align:center;color:var(--muted);font-size:14.5px;margin-bottom:24px}
.auth form{display:flex;flex-direction:column;gap:14px}
.auth .alt{text-align:center;margin-top:18px;font-size:14.5px;color:var(--muted)}
.auth .alt a{color:var(--ink-2);font-weight:500;border-bottom:1px solid var(--line-strong);padding-bottom:1px}
.auth .alt a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.err{background:var(--danger-soft);color:var(--danger);border-radius:var(--r);padding:11px 14px;font-size:14.5px}
.demo-hint{background:var(--surface-2);border-radius:var(--r);padding:12px 14px;font-size:13px;color:var(--ink-2);line-height:1.7;margin-top:18px}
.demo-hint code{font-family:ui-monospace,monospace;background:var(--bg);padding:1px 5px;border-radius:4px;direction:ltr;display:inline-block}

/* ---- message thread ---- */
/* .thread is defined with the bubbles below. */
.msg{background:var(--surface-2);border-radius:var(--r);padding:12px 14px}
.msg.mine{background:var(--primary)}
.msg-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.msg-head b{font-size:14px;font-weight:600}
.msg-head .hint{font-size:11.5px;margin-inline-start:auto}
.msg p{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.msg.mine p{color:var(--on-primary)}

/* ---- sell wizard ---- */
/* Sell page: the form keeps its own 600px column, and the drawing occupies space that
   was empty anyway. Below 1040px the drawing is dropped entirely rather than squeezing
   the form — the flow always comes first. */
.sell-layout{display:grid;grid-template-columns:200px minmax(0,600px);gap:64px;
  justify-content:center;align-items:start}
.sell-form{min-width:0}
@media(max-width:1040px){
  .sell-layout{grid-template-columns:minmax(0,600px);gap:0}
  .sell-aside{display:none}
}
.sell-aside{position:sticky;top:40px}
.climb{display:block;width:100%;height:auto}
/* Drawn rather than simply shown: the steps trace out, then the figure and the
   listing at the top fade in behind them. */
@keyframes clDraw{to{stroke-dashoffset:0}}
@keyframes clIn{to{opacity:1}}
.climb .cl-steps{stroke-dasharray:1;stroke-dashoffset:1;animation:clDraw 1.4s ease forwards .25s}
.climb .cl-path{opacity:0;animation:clIn .8s ease forwards 1.5s}
.climb .cl-figure{opacity:0;animation:clIn .7s ease forwards 1.15s}
.climb .cl-goal{opacity:0;animation:clIn .7s ease forwards 1.75s}
@media(prefers-reduced-motion: reduce){
  .climb .cl-steps{stroke-dashoffset:0;animation:none}
  .climb .cl-path,.climb .cl-figure,.climb .cl-goal{opacity:1;animation:none}
}
.sell-aside-note{margin:26px 0 0;font-size:13.5px;color:var(--muted);line-height:1.7;
  padding-top:18px;border-top:1px solid var(--line)}
.sell-aside-note .eyebrow{display:block;margin-bottom:8px}

.wizard-bar{height:4px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-bottom:10px}
.wizard-fill{height:100%;width:0;background:var(--primary);border-radius:999px;transition:width .3s ease}
.wizard-count{margin-bottom:20px}
.wizard-step{display:flex;flex-direction:column;gap:16px;animation:fadeInUp .3s ease both}
/* display:flex would otherwise beat the UA stylesheet's [hidden]{display:none} */
.wizard-step[hidden],.wizard-nav .btn[hidden],.wizard-err[hidden]{display:none}
.wizard-step h2,.wizard-step p.hint{margin:0}
.wizard-nav{display:flex;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.wizard-nav .btn{flex:1;justify-content:center}
.wizard-err{margin-top:4px}

/* ---- admin ---- */
.adminrow{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.adminrow .head{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.adminrow h3{font-size:17px;flex:1;font-weight:600}
.adminrow .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.adminrow .acts form{display:flex;gap:8px;flex:1;flex-wrap:wrap;align-items:center;margin:0}
.adminrow .acts input{flex:1;min-width:160px}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(1.08)}

/* ---- inbox ---- */
/* Conversations as a list of rules, not a stack of cards. An unread one is marked by
   a dot and a brighter title — no coloured background needed to make the point. */
/* .conv, not .thread — messageThread() already owns .thread for the message list. */
.convs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.conv{display:flex;gap:14px;align-items:flex-start;padding:18px 2px;
  border-bottom:1px solid var(--line);transition:background .15s ease}
.conv .mark{flex:none}
.th-main{flex:1;min-width:0}
.conv:hover{background:var(--surface)}
.th-head{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.th-head b{font-size:15px;font-weight:500;color:var(--ink-2)}
.conv.is-unread .th-head b{color:var(--ink);font-weight:600}
.th-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.th-when{margin-inline-start:auto;font-size:12.5px;color:var(--muted)}
.th-body{font-size:14px;color:var(--muted);line-height:1.6}
.th-who{color:var(--ink-2)}
.th-kind{margin-top:7px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* The unread count beside "Messages" in the menu. */
.nav-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;margin-inline-start:8px;border-radius:var(--r-pill);background:var(--accent);color:#fff;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
nav.main a > span{display:flex;align-items:center}
.th-about{font-size:12.5px;color:var(--muted)}

/* No decoration in the leftover space — the last cell simply grows into it, so the
   row ends flush and there is no gap to fill in the first place. */
.kv > div:last-child{grid-column:auto / -1}

/* A switch shows its own state, so the label never has to say "currently on". It's a
   submit button underneath — no JavaScript, and it keeps working if scripts fail.
   The pill shape is the one place it's warranted: that's what a switch looks like. */
.pref-row{display:flex;align-items:center;gap:20px}
.pref-text{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.switch{position:relative;flex:none;margin-inline-start:auto;width:46px;height:26px;padding:0;
  border-radius:999px;border:1px solid var(--line-strong);background:var(--surface-2);
  cursor:pointer;transition:background .18s ease,border-color .18s ease}
.switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;
  border-radius:50%;background:var(--muted);
  transition:inset-inline-start .18s ease,background .18s ease}
.switch.on{background:var(--primary);border-color:var(--primary)}
.switch.on::after{inset-inline-start:23px;background:#fff}
.switch:hover{border-color:var(--ink-2)}
.switch.on:hover{background:var(--primary-hover);border-color:var(--primary-hover)}

/* ---------- phone: country picker ---------- */
.dial-wrap { position: relative; display: flex; gap: 8px; min-width: 0 }
.dial-btn {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 0 11px; height: 44px; cursor: pointer;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 14.5px; line-height: 1;
}
.dial-btn:hover { border-color: var(--line-strong) }
.dial-code { font-variant-numeric: tabular-nums }
.dial-caret { color: var(--muted); font-size: 11px }
.dial-input { flex: 1 1 auto; min-width: 0; width: 100% }

.dial-pop[hidden] { display: none }   /* display:flex below would otherwise beat [hidden] */
.dial-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  width: min(340px, 100%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.22);
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.dial-search { width: 100%; height: 38px }
.dial-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto }
.dial-item {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14.5px;
}
.dial-item:hover { background: var(--surface-2) }
.dial-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dial-dial { color: var(--muted); font-variant-numeric: tabular-nums }
.dial-none { margin: 6px 10px 10px; color: var(--muted); font-size: 13.5px }

/* On a phone the list is the whole job, so give it the width to do it. */
/* Two fields side by side leave the phone box a sliver once the country button is in
   front of it, so on a narrow screen they stack. */
@media (max-width: 620px) {
  .two { grid-template-columns: 1fr !important; display: grid }
  .dial-pop { width: 100% }
  .dial-list { max-height: 44vh }
}

/* ---------- listing: the headline ----------
   A listing page used to open with a panel holding a name and a sentence, then eight
   figures of equal weight for the reader to sort out. These three are the question
   being asked — what it costs, what it earns, and what that ratio comes to — so they
   are stated once, large, before anything else. */
.lead-head{margin-bottom:18px}
.lead-title{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lead-title h2{font-size:clamp(28px,3.4vw,40px);line-height:1.08;letter-spacing:-.035em;font-weight:800;margin:0}
.lead-head .hint{margin-top:6px}

.headline{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;
}
.headline > div{background:var(--surface-2);border-radius:var(--r);padding:18px 20px}
.headline span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;letter-spacing:.02em}
.headline b{
  display:block;font-family:"Inter",Tahoma,sans-serif;
  font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-.03em;
}
/* Profit is what is actually being bought, so it carries the accent. The price sits
   in the sidebar beside the button that acts on it, and is not repeated here. */
.headline > div:first-child b{color:var(--deal)}

/* Three figures side by side stop being readable long before the screen runs out. */
@media(max-width:620px){
  .headline{grid-template-columns:1fr}
  .headline b{font-size:23px}
  .lead-title h2{font-size:25px}
}

/* ---------- characters ---------- */
.chr{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:50%;overflow:hidden;
}
.chr svg{display:block}

/* ---------- message bubbles ----------
   A conversation, not a filing cabinet. Each message is a bubble on its own side —
   yours to the right, theirs to the left — and a run from the same person is signed
   once at the top rather than above every line. */
.thread{display:flex;flex-direction:column;gap:3px;margin-bottom:18px;
  max-height:440px;overflow-y:auto;padding:2px}
.bub{
  position:relative;max-width:min(78%,440px);align-self:flex-start;
  background:var(--surface-2);border-radius:18px 18px 18px 5px;
  padding:9px 62px 9px 14px;
}
.bub.mine{
  align-self:flex-end;background:var(--primary);color:var(--on-primary);
  border-radius:18px 18px 5px 18px;
}
/* The first of a run carries the corner and the gap; the rest tuck under it. */
.bub.opens{margin-top:12px;border-top-left-radius:18px}
.bub:not(.opens){border-top-left-radius:7px}
.bub.mine:not(.opens){border-top-left-radius:18px;border-top-right-radius:7px}
.bub:first-child{margin-top:0}

.bub-who{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px;
}
.bub p{margin:0;font-size:14.5px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}
/* The time sits in the bubble's own bottom corner, out of the text's way. */
.bub time{
  position:absolute;right:12px;bottom:8px;
  font-size:11px;color:var(--muted);
}
.bub.mine time{color:var(--on-primary);opacity:.6}

/* ---------- composer ----------
   The reply box and its button on one line, the way a chat looks. A full-width
   button underneath belongs to a form you fill in, not to a conversation. */
.composer{display:flex;align-items:flex-end;gap:10px}
.composer textarea{
  flex:1;min-width:0;resize:none;overflow-y:auto;
  min-height:44px;max-height:160px;padding:11px 16px;line-height:1.5;
  border-radius:var(--r-chat);
}
.send{
  flex:none;width:44px;height:44px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;
  background:var(--primary);color:var(--on-primary);
}
.send:hover{filter:brightness(1.06)}
.send:disabled{opacity:.4;cursor:default;filter:none}
.send svg{transform:translateX(1px)}   /* the point sits left of centre in the glyph */

/* A hint sitting under an empty field reads as something already wrong. It appears
   while the field is being filled, and stays if what is there is not enough yet. */
.hint-live{display:none}
.field:focus-within .hint-live,
.field input:user-invalid ~ .hint-live{display:block}

/* A button that does something small should not look like the one that does the
   main thing. This is a submit underneath — it keeps working without JavaScript —
   drawn at the weight of the hint beside it. */
.linkish{
  padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--muted);
  border-bottom:1px solid var(--line-strong);line-height:1.5;
}
.linkish:hover{color:var(--ink-2)}

/* ---------- what is it: category cards ----------
   A dropdown hid twelve choices behind a click and showed them as bare words. Laid
   out, each with a picture and a line saying what it covers, the right one is found
   by looking rather than by reading a list. The radio underneath is real, so the
   form submits the same with no JavaScript at all. */
.kinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:10px}
.kind{
  position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:11px;row-gap:1px;align-items:center;cursor:pointer;
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);transition:border-color .12s,background .12s;
}
.kind:hover{border-color:var(--line-strong)}
.kind input{position:absolute;opacity:0;pointer-events:none}
.kind-ico{grid-row:1 / 3;display:flex;color:var(--muted)}
.kind-name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.kind-sub{font-size:12px;color:var(--muted);line-height:1.35}
.kind:has(input:checked){border-color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ink)}
.kind:has(input:checked) .kind-ico{color:var(--ink)}
.kind:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}

/* What the pasted address turned out to be, said quietly under the box. */
.peek-note{margin-top:8px;color:var(--ink-2)}
.peek-note b{color:var(--ink)}

@media(max-width:560px){ .kinds{grid-template-columns:1fr 1fr} .kind-sub{display:none} }

/* ---------- proving ownership ---------- */
.own-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.own-cta b{display:block;color:var(--ink);font-size:15px}
.own-cta span{display:block;color:var(--ink-2);font-size:13.5px;line-height:1.6;margin-top:3px}
.own-cta .btn{flex-shrink:0}
.codebox{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;
  border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:8px 8px 8px 12px;background:var(--bg)}
.codebox code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;direction:ltr;
  overflow-wrap:anywhere;min-width:0;color:var(--ink)}
.codebox.big code{font-size:18px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.codebox .copy{flex-shrink:0}
.own-steps{display:flex;flex-direction:column;gap:4px}
.own-way{border-top:1px solid var(--line);padding:14px 0 4px}
.own-way:first-of-type{border-top:0}
.own-way summary{cursor:pointer;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.own-way h3{font-size:15px;margin-bottom:6px}
.own-way p,.own-way li{font-size:14px;color:var(--ink-2);line-height:1.7}
.own-way ul{padding-left:18px;margin:6px 0}
.own-way code{font-family:ui-monospace,monospace;font-size:12.5px}
.own-way a{color:var(--ink-2);font-weight:500;border-bottom:1px solid var(--line-strong)}
.own-dns{margin:8px 0}
.own-check{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.own-done{text-align:center;padding:36px 24px}
.own-done .own-tick{width:52px;height:52px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;
  border:1.5px solid var(--ink);color:var(--ink);font-size:24px;font-weight:700}
.own-done p{color:var(--ink-2);line-height:1.7;max-width:46ch;margin:10px auto 20px}
@media (max-width:640px){
  .own-cta{flex-direction:column;align-items:flex-start}
}

/* ---------- what is it worth ---------- */
.worth-form{display:flex;flex-direction:column;gap:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font-size:14px;color:var(--ink-2);background:var(--surface);transition:border-color .15s,background .15s}
.chip input:checked + span{border-color:var(--primary);background:var(--primary);color:var(--on-primary);font-weight:600}
.chip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.worth{margin-top:18px}
.worth-big{font-family:"Inter",Tahoma,sans-serif;font-size:clamp(30px,6vw,42px);font-weight:700;line-height:1.15;
  color:var(--ink);margin:4px 0 10px}
.worth-big span{color:var(--muted);font-weight:400}
.worth-why{color:var(--ink-2);line-height:1.7;margin:0 0 16px;font-size:15px}
.worth-up{border-top:1px solid var(--line);padding-top:14px;margin-bottom:18px}
.worth-up b{font-size:14px}
.worth-up ul{margin:8px 0 0;padding-left:18px;color:var(--ink-2);font-size:14px;line-height:1.8}
.worth-go{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* The little bubble under the price: points up at the box it can fill. */
.worth-tip{position:relative;margin-top:16px;padding:12px 14px;border:1px solid var(--line-strong);
  border-radius:var(--r);background:var(--surface-2);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.worth-tip::before{content:"";position:absolute;top:-7px;left:22px;width:12px;height:12px;
  background:var(--surface-2);border-left:1px solid var(--line-strong);border-top:1px solid var(--line-strong);
  transform:rotate(45deg)}
.worth-tip p{margin:0;flex:1 1 220px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.worth-tip p b{color:var(--ink);font-weight:600;white-space:nowrap}
.worth-tip a{color:var(--ink-2);font-weight:500;border-bottom:1px solid var(--line-strong)}
.worth-tip-note{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* ---- listing card, with its picture ---- */
.lcard{gap:0}
.lc-cover{aspect-ratio:16/10;background:var(--surface-2);border-radius:14px;overflow:hidden}
.lc-cover img{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.lcard:hover .lc-cover img{transform:scale(1.03)}
.lc-cover img,.lead-cover img{width:100%;height:100%;object-fit:cover;display:block}
.lc-cover-none{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted)}
.lc-cover-ico{display:flex}
.lc-cover-ico svg{width:38px;height:38px}
.lc-cover-host{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--ink-2);
  max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-body{padding:14px 4px 4px;display:flex;flex-direction:column;gap:8px;flex:1}
.lc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.lc-head h3{font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.015em;min-width:0;overflow-wrap:anywhere}
.lc-price{text-align:right;flex-shrink:0}
.lc-price b{display:block;font-family:"Inter",Tahoma,sans-serif;font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.lc-price span{font-size:12px;color:var(--muted)}
.lc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13.5px;color:var(--muted)}
.lc-where{display:inline-flex;align-items:center;gap:4px}
.lc-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;background:var(--surface-2);border-radius:12px;padding:12px 14px;margin-top:auto}
.lcard:hover .lc-facts{background:var(--bg)}
.lc-facts span{display:block;font-size:12px;color:var(--muted);margin-bottom:1px}
.lc-facts b{font-size:15px;font-weight:600;color:var(--ink)}
.lead-cover{aspect-ratio:1.91/1;max-height:340px;width:100%;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--surface-2);margin-bottom:18px}
.lc-cover.is-logo img,.lead-cover.is-logo img{object-fit:contain;padding:18px}

/* ---------- what Sitescrow checked ---------- */
.checklist{list-style:none;margin:0;padding:0}
.ck{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.ck:first-child{border-top:0}
.ck > div{flex:1;min-width:0}
.ck > div > b{display:block;font-size:14.5px;color:var(--ink)}
.ck > div > span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:2px}
.ck-ico{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:var(--surface-3);color:var(--muted)}
.ck-ico svg{display:block}
.ck-ok .ck-ico,.ck-ico.ck-ok{background:var(--primary);color:var(--on-primary)}
.ck-warn .ck-ico,.ck-ico.ck-warn{background:var(--danger);color:#fff}
.ck-warn > div > span{color:var(--danger)}
.ck-todo .ck-ico,.ck-ico.ck-todo{background:var(--surface-2);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.ck-na .ck-ico,.ck-ico.ck-na{background:var(--line-strong);color:#fff}
.ck{align-items:flex-start}
.ck .ck-ico{margin-top:1px}
.ck-work{margin-top:14px;display:flex;flex-direction:column;gap:14px}
.ck-work > p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.7}
.vlist{list-style:none;margin:0;padding:0}
.vlist li{border-top:1px solid var(--line)}
.vlist li:first-child{border-top:0}
.vlist a{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:14px;padding:14px 0}
.vl-name b{display:block;font-size:15px;color:var(--ink)}
.vl-name span{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vl-marks{display:flex;gap:5px}
.vl-count{font-size:13px;color:var(--muted)}
.vl-go{font-size:13.5px;color:var(--ink-2);font-weight:500;border-bottom:1px solid var(--line-strong)}
@media (max-width:560px){
  .vlist a{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .vl-count{display:none}
}

/* ---------- proof screenshots ---------- */
.proofs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.proofs li{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:8px}
.proofs img{width:72px;height:54px;object-fit:cover;display:block;border-radius:var(--r-sm);background:var(--surface-2)}
.proofs li > div{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
.proofs b{font-size:13.5px}
.proof-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.file-pick{position:relative;overflow:hidden;cursor:pointer}
.file-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.lc-counted{font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-left:4px}

/* ---------- offers ---------- */
.offers{list-style:none;margin:0;padding:0}
.offer{padding:14px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.offer:first-child{border-top:0;padding-top:4px}
.of-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.of-who b{display:block;font-size:15px}
.of-who span{font-size:12.5px;color:var(--muted)}
.of-amt{text-align:right}
.of-amt b{display:block;font-family:"Inter",Tahoma,sans-serif;font-size:20px;font-weight:700;line-height:1.2}
.of-amt span{font-size:12px;color:var(--muted)}
.of-amt .of-low{color:var(--danger)}
.of-msg{margin:0;font-size:14px;color:var(--ink-2);line-height:1.65;border-left:2px solid var(--line-strong);padding-left:12px;
  white-space:pre-wrap;overflow-wrap:anywhere}
.of-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.of-acts{display:flex;gap:8px;flex-wrap:wrap}
.of-acts form{margin:0}
.my-offer{margin-top:16px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}
.my-offer span{font-size:12.5px;color:var(--muted)}
.my-offer b{font-size:18px;grid-row:span 2;align-self:center}
.my-offer em{font-style:normal;font-size:13px;color:var(--ink-2)}
@media (max-width:560px){ .codebox.big code{font-size:15px} }

/* ---------- the drawing at the top of the long pages ---------- */
.doc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:24px;align-items:center;
  margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.doc-head h2{font-size:26px}
.doc-head .hint{margin-top:6px}
.page-art{width:100%;height:auto;display:block}
@media (max-width:640px){
  .doc-head{grid-template-columns:1fr;gap:14px}
  .doc-head .page-art{max-width:260px;order:-1}
}

/* ---------- the verified mark ---------- */
.tick{display:inline-block;vertical-align:-3px;margin-inline-start:7px;flex:none}
.lead-title .tick{vertical-align:-1px}
.tick-goal{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tick-goal b{display:block;font-size:15px}
.tick-goal span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:2px}

/* A link inside a sentence: the site's links are grey with a hairline under them,
   never blue and never orange. Was written out inline on every link until it had
   been copied eleven times. */
.tlink{color:var(--ink-2);font-weight:500;border-bottom:1px solid var(--line-strong)}
.tlink:hover{color:var(--ink)}
.tlink.nowrap{white-space:nowrap}

/* ---------- watching a listing ---------- */
.watch-panel{padding:16px 18px}
.watch-btn{width:100%;justify-content:center;gap:8px}
.watch-btn.on{border-color:var(--ink);color:var(--ink)}

/* ---------- filters: a bar on a screen, a button on a phone ----------
   On a phone the filters filled the first screen and pushed every listing below the
   fold, so they are a <details>: closed by default there, open when a filter is
   already on, and on a wide screen there is no summary at all. */
.filter-box > summary{display:none}
@media(min-width:881px){
  /*
   * A bar across the top rather than a column down the side. It was taking 280px of
   * every screen to hold six controls that fit in one row, and the cards were left
   * with what was over.
   *
   * A closed <details> used to hide its children with display:none on the slot, which
   * an !important on the child could beat. Newer browsers hide them with
   * content-visibility on ::details-content instead, and that cannot be overridden
   * from the child at all — which is why the panel had quietly disappeared on desktop.
   * Both are covered here, and a script opens the element outright on wide screens as
   * the third and most reliable layer.
   */
  .filter-box::details-content{content-visibility:visible;block-size:auto;opacity:1}
  /*
   * A wrapping row, not a fixed grid. Columns set in advance only fit the width you
   * guessed at: at anything narrower the last control is pushed off the edge, which
   * is exactly what happened to Clear. Here each control states the width it would
   * like and how much it will give up, and the row folds by itself when it runs out.
   */
  .filter-box > .filters{display:flex !important;flex-direction:row;flex-wrap:wrap;
    align-items:flex-end;gap:12px;
    padding:16px 0 18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
  .filters .field{margin:0;flex:1 1 140px;min-width:0}
  .filters .field:first-child{flex:1.5 1 170px}
  .filters .field input,.filters .field select{width:100%;min-width:0}
  .filters .two{display:flex;gap:8px;min-width:0}
  .filters .two input{flex:1 1 0;min-width:56px}
  .f-check{display:flex;align-items:center;gap:7px;cursor:pointer;flex:0 0 auto;
    font-size:13.5px;color:var(--ink-2);white-space:nowrap;padding-bottom:11px}
  .f-check input{width:auto;margin:0}
  .f-go{display:flex;gap:8px;flex:0 0 auto}
  .f-go .btn{padding-inline:16px;white-space:nowrap}
}
@media(max-width:880px){
  .filter-box{border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px}
  .filter-box > summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:13px 15px;
    font-size:14.5px;font-weight:500;color:var(--ink);list-style:none}
  .filter-box > summary::-webkit-details-marker{display:none}
  .filter-box > summary::after{content:"";margin-inline-start:auto;width:8px;height:8px;
    border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);
    transition:transform .15s}
  .filter-box[open] > summary::after{transform:rotate(-135deg)}
  .filter-box > .filters{padding:0 15px 15px;display:flex;flex-direction:column;gap:14px}
  .filters .two{display:flex;gap:8px}
  .filters .two input{flex:1;min-width:0}
  .f-check{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--ink-2)}
  .f-check input{width:auto;margin:0}
  .f-go{display:flex;flex-direction:column;gap:8px}
  .f-go .btn{justify-content:center}
  .filter-on{font-weight:400;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- handing it over ---------- */
.hand{list-style:none;margin:0;padding:0}
.hand-row{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line)}
.hand-row:first-child{border-top:0}
.hand-tick{margin:0;flex:none}
.hand-box{width:26px;height:26px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  background:none;cursor:pointer;color:transparent;font-size:15px;font-weight:700;line-height:1;padding:0}
.hand-box.on{border-color:var(--primary);background:var(--primary);color:var(--on-primary)}
.hand-row > div{min-width:0}
.hand-row b{display:block;font-size:14.5px}
.hand-row span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:2px}
.hand-row .hand-who{font-size:12px;color:var(--muted);margin-top:5px}
.hand-row.both b{color:var(--ink)}
.hand-row.both .hand-who{color:var(--deal)}
.agreement .cl{border-top:1px solid var(--line);padding:14px 0}
.agreement .cl b{font-size:14.5px}
.agreement .cl p{margin:5px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.75}
@media print{
  .side,.nav-toggle,.sec-title .btn,.hand-tick{display:none !important}
  .shell,.wrap{display:block;max-width:100%;padding:0}
  .panel{border:0;padding:0}
}
/* A message drawn the moment it is written, a shade lighter until the server has it. */
.bub.sending{opacity:.55}
.thread.empty-thread{min-height:0;border:0;padding:0;margin-bottom:14px}
.thread .thread-empty{margin:0}

/* ---------- security check ----------
   Follows the house rules: hairlines instead of boxes, the accent only on the
   score ring and the one button. A failed check is marked by weight and an
   outline, never by a red fill — the page is advice, not an alarm. */
.sc-form{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.sc-form .field{width:100%}
.sc-form input{font-family:"Inter",monospace;letter-spacing:.01em}
.sc-error{margin:18px 0 0;padding:12px 14px;border:1px solid var(--line-strong);
  border-radius:var(--r);color:var(--ink-2);font-size:15px}

.sc-head{margin-top:18px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sc-head h2{font-size:20px;margin:2px 0 4px;word-break:break-all}
.sc-head .hint{margin:0}
.sc-score{position:relative;width:80px;height:80px;flex:0 0 80px}
.sc-score b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:600}
.sc-ring{width:100%;height:100%;display:block}

.sc-group{margin-top:26px}
.sc-group .eyebrow{display:block;margin-bottom:10px}
.sc-list{list-style:none;margin:0;padding:0}
.sc-row{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.sc-row b{font-size:15px;display:block}
.sc-row p{margin:3px 0 0;font-size:14px;line-height:1.65;color:var(--ink-2)}
.sc-mark{flex:0 0 22px;height:22px;margin-top:1px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:13px;font-weight:700;color:var(--ink-2)}
.sc-row.sc-ok .sc-mark{border-color:var(--line);color:var(--muted);font-weight:400}
.sc-row.sc-ok b{font-weight:500}
.sc-fix{font-size:13.5px !important}
.sc-fix span{display:inline-block;margin-right:6px;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}

.sc-note{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.7;color:var(--muted)}
.sc-sell{margin-top:26px;padding-top:18px;border-top:1px solid var(--line-strong)}
.sc-sell b{font-size:15px}
.sc-sell p{margin:5px 0 14px;font-size:14px;line-height:1.7;color:var(--ink-2);max-width:56ch}

/* the short version, on a listing */
.sc-strip .sc-strip-top{display:flex;align-items:center;gap:14px;margin-top:4px}
.sc-mini-h{margin:14px 0 4px !important}
.sc-score-sm{width:54px;height:54px;flex:0 0 54px}
.sc-score-sm b{font-size:17px}
.sc-strip .sc-strip-top b{font-size:14.5px}
.sc-strip .hint{margin:2px 0 0}
.sc-mini{margin:10px 0 8px;padding-left:18px;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.sc-strip>a.hint{display:inline-block;border-bottom:1px solid var(--line-strong)}

@media (max-width:560px){
  .sc-head{gap:14px}
  .sc-score{width:64px;height:64px;flex:0 0 64px}
  .sc-score b{font-size:20px}
}
/* ---------- the security check, given a band of its own ----------
   It was a panel of four sentences with a small field beside it, which is how you
   lay out a footnote — not the one thing on this site nobody else offers. Now the
   page is mostly the box you type in, with the drawing behind it for depth. */
/* Orange since 2026-10-02, at the owner's request: the brand colour as a block, white
   type on it, a white box to type in, and only the button left black. */
.checkband{position:relative;overflow:hidden;padding:0;margin:12px 12px 0;border-radius:28px;
  background:var(--accent);color:#fff}
.checkband .cb-art g{stroke:rgba(255,255,255,.22)}
.checkband .eyebrow{color:rgba(255,255,255,.85)}
.checkband h2{color:#fff}
@media(max-width:640px){.checkband{margin:8px 8px 0;border-radius:22px}}
.cb-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  /* Faded at the edges and under the words, so it never fights the text it sits behind. */
  -webkit-mask-image:radial-gradient(95% 82% at 50% 48%,transparent 18%,#000 62%);
  mask-image:radial-gradient(95% 82% at 50% 48%,transparent 18%,#000 62%)}
.cb-inner{position:relative;text-align:center;padding:66px 20px 60px}
.cb-inner .eyebrow{display:block;margin-bottom:14px}
.cb-inner h2{font-size:clamp(30px,4.6vw,52px);letter-spacing:-.04em;font-weight:800;line-height:1.05;margin:0 0 28px}

.cb-form{display:flex;gap:8px;justify-content:center;max-width:560px;margin:0 auto;
  background:#fff;border-radius:var(--r-pill);padding:6px 6px 6px 20px}
.cb-form input{flex:1 1 auto;min-width:0;background:transparent;color:#0A0A0A;border:0;
  font-size:16px;padding:10px 4px;min-height:0}
.cb-form input:focus{box-shadow:none}
.cb-form .btn{flex:none;padding-inline:24px}
.checkband .cb-form .btn-primary{background:#0A0A0A;color:#fff}
.cb-note{margin:16px 0 0;font-size:14px;font-weight:500;color:#fff}

@media (max-width:560px){
  .cb-inner{padding:46px 16px 42px}
  .cb-form{padding-left:16px}
  .cb-form .btn{padding-inline:16px}
}

/* The gold mark. Same rosette, a warmer fill and a faint ring so it reads as the
   step above rather than a different badge. Earned by passing every check and
   keeping the site's own security score at or above 80 — never for sale. */
.tick-gold{filter:drop-shadow(0 0 0.5px rgba(156,116,32,.55))}
.goal-mark{display:inline-flex;flex:0 0 auto}
.goal-dim{opacity:.32}
.goal-gold{margin:10px 0 0 !important;padding-top:10px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.goal-gold a{border-bottom:1px solid var(--line-strong)}

/* ---------- settings ----------
   A phone settings screen: short groups under a heading, one line each, the value
   on the right. No panel per item — the group is the container, and hairlines do
   the separating, which is the house rule and also what makes it scannable. */
.st-title{font-size:clamp(26px,3.4vw,32px);font-weight:800;letter-spacing:-.03em;margin:6px 0 18px}
.st-me{display:flex;align-items:center;gap:14px;padding:12px;margin:0 0 24px;border-radius:16px;background:var(--surface-2);color:var(--ink);text-decoration:none}
.st-me:hover{background:var(--surface-3)}
.st-me-text{flex:1;min-width:0}
.st-me-text b{display:block;font-size:17px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-me-text > span{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.member-bio{white-space:pre-line;overflow-wrap:anywhere;margin:8px 0 2px;font-size:15px;line-height:1.45;color:var(--ink);max-width:520px}
.ep-form{display:flex;flex-direction:column;gap:14px}
.ep-form textarea{resize:vertical;min-height:84px}
.ep-count{display:block;text-align:right}
.member-acts .btn.btn-gear{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;min-width:44px;height:44px;padding:0}
.member-acts .btn-gear svg{flex:none}
.st-top{display:flex;align-items:center;gap:22px;margin:8px 0 26px}
.st-top b{display:block;font-size:clamp(22px,3vw,28px);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.st-top .hint{font-size:14px;display:block;margin-top:4px}

.st-group{margin-bottom:22px}
.st-head{font-size:14px;color:var(--muted);font-family:"Inter",Tahoma,sans-serif;font-weight:600;
  letter-spacing:0;text-transform:none;margin:0 0 4px;padding:0 12px}
.st-rows{display:flex;flex-direction:column}

/* Instagram's rows: no lines between them, the whole row lights up under the finger. */
.st-row{display:flex;align-items:center;gap:16px;width:100%;padding:13px 12px;border-radius:14px;
  border:0;background:none;text-align:left;color:var(--ink);font:inherit;font-size:16px;font-weight:500;
  cursor:pointer;text-decoration:none;transition:background .15s ease}
.st-row:hover{background:var(--surface-2)}
.st-ico{flex:0 0 24px;color:var(--ink)}
.st-label{flex:1 1 auto;min-width:0}
.st-value{flex:0 0 auto;color:var(--muted);font-size:14.5px;font-weight:400;max-width:45%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-go{flex:0 0 auto;color:var(--muted);font-size:24px;line-height:1;margin-left:2px}
.st-danger{color:var(--danger)}
.st-danger .st-ico{color:var(--danger)}
/* The counts, the way a profile shows its posts and followers: the number big, the
   word under it. */
.st-stats{display:flex;gap:10px;margin:0 0 28px;padding:0}
.st-stats > div{flex:1;background:var(--surface-2);border-radius:var(--r);padding:16px 18px}
.st-stats span{order:2;font-size:13.5px;color:var(--muted);margin:2px 0 0}
.st-stats > div{display:flex;flex-direction:column}
.st-stats b{order:1;font-size:26px;font-weight:800;letter-spacing:-.03em}

/* ---------- moving rows ----------
   A row that drifts leftwards. The track holds the same run of cards twice and
   travels exactly half its width, so it loops without a seam. It breaks out of the
   page gutter on purpose: a row that stops at the margin looks like it ran out,
   where one that runs off the edge reads as continuing. */
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;width:max-content;animation:mqSlide linear infinite}
.mq-run{display:flex;gap:16px;padding-inline-end:16px}
@keyframes mqSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Stopped while it is being read, and while a card inside it has keyboard focus —
   a link sliding out from under the pointer cannot be clicked. */
.mq:hover .mq-track,.mq:focus-within .mq-track{animation-play-state:paused}

.mini{display:flex;align-items:center;gap:12px;flex:none;width:268px;
  padding:10px 16px 10px 10px;border:0;border-radius:var(--r);
  background:var(--surface-2);color:var(--ink);text-decoration:none}
a.mini:hover{background:var(--surface-3)}
.mini-cover{flex:none;width:52px;height:52px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.mini-cover img{width:100%;height:100%;object-fit:cover;display:block}
.mini-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.mini-body b{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.mini-body span{font-size:13px;color:var(--muted)}
.mini-person{width:auto;min-width:210px}

/* ---------- arriving on scroll ----------
   Each block lifts in once as it comes into view. Only once: a section that
   re-animates every time it passes the fold turns reading into a fairground. The
   class is added by script, so without JavaScript everything is simply visible. */
.js-reveal .reveal{opacity:0;transform:translateY(26px)}
.js-reveal .reveal.seen{opacity:1;transform:none;
  transition:opacity .6s ease,transform .7s cubic-bezier(.16,.8,.24,1)}

/* Inside a section, the pieces arrive one after another instead of together. This is
   the whole difference between "a page faded in" and "a page being laid out in front
   of you" — the eye follows the sequence, and a grid of six cards stops landing as
   one slab. The steps are small: 70ms is enough to read as a sequence and short
   enough that the last one is not still missing when you look for it. */
.js-reveal .reveal .stagger > *{opacity:0;transform:translateY(22px)}
.js-reveal .reveal.seen .stagger > *{opacity:1;transform:none;
  transition:opacity .55s ease,transform .6s cubic-bezier(.16,.8,.24,1)}
.js-reveal .reveal.seen .stagger > *:nth-child(1){transition-delay:.04s}
.js-reveal .reveal.seen .stagger > *:nth-child(2){transition-delay:.11s}
.js-reveal .reveal.seen .stagger > *:nth-child(3){transition-delay:.18s}
.js-reveal .reveal.seen .stagger > *:nth-child(4){transition-delay:.25s}
.js-reveal .reveal.seen .stagger > *:nth-child(5){transition-delay:.32s}
.js-reveal .reveal.seen .stagger > *:nth-child(6){transition-delay:.39s}
.js-reveal .reveal.seen .stagger > *:nth-child(n+7){transition-delay:.46s}

/* The figures band: three numbers that count up as they come into view. */
.band{padding-top:20px;padding-bottom:12px}
.figs-big{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0}
.figs-big > div{background:var(--surface-2);border-radius:var(--r);padding:24px 26px}
.figs-big b{display:block;font-family:"Inter",Tahoma,sans-serif;
  font-size:clamp(30px,4.4vw,48px);line-height:1.05;letter-spacing:-.04em;font-weight:800;
  font-variant-numeric:tabular-nums}
.figs-big span{display:block;margin-top:8px;font-size:14px;color:var(--muted);font-weight:500}
@media(max-width:620px){
  .figs-big{gap:6px}
  .figs-big > div{padding:14px 12px}
  .figs-big b{font-size:clamp(18px,5.6vw,26px)}
  .figs-big span{font-size:12px}
}
@media(prefers-reduced-motion: reduce){
  .mq-track{animation:none}
  .js-reveal .reveal,.js-reveal .reveal .stagger > *{opacity:1;transform:none}
  .js-reveal .reveal.seen,.js-reveal .reveal.seen .stagger > *{transition:none;transition-delay:0s}
}
@media(max-width:560px){
  .mini{width:228px}
  .mq-run{gap:12px;padding-inline-end:12px}
}

/* ---------- staying safe in a conversation ----------
   One quiet line above the messages, and a louder one under anything that arrived
   asking for money or a password. The quiet one has to stay quiet or it stops being
   read; the loud one is rare enough to still mean something when it appears. */
.risky{display:flex;gap:9px;align-items:flex-start;max-width:min(78%,440px);
  margin:2px 0 10px;padding:9px 12px;border:1px solid var(--danger);border-radius:var(--r);
  background:var(--danger-soft);color:var(--danger);font-size:13px;line-height:1.6}
.risky span{flex:0 0 17px;height:17px;margin-top:1px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;background:var(--danger);color:#fff;
  font-size:11px;font-weight:700}
.rep-form{display:flex;flex-direction:column;gap:18px}
.rep-reasons{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.rep-pick{display:flex;align-items:center;gap:11px;padding:12px 2px;cursor:pointer;
  border-bottom:1px solid var(--line);font-size:15px}
.rep-pick input{width:auto;margin:0;flex:none}
.rep-pick:hover{background:var(--surface-2)}
.rep-now{margin:0 0 20px;padding-left:20px;color:var(--ink-2);font-size:14px;line-height:1.85}
/* Quiet, and at the bottom where it belongs: a flag that shouts invites people to
   press it at the first disagreement, which buries the reports that matter. */
.flagline{display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  font-size:13px;color:var(--muted)}
.flagline:hover{color:var(--danger)}

/* ---------- letting go ----------
   The drawing on its own, with room around it. It falls and rises a little and turns
   with it, because a figure in mid-air holding perfectly still reads as one standing
   on something you cannot see. */

/* ---------- the scene under the headline ----------
   A site leaves its owner, passes the check, arrives with its buyer, and starts
   again. One loop, three beats, everything timed against the same 9 seconds so the
   stamp lands exactly as the card reaches the mark. */
.scene{margin:30px auto 0;max-width:520px}
.scene svg{width:100%;height:auto;display:block;overflow:visible}

.sc-rail{stroke:var(--line-strong);stroke-width:2}
.sc-end circle{stroke:var(--line-strong);stroke-width:3;fill:var(--bg)}
.sc-end text,.sc-gate text{fill:var(--muted);font-family:"Inter",Tahoma,sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.11em;text-anchor:middle}
.sc-card{stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;fill:var(--bg)}
.sc-card-lines{stroke:var(--accent-soft);stroke-width:4}
.sc-rosette{fill:var(--line);}
.sc-check{stroke:var(--bg);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  fill:none;stroke-dasharray:32;stroke-dashoffset:32}

/* The card crosses, pausing at the mark long enough for the tick to be drawn. */
/* It grows out of the seller's ring and shrinks into the buyer's, so both rings stay
   visible instead of being covered by the card at each end. */
@keyframes scTravel{
  0%      {transform:translate(74px,106px) scale(.3);opacity:0}
  11%     {transform:translate(126px,106px) scale(1);opacity:1}
  34%     {transform:translate(310px,106px) scale(1)}
  50%     {transform:translate(310px,106px) scale(1)}   /* held while it is checked */
  74%     {transform:translate(494px,106px) scale(1);opacity:1}
  88%,100%{transform:translate(546px,106px) scale(.3);opacity:0}
}
/* The mark fills and the tick draws itself, in the window the card is standing there. */
@keyframes scStamp{
  0%,34%  {fill:var(--line)}
  42%,86% {fill:var(--accent)}
  94%,100%{fill:var(--line)}
}
@keyframes scTick{
  0%,36%  {stroke-dashoffset:32}
  48%,86% {stroke-dashoffset:0}
  94%,100%{stroke-dashoffset:32}
}
/* The buyer's ring only fills once the card has actually arrived. */
@keyframes scArrive{
  0%,70%  {stroke:var(--line-strong)}
  80%,92% {stroke:var(--accent)}
  100%    {stroke:var(--line-strong)}
}
.sc-card{animation:scTravel 9s cubic-bezier(.5,0,.2,1) infinite}
.sc-rosette{animation:scStamp 9s linear infinite}
.sc-check{animation:scTick 9s ease infinite}
.sc-to circle{animation:scArrive 9s linear infinite}

@media(max-width:900px){.scene{margin-top:24px;max-width:440px}}
@media(prefers-reduced-motion: reduce){
  .sc-card{animation:none;transform:translate(310px,106px) scale(1)}
  .sc-rosette{animation:none;fill:var(--accent)}
  .sc-check{animation:none;stroke-dashoffset:0}
  .sc-to circle{animation:none}
}

/* ---------- the word that changes ----------
   All of them live in one grid cell, so the span is the width of the longest and the
   headline never reflows mid-read. Each is invisible except during its own slice of
   the cycle, which it arrives into from below and leaves upward — the same direction
   both times, so it reads as a list going past rather than words bouncing. */
.rot{display:inline-grid;vertical-align:baseline}
/* The keyframes are written next to the words themselves, because where each one
   starts and stops depends on how many there are. */
/* Centred in the cell, not left-aligned in it. The cell is as wide as the longest
   word, so a short one used to sit against its left edge and pull the whole line off
   centre — which only showed once the headline itself was centred. */
.rot > span{grid-area:1/1;justify-self:start;opacity:0;animation:rotWord var(--cycle) infinite}
/* One word, held still. */
@media(prefers-reduced-motion: reduce){
  .rot > span{animation:none}
  .rot > span:first-child{opacity:1}
}

/* The signed-out sell page: what listing involves, in place of the form. */

/* ---------- the score by area ----------
   Read like an audit report: a row per area, name left and score right, a thin bar
   in the colour of how it did, and one sentence on what that means. Hairlines between,
   no blocks. */
.sc-break{margin-top:18px;padding:18px 20px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.sc-break .eyebrow{display:block;margin-bottom:4px}
.sc-break ul{list-style:none;margin:0;padding:0}
.sc-break li{padding:14px 0}
.sc-break li + li{border-top:1px solid var(--line)}
.sc-br-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sc-br-top > b{font-size:15px;font-weight:600;color:var(--ink)}
.sc-br-top .num b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.sc-br-top .num small{font-size:12.5px;color:var(--muted);margin-left:1px}
.sc-br-track{height:6px;margin:9px 0 8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.sc-br-track i{display:block;height:100%;border-radius:inherit;transform-origin:left}
.sc-break li p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.sc-lvl0 .sc-br-track i{background:var(--deal)}
.sc-lvl1 .sc-br-track i{background:var(--gold-mark)}
.sc-lvl2 .sc-br-track i{background:var(--danger)}
.sc-lvl0 .sc-br-top .num b{color:var(--deal)}
.sc-lvl1 .sc-br-top .num b{color:var(--gold)}
.sc-lvl2 .sc-br-top .num b{color:var(--danger)}
@media(max-width:560px){.sc-break{padding:14px 14px 12px}}

/* a half-credit line sits between a pass and a miss, and is marked as such */
.sc-row.sc-part .sc-mark{border-color:var(--line-strong);color:var(--ink-2);font-weight:600}
.sc-row.sc-part b{font-weight:600}
/* The caveat belongs beside the number, not at the foot of the page. */
.sc-scope{margin:12px 4px 0;padding:0;font-size:13px;line-height:1.6;color:var(--muted)}

/* ---------- the green band ----------
   The private-deal header. Same shape as the tool band, a different colour, and the
   drawing runs the full height instead of banking up the sides — the motif is the
   mark's own dot-path-dot, which is what a handover is. */
.checkband.cb-green{background:var(--deal-soft);color:var(--ink)}
.cb-green h2{color:var(--ink)}
.cb-green .eyebrow{color:var(--muted)}
.cb-green .cb-note{color:var(--muted);font-weight:400}
.checkband.cb-green .cb-art g{stroke:var(--deal)}
/* Only the text needs clear air, so the mask lifts behind the words and nowhere else:
   the drawing still reaches the top and bottom edges. */
.cb-green .cb-art{
  -webkit-mask-image:radial-gradient(62% 76% at 50% 50%,transparent 34%,#000 82%);
  mask-image:radial-gradient(62% 76% at 50% 50%,transparent 34%,#000 82%)}
.cb-green .cb-inner{max-width:720px}
.cb-green .cb-inner h2{margin-bottom:16px}
.cb-green .cb-lead{margin:0 auto;max-width:56ch;font-size:15px;line-height:1.75;color:var(--ink-2)}

/* ---------- sign in with Google ----------
   Google's guidelines want their own mark and a plain surface, so this is the one
   button on the site that is not drawn in our colours. */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:11px 18px;background:var(--surface);color:var(--ink);font-weight:500;
  border:1px solid var(--line-strong);border-radius:var(--r-sm)}
.btn-google:hover{background:var(--surface-2)}
.btn-google svg{flex:none}
.auth-or{margin:18px 0;text-align:center;color:var(--muted);font-size:13px;letter-spacing:.06em}

/* ---------- the report arrives being worked out ----------
   When the result scrolls into view the ring fills to the score, the four bars rise
   one after another, and the number counts up to match — the reveal script adds
   .seen and runs the count. Each keyframe gives only a starting point, so the
   animation always ends exactly on the value the server drew; with no JavaScript,
   or with reduced motion asked for, everything is simply shown at its final value. */
.js-reveal .sc-result.seen .sc-ring-fill{animation:scRing 1.1s cubic-bezier(.2,.7,.2,1) .1s both}
@keyframes scRing{from{stroke-dashoffset:213.63}}
.js-reveal .sc-result.seen .sc-br-track i{animation:scGrow .8s cubic-bezier(.2,.7,.2,1) both}
.js-reveal .sc-result.seen .sc-break li:nth-child(1) .sc-br-track i{animation-delay:.25s}
.js-reveal .sc-result.seen .sc-break li:nth-child(2) .sc-br-track i{animation-delay:.35s}
.js-reveal .sc-result.seen .sc-break li:nth-child(3) .sc-br-track i{animation-delay:.45s}
.js-reveal .sc-result.seen .sc-break li:nth-child(4) .sc-br-track i{animation-delay:.55s}
@keyframes scGrow{from{transform:scaleX(0)}}
@media(prefers-reduced-motion: reduce){
  .js-reveal .sc-result.seen .sc-ring-fill,
  .js-reveal .sc-result.seen .sc-br-track i{animation:none}
}

/* The line under a sign-up button that says what signing up agrees to. */
.agree{font-size:12.5px;line-height:1.6;text-align:center;margin:12px 0 0}

/* ---------- account details ----------
   A list, one detail per row: label left, value right, a hairline between. On a
   narrow phone the value drops under its label so a long email never squeezes. */
.acct{margin:0}
.acct > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line)}
.acct > div:first-child{padding-top:2px}
.acct > div:last-child{border-bottom:0;padding-bottom:2px}
.acct dt{flex:0 0 auto;font-size:13.5px;color:var(--muted)}
.acct dd{margin:0;min-width:0;font-size:15px;font-weight:600;color:var(--ink);
  text-align:right;overflow-wrap:anywhere}
@media(max-width:420px){
  .acct > div{flex-direction:column;align-items:flex-start;gap:4px}
  .acct dd{text-align:left}
}

/* Username: the @ sits inside the box, the answer appears under it while typing. */
.uname-wrap{position:relative}
.uname-wrap input{padding-left:30px;direction:ltr;text-align:left}
.uname-at{position:absolute;left:12px;top:50%;transform:translateY(-52%);
  font-size:15px;color:var(--muted);pointer-events:none}
.uname-msg.is-ok{color:var(--deal)}
.uname-msg.is-bad{color:var(--danger)}
.uname-msg.is-wait{color:var(--muted)}
.uname-picks{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;color:var(--muted)}
.uname-pick{font:inherit;font-size:12.5px;padding:3px 9px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);direction:ltr}
.uname-pick:hover{border-color:var(--ink-2)}
.uname-tag{font-size:13px;font-weight:500;color:var(--muted);direction:ltr;unicode-bidi:isolate}
.uname-form{display:flex;flex-direction:column;gap:14px}

/* The chart said in sentences, then the one thing to do first. */
/* How much one finding matters, next to its title. */
.sc-weight{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;vertical-align:2px;
  font-size:11px;font-weight:600;letter-spacing:.02em;border:1px solid var(--line-strong);color:var(--muted)}
.sc-weight.sc-w3{border-color:var(--danger);color:var(--danger)}
.sc-weight.sc-w2{border-color:var(--gold);color:var(--gold)}

/* Profile photo picker: the picture, and beside it the button and why it matters. */
.photo-pick{display:flex;align-items:center;gap:16px}
.photo-pick .avatar{width:72px;height:72px;font-size:26px}
/* The picture is the button; the badge sits on its lower right, like Instagram's. */
/* display:block matters: on the profile the picture sits inside a form, where a label
   is inline by default, and iPhone's Safari then measures the plus from the left edge. */
.photo-ava{display:block;position:relative;flex:none;width:72px;height:72px;border-radius:50%;cursor:pointer}
/* No photo yet (Account details, welcome): a grey circle that is itself the add button. */
.photo-empty{background:var(--surface-3);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.photo-ava:hover .photo-empty{background:var(--line-strong)}
.photo-ava input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border-radius:50%}
/* Only for the keyboard: a mouse click should not leave a dark ring around it. */
.photo-ava:has(input:focus-visible){outline:2px solid var(--ink-2);outline-offset:3px}
.photo-ava.drag{outline:2px dashed var(--ink);outline-offset:4px}
/* Dark with a white plus, as Instagram draws it; flips to light in dark mode. */
.photo-badge{position:absolute;right:-3px;bottom:-3px;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:var(--ink);color:var(--bg);border:3px solid var(--bg);transition:transform .15s ease}
.photo-ava:hover .photo-badge{transform:scale(1.08)}
/* The picture at the top of the profile: just the picture. A plus on its corner reads
   as Instagram's "add to story"; a photo is added from Account details instead. */
.st-ava{flex:none;display:block;line-height:0}
.st-ava .avatar{font-size:32px}
@media(max-width:520px){.st-ava .avatar{width:72px !important;height:72px !important;font-size:28px}}
.photo-side{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.photo-side .hint{margin:0}
/* The one line beside the picture, said in a speech bubble pointing at it. */
.photo-side .photo-why{position:relative;margin:0 0 0 10px;padding:13px 18px;border-radius:20px;
  background:var(--surface-2);color:var(--ink);font-size:15px;font-weight:500;line-height:1.5;
  animation:whyIn .45s cubic-bezier(.2,.7,.2,1) both .15s}
.photo-why::before{content:"";position:absolute;left:-6px;top:50%;width:16px;height:16px;
  background:inherit;border-radius:3px;transform:translateY(-50%) rotate(45deg)}
@keyframes whyIn{from{opacity:0;transform:translateX(-6px) scale(.97)}}
@media(prefers-reduced-motion: reduce){.photo-side .photo-why{animation:none}}
.photo-msg:empty{display:none}
.photo-acts{display:flex;align-items:center;gap:16px}
.photo-acts:not(:has(> :not([hidden]))){display:none}
.photo-acts [hidden]{display:none}   /* .btn sets display, which would beat the hidden attribute */
.label-like{font-size:13px;font-weight:600;color:var(--ink-2)}
.welcome-form{display:flex;flex-direction:column;gap:16px}


.review-why{margin:0 0 10px;padding:8px 12px;border-radius:var(--r-sm);background:var(--gold-soft);
  font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.review-why b{color:var(--ink)}

/* What the reviewer checks, on the seller's verification page. */
.reviewer{margin-bottom:16px}
.reviewer > b{font-size:15px}
.reviewer ol{margin:10px 0 8px;padding-left:22px;font-size:14.5px;line-height:1.8;color:var(--ink-2)}
.reviewer li.now{color:var(--ink);font-weight:600}
.reviewer li.done{color:var(--deal)}
.reviewer .hint{margin:0}

/* Speak instead of typing: a tidy bar under the box — the microphone with its words
   on the left, the language to speak in on the right. */
.mic-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px}
.mic-bar[hidden]{display:none}
.mic-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:500}
.mic-btn:hover{border-color:var(--ink-2);color:var(--ink)}
.mic-btn svg{flex:none}
.mic-btn.on{background:var(--danger);border-color:var(--danger);color:#fff;animation:micPulse 1.4s ease-in-out infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 45%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){.mic-btn.on{animation:none}}
.mic-langs{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2)}
.mic-langs button{border:0;background:none;cursor:pointer;font:inherit;font-size:13px;padding:5px 12px;border-radius:999px;color:var(--muted)}
.mic-langs button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mic-msg{display:block;margin-top:6px}

/* A phone zooms the whole page in whenever a box with text under 16px is tapped, and
   leaves it zoomed — the screen "jumping" while typing. 16px on touch screens stops it. */
@media (pointer:coarse), (max-width:760px){
  input, select, textarea{font-size:16px}
}
/* Date of birth: day, month, year side by side. */
.dob{display:grid;grid-template-columns:1fr 1.6fr 1.2fr;gap:8px}
.dob select{min-width:0}

/* ---------- the valuation answer ----------
   Redesigned 2026-10-02: the number, the range as one line, two labels, three tips.
   It arrives moving: the number counts up, the line fills to the fair price and its
   dot slides there, then the labels and tips land one after another. */
.wr{padding:32px}
.wr-kicker{margin:0;font-size:14px;color:var(--muted)}
.wr-label{margin:18px 0 0;font-size:18px;font-weight:600;color:var(--ink-2)}
.wr-num b{display:block;font-size:clamp(48px,10vw,76px);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ink);margin-top:6px}

.wr-range{margin:30px 0 4px}
.wr-track{position:relative;height:10px;border-radius:99px;background:var(--surface-3)}
.wr-fill{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:var(--primary);transform-origin:left center}
.wr-dot{position:absolute;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
  background:var(--bg);border:4px solid var(--primary)}
.wr-ends{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.wr-ends span{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
.wr-ends b{font-size:17px;font-weight:700;color:var(--ink)}
.wr-end-r{align-items:flex-end;text-align:right}

.wr-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.wr-tag{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-pill);font-size:14px;font-weight:600}
.wr-up{background:var(--deal-soft);color:var(--deal)}
.wr-down{background:var(--danger-soft);color:var(--danger)}

.wr-tips{margin-top:26px;padding:20px 22px;border-radius:var(--r);background:var(--surface-2)}
.wr-tips-h{margin:0 0 10px;font-weight:700;font-size:16px}
.wr-tips ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.wr-tips li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2)}
.wr-ico{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary);color:var(--on-primary)}
.worth .worth-go{margin-top:24px}
@media(max-width:560px){.wr{padding:22px 18px}}

/* The arrival: only where the reveal script runs, so without it everything just shows. */
.js-reveal .wr.reveal .wr-fill{transform:scaleX(0)}
.js-reveal .wr.reveal .wr-dot{opacity:0;transform:scale(.4)}
.js-reveal .wr.reveal.seen .wr-fill{transform:none;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .25s}
.js-reveal .wr.reveal.seen .wr-dot{opacity:1;transform:none;transition:opacity .3s ease 1.1s,transform .45s cubic-bezier(.3,1.6,.5,1) 1.1s}
@media (prefers-reduced-motion:reduce){
  .js-reveal .wr.reveal .wr-fill,.js-reveal .wr.reveal .wr-dot{transform:none;opacity:1;transition:none}
}

.cb-note:empty{display:none}
.doc-date{margin:4px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px}

/* ---------- the conversation, WhatsApp's way ----------
   Who it is with on top, the messages filling the space on a soft background, your
   own on the right, a date between days, the reply box at the bottom. */
.chat-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.chat-title h2{font-size:16px;margin:0}
.chat-icon{flex:none;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);border:0;background:none}
.chat-icon:hover{background:var(--surface-2);color:var(--ink)}
section.chat-page{padding:16px 0 0;animation:none}   /* a slide-in would throw off the height it measures */
.chat-full{display:flex;flex-direction:column;height:calc(100dvh - 32px);min-height:360px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.chat-head .avatar{width:40px;height:40px}
.chat-who{flex:1;min-width:0;display:flex;flex-direction:column}
.chat-who b{font-size:16px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-who span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-who a{color:var(--ink-2)}
.chat-back{margin-left:-6px}
.chat-full .thread{flex:1;max-height:none;margin:0;padding:14px 16px 18px;background:var(--surface-2);gap:3px}
.chat-full .thread.empty-thread{display:flex;align-items:center;justify-content:center}
.chat-full .bub{background:var(--surface);box-shadow:0 1px 0 rgba(0,0,0,.05);max-width:min(78%,520px)}
.chat-full .bub.mine{background:var(--primary);color:var(--on-primary)}
.chat-full .composer{padding:10px 12px;border-top:1px solid var(--line);background:var(--surface)}
.composer-off{justify-content:center}
.composer-off p{margin:6px 0;font-size:13.5px;color:var(--muted);text-align:center}
.chat-full .risky{margin:4px 0 6px}
/* The date between days, centred like a chip. */
.thread .day{align-self:center;margin:14px 0 8px;padding:4px 12px;border-radius:8px;font-size:12.5px;font-weight:500;
  background:var(--surface);color:var(--ink-2);box-shadow:0 1px 0 rgba(0,0,0,.05)}
.panel.chat .thread .day{background:var(--surface-2)}
.thread .day:first-child{margin-top:0}
@media (max-width:900px){
  section.chat-page{padding:0}
  section.chat-page .wrap{padding:0}
  .chat-full{border-radius:0;border-left:0;border-right:0;height:calc(100dvh - 60px)}
}
@media (max-width:560px){ .chat-view{display:none} }
/* At 16px the text is a hair taller than the box, and the box showed a scrollbar for
   one line. A little taller, and no visible bar (it still scrolls past its max). */
.composer textarea{min-height:46px;scrollbar-width:none}
.composer textarea::-webkit-scrollbar{display:none}

/* Sign-in and sign-up, laid out the way the big apps do: tall rounded buttons, the
   Google one soft grey, the main one solid dark, and roomy boxes in between. */
.auth .btn-google{min-height:52px;border-radius:12px;border:0;background:var(--surface-2);
  font-size:16px;font-weight:500;color:var(--ink)}
.auth .btn-google:hover{background:var(--line)}
.auth .btn-auth{justify-content:center;min-height:52px;border-radius:12px;font-size:16px;font-weight:600;
  background:var(--ink);border-color:var(--ink);color:var(--bg)}
.auth .btn-auth:hover{opacity:.9;filter:none}
.auth input:not([type="hidden"]):not([type="file"]),.auth select,.auth .dial-btn{min-height:50px;border-radius:12px}
.auth .agree{margin-top:16px}

/* The green tick after a report: a soft disc pops in, the ring draws round, then the
   mark draws through it. Shown finished, without motion, to anyone who asked for less. */
.done-tick{display:flex;justify-content:center;margin:8px 0 14px}
.done-tick svg{border-radius:50%;background:var(--deal-soft);animation:dtPop .45s cubic-bezier(.2,.9,.3,1.3) both}
.dt-ring{stroke:var(--deal);stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:center;
  animation:dtDraw .55s ease-out .15s forwards}
.dt-mark{stroke:var(--deal);stroke-dasharray:1;stroke-dashoffset:1;animation:dtDraw .35s ease-out .6s forwards}
.done-title{justify-content:center;text-align:center}
@keyframes dtDraw{to{stroke-dashoffset:0}}
@keyframes dtPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .done-tick svg,.dt-ring,.dt-mark{animation:none;stroke-dashoffset:0}
}

/* What the report reviewer found, on each report in Admin. */
.rv-find{margin:0 0 12px;padding:10px 14px;border-radius:var(--r-sm);background:var(--surface-2);font-size:14px;line-height:1.6;color:var(--ink-2)}
.rv-find p{margin:0}
.rv-find ul{margin:8px 0 0;padding-left:18px}
.rv-find li{margin:4px 0}
.rv-find em{display:block;font-style:normal;font-size:12.5px;color:var(--muted)}
.rv-bad{background:var(--danger-soft)}
.rv-bad b{color:var(--danger)}
.rv-wait{color:var(--muted)}
/* The evidence file: plain, and made to print. */
.evidence h2{margin:10px 0 4px}
.ev-bar{display:flex;justify-content:space-between;align-items:center}
.ev-detail{margin:14px 0 0;font-size:14.5px;line-height:1.7;white-space:pre-wrap}
.ev-people{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.ev-person{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.ev-person h3{font-size:14px;margin:0 0 8px}
.ev-person dl{margin:0;display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.ev-person dl div{display:flex;gap:10px}
.ev-person dt{flex:0 0 100px;color:var(--muted)}
.ev-person dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ev-h{font-size:15px;margin:22px 0 10px}
.ev-msg{padding:10px 0;border-top:1px solid var(--line)}
.ev-msg:first-child{border-top:0}
.ev-msg p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px;line-height:1.6}
.ev-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px}
.ev-flag{background:var(--danger-soft);margin:0 -12px;padding:10px 12px;border-radius:var(--r-sm)}
@media (max-width:640px){ .ev-people{grid-template-columns:1fr} }
@media print{
  .side,footer.site,.ev-bar{display:none !important}
  .evidence{padding:0}
  .ev-flag{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- the Terms and the Privacy Policy ---------- */
.lg{display:flex;flex-direction:column;gap:18px}
.lg-p{color:var(--ink-2);line-height:1.75;font-size:14.5px;margin:0}
.lg-ul{margin:0;padding-left:20px;color:var(--ink-2);line-height:1.75;font-size:14.5px}
.lg-ul li{margin:4px 0}
.lg-key{padding:18px 20px;border-radius:var(--r);background:var(--surface-2)}
.lg-key > b{display:block;margin-bottom:8px;color:var(--ink)}
.lg-key .lg-ul{color:var(--ink)}
.lg-toc{padding:14px 18px;border:1px solid var(--line);border-radius:var(--r)}
.lg-toc > b{display:block;margin-bottom:6px;font-size:14px}
.lg-toc ol{margin:0;padding-left:22px;columns:2;column-gap:28px;font-size:13.5px;line-height:1.9}
.lg-toc a{color:var(--ink-2)}
.lg-toc a:hover{color:var(--accent-ink)}
.lg-sec{scroll-margin-top:20px;display:flex;flex-direction:column;gap:8px}
.lg-sec h2{font-size:16.5px;margin:6px 0 0}
.lg-sec h2 .num{color:var(--muted);font-weight:500;margin-right:2px}
@media (max-width:640px){ .lg-toc ol{columns:1} }
/* The two boxes to tick before an account is made. */
.agree-box{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.agree-box input{width:18px;height:18px;min-height:0 !important;margin:1px 0 0;flex:none;accent-color:var(--ink)}
.agree-box a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.agree-boxes{display:flex;flex-direction:column;gap:10px}

/* ---------- "Measured by Sitescrow" ---------- */
.mz-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.mz-head h2{margin:0}
.mz-big{display:flex;align-items:baseline;gap:8px;margin:12px 0 6px}
.mz-big b{font-size:28px;font-weight:700;color:var(--ink)}
.mz-big span{color:var(--muted);font-size:14px}
.mz-vs{margin:0 0 10px;padding:8px 12px;border-radius:var(--r-sm);font-size:14px;line-height:1.55}
.mz-ok{background:var(--deal-soft);color:var(--deal)}
.mz-warn{background:var(--danger-soft);color:var(--danger)}
.mz-bars{display:flex;align-items:flex-end;gap:2px;height:88px;margin:8px 0 18px;padding-bottom:1px;border-bottom:1px solid var(--line)}
.mz-bars i{flex:1;min-width:0;border-radius:3px 3px 0 0;background:var(--accent);opacity:.85}
.mz-bars i:hover{opacity:1}
.mz-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mz-cols h3{font-size:13.5px;margin:0 0 10px;color:var(--ink)}
.mz-src,.mz-cty{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px}
.mz-src li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;color:var(--ink-2)}
.mz-src li i{grid-column:1 / -1;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.mz-src li em{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.mz-cty li{display:flex;justify-content:space-between;gap:10px;color:var(--ink-2)}
.mz-sites{margin:10px 0 0 !important;overflow-wrap:anywhere}
.mz-note{margin:16px 0 0 !important}
@media (max-width:560px){ .mz-cols{grid-template-columns:1fr} }
/* Measured by Sitescrow comes alive once: each day grows from the floor a moment after
   the one before it, then the sources fill in. Only a starting point is given, so it
   always lands on the heights the server drew. */
.mz.seen .mz-bars i{transform-origin:bottom;animation:mzGrow .7s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--i, 0) * 28ms)}
.mz.seen .mz-src li em{animation:mzFill .9s cubic-bezier(.2,.75,.25,1) .5s both}
.mz.seen .mz-src li:nth-child(2) em{animation-delay:.6s}
.mz.seen .mz-src li:nth-child(3) em{animation-delay:.7s}
.mz.seen .mz-src li:nth-child(4) em{animation-delay:.8s}
@keyframes mzGrow{from{transform:scaleY(0)}}
@keyframes mzFill{from{width:0}}
@media (prefers-reduced-motion: reduce){.mz.seen .mz-bars i,.mz.seen .mz-src li em{animation:none}}

/* The answer after a button: a green tick or a red cross that draws itself. */
.rb{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:12px 16px;border-radius:var(--r);font-size:14.5px;line-height:1.55}
.rb-ok{background:var(--deal-soft);color:var(--deal)}
.rb-bad{background:var(--danger-soft);color:var(--danger);animation:rbShake .45s ease .2s}
.rb b{color:inherit}
.rb-text{min-width:0}
.rb-mark{flex:none;border-radius:50%;background:var(--surface);animation:dtPop .4s cubic-bezier(.2,.9,.3,1.3) both}
.rb-mark circle,.rb-mark path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.rb-ring{stroke-width:4;transform:rotate(-90deg);transform-origin:center;animation:dtDraw .5s ease-out .1s forwards}
.rb-l1{stroke-width:5;animation:dtDraw .3s ease-out .5s forwards}
.rb-l2{stroke-width:5;animation:dtDraw .3s ease-out .7s forwards}
@keyframes rbShake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){
  .rb-bad,.rb-mark{animation:none}
  .rb-mark circle,.rb-mark path{animation:none;stroke-dashoffset:0}
}

/* .btn sets display, which beat the hidden attribute: a button meant to be hidden
   showed as an empty outline (the "Use $…" button under the price). Hidden is hidden. */
.btn[hidden]{display:none}

/* ---------- deal page: pay safely ---------- */
.pay-safe{border-color:var(--deal);background:var(--deal-soft)}
.pay-safe h2{margin:0 0 8px}
.pay-safe > p{margin:0 0 12px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.pay-copy{display:flex;flex-direction:column;gap:2px;margin-bottom:14px;padding:6px 12px;border-radius:var(--r);background:var(--surface)}
.pay-row{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;row-gap:1px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.pay-row:last-child{border-bottom:0}
/* The name of each detail sits above its value, so the value gets the whole width:
   side by side, an email address broke in the middle and was easy to copy wrong. */
.pay-row span{color:var(--muted);font-size:12.5px;grid-column:1 / -1}
.pay-row b{min-width:0;overflow-wrap:break-word;color:var(--ink);font-size:15px}
.pay-go{justify-content:center;width:100%}
.pay-note{margin:10px 0 0 !important;font-size:12.5px}
.hand-rules{margin:0 0 14px;padding:12px 14px;border-radius:var(--r);background:var(--gold-soft);font-size:14px;line-height:1.65;color:var(--ink-2)}
.hand-rules > b{color:var(--ink)}
.hand-rules ul{margin:6px 0 0;padding-left:18px}
.hand-rules li{margin:4px 0}


/* The bar under a conversation's head: where the deal stands, and the next step. */
.chat-deal{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin:0;
  padding:10px 14px;border-bottom:1px solid var(--line);background:var(--gold-soft);font-size:14px;line-height:1.5;color:var(--ink-2)}
.chat-deal b{color:var(--ink)}
.chat-deal.cd-ok{background:var(--deal-soft);color:var(--deal)}
.chat-deal.cd-ok b{color:var(--deal)}
.chat-deal.cd-ask{background:var(--surface-2)}
.cd-acts{display:flex;align-items:center;gap:8px}
.cd-acts form{margin:0}
.cd-acts .btn{white-space:nowrap}
.cd-acts input[name="amount"]{width:140px;min-height:36px;padding:6px 10px}
.cd-tick{vertical-align:-3px;margin-right:6px}
@media (max-width:560px){ .chat-deal{flex-direction:column;align-items:stretch} .cd-acts{justify-content:flex-end} .cd-acts input[name="amount"]{flex:1;width:auto} }
/* A text box asks for its natural width (about twenty letters) and pushed the bar past
   a narrow screen. Allowed to shrink, it fits. */
.chat-deal > *{min-width:0}
.cd-acts input[name="amount"]{min-width:0}
@media (max-width:560px){ .cd-acts input[name="amount"]{flex:1 1 0;width:0} }

/* The deal bar, quieter: one slim line on a wide screen. */
.chat-deal{padding:6px 14px;font-size:13.5px;gap:6px 12px}
.chat-deal .btn-sm{padding:5px 12px;font-size:13px;min-height:0}
.cd-acts{gap:6px}
.cd-acts input[name="amount"]{width:120px;min-height:32px;padding:4px 10px}
@media (pointer:fine) and (min-width:761px){ .cd-acts input[name="amount"]{font-size:13.5px} }


/* ---------- the verification page, as numbered steps ---------- */
.vtop{display:flex;justify-content:space-between;gap:12px}
.vtitle{margin:14px 0 2px}
.vsub{margin:0 0 14px;color:var(--muted);font-size:14.5px;overflow-wrap:anywhere}
.vprog{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:13px;color:var(--muted)}
.vprog-bar{flex:1;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.vprog-bar i{display:block;height:100%;border-radius:inherit;background:var(--deal)}
.vsteps{display:flex;flex-direction:column;gap:10px}
.vstep{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.vstep > summary,.vstep-flat{display:flex;align-items:center;gap:12px;padding:14px 16px;list-style:none}
.vstep > summary{cursor:pointer}
.vstep > summary::-webkit-details-marker{display:none}
.vstep[open]{border-color:var(--line-strong)}
.vs-mark{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;background:var(--surface-2);color:var(--ink-2)}
.vs-ok{background:var(--deal-soft);color:var(--deal)}
.vs-warn{background:var(--danger-soft);color:var(--danger)}
.vstep[open] .vs-todo{background:var(--primary);color:var(--on-primary)}
.vs-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.vs-head b{font-size:15px;color:var(--ink)}
.vs-head span{font-size:13.5px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.vs-chev{flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);margin:0 4px 4px 0;transition:transform .15s ease}
.vstep[open] .vs-chev{transform:rotate(225deg);margin:4px 4px 0 0}
.vs-body{padding:0 16px 16px 56px}
.vs-body .ck-work{margin-top:0}
.vs-recheck{margin:0}
.vfoot{margin:16px 0 0;font-size:13px}
.btn:disabled{opacity:.45;cursor:default;filter:none}
@media (max-width:560px){ .vs-body{padding:0 14px 14px} }

/* ---------- Verification ----------
   Plain and left-aligned: the mark beside the heading, rows for the listings. Gold is
   for the mark and the progress only. */
.vh-head{display:flex;align-items:flex-start;gap:14px;margin:16px 0 20px}
.vh-head svg{flex:none;margin-top:2px}
.vh-head h2{margin:0;line-height:1.15}
.vh-head p{margin:2px 0 0;color:var(--muted);font-size:14.5px}
.vh-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.vh-list li + li{border-top:1px solid var(--line)}
.vh-row{display:flex;align-items:flex-start;gap:14px;padding:14px 16px}
.vh-count,.vh-go{align-self:center}
.vh-row:hover{background:var(--surface-2)}
.vh-letter{flex:none;width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--ink-2);font-weight:700;font-size:16px}
.vh-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.vh-name{display:flex;align-items:center;gap:6px}
.vh-name b{font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vh-steps{font-size:13px;color:var(--muted)}
.vh-steps > span{white-space:nowrap}
.vh-steps i{font-style:normal;margin:0 6px;color:var(--line-strong)}
.vh-ok{color:var(--deal)}
.vh-bar{display:block;height:4px;max-width:260px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.vh-bar i{display:block;height:100%;border-radius:inherit;background:var(--gold-mark);transform-origin:left;animation:vhFill .7s ease-out both}
.vh-warn{color:var(--danger)}
.vh-mk .r{fill:var(--accent)}
.vh-mk.gold .r{fill:var(--gold-mark)}
.vh-mk .t{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vh-draw .t{stroke-dasharray:1;stroke-dashoffset:1;animation:vhTick .5s .25s ease-out forwards}
@keyframes vhTick{to{stroke-dashoffset:0}}
@keyframes vhFill{from{transform:scaleX(0)}}
@media (prefers-reduced-motion: reduce){.vh-draw .t{animation:none;stroke-dashoffset:0}.vh-bar i{animation:none}}
@media (max-width:560px){.vh-row{gap:11px;padding:13px 12px}.vh-letter{width:34px;height:34px}.vh-bar{max-width:none}}
.vh-count{flex:none;font-size:13px;color:var(--ink-2)}
.vh-go{flex:none;color:var(--muted);font-size:20px}
.vh-empty{padding:28px 16px;border:1px dashed var(--line-strong);border-radius:12px;text-align:center}
.vh-empty p{margin:0 0 12px;color:var(--muted)}
.vh-legend{margin-top:22px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--ink-2)}
.vh-legend div{display:flex;align-items:flex-start;gap:8px}
.vh-legend svg{flex:none;margin-top:1px}
.vh-legend b{color:var(--ink)}

/* ---------- Saved listings / My deals: friendlier empty pages, tidier lists ---------- */
.empty-box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 20px}
.eb-ico{width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-ink);margin-bottom:4px}
.empty-box > b{font-size:17px;color:var(--ink)}
.empty-box > p{margin:0;max-width:46ch;color:var(--muted);font-size:14.5px;line-height:1.6}
.eb-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.deal-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.deal-stats > div{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.deal-stats span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.deal-stats b{font-size:22px;color:var(--ink)}
.deal-list{list-style:none;margin:0;padding:0}
.deal-list a{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.deal-list li:first-child a{border-top:0}
.dl-name{flex:1;min-width:0;display:flex;flex-direction:column}
.dl-name b{color:var(--ink)}
.dl-name > span{font-size:13px;color:var(--muted)}
.dl-amt{font-size:15px}
.dl-go{color:var(--muted);font-size:20px}
@media (max-width:640px){ .deal-stats{grid-template-columns:repeat(2,1fr)} }

/* ---------- how it works ----------
   Three steps side by side with big numbers, Shopify's way of saying "it is this
   simple", and the little handover scene above them on a grey ground. */
.how-scene{background:var(--surface-2);border-radius:24px;padding:28px 20px 22px;margin-bottom:28px}
.how-scene .scene{margin:0 auto}
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.how-n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--primary);color:var(--on-primary);font-weight:800;font-size:16px;margin-bottom:16px}
.how-steps h3{font-size:20px;letter-spacing:-.025em;margin-bottom:8px}
.how-steps p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.65}
@media(max-width:820px){.how-steps{grid-template-columns:1fr;gap:22px}}

/* ---------- the report, short ----------
   The three findings that matter most, numbered, each with its fix; then one line on
   what the score means; then everything else folded behind "See all". */
.sc-top{margin-top:14px;padding:24px 26px;border-radius:var(--r);background:var(--surface-2)}
.sc-top h3{font-size:20px;letter-spacing:-.025em;margin:0 0 6px}
.sc-top > .hint{margin:4px 0 0;font-size:14.5px}
.sc-top-list{list-style:none;margin:0;padding:0}
.sc-top-list li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line-strong)}
.sc-top-list li:first-child{border-top:0;padding-top:10px}
.sc-top-n{flex:none;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary);color:var(--on-primary);font-weight:800;font-size:14px;margin-top:1px}
.sc-top-list b{display:block;font-size:16.5px;letter-spacing:-.01em}
.sc-top-list p{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.sc-top-list .sc-fix{margin-top:8px;color:var(--ink)}
@media(max-width:640px){.sc-top{padding:18px 16px}}

.sc-all{margin-top:18px;border:1px solid var(--line);border-radius:var(--r);padding:0 20px}
.sc-all > summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;font-weight:700;font-size:15.5px}
.sc-all > summary::-webkit-details-marker{display:none}
.sc-all > summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
.sc-all[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.sc-all[open]{padding-bottom:18px}
.sc-all .sc-break{margin-top:0;border:0;padding:0 0 4px;background:none}

/* ---------- support inbox (Admin) ----------
   One row per member who has written to Sitescrow, the ones waiting for an answer
   first and marked with a dot, the way an inbox shows what is unread. */
.sup-list{display:flex;flex-direction:column;margin-bottom:28px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sup-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface)}
.sup-row + .sup-row{border-top:1px solid var(--line)}
.sup-row:hover{background:var(--surface-2)}
.sup-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sup-main b{font-size:15px;font-weight:600}
.sup-row.is-waiting .sup-main b{font-weight:800}
.sup-last{font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup-row.is-waiting .sup-last{color:var(--ink-2)}
.sup-when{flex:none;font-size:12.5px;color:var(--muted)}
.sup-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--accent)}

/* ---------- the listing card, compact (2026-10-02) ----------
   Small enough for a page of thousands: four to a row on a computer, and on a phone
   one row each with the picture on the left. Later rules than the old card's, so
   they win without touching it. */
.cards{grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:4px 10px}
.lcard{padding:8px;gap:0;border-radius:16px}
.lc-cover{aspect-ratio:16/10;border-radius:12px}
.lc-cover.is-logo img{padding:12%}
.lc-cover-ico svg{width:28px;height:28px}
.lc-cover-host{font-size:12px}
.lc-body{padding:10px 2px 2px;gap:4px}
.lc-head{align-items:baseline;gap:8px}
.lc-head h3{font-size:15px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.lc-price{flex:none;font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.lc-meta{font-size:12.5px;gap:4px 10px}
.lc-facts{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;background:none;border-radius:0;padding:4px 0 0;margin-top:2px;
  font-size:12px;color:var(--muted)}
.lcard:hover .lc-facts{background:none}
.lc-facts span{display:block;margin:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-facts b{font-size:12.5px;font-weight:700;color:var(--ink);margin-left:2px}
.lc-counted{color:var(--deal);font-size:11px;margin-left:1px}

@media(max-width:640px){
  /* One row per listing: picture left, the rest beside it. */
  .cards{grid-template-columns:minmax(0,1fr);gap:2px}
  .lcard{flex-direction:row;align-items:flex-start;gap:12px;padding:8px;border-radius:14px}
  .lcard .lc-cover{flex:none;width:108px;aspect-ratio:4/3;border-radius:10px}
  .lc-body{padding:0;flex:1;min-width:0;gap:3px}
  .lc-head h3{font-size:15px}
  .lc-price{font-size:15px}
  .lc-facts{gap:1px 8px}
  .lc-facts span{font-size:11.5px}
  .lc-facts b{font-size:12px}
}

/* A black line round every listing card (2026-10-02, at the owner's request). */
.lcard{border:1.5px solid var(--ink)}
.cards{gap:12px}
@media(max-width:640px){.cards{gap:8px}}

/* ---------- Admin, laid out for one person (2026-10-02) ----------
   Five boxes saying what is waiting, then a section for each in the same order. */
.adm-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px}
.adm-tile{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:var(--r);background:var(--surface-2);color:var(--muted)}
.adm-tile b{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--muted)}
.adm-tile span{font-size:14px;font-weight:600}
.adm-tile.has{background:var(--primary);color:var(--on-primary)}
.adm-tile.has b{color:var(--on-primary)}
.adm-tile:hover{filter:brightness(.97)}
@media(max-width:700px){.adm-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.adm-tile{padding:12px 14px}.adm-tile b{font-size:22px}}

.adm-sec{padding:26px 0 6px;animation:none;border-top:1px solid var(--line);margin-top:18px}
.adm-head{display:flex;align-items:center;gap:10px}
.adm-head h2{font-size:22px}
.adm-count{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 8px;border-radius:var(--r-pill);
  background:var(--accent);color:#fff;font-size:13px;font-weight:700}
.adm-hint{margin:4px 0 14px;font-size:14px;color:var(--muted);max-width:70ch}
.adm-clear{margin:0;padding:14px 16px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--muted);font-size:14.5px}
.adm-who{margin:0 0 10px;font-size:14.5px;color:var(--ink-2)}
.adm-quote{white-space:pre-wrap;border-left:3px solid var(--line);padding-left:14px;font-size:14.5px;line-height:1.7;color:var(--ink-2);margin-bottom:12px}
.adm-more{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.adm-more > summary{cursor:pointer;font-weight:700;font-size:16px;padding:6px 0;list-style:none;display:flex;align-items:center;gap:8px}
.adm-more > summary::-webkit-details-marker{display:none}
.adm-more > summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(-45deg);transition:transform .2s ease}
.adm-more[open] > summary::before{transform:rotate(45deg)}
.adm-sec .sup-list{margin-bottom:0}

/* Teach the assistant (Admin, folded at the bottom): one row per question, the answer
   picker and the buttons on one line, wrapping on a phone. */
.bot-h{margin:18px 0 8px;font-size:14px;font-weight:700;color:var(--ink-2)}
.bot-row{padding:12px 0;border-top:1px solid var(--line)}
.bot-q{margin:0;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.bot-meta{margin:2px 0 8px;font-size:13px;color:var(--muted)}
.bot-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.bot-form select{flex:1 1 220px;min-width:0;max-width:360px;height:38px;padding:0 10px;font-size:14px}

/* ---------- the profile photo window (public/photo.js) ----------
   Opens from the picture: take a photo or choose one, then move and zoom it inside
   the circle. Flat, black and white like the rest; dark only where a photo is shown. */
.ph-sheet{border:0;padding:0;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border-radius:20px;background:var(--surface);color:var(--ink);overflow:hidden}
.ph-sheet::backdrop{background:rgba(0,0,0,.5)}
.ph-sheet.drag{outline:3px dashed var(--ink);outline-offset:-10px}
.ph-sheet.is-dark{background:#0B0B0B;color:#fff}
.ph-screen{padding:14px 18px 22px}
.ph-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ph-head h2{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0}
.ph-icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;border:0;background:none;color:inherit;cursor:pointer;padding:0}
button.ph-icon:hover{background:var(--surface-2)}
.ph-on-dark:hover,button.ph-on-dark:hover{background:rgba(255,255,255,.12)}
.ph-icon[hidden]{display:none}
.ph-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ph-tiles:has(.ph-tile[hidden]){grid-template-columns:1fr}
.ph-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:128px;padding:18px 10px;border:0;border-radius:16px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s ease}
.ph-tile:hover{background:var(--surface-3)}
.ph-tile[hidden]{display:none}
.ph-tile:focus-visible,.ph-tile:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.ph-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ph-note{margin:14px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.ph-note[hidden]{display:none}
.ph-err{margin:14px 0 0;font-size:14px;line-height:1.45;color:var(--danger);text-align:center}
.ph-err[hidden]{display:none}
.ph-remove{display:block;margin:12px auto 0;border:0;background:none;color:var(--danger);font:inherit;font-size:15px;font-weight:600;cursor:pointer;padding:9px 14px;border-radius:999px}
.ph-remove:hover{background:var(--surface-2)}
.ph-remove[hidden]{display:none}
.ph-dark{padding:18px 18px 20px;display:flex;flex-direction:column;align-items:center;gap:14px}
.ph-dark[hidden]{display:none}
.ph-stage{position:relative;width:min(340px,calc(100vw - 72px));aspect-ratio:1;overflow:hidden;border-radius:14px;background:#000;touch-action:none;user-select:none;-webkit-user-select:none}
.ph-stage:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ph-stage img{position:absolute;left:0;top:0;max-width:none;height:auto;transform-origin:0 0;cursor:grab;-webkit-user-drag:none}
.ph-stage img:active{cursor:grabbing}
.ph-stage video{width:100%;height:100%;object-fit:cover;display:block}
.ph-stage video.mirror{transform:scaleX(-1)}
.ph-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.85);pointer-events:none}
.ph-tip{margin:0;font-size:13px;color:rgba(255,255,255,.72)}
.ph-zoom{width:min(340px,calc(100vw - 72px));accent-color:#fff;margin:0}
.ph-bar{width:min(340px,calc(100vw - 72px));display:flex;align-items:center;justify-content:space-between;gap:10px}
.ph-text{border:0;background:none;color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;padding:10px 4px;min-width:64px;text-align:left}
.ph-shutter{width:68px;height:68px;flex:none;border-radius:50%;background:#fff;border:4px solid #0B0B0B;box-shadow:0 0 0 3px #fff;cursor:pointer;padding:0;transition:transform .1s ease}
.ph-shutter:active{transform:scale(.94)}
.ph-bar .ph-icon{width:64px;border-radius:999px}
.ph-done{min-width:110px}
@media (max-width:640px){
  .ph-sheet{width:100%;max-width:100%;margin:auto 0 0;border-radius:20px 20px 0 0;max-height:100dvh}
  .ph-sheet.is-dark{height:100dvh;max-height:100dvh;border-radius:0}
  .ph-sheet.is-dark .ph-dark{height:100%;justify-content:center}
}

/* ---------- two-step sign-in (settings, and the second step of signing in) ---------- */
.ts-steps{margin:14px 0 0;padding-left:20px;display:grid;gap:18px}
.ts-steps li{line-height:1.55}
.ts-qr{margin:12px 0 8px;width:220px;max-width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.ts-qr svg{display:block;width:100%;height:auto}
.ts-key summary{cursor:pointer;color:var(--muted);font-size:14px}
.ts-key code{display:inline-block;margin-top:6px;padding:8px 12px;border-radius:10px;background:var(--surface-2);font-size:15px;letter-spacing:.06em;word-break:break-all}
.ts-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:10px}
.ts-form .field{margin:0;flex:1 1 180px}
input.ts-code{font-size:20px;letter-spacing:.18em}
.ts-h{font-size:17px;margin:0 0 6px}
.ts-codes{columns:2;margin:12px 0 18px;padding-left:24px;font-size:17px;line-height:1.9}
.ts-more{margin:12px 2px 0}
.ts-more summary{cursor:pointer;color:var(--muted);font-size:14px;padding:6px 0}
.ts-more[open]{padding-bottom:6px}
.foot-social{display:inline-flex;align-items:center;gap:18px}
.foot-social a{color:var(--foot-muted);display:inline-flex;transition:color .15s ease}
.foot-social a:hover{color:var(--ink)}

/* ---------- paying through Escrow.com, one turn at a time (dealDetail → paySafely) ---------- */
.pay-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pay-head h2{margin:0}
.pay-turn{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.pay-turn.pay-mine{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pay-why{margin:0 0 14px !important}
.pay-flow{list-style:none;margin:0 0 14px;padding:0;counter-reset:pay}
.pay-step{position:relative;padding:0 0 16px 40px;counter-increment:pay}
.pay-step::before{content:counter(pay);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
  background:var(--surface);color:var(--muted);border:1.5px solid var(--line-strong)}
.pay-step:not(:last-child)::after{content:"";position:absolute;left:13px;top:28px;bottom:2px;width:1.5px;background:var(--line-strong)}
.pay-step.done::before{content:"\2713";background:var(--deal);border-color:var(--deal);color:#fff}
.pay-step.now::before{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pay-step.later .pay-step-head b{color:var(--muted);font-weight:500}
.pay-step-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:15px;line-height:1.4}
.pay-step-head .hint{font-size:12.5px}
.pay-step-body{margin-top:8px;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.pay-step-body > p{margin:0 0 10px}
.pay-step-body .pay-copy{margin:4px 0 10px}
.pay-step-body .pay-go{margin-bottom:6px}
.pay-then{margin:12px 0 6px !important}
.pay-act{margin:0}
.pay-act .btn{width:100%;justify-content:center}
.pay-undo{display:inline;margin:0}
.pay-undo .linkish{font-size:12.5px}
/* Three dots moving while the other side has the turn, like a chat's "typing…". */
.typing{display:inline-flex;align-items:center;gap:3px;margin-left:7px;vertical-align:middle}
.typing i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.3;animation:typingDot 1.3s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-3px);opacity:1}}
.pay-wait{display:flex;align-items:flex-start;gap:10px}
.pay-wait p{margin:0}
.typing-bubble{flex:none;display:inline-flex;align-items:center;padding:9px 12px;border-radius:16px 16px 16px 5px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.typing-bubble .typing{margin:0;gap:4px}
.typing-bubble .typing i{width:6px;height:6px}
@media (prefers-reduced-motion: reduce){.typing i{animation:none;opacity:.6}}

/* A six-digit code in six boxes (public/code-boxes.js), like X and Instagram. */
.code-boxes{display:flex;gap:8px;justify-content:center;direction:ltr}
.code-boxes input{flex:1 1 0;min-width:0;max-width:54px;height:60px;padding:0;text-align:center;font-size:26px;font-weight:700;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:12px;caret-color:var(--ink);transition:border-color .15s,box-shadow .15s}
.code-boxes input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(10,10,10,.08)}
.code-boxes input.filled{border-color:var(--ink)}
.code-boxes.short input:not(.filled){border-color:var(--danger);animation:codeShake .4s}
@keyframes codeShake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.code-alt{display:block;margin:12px auto 0;background:none;border:0;padding:4px;font:inherit;font-size:14px;color:var(--muted);text-decoration:underline;cursor:pointer}
@media (prefers-reduced-motion: reduce){.code-boxes.short input{animation:none}}

/* The score ring's colour by grade (sitecheck.js tier()): red under 50, yellow 50 to 79,
   green from 80. */
:root{--sc-red:#C0392B;--sc-yellow:#E0A800;--sc-green:#2E8B57}
.sc-ring-track{stroke:var(--line)}
.sc-ring.sc-red .sc-ring-fill{stroke:var(--sc-red)}
.sc-ring.sc-yellow .sc-ring-fill{stroke:var(--sc-yellow)}
.sc-ring.sc-green .sc-ring-fill{stroke:var(--sc-green)}

/* Above a check result: the address is one slip away from a famous site (sitecheck.js lookalike()). */
.sc-like{margin:0 0 16px;padding:18px 20px;border-radius:var(--r);background:var(--danger-soft);border:1px solid #F1C4BC;color:var(--ink)}
.sc-like b{display:block;font-size:17px;color:var(--danger)}
.sc-like p{margin:6px 0 12px;color:var(--ink-2)}

/* ---------- people (2026-10-10): search beside Messages, profiles, direct messages ----------
   Like Instagram: a search box at the top of the inbox, a profile with Follow and
   Message, and direct conversations in the same list as the others. */
.msg-top{align-items:center;flex-wrap:wrap}
.people-search{position:relative;flex:1 1 220px;max-width:340px;margin:0}
.people-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.people-search input{width:100%;height:42px;padding:0 14px 0 40px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid transparent;font-size:15px}
.people-search input:focus{background:var(--surface);border-color:var(--line)}
.people{margin:-8px 0 22px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.person{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);color:inherit}
.person + .person{border-top:1px solid var(--line)}
.person:hover{background:var(--surface-2)}
.person-main{display:flex;flex-direction:column;min-width:0}
.person-main b{font-size:15px;font-weight:700}
.person-main span{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.people-none{margin:0;padding:14px 16px;color:var(--muted);font-size:14.5px}

.member{display:flex;gap:26px;align-items:flex-start;padding:8px 0 28px;border-bottom:1px solid var(--line);margin-bottom:24px}
.member-main{flex:1;min-width:0}
.member-name{margin:0;font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.03em;overflow-wrap:anywhere}
.member-handle{margin:2px 0 0;color:var(--ink-2);font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.member-pill{font-size:12px;font-weight:700;padding:2px 9px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2)}
.member-meta{margin:6px 0 0;color:var(--muted);font-size:14px}
.member-stats{display:flex;gap:20px;margin:14px 0 0;font-size:15px;color:var(--ink-2);flex-wrap:wrap}
.member-stats b{color:var(--ink);font-weight:800}
.member-acts{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}
.member-acts .btn{min-width:120px;justify-content:center}
.member-follow{margin:0}
.member-report{margin-left:auto}
.member-note{margin:12px 0 0;color:var(--muted);font-size:14px}
.member-sub{font-size:18px;font-weight:800;margin:0 0 14px}
.chat-who b a{color:inherit}
@media (max-width:640px){
  .member{gap:16px}
  .member > .avatar{width:72px!important;height:72px!important;font-size:29px!important;flex:none}
  .member-acts .btn{flex:1;min-width:0}
  .people-search{max-width:none;flex-basis:100%}
}
.member > .avatar{flex:none}
/* Above an empty direct conversation: the ones the two already have. */
.dm-also{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 18px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.dm-also a{font-weight:700;color:var(--ink)}

/* iSite: a small green dot that breathes (online), three dots while it writes, and a
   message box with light moving round it, so it reads as the assistant's (her ask). */
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#22C55E;margin-left:5px;vertical-align:middle;position:relative;top:-1px;box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:liveDot 1.8s ease-out infinite}
@keyframes liveDot{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);opacity:1}70%{box-shadow:0 0 0 7px rgba(34,197,94,0);opacity:.75}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);opacity:1}}
.bot-writing{padding:11px 14px}
.bot-writing .typing{margin:0;color:var(--muted)}
.bot-writing .typing i{width:7px;height:7px}
.composer.ai textarea{border:2px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(115deg,#FF8A4C,#F2456E,#9B5CF6,#3B82F6,#22C1C3,#FF8A4C) border-box;
  background-size:100% 100%,300% 100%;animation:aiEdge 7s linear infinite;
  box-shadow:0 0 0 0 transparent,0 6px 26px -6px rgba(155,92,246,.45),0 2px 16px -4px rgba(255,138,76,.35)}
.composer.ai textarea:focus{outline:none;box-shadow:0 8px 34px -6px rgba(155,92,246,.6),0 2px 22px -4px rgba(242,69,110,.45)}
.composer.ai .send{background:linear-gradient(135deg,#FF8A4C,#F2456E 45%,#9B5CF6);color:#fff;box-shadow:0 6px 18px -6px rgba(155,92,246,.6)}
@keyframes aiEdge{from{background-position:0 0,0% 50%}to{background-position:0 0,300% 50%}}
@media (prefers-reduced-motion:reduce){.live-dot,.composer.ai textarea{animation:none}}

/* ---------- Chats like WhatsApp (2026-10-14): the +, contact and group info ---------- */
/* The + beside the search on Messages, and its short menu. */
.plus-menu{position:relative;flex:none}
.plus-menu > summary{list-style:none}
.plus-menu > summary::-webkit-details-marker{display:none}
.plus-btn{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary);color:var(--on-primary);cursor:pointer;transition:background .15s ease}
.plus-btn:hover{background:var(--primary-hover)}
.plus-menu[open] .plus-btn svg{transform:rotate(45deg)}
.plus-btn svg{transition:transform .18s ease}
.plus-list{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:240px;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:flex;flex-direction:column}
.plus-list a,.plus-list button{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;border:0;background:none;
  color:var(--ink);font:inherit;font-size:15px;font-weight:500;text-align:left;cursor:pointer;width:100%;text-decoration:none}
.plus-list a:hover,.plus-list button:hover{background:var(--surface-2)}
.plus-list svg,.plus-list .mark,.plus-list img{flex:none}
.plus-list form{margin:0}
@media (prefers-reduced-motion: reduce){.plus-btn svg{transition:none}}

/* The top of a conversation: the name and photo are one button that opens the info. */
.chat-open{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:inherit;text-decoration:none;
  border-radius:12px;padding:2px 6px 2px 2px}
.chat-open:hover{background:var(--surface-2)}
.chat-open .chat-who b{color:var(--ink)}

/* A line from Sitescrow inside a group, and a line found by "Search in chat". */
.thread .note{align-self:center;max-width:86%;margin:10px 0 4px;padding:5px 12px;border-radius:10px;
  background:var(--surface);color:var(--muted);font-size:12.5px;line-height:1.5;text-align:center;overflow-wrap:anywhere}
.bub.hit{outline:2px solid var(--accent);outline-offset:2px;animation:hitFade 2.4s ease 1.2s forwards}
@keyframes hitFade{to{outline-color:transparent}}
@media (prefers-reduced-motion: reduce){.bub.hit{animation:none}}
.th-muted{display:inline-flex;color:var(--muted)}
.th-pin{display:inline-flex;color:var(--muted);margin-inline-start:auto}
.th-pin + .th-when{margin-inline-start:6px}

/* Contact info and group info. */
.ci-bar{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.ci-bar h1{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em}
.ci-top{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 0 18px}
.ci-top .avatar{font-size:40px}
.ci-top h2{margin:14px 0 0;font-size:clamp(22px,3vw,26px);font-weight:800;letter-spacing:-.03em;overflow-wrap:anywhere}
.ci-handle{margin:2px 0 0;color:var(--ink-2);font-size:15px}
.ci-meta{margin:4px 0 0;color:var(--muted);font-size:14px}
.ci-pill{margin:10px 0 0;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);background:var(--danger-soft);color:var(--danger)}
.ci-acts{display:flex;justify-content:center;gap:10px;margin:0 0 20px;flex-wrap:wrap}
.ci-acts a{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:92px;padding:12px 14px;
  border:1px solid var(--line);border-radius:14px;color:var(--ink);font-size:13.5px;font-weight:600;text-decoration:none}
.ci-acts a:hover{background:var(--surface-2)}
.ci-about{display:flex;flex-direction:column;gap:2px;margin:0 0 16px;padding:12px 14px;border-radius:14px;background:var(--surface-2);color:var(--ink);text-decoration:none}
.ci-about b{font-size:15px;overflow-wrap:anywhere}
.ci-find{max-width:none;margin:0 0 6px;flex:none}
.ci-hits{display:flex;flex-direction:column;margin:6px 0 10px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ci-hit{display:flex;flex-direction:column;gap:3px;padding:11px 14px;color:var(--ink);text-decoration:none}
.ci-hit + .ci-hit{border-top:1px solid var(--line)}
.ci-hit:hover{background:var(--surface-2)}
.ci-hit-top{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.ci-hit-top b{color:var(--ink-2)}
.ci-hit-body{font-size:14.5px;line-height:1.5;overflow-wrap:anywhere}
.ci-hit mark{background:var(--gold-soft);color:inherit;border-radius:3px;padding:0 1px}
.ci-none{color:var(--muted);font-size:14.5px;margin:6px 12px 14px}
.ci-hits .ci-none{margin:12px 14px}
.ci-rows{margin:8px 0 6px}
.ci-sub{display:block;font-size:13px;color:var(--muted);font-weight:400;margin-top:2px}
.ci-switch{cursor:default}
.ci-switch .switch{margin-inline-start:0}
.ci-fold > summary,.ci-confirm > summary,.ci-rename > summary{list-style:none}
.ci-fold > summary::-webkit-details-marker,.ci-confirm > summary::-webkit-details-marker,.ci-rename > summary::-webkit-details-marker{display:none}
.ci-fold[open] .st-go{transform:rotate(90deg)}
.ci-links{display:flex;flex-direction:column;gap:2px;padding:0 4px 8px 52px}
.ci-link{display:flex;flex-direction:column;padding:8px 10px;border-radius:10px;color:var(--ink);text-decoration:none;min-width:0}
.ci-link:hover{background:var(--surface-2)}
.ci-link b{font-size:14.5px}
.ci-link span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-links .hint{margin:6px 10px 0}
.ci-head{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:0;margin:18px 0 4px;padding:0 12px}
.ci-danger{border-top:1px solid var(--line);padding-top:8px;margin-top:14px}
.ci-confirm-box{margin:2px 12px 10px 52px;padding:12px 14px;border-radius:14px;background:var(--danger-soft);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ci-confirm-box p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.ci-round{flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary);color:var(--on-primary)}
.ci-round.ci-mark{background:none}
.ci-rows .st-row .ci-round + .st-label{font-weight:600}
.ci-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 4px}
.ci-empty p{margin:0;color:var(--ink-2);line-height:1.55}
/* People you know, and what a search finds there: a plain list like WhatsApp's, no box. */
.ci-people{margin:0 0 20px;display:flex;flex-direction:column}
.ci-people .person,.ci-find + #people-results .person{padding:10px 8px;border-radius:12px;background:none}
.ci-people .person:hover,.ci-find + #people-results .person:hover{background:var(--surface-2)}
.ci-people .avatar,.ci-find + #people-results .avatar{width:48px !important;height:48px !important;font-size:19px !important}
.ci-people .person-main b{font-size:16px}
.ci-find + #people-results .people{border:0;border-radius:0;margin:0 0 10px}
.ci-find + #people-results .person + .person,.ci-people .person + .person{border-top:0}
.ci-rename-box{display:flex;gap:8px;margin:2px 12px 12px 52px}
.ci-rename-box input{flex:1;min-width:0}
.ci-foot{margin:14px 12px 0}
.member-block{position:relative;display:inline-block}
.member-block > summary{list-style:none;cursor:pointer}
.member-block > summary::-webkit-details-marker{display:none}
.member-block .ci-confirm-box{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(300px,80vw);margin:0;
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.08)}

/* A new group, like WhatsApp: people first (a green tick on the photo, the picked ones
   in a row of circles on top), then the name; a round button at the bottom moves on. */
.ng-form{display:flex;flex-direction:column;gap:12px;padding-bottom:8px}
.ng-title h1{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em}
.ng-title p{margin:1px 0 0;font-size:13.5px;color:var(--muted)}
.ng-rule{margin:4px 4px 0}
.pick-chips{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.pick-chips[hidden]{display:none}
.pick-chip{position:relative;flex:none;width:58px;display:flex;flex-direction:column;align-items:center;gap:4px;animation:chipIn .2s ease both}
.pick-chip .avatar{width:52px !important;height:52px !important;font-size:20px !important}
.pick-chip em{font-style:normal;font-size:12px;color:var(--ink-2);max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-x{position:absolute;top:30px;right:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--bg);background:var(--muted);color:#fff;
  font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
@keyframes chipIn{from{transform:scale(.6);opacity:0}}
.pick-find{max-width:none;flex:none}
.pick-full{margin:0;color:var(--danger);font-size:14px}
.pick-full[hidden]{display:none}
.pick-list{display:flex;flex-direction:column}
.pick{display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:12px;cursor:pointer}
.pick:hover{background:var(--surface-2)}
.pick[hidden]{display:none}
.pick + .pick{border-top:0}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick-av{position:relative;flex:none;line-height:0}
.pick-tick{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--deal);color:#fff;border:2px solid var(--bg);
  display:none;align-items:center;justify-content:center}
.pick input:checked ~ .pick-av .pick-tick{display:flex;animation:chipIn .18s ease both}
.pick input:focus-visible ~ .pick-av{outline:2px solid var(--ink);outline-offset:3px;border-radius:50%}
.pick .person-main b{font-size:16px}
/* The round button, bottom right, like WhatsApp's. */
.ng-step{display:flex;flex-direction:column;gap:12px;min-height:calc(100vh - 160px)}
.ng-fab{position:sticky;bottom:24px;align-self:flex-end;margin-top:auto;z-index:20;flex:none;width:58px;height:58px;border-radius:50%;border:0;
  background:var(--deal);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.18);
  transition:transform .15s ease,opacity .15s ease}
.ng-fab:hover{transform:scale(1.05)}
.ng-fab:disabled{opacity:.35;cursor:default;transform:none}
.ng-next{display:none}
.ng-js .ng-next{display:flex}
.ng-js .ng-step-1 .ng-create{display:none}
.ng-js .ng-step-2{display:none}
.ng-js.ng-on2 .ng-step-1{display:none}
.ng-js.ng-on2 .ng-step-2{display:flex}
.ng-step-2 .ci-bar{margin-bottom:22px}
.ng-name{display:flex;align-items:center;gap:16px;margin:6px 0 4px}
.ng-gav{flex:none;width:64px;height:64px;border-radius:50%;background:var(--surface-2);color:var(--muted);display:flex;align-items:center;justify-content:center}
.ng-gav svg{width:30px;height:30px}
.ng-name input{flex:1;min-width:0;border:0;border-bottom:2px solid var(--deal);border-radius:0;padding:10px 2px;font-size:18px;background:none;outline:none}
.ng-members-h{margin:22px 0 10px;font-size:14px;color:var(--muted);font-weight:600}
.ng-members{display:flex;flex-wrap:wrap;gap:14px}
.ng-step-2 .pick-chip{animation:none}
@media (prefers-reduced-motion: reduce){.pick-chip,.pick input:checked ~ .pick-av .pick-tick{animation:none}.ng-fab{transition:none}}

/* The people in a group. */
.gm-list-all{display:flex;flex-direction:column;margin:0 0 6px}
.gm{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;color:inherit;text-decoration:none}
.gm-add:hover{background:var(--surface-2)}
.gm .person-main{flex:1}
.gm-pill{flex:none;font-size:12px;font-weight:700;padding:2px 9px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2)}
.gm-more{position:relative;flex:none}
.gm-more > summary{list-style:none;cursor:pointer}
.gm-more > summary::-webkit-details-marker{display:none}
.gm-list{top:calc(100% + 4px)}
.gm-danger,.plus-list .gm-danger{color:var(--danger)}
@media (max-width:640px){
  /* WhatsApp's place for it: the + up beside the title, the search under them. */
  .msg-top .plus-menu{order:1;margin-left:auto}
  .msg-top .people-search{order:2;flex-basis:100%;max-width:none}
  .ci-acts a{min-width:0;flex:1}
  .ci-links,.ci-confirm-box,.ci-rename-box{margin-left:12px;padding-left:12px}
  .ci-links{padding-left:0}
  .plus-list{right:0}
}

/* Remove a listing: a quiet red row under the seller's panels, asking once. */
.remove-listing{margin-top:6px}
.remove-listing .ci-confirm-box{margin:2px 0 10px}

/* ---------- A listing page, redesigned (2026-10-14): a product page in boxes ---------- */
/* The top: the site's picture, its name and link, its marks, and the price. */
.ld2-hero{display:flex;align-items:center;gap:22px;margin:14px 0 18px;padding:26px 28px;border-radius:12px;background:var(--surface-2)}
.ld2-logo{flex:none;width:84px;height:84px;border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.ld2-logo img{width:100%;height:100%;object-fit:contain;padding:10px}
.ld2-logo-kind{background:var(--surface);color:var(--ink-2)}
.ld2-logo-kind svg{width:38px;height:38px}
.ld2-id{flex:1;min-width:0}
.ld2-id h1{margin:0;font-size:clamp(26px,3.2vw,38px);line-height:1.08;letter-spacing:-.035em;font-weight:800;overflow-wrap:anywhere}
.ld2-url{display:inline-flex;gap:5px;margin-top:6px;color:var(--ink-2);font-size:15px;text-decoration:none;overflow-wrap:anywhere}
.ld2-url:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ld2-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ld2-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-2)}
.ld2-chip-ok{background:var(--deal-soft);border-color:transparent;color:var(--deal)}
.ld2-chip .tick{width:14px;height:14px}
.ld2-price{flex:none;text-align:right;padding-left:22px;border-left:1px solid var(--line-strong)}
.ld2-price span{display:block;font-size:13px;color:var(--muted)}
.ld2-price b{display:block;font-size:clamp(28px,3vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums}
.ld2-price small{display:block;margin-top:2px;font-size:13px;color:var(--muted);font-weight:500}
.ld2-shot{margin:0 0 18px;border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1.91/1;max-height:380px}
.ld2-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* Every section is its own white box. Corners kept tight (Gemini's point, 2026-10-14):
   round everything and it reads as a template. Colour is kept for meaning only: green
   for profit and a passed check, red for a failed one; everything else is greys. */
.ld2-card,.ld2 .ld-main > .panel:not(.chat),.split.ld2 > aside > .panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px 26px;margin:0 0 16px}
.ld2-card h2,.ld2 .ld-main > .panel:not(.chat) > h2,.split.ld2 > aside > .panel > h2{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0 0 16px}
.split.ld2 > aside > .panel:first-child{padding-top:22px;border-top:1px solid var(--line)}
.split.ld2 > aside > .panel + .panel{margin-top:0}
.ld2 .ld-main > .panel.chat{margin:0 0 16px}
.ld2-buy > h2{margin-bottom:6px}

/* The numbers: six small tiles, each with its own sign. */
.ld2-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ld2-stat{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:8px;background:var(--surface-2);min-width:0;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.ld2-stat:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.07);background:var(--surface)}
.ld2-good:hover{background:var(--surface)}
@media (prefers-reduced-motion: reduce){.ld2-stat{transition:none}.ld2-stat:hover{transform:none}}
.ld2-ico{width:22px;height:22px;border-radius:0;background:none;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px}
.ld2-label{font-size:12.5px;color:var(--muted);letter-spacing:.01em}
.ld2-label em{display:block;font-style:normal;font-size:11.5px;color:var(--deal)}
.ld2-stat b{font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.2;overflow-wrap:anywhere;color:var(--ink);font-variant-numeric:tabular-nums}
.ld2-good{background:var(--surface-2)}
.ld2-good .ld2-ico{color:var(--ink-2)}
.ld2-good b{color:var(--deal)}
.ld2-from{margin:14px 0 0;font-size:14px;color:var(--muted)}
.ld2-from b{color:var(--ink-2)}
.ld2-desc{margin:0;color:var(--ink-2);font-size:16px;line-height:1.75;white-space:pre-line;overflow-wrap:anywhere}

/* What Sitescrow checked: how far along, then each check; a passed one is green. */
.ld2-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ld2-head h2{margin-bottom:10px}
.ld2-count{font-size:14px;font-weight:700;color:var(--deal)}
.ld2-bar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin:0 0 8px}
.ld2-bar i{display:block;height:100%;border-radius:3px;background:var(--deal)}
/* Each check its own small card, like the numbers: a coloured sign that says how it
   went at a glance (green checked, amber not yet, red a problem, grey doesn't apply),
   the name in bold, and one quieter line under it. */
.ld2-ckgrid{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ld2-ckgrid > li:last-child:nth-child(odd){grid-column:1 / -1}
.ld2-ck{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start;align-content:start;padding:16px;border-radius:8px;background:var(--surface-2);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.ld2-ck:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.06);background:var(--surface)}
@media (prefers-reduced-motion: reduce){.ld2-ck{transition:none}.ld2-ck:hover{transform:none}}
.ld2-ck-ico{grid-row:1 / span 3;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.ld2-ck-ico svg{width:15px;height:15px}
.ld2-ck-state{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ld2-ck b{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.ld2-ck-text{font-size:13.5px;line-height:1.5;color:var(--muted)}
.ld2-ck-ok .ld2-ck-ico{background:var(--deal);color:#fff}
.ld2-ck-ok .ld2-ck-state{color:var(--deal)}
.ld2-ck-todo .ld2-ck-ico{background:var(--gold-soft);color:var(--gold)}
.ld2-ck-todo .ld2-ck-state{color:var(--gold)}
.ld2-ck-warn .ld2-ck-ico{background:var(--danger);color:#fff}
.ld2-ck-warn .ld2-ck-state,.ld2-ck-warn .ld2-ck-text{color:var(--danger)}
.ld2-ck-na .ld2-ck-ico{background:var(--line);color:var(--muted)}
.ld2-ck-na .ld2-ck-state{color:var(--muted)}
@media (max-width:640px){.ld2-ckgrid{grid-template-columns:minmax(0,1fr)}}

/* The side: the offer, the seller, and how buying works in three steps. */
.ld2-profile{margin-top:14px;width:100%}
.ld2-steps{list-style:none;margin:0;padding:0;counter-reset:st;display:flex;flex-direction:column;gap:14px}
.ld2-steps li{counter-increment:st;position:relative;padding-left:40px;display:flex;flex-direction:column;gap:2px}
.ld2-steps li::before{content:counter(st);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;background:var(--surface-2);color:var(--ink);
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ld2-steps b{font-size:14.5px}
.ld2-steps span{font-size:13.5px;color:var(--muted);line-height:1.5}
@media (max-width:640px){
  .ld2-hero{flex-wrap:wrap;gap:16px;padding:20px;border-radius:10px}
  .ld2-logo{width:64px;height:64px;border-radius:10px}
  .ld2-id{flex-basis:calc(100% - 84px)}
  .ld2-price{flex-basis:100%;text-align:left;padding:14px 0 0;border-left:0;border-top:1px solid var(--line-strong)}
  .ld2-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ld2-card,.ld2 .ld-main > .panel:not(.chat),.split.ld2 > aside > .panel{padding:20px 18px;border-radius:10px}
  .ld2-stat{padding:14px}
  .ld2-stat b{font-size:18px}
}

/* Remove a listing: a quiet red row under the seller's panels, asking once. */
.remove-listing{margin-top:6px}
.remove-listing .ci-confirm-box{margin:2px 0 10px}

/* ---------- A listing page, tidied (2026-10-14): one sheet, lines, no boxes ---------- */
.lead-title h1{font-size:clamp(28px,3.4vw,40px);line-height:1.08;letter-spacing:-.035em;font-weight:800;margin:0;overflow-wrap:anywhere}
.ld-head{margin:4px 0 22px}
.ld-meta{display:flex;flex-wrap:wrap;gap:4px 0;margin:8px 0 0;color:var(--muted);font-size:14.5px}
.ld-meta span + span::before{content:"·";margin:0 9px;color:var(--line-strong)}
.ld-price-m{display:none;margin:12px 0 0;font-size:30px;font-weight:800;letter-spacing:-.03em}
/* The numbers: a sheet with hairlines, three across. */
.ld-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ld-facts > div{padding:18px 20px 18px 0;min-width:0}
.ld-facts > div:not(:nth-child(3n+1)){padding-left:20px;border-left:1px solid var(--line)}
.ld-facts > div:nth-child(n+4){border-top:1px solid var(--line)}
.ld-facts dt{font-size:13px;color:var(--muted);margin:0 0 6px}
.ld-facts dd{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
.ld-facts dd.ld-profit{color:var(--deal)}
.ld-counted{display:block;font-size:11.5px;color:var(--deal);margin-top:1px}
.ld-from{margin:12px 0 0;font-size:14px;color:var(--muted)}
.ld-from b{color:var(--ink-2);font-weight:600}
.ld-about{padding:30px 0 6px}
.ld-about h2,.ld-main > .panel:not(.chat) > h2{font-size:20px;margin:0 0 12px;letter-spacing:-.02em}
.ld-about p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.75;white-space:pre-line;overflow-wrap:anywhere}
/* Everything else in the main column reads as sections of the same sheet. The chat
   with the seller keeps its frame: it is a conversation, not a section. */
.ld-main > .panel:not(.chat){background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:28px 0 6px;margin:28px 0 0}
.ld-main > .panel.chat{margin-top:32px}
@media (max-width:880px){
  .ld-price-m{display:block}
}
@media (max-width:640px){
  .ld-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ld-facts > div{padding:14px 14px 14px 0}
  .ld-facts > div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .ld-facts > div:nth-child(n+4){border-top:0}
  .ld-facts > div:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}
  .ld-facts > div:nth-child(n+3){border-top:1px solid var(--line)}
  .ld-facts dd{font-size:19px}
}

/* Unread, like WhatsApp: the number in a circle on the right of the line, the date in
   the same colour, the name and the line darker. Two lines of the last message at most. */
.th-body{display:flex;align-items:flex-start;gap:12px}
.th-text{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.th-count{flex:none;margin-top:1px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--accent);color:#fff;
  font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.conv.is-unread .th-when{color:var(--accent);font-weight:600}
.conv.is-unread .th-text{color:var(--ink-2)}
.th-head b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.th-head .th-about{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-head .th-when{flex:none;white-space:nowrap}

/* ---------- The window from the bottom (2026-10-15, src/views/nudge.js) ---------- */
/* A sheet from the bottom on a phone, a card in the middle on a computer. */
dialog.nudge{padding:0;border:0;background:none;max-width:none;max-height:none;width:100%;height:100%;margin:0;inset:0;
  display:none;align-items:flex-end;justify-content:center}
dialog.nudge[open]{display:flex}
dialog.nudge::backdrop{background:rgba(0,0,0,.38);animation:ngFade .25s ease both}
.ng-in{position:relative;width:100%;max-width:440px;background:var(--surface);border-radius:24px 24px 0 0;padding:14px 24px 26px;
  text-align:center;box-shadow:0 -10px 40px rgba(0,0,0,.15);animation:ngUp .32s cubic-bezier(.2,.8,.25,1) both}
.ng-handle{display:block;width:40px;height:5px;border-radius:3px;background:var(--line-strong);margin:0 auto 6px}
.ng-art{display:block;width:100%;max-width:300px;height:auto;margin:4px auto 2px}
.ng-art .a-lip,.ng-art .a-btn-lip,.ng-art .a-hand-lip,.ng-art .a-friend-lip{fill:#D8D2CA}
.ng-art .a-btn-lip{fill:#000;opacity:.25}
.ng-art .a-bub{fill:var(--surface);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.ng-art .a-card-o{fill:#F4F1EC}
.ng-art .a-or{fill:var(--accent)}
.ng-art .a-grey{fill:#D9D4CC}
.ng-art .a-wline{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round}
.ng-art .a-wdot{fill:#C25836;stroke:#fff;stroke-width:5}
.ng-art .a-trail{fill:none;stroke:#C25836;stroke-width:2.5;stroke-dasharray:1 6;stroke-linecap:round}
.ng-art .a-plane{fill:var(--accent)}
.ng-art .a-plane-fold{fill:var(--accent-ink)}
.ng-art .a-green{fill:#2E9E5B;stroke:#fff;stroke-width:2.5}
.ng-art .a-wcheck{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ng-art .a-spark{fill:#F2B8A2}
.ng-art .a-btn{fill:var(--primary)}
.ng-art .a-btn-t{fill:var(--on-primary);font:800 17px Inter,Arial,sans-serif}
.ng-art .a-plus-w{stroke:#fff;stroke-width:3;stroke-linecap:round}
.ng-art .a-glove{fill:var(--surface);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.ng-art .a-glove-line{fill:none;stroke:#1C1C1C;stroke-width:2;stroke-linecap:round}
.ng-art .a-ring1{fill:none;stroke:#F2B8A2;stroke-width:3}
.ng-art .a-ring2{fill:none;stroke:#F8DCD0;stroke-width:3}
.ng-art .a-chip{fill:#E7F4EC}
.ng-art .a-chip-t{fill:#23784A;font:800 11px Inter,Arial,sans-serif}
.ng-art .a-friend{fill:#E8E3DC;stroke:#1C1C1C;stroke-width:2.5}
.ng-art .a-friend-t{fill:#1C1C1C;font:800 18px Inter,Arial,sans-serif}
/* A little life once it is open: the hand taps and the button gives, rings spread from
   the press, the plane drifts, the friend and the "+1" pop in. */
.ng-art .a-tap{animation:ngTap 1.8s ease-in-out .6s infinite}
.ng-art .a-press{transform-box:fill-box;transform-origin:center;animation:ngGive 1.8s ease-in-out .6s infinite}
.ng-art .a-ring{transform-box:fill-box;transform-origin:center;animation:ngRing 1.8s ease-out .6s infinite}
.ng-art .a-fly{animation:ngDrift 3.2s ease-in-out infinite}
.ng-art .a-pop{transform-box:fill-box;transform-origin:center;animation:ngPopIn .45s cubic-bezier(.3,1.6,.5,1) .5s both}
@keyframes ngTap{0%,30%,100%{transform:translateY(8px)}45%,60%{transform:translateY(0)}}
@keyframes ngGive{0%,40%,70%,100%{transform:none}50%,60%{transform:translateY(2px) scale(.98)}}
@keyframes ngRing{0%,45%{opacity:0;transform:scale(.6)}60%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
@keyframes ngDrift{50%{transform:translate(3px,-4px)}}
@keyframes ngPopIn{from{transform:scale(0)}}
@media (prefers-reduced-motion: reduce){.ng-art .a-tap,.ng-art .a-press,.ng-art .a-ring,.ng-art .a-fly,.ng-art .a-pop{animation:none}}
.ng-in h2{margin:8px 0 6px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.ng-in p{margin:0 auto 18px;max-width:330px;color:var(--ink-2);font-size:15px;line-height:1.55}
.ng-acts{display:flex;flex-direction:column;gap:10px}
.ng-acts .btn{width:100%;justify-content:center;gap:10px;min-height:50px;font-size:15.5px}
.ng-copy.ng-ok{border-color:var(--deal);color:var(--deal)}
.ng-no{margin-top:12px;border:0;background:none;color:var(--muted);font:inherit;font-size:14.5px;font-weight:600;padding:8px 14px;cursor:pointer}
.ng-no:hover{color:var(--ink)}
dialog.nudge.ng-out .ng-in{animation:ngDown .22s ease both}
dialog.nudge.ng-out::backdrop{animation:ngFadeOut .22s ease both}
@keyframes ngUp{from{transform:translateY(100%)}}
@keyframes ngDown{to{transform:translateY(100%)}}
@keyframes ngFade{from{opacity:0}}
@keyframes ngFadeOut{to{opacity:0}}
@media (min-width:641px){
  dialog.nudge{align-items:center}
  .ng-in{border-radius:20px;padding:22px 30px 26px;animation:ngPop .26s cubic-bezier(.2,.8,.25,1) both}
  .ng-handle{display:none}
  dialog.nudge.ng-out .ng-in{animation:ngFadeOut .2s ease both}
  @keyframes ngPop{from{transform:scale(.94);opacity:0}}
}
@media (prefers-reduced-motion: reduce){.ng-in,dialog.nudge::backdrop,dialog.nudge.ng-out .ng-in{animation:none}}

/* ---------- Verification, like X's Premium page (2026-10-15) ---------- */
.vx-page{padding-top:8px}
.vx{position:relative;background:#000;color:#E7E9EA;border-radius:24px;padding:22px 22px 26px;overflow:hidden}
.vx-close{position:absolute;left:14px;top:14px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#E7E9EA;z-index:2}
.vx-close:hover{background:#16181C}
.vx-art{position:relative;height:132px;margin:6px auto 10px;max-width:320px;display:flex;align-items:center;justify-content:center}
.vx-dots{position:absolute;inset:0}
.vx-dots i{position:absolute;border-radius:50%;background:var(--accent);opacity:.9;animation:vxTwinkle 2.6s ease-in-out infinite}
@keyframes vxTwinkle{50%{opacity:.25;transform:scale(.6)}}
.vx-mk{position:relative;animation:vxPop .6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes vxPop{from{transform:scale(.4) rotate(-20deg);opacity:0}}
.vx-title{margin:0 auto 22px;max-width:440px;text-align:center;font-size:clamp(26px,5vw,34px);line-height:1.2;font-weight:800;letter-spacing:-.025em;color:#E7E9EA}
.vx-title span{color:var(--accent)}
.vx-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 16px}
.vx-cards:has(> .vx-card:only-child){grid-template-columns:minmax(0,1fr)}
.vx-card{position:relative;display:flex;flex-direction:column;gap:3px;padding:16px;border-radius:16px;background:#16181C;border:2px solid transparent;cursor:pointer;min-width:0;transition:border-color .15s ease}
.vx-card:hover{border-color:#333639}
.vx-card:has(input:checked){border-color:#E7E9EA;background:#0F1012}
.vx-card input{position:absolute;opacity:0;pointer-events:none}
.vx-card:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.vx-c-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.vx-c-top b{font-size:17px;font-weight:700;color:#E7E9EA;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.vx-c-top em{flex:none;font-style:normal;font-size:14px;font-weight:700;color:var(--accent)}
.vx-c-url{font-size:13px;color:#71767B;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-c-line{margin-top:6px;font-size:14.5px;color:#C4C7CA}
.vx-c-bar{display:block;margin-top:10px;height:4px;border-radius:2px;background:#2F3336;overflow:hidden}
.vx-c-bar i{display:block;height:100%;border-radius:2px;background:var(--accent)}
.vx-btn{position:sticky;bottom:16px;z-index:3;box-shadow:0 0 0 8px #000;display:flex;align-items:center;justify-content:center;height:54px;border-radius:999px;background:#EFF3F4;color:#0F1419;font-size:18px;font-weight:800;text-decoration:none;transition:background .15s ease}
.vx-btn:hover{background:#D7DBDC;color:#0F1419}
.vx-free{margin:12px 0 14px;text-align:center;color:#71767B;font-size:15px}
.vx-fine{border:1px solid #536471;border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.55;color:#C4C7CA}
.vx-fine a{color:#E7E9EA;text-decoration:underline;text-underline-offset:3px}
.vx-empty{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:16px;background:#16181C;margin:0 0 16px}
.vx-empty b{color:#E7E9EA;font-size:17px}
.vx-empty span{color:#C4C7CA;font-size:14.5px}
@media (max-width:640px){
  .vx{border-radius:0;margin:0 -16px;padding:18px 16px 24px}
  .vx-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:400px){.vx-cards{grid-template-columns:minmax(0,1fr);gap:8px}.vx-card{padding:12px 14px}.vx-c-line{margin-top:2px}.vx-c-bar{margin-top:8px}}
@media (prefers-reduced-motion: reduce){.vx-dots i,.vx-mk{animation:none}}

/* Full screen, like X: the black covers everything, the menu included, and scrolls on
   its own; the cross goes back to the profile. */
.vx-page{position:fixed;inset:0;z-index:1000;background:#000;overflow-y:auto;padding:0;-webkit-overflow-scrolling:touch}
.vx-page > .wrap{min-height:100%;padding:0}
.vx-page .vx{border-radius:0;margin:0 auto;padding:22px 20px 40px;max-width:640px;background:none}
body:has(.vx-page){overflow:hidden}
/* The price, the way X shows a plan: a card with the amount big. */
.vx-price{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 auto 22px;max-width:320px;padding:18px 20px;border-radius:16px;border:2px solid #E7E9EA;background:#0F1012;text-align:center}
.vx-pr-name{font-size:15px;color:#C4C7CA;font-weight:600}
.vx-pr-row{display:flex;align-items:baseline;justify-content:center;gap:12px}
.vx-pr-was{font-size:22px;font-weight:600;color:#71767B;text-decoration-thickness:2px;text-decoration-color:var(--accent)}
.vx-pr-amt{font-size:44px;font-weight:800;letter-spacing:-.03em;color:#E7E9EA;line-height:1.1}
.vx-pr-then{font-size:13px;color:#71767B;margin-top:2px}
.vx-pr-note{font-size:14.5px;color:var(--accent);font-weight:700}
.vx-cards + .vx-btn,.vx-empty + .vx-btn{margin-bottom:16px}
@media (max-width:640px){.vx-page .vx{margin:0;padding:16px 16px 36px}}