:root{
  --ink:#13241D;
  --jade:#15593D;
  --jade-soft:#E3EDE7;
  --marigold:#E69B19;
  --rose:#B92F60;
  --paper:#EDF1EC;
  --card:#FFFFFF;
  --muted:#63756C;
  --line:#D4DED7;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(34px,5.6vw,62px)}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:20px;font-weight:600;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:4px}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--jade);
}

/* ---------- nav ---------- */
/* The bar clears the status bar on a notched phone.
 *
 * viewport-fit=cover lets the page use the full screen, which is what makes
 * the background reach the edges, but it also means the top of the document
 * sits under the clock and the battery. The signed in shell handled this and
 * the public one never did, so a logged out visitor on an iPhone had the menu
 * button behind the status bar.
 *
 * Padding rather than a margin, so the blurred background still fills the
 * notch area instead of leaving a strip of bare page above the bar. */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(237,241,236,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
/* The side insets, for a phone held sideways where the notch eats one edge.
 *
 * max(), not a bare env(). This element is also a .wrap, which carries 22px of
 * padding, and a plain env() resolves to 0 on every device without a notch:
 * it replaced that padding rather than adding to it, and the logo ended up
 * against the glass with the menu button clipped. The rule now takes whichever
 * is larger, so an ordinary phone keeps its 22px. */
.nav-in{
  padding-left:max(22px, env(safe-area-inset-left));
  padding-right:max(22px, env(safe-area-inset-right));
}
.nav-in{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;margin-right:auto}
.brand b{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.03em}
/* The row aligns on the text baseline so the wordmark and the Nastaliq line
   sit together. An image's baseline is its bottom edge, though, which pushed
   the mark up above the text, so it centres itself instead. */
.nav-mark{width:30px;height:30px;margin-right:9px;align-self:center}
.foot-mark{width:30px;height:30px;vertical-align:-8px;margin-right:8px}
.brand .urdu{font-family:"Noto Nastaliq Urdu",serif;font-size:15px;color:var(--jade);line-height:2}
.nav a.link{display:none;text-decoration:none;font-size:15px;color:var(--muted);font-weight:500}
.nav a.link:hover{color:var(--ink)}
@media(min-width:860px){.nav a.link{display:inline}}

.lang{
  display:flex;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:3px;gap:2px;
}
.lang button{
  font-family:var(--body);font-size:12.5px;font-weight:600;border:0;cursor:pointer;
  background:transparent;color:var(--muted);padding:6px 12px;border-radius:999px;
}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* ---------- hero ---------- */
.hero{padding:60px 0 40px}
.hero-grid{display:grid;gap:44px;align-items:start}
@media(min-width:960px){.hero-grid{grid-template-columns:1fr 1fr;gap:56px}}
.badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
  font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;margin-bottom:22px;
}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--marigold);display:block}
h1 em{font-style:normal;color:var(--jade);position:relative;white-space:nowrap}
h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;
  background:var(--marigold);opacity:.5;border-radius:2px;
}
.lede{font-size:19px;color:var(--muted);margin-top:20px;max-width:30em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{
  font-family:var(--body);font-size:16px;font-weight:600;border-radius:12px;
  padding:14px 22px;text-decoration:none;display:inline-block;cursor:pointer;border:1.5px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-a{background:var(--jade);color:#fff;box-shadow:0 2px 0 var(--ink)}
.btn-b{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn:hover{transform:translateY(-2px)}
.reassure{margin-top:18px;font-size:14.5px;color:var(--muted)}

/* ---------- receipt (signature) ---------- */
.receipt-shell{position:relative}
.receipt{
  background:var(--card);border:1px solid var(--line);border-bottom:0;
  border-radius:16px 16px 0 0;padding:22px 22px 26px;
  box-shadow:0 18px 44px -28px rgba(19,36,29,.5);
}
.tear{
  height:12px;background:var(--card);
  -webkit-mask-image:radial-gradient(circle at 50% 100%,transparent 6.5px,#000 7px);
  -webkit-mask-size:15px 12px;-webkit-mask-repeat:repeat-x;
  mask-image:radial-gradient(circle at 50% 100%,transparent 6.5px,#000 7px);
  mask-size:15px 12px;mask-repeat:repeat-x;
}
.rec-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-bottom:14px;border-bottom:1.5px dashed var(--line)}
.rec-head .t{font-family:var(--display);font-weight:600;font-size:16px}
.stamp{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid var(--jade);color:var(--jade);padding:4px 9px;border-radius:5px;transform:rotate(-2deg);
}
.stamp.hold{border-color:var(--marigold);color:#8a5c05}
.stamp.alert{border-color:var(--rose);color:var(--rose)}

.amount{display:flex;align-items:baseline;gap:10px;margin:18px 0 4px}
.amount .n{font-family:var(--mono);font-size:34px;font-weight:700;letter-spacing:-.03em}
.amount .c{font-family:var(--mono);font-size:13px;color:var(--muted)}
.where{font-size:15px;color:var(--muted);min-height:44px}
.where b{color:var(--ink);font-weight:600}

.steps{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:2px}
.steps li{display:flex;gap:13px;align-items:flex-start;padding:9px 0;position:relative}
.dot{
  flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);
  background:var(--card);margin-top:1px;display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;font-weight:700;color:var(--muted);
  transition:background .3s,border-color .3s,color .3s;
}
.steps li::before{
  content:"";position:absolute;left:10px;top:32px;bottom:-2px;width:2px;background:var(--line);
}
.steps li:last-child::before{display:none}
.steps li .txt{font-size:14.5px;color:var(--muted);line-height:1.45;transition:color .3s}
.steps li.done .dot{background:var(--jade);border-color:var(--jade);color:#fff}
.steps li.now .dot{background:var(--marigold);border-color:var(--marigold);color:#fff}
.steps li.now .txt,.steps li.done .txt{color:var(--ink)}
.steps li.now .txt{font-weight:600}
.steps li.warn .dot{background:var(--rose);border-color:var(--rose);color:#fff}

.rec-foot{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
.mini{
  font-family:var(--body);font-size:13.5px;font-weight:600;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);color:var(--ink);
  padding:8px 13px;border-radius:9px;
}
.mini:hover{border-color:var(--ink)}
.mini.danger{color:var(--rose);border-color:#F0CFDB}

/* ---------- trust strip ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--jade-soft)}
/* Vertical padding only.
 *
 * This element is also a .wrap, which carries 22px on the sides. `padding:26px
 * 0` is a shorthand, so it overwrote that with zero and the three promises ran
 * edge to edge on a phone, the text touching the glass on both sides. The
 * longhand adds the top and bottom without touching the sides. */
.strip-in{display:grid;gap:20px;padding-top:26px;padding-bottom:26px}
@media(min-width:760px){.strip-in{grid-template-columns:repeat(3,1fr);gap:34px}}
.fact .k{font-family:var(--display);font-size:19px;font-weight:600;margin-bottom:3px}
.fact .v{font-size:14.5px;color:var(--muted)}

/* On a phone the three facts stack, and stacked they read as one wall of text:
   three headings and three paragraphs with nothing between them. A line and a
   tick make them three separate claims again, which is what they are, and the
   whole strip gets shorter at the same time. */
@media (max-width: 759px) {
  .strip-in{gap:0;padding-top:20px;padding-bottom:20px}
  .fact{padding:14px 0 14px 30px;position:relative;border-top:1px solid rgba(19,36,29,.11)}
  .fact:first-child{border-top:0;padding-top:2px}
  .fact::before{
    content:'';position:absolute;left:0;top:18px;width:16px;height:9px;
    border-left:2.5px solid var(--jade);border-bottom:2.5px solid var(--jade);
    transform:rotate(-45deg);
  }
  .fact:first-child::before{top:6px}
  .fact .k{font-size:16.5px;line-height:1.3;margin-bottom:4px}
  .fact .v{font-size:14.5px;line-height:1.5}
}

/* ---------- sections ---------- */
section{padding:66px 0}
.head{max-width:34em;margin-bottom:36px}
.head p{color:var(--muted);margin-top:12px;font-size:17px}

.tabs{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;gap:3px;margin-bottom:26px}
.tabs button{
  font-family:var(--body);font-size:14.5px;font-weight:600;border:0;cursor:pointer;
  background:transparent;color:var(--muted);padding:9px 18px;border-radius:999px;
}
.tabs button[aria-pressed="true"]{background:var(--jade);color:#fff}

.how{display:grid;gap:16px;counter-reset:s}
@media(min-width:820px){.how{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:22px}
.how .card{position:relative;padding-top:26px}
.how .card::before{
  counter-increment:s;content:counter(s);
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--jade);
  background:var(--jade-soft);border-radius:6px;padding:3px 8px;
}
.how h3{margin:14px 0 8px}
.how p{color:var(--muted);font-size:15.5px}

/* ---------- calculator ---------- */
.calc{display:grid;gap:24px;align-items:center}
@media(min-width:880px){.calc{grid-template-columns:.85fr 1.15fr;gap:40px}}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.money-in{display:flex;align-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:0 16px}
.money-in span{font-family:var(--mono);font-size:17px;color:var(--muted)}
.money-in input{
  font-family:var(--mono);font-size:26px;font-weight:700;border:0;background:transparent;
  padding:16px 10px;width:100%;color:var(--ink);min-width:0;
}
.money-in input:focus{outline:none}
.money-in:focus-within{border-color:var(--jade)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{font-family:var(--mono);font-size:12.5px;cursor:pointer;background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--muted)}
.chip:hover{border-color:var(--jade);color:var(--jade)}

.split{background:var(--ink);color:#fff;border-radius:16px;padding:26px}
.split .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px dashed rgba(255,255,255,.16)}
.split .row:last-child{border:0;padding-bottom:0}
/* One line per row, on any width.
 *
 * The label wrapped to two lines on a narrow phone while the amount wrapped
 * too, so three rows of arithmetic became six lines of fragments. The label
 * shrinks and the amount never breaks: the number is the point, and a number
 * split across two lines is not a number anybody reads. */
.split .lbl{font-size:15px;color:#B9C9C1;min-width:0}
.split .val{font-family:var(--mono);font-size:19px;font-weight:700;white-space:nowrap;flex:none}
.split .row.big .val{font-size:25px;color:var(--marigold)}
.split .note{font-size:13px;color:#9DB0A7;margin-top:14px;line-height:1.5}

/* ---------- listings ---------- */
.grid{display:grid;gap:16px}
@media(min-width:680px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.grid{grid-template-columns:repeat(4,1fr)}}
/* `a{color:inherit}` above resets the colour but not the underline, so these
   whole-card links rendered with every line underlined. The app stylesheet's
   copy of this rule always had the reset; this one did not. */
.lst{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:18px;display:flex;flex-direction:column;gap:11px;text-decoration:none;color:inherit}
.lst .top{display:flex;justify-content:space-between;align-items:center}
.plat{font-size:12px;font-weight:600;padding:4px 9px;border-radius:6px;background:var(--jade-soft);color:var(--jade)}
.ver{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lst .followers{font-family:var(--display);font-size:27px;font-weight:800;letter-spacing:-.03em}
.lst .followers small{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0}
.lst .meta{font-size:14px;color:var(--muted)}
.lst .price{font-family:var(--mono);font-size:17px;font-weight:700;margin-top:auto;padding-top:11px;border-top:1px dashed var(--line)}
.lst .price small{display:block;font-family:var(--body);font-size:12.5px;font-weight:400;color:var(--muted)}

/* ---------- faq ---------- */
/* The same card the fees page uses. The homepage FAQ was a bare stack of
   rules against the page background, which read as unfinished next to every
   other block on the site. */
.faq{max-width:44em;display:grid;gap:0;
  background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.qa{border-bottom:1px solid var(--line)}
.qa:first-child{border-top:0}
.qa:last-child{border-bottom:0}
/* Laid out exactly like .fee-faq summary: a flex row with the sign as an item
   rather than absolutely positioned. Two mechanisms producing "nearly the
   same" is how the two FAQs drifted apart in the first place. */
.qa button{
  width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  font-family:var(--display);font-size:16px;font-weight:600;color:var(--ink);
  padding:18px 20px;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;
}
.qa button::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--jade);font-weight:400;flex:none}
.qa button[aria-expanded="true"]::after{content:"–"}
.qa .ans{display:none;padding:0 20px 18px;color:var(--muted);font-size:15px;max-width:40em}
.qa button[aria-expanded="true"]+.ans{display:block}


footer{background:var(--ink);color:#B9C9C1;padding:44px 0 34px;font-size:14.5px}
footer .fgrid{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:flex-start}
footer b{color:#fff;font-family:var(--display);font-size:20px;letter-spacing:-.03em}
footer .small{font-size:13px;color:#7E938A;max-width:34em;margin-top:12px;line-height:1.55}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* nav auth buttons + logo */
.nav-mark{display:block;border-radius:7px}
.foot-mark{display:inline-block;vertical-align:middle;margin-right:8px;border-radius:6px}
.nav-auth{display:none;gap:8px;margin-left:auto}
@media(min-width:760px){.nav-auth{display:flex}}
.btn-nav{font-size:13.5px;font-weight:600;text-decoration:none;padding:8px 15px;border-radius:9px;white-space:nowrap}
.btn-nav.ghost{color:var(--ink);border:1.5px solid var(--line)}
.btn-nav.ghost:hover{border-color:var(--ink)}
.btn-nav.solid{background:var(--jade);color:#fff;box-shadow:0 2px 0 var(--ink)}
.btn-nav.solid:hover{transform:translateY(-1px)}
.nav-in .brand{margin-right:20px}
@media(max-width:759px){.nav-in .brand{margin-right:auto}}

/* blog */
/* padding-block only. Writing `padding:52px 0 30px` here also set the sides to
   zero, and this element is a .wrap: the heading ran flush to the screen edge
   on a phone. */
.blog-head{padding-top:52px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.blog-grid{display:grid;gap:22px;padding:34px 0 70px}
@media(min-width:700px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:15px;overflow:hidden;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .12s,border-color .12s}
.post-card:hover{transform:translateY(-2px);border-color:var(--jade)}
.post-card img{width:100%;height:170px;object-fit:cover;display:block;background:var(--jade-soft)}
.post-card .pc-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card h3{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.post-card p{font-size:14.5px;color:var(--muted);flex:1}
.post-card .pc-meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* padding-block only. This element is also a .wrap, and the shorthand set the
   sides to zero, so a blog post ran edge to edge on a phone. Same mistake as
   the listings and blog headings. */
.article{max-width:44rem;margin:0 auto;padding-top:44px;padding-bottom:80px}
.article h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08;margin-bottom:16px}
.article .lede{font-size:19px;color:var(--muted);margin-bottom:22px}
.article-cover{width:100%;border-radius:15px;margin:26px 0;display:block}
.article-body{font-size:17.5px;line-height:1.72}
.article-body h2{font-size:27px;margin:38px 0 12px}
.article-body h3{font-size:21px;margin:30px 0 10px}
.article-body p{margin:0 0 18px}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:22px}
.article-body li{margin-bottom:7px}
.article-body blockquote{border-left:3px solid var(--jade);padding-left:18px;margin:0 0 20px;color:var(--muted);font-style:italic}
.article-body pre{background:var(--ink);color:#E3EDE7;padding:16px;border-radius:11px;overflow-x:auto;font-family:var(--mono);font-size:14px;margin-bottom:20px}
.article-body code{font-family:var(--mono);font-size:.9em;background:var(--jade-soft);padding:2px 5px;border-radius:4px}
.article-body pre code{background:none;padding:0}
.article-body img{max-width:100%;height:auto;border-radius:11px;margin:8px 0 20px}
.article-body figure{margin:0 0 22px}
.article-body figcaption{font-size:13.5px;color:var(--muted);margin-top:7px;text-align:center}
.article-body hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.article-body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15.5px}
.article-body th,.article-body td{border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top}
.article-body th{background:var(--jade-soft);font-weight:600}
.article-body table caption{caption-side:bottom;font-size:13px;color:var(--muted);padding-top:8px}
.article-body a{color:var(--jade);text-decoration:underline;text-underline-offset:2px}

/* signed-out listing: show the shape of the detail without giving it away */
/* ================= public listing page =================
   This page is built from the same building blocks as the signed-in app, but
   it loads site.css, which never defined them. Two things went wrong as a
   result. The layout wrapper was called `.split`, which in this stylesheet is
   the homepage's dark fee receipt, so the page inherited an ink background
   and `color:#fff`, and every card rendered white text on a white card. And a
   dozen utility classes simply did not exist, so the follower count, price,
   badges and buttons fell back to unstyled text.

   The wrapper is now `.acct-grid`, which cannot collide, and the utilities
   below are defined in this stylesheet's own visual language. */
.acct-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:900px){.acct-grid{grid-template-columns:minmax(0,1fr) 340px}}
.acct-grid > .stack:first-child{min-width:0}

.stack{display:grid;gap:16px;align-content:start}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.muted{color:var(--muted)}
.bignum{font-family:var(--mono);font-size:31px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.hint{font-size:12.5px;color:var(--muted);line-height:1.5}

.pill{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:var(--jade-soft);color:var(--jade);letter-spacing:.01em}
.p-hold{background:var(--jade-soft);color:var(--jade)}
.speed{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:7px}
.s-fast{background:#DEF0E6;color:#186B41}
.s-medium{background:#FBEEDA;color:#8A5A10}
.s-slow{background:#FBE4EA;color:#94254B}

.banner{border-radius:11px;padding:13px 15px;font-size:14.5px;line-height:1.5}
.banner.warn{background:#FBEEDA;color:#6E4A0E;border:1px solid #F0DCB4}

.btn-wide{display:block;width:100%;text-align:center}
.btn-sm{padding:9px 14px;font-size:14px}

/* Homepage shelves: featured, then recently added, then the way through to
   the full marketplace. The second heading sits closer than a fresh section
   would, because the two shelves are one idea rather than two. */
.head-next{margin-top:44px}
.browse-all{margin-top:30px;text-align:center}
.browse-all .btn{min-width:230px}
.browse-all .hint{margin-top:11px;font-size:13.5px;color:var(--muted)}

/* ================= homepage marketplace =================
   Each filter option is both a link and a hidden checkbox. The link works
   with JavaScript off and gives crawlers a real URL for every narrowed view;
   the checkbox carries the state when the form submits. `.box` is the square
   you actually see. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mkt-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
@media(min-width:940px){.mkt-grid{grid-template-columns:258px minmax(0,1fr)}}
.mkt-results{min-width:0}
/* The page-wide `.grid` goes to four columns at 980px, but the results sit in
   a column narrowed by the filter rail, and four across there squeezes a card
   until "45.2k followers" breaks over two lines. Size to the space instead. */
.mkt-results .grid{grid-template-columns:repeat(auto-fill,minmax(216px,1fr))}

.mkt-filters{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:4px 18px 18px}
@media(min-width:940px){
  .mkt-filters{position:sticky;top:86px;max-height:calc(100vh - 106px);overflow-y:auto}
}
.fgroup{border-bottom:1px solid var(--line);padding:16px 0}
.fgroup:last-of-type{border-bottom:0}
.fgroup > h3{font-size:12px;font-family:var(--mono);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:11px}

.opt{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:15px;min-height:40px;
  text-decoration:none;color:var(--ink)}
.opt .count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
.opt.off,.speedopt.off{opacity:.42;pointer-events:none}
.opt:hover .box,.speedopt:hover .box{border-color:var(--jade)}
.box{width:19px;height:19px;border:1.8px solid var(--line);border-radius:5px;flex:none;
  background:var(--card);display:block;position:relative}
.box.on{background:var(--jade);border-color:var(--jade)}
.box.on::after{content:"";position:absolute;left:5.5px;top:2px;width:4px;height:9px;
  border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(42deg)}

.speedopt{display:grid;grid-template-columns:auto 1fr;gap:0 10px;padding:9px 0;min-height:46px;
  text-decoration:none;color:var(--ink)}
.speedopt .box{grid-row:span 2;align-self:center}
.speedopt b{font-size:15px;font-weight:600}
.speedopt small{grid-column:2;color:var(--muted);font-size:12.5px;line-height:1.4}

.range{display:flex;align-items:center;gap:8px}
.range input{width:100%;min-width:0;font-family:var(--mono);font-size:14px;padding:10px 11px;
  border:1.5px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink)}
.range input:focus{border-color:var(--jade);outline:none;background:var(--card)}
.range span{color:var(--muted);font-size:13px}
.bands{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.band{font-size:12.5px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);color:var(--muted);text-decoration:none;min-height:36px;
  display:inline-flex;align-items:center}
.band:hover{border-color:var(--jade);color:var(--jade)}
.band.on{background:var(--jade);border-color:var(--jade);color:#fff}

.mkt-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mkt-count{font-family:var(--mono);font-size:14px;color:var(--muted)}
.mkt-count b{color:var(--ink);font-size:16px}
.mkt-sortwide{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.mkt-sort{font-family:var(--body);font-size:14.5px;padding:10px 34px 10px 12px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);min-height:44px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363756C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:16px}

.mkt-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.mkt-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;padding:8px 9px 8px 13px;
  border-radius:999px;background:var(--jade-soft);color:var(--jade);font-weight:600;
  text-decoration:none;min-height:36px}
.mkt-chip:hover{background:#D3E5DA}
.mkt-chip.clear{background:transparent;color:var(--muted);text-decoration:underline;padding:8px 6px}

.mkt-empty{background:var(--card);border:1px dashed var(--line);border-radius:15px;
  padding:44px 26px;text-align:center}
.mkt-empty h3{font-size:19px;margin-bottom:8px}
.mkt-empty p{color:var(--muted);font-size:15px;max-width:44ch;margin:0 auto 18px}

.mkt-cats{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.mkt-cats h3{font-size:15px;margin-bottom:4px}
.mkt-cats p{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.mkt-catlinks{display:flex;flex-wrap:wrap;gap:8px}
.mkt-catlinks a{font-size:13.5px;padding:9px 13px;border-radius:9px;background:var(--card);
  border:1px solid var(--line);text-decoration:none;color:var(--muted);min-height:40px;
  display:inline-flex;align-items:center}
.mkt-catlinks a:hover{border-color:var(--jade);color:var(--jade)}

.mkt-bar,.mkt-sheet-head,.mkt-sheet-foot{display:none}

/* Below the two-column breakpoint the rail becomes a sheet from the bottom,
   because a 258px sidebar on a phone leaves a 100px page. */
@media(max-width:939px){
  .mkt-bar{display:flex;gap:10px;position:sticky;top:0;z-index:30;padding:12px 0;
    background:var(--paper);border-bottom:1px solid var(--line);margin-bottom:16px}
  .mkt-bar .btn,.mkt-bar .mkt-sortbar{flex:1}
  .mkt-bar .mkt-sort{width:100%}
  .mkt-badge{background:var(--marigold);color:var(--ink);font-family:var(--mono);
    font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;margin-left:7px}
  .mkt-head .mkt-sortwide{display:none}

  .mkt-filters{position:fixed;inset:auto 0 0 0;z-index:60;border-radius:18px 18px 0 0;
    max-height:86vh;overflow-y:auto;transform:translateY(101%);
    transition:transform .24s ease;box-shadow:0 -12px 40px -18px rgba(19,36,29,.5);
    padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .mkt-filters.open{transform:none}
  .mkt-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:sticky;top:0;z-index:2;background:var(--card);padding:16px 0 10px;
    border-bottom:1px solid var(--line);margin-bottom:4px}
  .mkt-sheet-head h3{font-size:18px}
  .mkt-close{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
    background:var(--paper);cursor:pointer;display:grid;place-items:center}
  .mkt-sheet-foot{display:flex;gap:9px;position:sticky;bottom:0;z-index:2;background:var(--card);
    padding:12px 0 4px;border-top:1px solid var(--line);margin-top:8px}
  .mkt-sheet-foot .btn{flex:1}
  .mkt-scrim{position:fixed;inset:0;background:rgba(19,36,29,.5);z-index:55;opacity:0;
    pointer-events:none;transition:opacity .24s}
  .mkt-scrim.on{opacity:1;pointer-events:auto}
  body.mkt-open{overflow:hidden}
}

/* ---------------------------- account handle ----------------------------
   Shown to signed-in members only. It used to borrow `.addr`, the
   wallet-address style, 12.5px monospace with break-all, built for a hex
   string. A handle is a name, and the most identifying thing on the page. */
/* The handle is the last band of the hero card, not a slab sitting inside it.
 *
 * It used to be a bordered box with its own radius and margin, dropped in
 * after the fact strip. The strip carries negative margins so it can sit flush
 * at the card's bottom edge, so the box ended up floating below a card that
 * had visually already finished. Flush, with a rule above it, it reads as one
 * more row of the same card.
 *
 * Mono rather than the display face: a handle is data somebody will copy, not
 * a heading, and the display face at 21px made a username the second largest
 * thing on the page. */
/* The last band of the hero card. White like the rest of it, separated by a
   rule rather than a fill: the grey made it read as an input somebody could
   type into, which it is not. */
.handle-box{margin:0 -20px -20px;padding:14px 20px;border-top:1px solid var(--line);
  background:var(--card);border-radius:0 0 15px 15px}
.handle-label{display:block;font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
/* The body face, not mono. A handle is read as a name rather than scanned as a
   code, and mono at this size made an ordinary username look like a hash. It
   still breaks anywhere, because a long link has to. */
.handle{display:block;font-family:var(--body);font-size:17px;font-weight:600;
  letter-spacing:-.01em;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}

/* ------------------------------ rails ------------------------------
   These are <section> elements, and this stylesheet gives every section 66px
   of vertical padding for the homepage's full-width bands. Inside a page the
   rails space themselves. */
.rail{margin-top:34px;padding:0}
.rail-h{font-size:21px;margin:0 0 4px}
.rail-note{color:var(--muted);font-size:14px;margin:0 0 16px;max-width:62ch}
.rail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.rail-card{display:flex;flex-direction:column;gap:7px;padding:15px;border-radius:13px;
  background:var(--card);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s}
.rail-card:hover{border-color:var(--jade);transform:translateY(-2px)}
.rail-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rail-f{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.rail-f small{font-family:var(--body);font-size:12px;font-weight:600;color:var(--muted)}
.rail-meta{font-size:13px;color:var(--muted);line-height:1.4}
.rail-price{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:9px;
  border-top:1px dashed var(--line)}
.rail-price b{font-family:var(--mono);font-size:16px;letter-spacing:-.02em}
.rail-price small{font-size:12px;color:var(--muted)}

.locked{margin-top:20px;border:1px dashed var(--line);border-radius:12px;padding:16px;background:var(--paper)}
.locked-rows{display:grid;gap:9px;margin-bottom:12px}
.locked-rows div{display:flex;justify-content:space-between;gap:14px;font-size:14px}
.locked-rows span{color:var(--muted)}
.locked-rows b{font-family:var(--mono);color:var(--line);letter-spacing:1px;user-select:none}

/* a listing that is no longer for sale */
.gone{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:30px;margin-top:20px}
.gone-badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;background:var(--ink);color:#fff;padding:5px 11px;border-radius:6px;margin-bottom:16px}

/* category hub */
.cat-grid{display:grid;gap:16px}
@media(min-width:640px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
.cat-card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:20px;
  text-decoration:none;color:inherit;display:grid;gap:10px;transition:transform .12s,border-color .12s}
.cat-card:hover{transform:translateY(-2px);border-color:var(--jade)}
.cat-card h2{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--jade)}

/* sold */
.sold-banner{background:var(--ink);color:#fff;border-radius:14px;padding:22px;margin-bottom:20px}
.sold-banner h2{font-family:var(--display);font-size:22px;margin-bottom:6px}
.sold-banner p{color:#B9C9C1;font-size:14.5px}

/* ==================== holds at every width ====================
   A long handle, a wallet address or an over-wide embed will push the whole
   page sideways on a phone, and there is no screen size at which that is
   what anyone wanted. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
.article-body pre, .locked-rows b, .mono { overflow-wrap: anywhere; }
a, button { -webkit-tap-highlight-color: rgba(21,89,61,.15); }

/* ---------- collapsed nav menu ---------- */
.nav-burger, .nav-menu, .nav-scrim { display: none; }
.nav-menu a { text-decoration: none; }

/* ============================ small screens ============================
   The nav used to hide every link below 860px and the auth buttons below
   760px, which left a phone visitor with a logo and nothing to tap. Wrapping
   them onto a second row fixed that but produced six 12px targets crammed
   into a strip. They now live in a sheet that drops from the bar. */
@media (max-width: 759px) {
  .nav-in { height: 58px; gap: 10px; }
  .brand { margin-right: auto; min-height: 44px; align-items: center; }
  .brand b { font-size: 18px; }
  .brand .urdu { display: none; }        /* the Nastaliq line needs room it does not have here */
  .nav a.link { display: none; }
  .nav-auth { display: none; }
  .nav .modechip { display: none; }

  .nav-burger { display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    background: transparent; border: 1.5px solid var(--line); border-radius: 11px;
    color: var(--ink); cursor: pointer; }
  .nav-burger[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 48;
    background: rgba(19,36,29,.45); opacity: 0; pointer-events: none; transition: opacity .22s; }
  .nav-scrim.on { opacity: 1; pointer-events: auto; }

  .nav-menu { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 49;
    background: var(--card); border-bottom: 1px solid var(--line);
    padding: 8px max(22px, env(safe-area-inset-left)) 20px;
    box-shadow: 0 18px 40px -26px rgba(19,36,29,.6);
    max-height: calc(100dvh - 58px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease; }
  .nav-menu.on { transform: none; opacity: 1; pointer-events: auto; }
  /* The bar is normally translucent, which lets the scrim show through it and
     leaves the logo sitting in grey murk while the sheet is open. */
  body.menu-open .nav { background: var(--paper); }
  .nav-menu > a { display: flex; align-items: center; min-height: 52px;
    font-size: 16.5px; font-weight: 600; color: var(--ink);
    border-bottom: 1px solid var(--line); }
  .nav-menu-foot { display: grid; gap: 10px; padding-top: 16px; }
  .nav-menu-foot .btn { width: 100%; text-align: center; }
  .nav-menu-lang { text-align: center; font-size: 13.5px; color: var(--muted);
    min-height: 44px; display: grid; place-items: center; }
  body.menu-open { overflow: hidden; }

  .hero { padding: 30px 0 24px; }
  .hero-grid { gap: 30px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  h1 em { white-space: normal; }        /* a nowrap headline is what overflows first */
  .lede { font-size: 16.5px; margin-top: 16px; }
  .btn { padding: 15px 20px; min-height: 50px; display: inline-flex;
         align-items: center; justify-content: center; }
  .cta-row { gap: 10px; }
  .cta-row .btn { flex: 1 1 auto; text-align: center; }
  .btn:hover { transform: none; }       /* there is no hover here, only a stuck lifted state */
  .badge { margin-bottom: 16px; }

  .receipt { padding: 18px; }
  .amount .n { font-size: 27px; }
  .where { min-height: 0; }
  .rec-foot { gap: 8px; }
  .mini { padding: 11px 14px; min-height: 44px; flex: 1 1 auto; }
  .money-in input { font-size: 22px; padding: 14px 8px; }
  .chip { padding: 9px 13px; min-height: 40px; }
  .split { padding: 20px; }
  .split { padding: 20px; }
  .split .val { font-size: 16px; }
  .split .row.big .val { font-size: 19px; }
}

/* Below 400px the label goes above the amount rather than beside it.
 *
 * Shrinking the type to keep them side by side worked until somebody typed a
 * six figure price, and then the labels wrapped anyway: a layout that holds
 * only for small numbers is not a layout. Stacked, the label is one line and
 * the amount is one line, whatever the price. */
@media (max-width: 400px) {
  .split .row { display: block; padding: 11px 0 }
  .split .lbl { display: block; font-size: 12.5px; margin-bottom: 2px }
  .split .val { display: block; font-size: 18px }
  .split .row.big .val { font-size: 22px }
  .split .row { padding: 11px 0; }

  .tabs { display: flex; width: 100%; }
  .tabs button { flex: 1; padding: 12px 10px; min-height: 46px; }
  /* Padded on both sides. The left was zero, so every question ran flush into
     the border of the card it sits in, which reads as a bug rather than a
     design. */
  /* One rule for both FAQs, so they cannot drift apart the next time either
     one is touched. */
  .qa button,
  .fee-faq summary { font-size: 16px; line-height: 1.35; }
  .qa .ans,
  .fee-faq p { font-size: 15px; }
  .head { margin-bottom: 26px; }

  section { padding: 40px 0; }
  .blog-head { padding-top: 34px; padding-bottom: 22px; }
  .blog-grid { padding: 26px 0 56px; gap: 18px; }
  .post-card img { height: 190px; }
  /* padding-block only, as above. The shorthand here undid the fix on the
     base rule and put a blog post back against both screen edges. */
  .article { padding-top: 28px; padding-bottom: 56px; }
  .article-body { font-size: 16.5px; }
  .article-body h2 { font-size: 23px; margin: 30px 0 10px; }
  .article-body h3 { font-size: 19px; }
  .article-cover { margin: 20px 0; }

  /* A wide table inside a blog post is the one thing that will not reflow. */
  .article-body table { display: block; overflow-x: auto; white-space: nowrap;
                        -webkit-overflow-scrolling: touch; }

  .gone { padding: 22px; }
  .sold-banner { padding: 18px; }
  .cat-card { padding: 18px; }
  .lst { padding: 16px; }

  footer { padding: 34px 0 calc(28px + env(safe-area-inset-bottom)); }
  .fgrid { gap: 18px; }
  /* line-height:2 gave these a 16px hit area, about a fifth of a fingertip. */
  .fgrid a { display: flex; align-items: center; min-height: 44px; }
  input, select, textarea { font-size: 16px; }   /* under 16px iOS zooms on focus */
  input, select { min-height: 48px; }
}

@media (max-width: 380px) {
  h1 { font-size: 26px; }
  .wrap { padding: 0 16px; }
  .nav-menu { padding-left: 16px; padding-right: 16px; }
  .amount .n { font-size: 24px; }
  .money-in input { font-size: 20px; }
  .lst .followers { font-size: 24px; }
}

/* ---- the seller's own listings ---- */
.mylst{border:1px solid var(--line);border-radius:13px;padding:14px}
.mylst-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mylst-name{font-weight:700;font-size:15.5px;color:var(--ink);text-decoration:none;
  display:block;overflow-wrap:anywhere}
.mylst-name:hover{color:var(--jade)}
.mylst-feat{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px dashed var(--line);
  font-size:13.5px;color:var(--muted)}
.mylst-feat.on{color:var(--jade)}
.mylst-feat.on b{color:var(--jade)}
.mylst-feat.pending{color:#8A5A10}

/* A seller browsing should spot their own account without reading handles. */
.mine-tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 8px;border-radius:7px;
  background:var(--ink);color:#fff;white-space:nowrap}
.lst.is-mine{border-color:var(--ink)}

/* ---- signed-in marketplace: header, your status, saved searches ---- */
.mhead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.mhead h1{font-size:27px}
.mhead .sub{color:var(--muted);font-size:14.5px;margin-top:4px}

.you{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:18px 0 22px}
.you a{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 16px;
  text-decoration:none;color:inherit;display:flex;gap:12px;align-items:center}
.you a:hover{border-color:var(--jade)}
.you .ic{width:36px;height:36px;border-radius:10px;background:var(--jade-soft);color:var(--jade);
  display:grid;place-items:center;flex:none}
.you .t{font-weight:600;font-size:14.5px;display:block}
.you .d{font-size:12.5px;color:var(--muted);display:block;line-height:1.35}
.you a.act{border-color:var(--marigold);background:#FEF8EE}
.you a.act .ic{background:#FBEEDA;color:#8A5A10}





.mkt-empty-what{font-family:var(--mono);font-size:13px;color:var(--jade);background:var(--jade-soft);
  display:inline-block;padding:7px 13px;border-radius:9px;margin:0 auto 12px}
.mkt-empty-on{color:var(--jade);font-weight:600;font-size:14.5px}

.mkt-alerts{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.mkt-alerts h3{font-size:15px;margin-bottom:2px}
.mkt-alerts > p{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.mkt-alert{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:11px 14px;margin-bottom:8px;font-size:14px}
@media(max-width:620px){
  .mhead{gap:12px}
  .mhead .btn{width:100%}
  .you{grid-template-columns:1fr}
}

/* ===================== phone pass =====================
   Found by walking every page at 360 and 390. */
@media(max-width:420px){
  /* The receipt's own padding plus the page gutter pushed the deal page four
     pixels wider than a 360px screen. Nothing else on the site is that tight,
     so the fix belongs here rather than in the shared padding. */
  .receipt{padding:14px 12px}
  .shell-inner{padding-left:12px;padding-right:12px}
  .addr{font-size:12.5px;padding:11px}
  .qr img{max-width:100%}
}

@media(max-width:939px){
  /* Anything a thumb has to hit gets 40px. These sat at 36, which is the size
     of a fingertip minus the part that actually lands where you aimed. */
  .band,.mkt-chip,.opt,.speedopt{min-height:42px}
  .range input,.mkt-sort,
  .chip{min-height:40px;display:inline-flex;align-items:center}
  .mylst-name{display:inline-flex;align-items:center;min-height:40px}
  .crumbs a{display:inline-flex;align-items:center;min-height:40px}
  .fgrid a,.catlinks a,.mkt-catlinks a{min-height:44px}
}

/* ---- seller screenshots ---- */
.shot-row{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px}
.shot-row input[type=file]{font-size:13.5px;padding:9px;border:1.5px dashed var(--line);
  border-radius:10px;background:var(--paper);width:100%}
.shots{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.shots h3{font-size:16px;margin-bottom:12px}
.shot{margin:0 0 14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font-size:13.5px;color:var(--muted);padding:10px 13px;border-top:1px solid var(--line)}
@media(min-width:620px){
  .shot-row{grid-template-columns:1fr 1fr;align-items:center}
  .shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
  .shots h3,.shots .hint{grid-column:1/-1}
  .shot{margin:0}
}

/* ---- ratings and seller badges ---- */
.stars{display:inline-flex;gap:2px;vertical-align:middle}
.stars svg{width:14px;height:14px}
.stars .f,.stars-lg .f{fill:var(--marigold)}
.stars .e,.stars-lg .e{fill:#DFE6E0}
.stars-lg{display:inline-flex;gap:3px}
.stars-lg svg{width:26px;height:26px}
.srating{display:inline-flex;align-items:center;gap:6px;font-size:13.5px}
.srating b{font-family:var(--mono);font-size:14.5px}

.sbadge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:999px;white-space:nowrap;vertical-align:middle}
.sb-ver{background:var(--jade-soft);color:var(--jade)}
/* Marigold, not jade.
 *
 * Pro sat in the same green family as Verified, so the two read as variations
 * of one badge rather than a step up. Pro is the harder of the two to get:
 * verification is paperwork, Pro is ten completed sales and a rating held
 * above 4.6. Marigold is already the site's colour for something earned, and
 * it separates the two at a glance without adding a third hue. */
.sb-pro{background:linear-gradient(135deg,#E9A62B,#C87F0B);color:#3A2704;
  box-shadow:0 2px 8px -3px rgba(138,90,16,.55)}
.sbadge svg{width:11px;height:11px;flex:none}

.seller-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;
  color:var(--muted);padding-top:9px;border-top:1px dashed var(--line);margin-top:2px}

.spanel{border:1px solid var(--line);border-radius:15px;padding:18px;background:var(--card);margin-top:22px}
.spanel .shead{display:flex;align-items:center;gap:13px}
.spanel .avatar{width:46px;height:46px;border-radius:14px;background:var(--jade);color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:19px;flex:none}
.spanel .sname{font-weight:700;font-size:16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sstats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:15px;
  border-top:1px solid var(--line);padding-top:13px}
.sstats b{display:block;font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:-.02em}
.sstats span{font-size:12px;color:var(--muted)}
.measured{margin-top:13px;background:var(--jade-soft);border-radius:11px;padding:11px 13px;
  font-size:13px;color:#14503A}
.srev{border-top:1px solid var(--line);padding-top:12px;margin-top:13px}
.srev-row{padding:10px 0;border-bottom:1px dashed var(--line)}
.srev-row:last-of-type{border-bottom:0}
.srev-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.srev-tags span{font-size:11.5px;background:var(--paper);color:var(--muted);padding:3px 8px;border-radius:999px}

.ratebox{margin-top:16px}
.rate-row{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin-top:14px}
.rate-star{background:none;border:0;cursor:pointer;padding:3px;line-height:0;min-height:44px}
.rate-star svg{width:34px;height:34px;fill:#DFE6E0;transition:.1s}
.rate-star.on svg{fill:var(--marigold)}
.rate-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.choice{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:var(--card);
  border-radius:999px;padding:9px 14px;min-height:44px;font-size:14px;cursor:pointer;color:var(--muted)}
.choice:has(input:checked){border-color:var(--jade);background:var(--jade-soft);color:var(--jade);font-weight:600}
.choice input{width:16px;height:16px;accent-color:var(--jade);margin:0}

/* ---- seller avatar: the ring is Pro ----
   The corner tick has gone. Verification is stated once, on the name, and a
   second tick three centimetres away was the same claim twice. */
.av{position:relative;width:46px;height:46px;flex:none}
.av .disc{width:100%;height:100%;border-radius:14px;background:var(--jade);color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:19px}
.av.pro .disc{box-shadow:0 0 0 2.5px var(--card),0 0 0 5px var(--marigold)}

.av.lg{width:74px;height:74px}
.av.lg .disc{border-radius:22px;font-size:29px}


.locked{background:var(--paper);border:1px dashed var(--line);border-radius:12px;
  padding:14px;text-align:center;margin-top:12px}
.blur{filter:blur(5px);user-select:none;margin-bottom:8px}

/* ---- the seller's own record, on their profile ---- */
.myrec .who{display:flex;gap:15px;align-items:center}
.myrec .who h3{font-size:20px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.prow{padding:10px 0;border-top:1px dashed var(--line);font-size:14px}
.prow:first-of-type{border-top:0}
.prog{height:7px;border-radius:999px;background:var(--paper);overflow:hidden;margin-top:6px}
.prog i{display:block;height:100%;background:var(--marigold)}

/* ---- the description, and what a visitor cannot see yet ---- */
.desc{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.desc h3{font-size:15px;margin-bottom:8px}
.desc p{color:var(--muted);font-size:15px;white-space:pre-line;overflow-wrap:anywhere}
.counter{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;margin-top:5px}
.counter.ok{color:var(--jade)}

/* Blurred, not replaced. A visitor can see something real is behind it. */
.handle.blurred{filter:blur(7px);user-select:none;pointer-events:none;display:block}
.handle-gate{margin-top:11px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shot.blurred img{filter:blur(9px);pointer-events:none}
.shot.blurred{position:relative}

/* The disc holds either an SVG or an uploaded image; both fill it. */
.av .disc svg,.av .disc img{width:100%;height:100%;display:block;object-fit:cover}
.av .disc{overflow:hidden;padding:0}

.desc-card{margin-top:16px}
.desc-card h3{font-size:16px;margin-bottom:9px}
.desc-card p{color:var(--muted);font-size:15px;white-space:pre-line;overflow-wrap:anywhere}

.spanel{margin-top:0}


/* ---- the one-row filter bar, shared with the signed-in marketplace ----
 *
 * Copied from app.css rather than left there, because a visitor and a member
 * are looking at the same marketplace and a sidebar for one and a bar for the
 * other is two designs to keep in step. */
/* ---- filters laid flat, for signed-in members ---- */
.mkt-flat{grid-template-columns:1fr}
.mkt-flat .mkt-filters{position:static;max-height:none;overflow:visible;
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 22px;padding:14px 18px}
/* The options are direct children of the group, not wrapped in anything, so
   the group itself has to be the flex container. */
.mkt-flat .fgroup{border-bottom:0;padding:8px 0;min-width:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mkt-flat .fgroup > h3{flex:1 1 100%;margin-bottom:2px}

/* Eight platforms stacked vertically is a column; laid flat they wrap as chips. */
.mkt-flat .fgroup > div,
.mkt-flat .bands{display:flex;flex-wrap:wrap;gap:6px;margin-top:0}
.mkt-flat .opt{border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  min-height:36px;gap:7px;background:var(--card)}
.mkt-flat .opt:hover{border-color:var(--jade)}
.mkt-flat .opt .box{width:15px;height:15px;border-radius:4px}
.mkt-flat .opt .box.on::after{left:4.3px;top:1.4px;width:3px;height:7px;border-width:0 2px 2px 0}
.mkt-flat .opt .count{margin-left:2px;font-size:11px}

.mkt-flat .speedopt{border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  min-height:36px;grid-template-columns:auto auto;gap:0 7px;align-items:center;background:var(--card)}
.mkt-flat .speedopt:hover{border-color:var(--jade)}
.mkt-flat .speedopt b{font-size:13.5px;font-weight:600}
.mkt-flat .speedopt small{display:none}   /* the blurb needs a column it no longer has */
.mkt-flat .speedopt .box{grid-row:auto;width:15px;height:15px;border-radius:4px}
.mkt-flat .speedopt .box.on::after{left:4.3px;top:1.4px;width:3px;height:7px;border-width:0 2px 2px 0}

.mkt-flat .range{gap:6px}
.mkt-flat .range input{width:92px;padding:7px 9px;min-height:36px;font-size:13px}
.mkt-flat .band{padding:6px 11px;min-height:36px;font-size:12px}
.mkt-flat .mkt-sheet-head,.mkt-flat .mkt-sheet-foot{display:none}

@media(max-width:939px){
  /* On a phone the sheet is already the right answer, so the flat layout has
     to get out of its way completely. `position:static` above was winning over
     the drawer's `position:fixed`, which left the whole filter panel sitting
     open in the page above the listings: every option always visible, and the
     first account pushed most of a screen down. */
  .mkt-flat .mkt-filters{display:block;padding:4px 18px 18px;
    position:fixed;inset:auto 0 0 0;z-index:60;border-radius:18px 18px 0 0;
    max-height:86vh;overflow-y:auto;transform:translateY(101%);
    background:var(--card);border:1px solid var(--line);
    padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .mkt-flat .mkt-filters.open{transform:none}
  .mkt-flat .fgroup{border-bottom:1px solid var(--line);padding:16px 0}
  .mkt-flat .opt,.mkt-flat .speedopt{border:0;border-radius:0;background:none;padding:7px 0}
  .mkt-flat .speedopt small{display:block;grid-column:2}
  .mkt-flat .speedopt{grid-template-columns:auto 1fr}
  .mkt-flat .range input{width:100%}
  .mkt-flat .mkt-sheet-head,.mkt-flat .mkt-sheet-foot{display:flex}
}

/* Platform and location carry eight or more options each, so they take a full
   row and let their chips flow. The short groups share the row above. */
.mkt-flat .fgroup-wide{flex:1 1 100%}
.mkt-flat .fgroup-wide > div{gap:6px}

/* ---- filters folded into menus, for signed-in members ----
   Only inside .mkt-flat, so the public sidebar and the phone sheet are
   untouched. Open, a menu is the same list of options it always was; closed,
   the listings start about 300px higher. app.js wraps each group's options in
   a .menu-wrap so there is something to position. */
@media(min-width:940px){
  .mkt-flat .mkt-filters{background:none;border:0;padding:0;gap:8px;align-items:center}
  .mkt-flat .fgroup[data-menu]{position:relative;padding:0;border:0;gap:0;display:block}
  /* Platform and location took a full row each in the flat bar, because they
     carry eight options. Folded into menus they are just buttons, so that rule
     has to stop applying or it breaks the toolbar onto three lines. */
  .mkt-flat .fgroup-wide[data-menu]{flex:0 0 auto}

  .mkt-flat .fgroup[data-menu] > h3{margin:0;cursor:pointer;
    display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;
    background:var(--card);border:1.5px solid var(--line);border-radius:999px;
    font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:0;
    text-transform:none;color:var(--ink);white-space:nowrap}
  .mkt-flat .fgroup[data-menu] > h3::after{content:"\25BE";font-size:10px;opacity:.5}
  .mkt-flat .fgroup[data-menu] > h3:hover{border-color:var(--jade)}
  .mkt-flat .fgroup[data-menu].set > h3{border-color:var(--jade);background:var(--jade-soft);
    color:var(--jade);font-weight:600}

  /* `.mkt-flat .fgroup > div` from the flat layout outranks a plain
     `.menu-wrap`, which left every menu permanently open. Matching the
     attribute and the child gives this the higher specificity it needs. */
  .mkt-flat .fgroup[data-menu] > .menu-wrap{position:absolute;top:calc(100% + 6px);left:0;min-width:238px;
    background:var(--card);border:1px solid var(--line);border-radius:13px;padding:8px;
    box-shadow:0 18px 40px -22px rgba(19,36,29,.55);
    display:none;flex-direction:column;gap:2px;z-index:31}
  .mkt-flat .fgroup[data-menu].open{z-index:32}
  .mkt-flat .fgroup[data-menu].open > .menu-wrap{display:flex}
  .mkt-flat .menu-wrap .opt{border:0;border-radius:9px;background:none;padding:8px 9px;min-height:40px}
  .mkt-flat .menu-wrap .opt:hover{background:var(--paper)}
  .mkt-flat .menu-wrap .speedopt{border:0;border-radius:9px;background:none;padding:8px 9px;
    grid-template-columns:auto 1fr;min-height:44px}
  .mkt-flat .menu-wrap .speedopt:hover{background:var(--paper)}
  .mkt-flat .menu-wrap .speedopt small{display:block;grid-column:2}
  .mkt-flat .menu-wrap .range{padding:4px;gap:7px}
  .mkt-flat .menu-wrap .range input{width:100%}
  .mkt-flat .menu-wrap .bands{padding:6px 4px 2px;margin-top:0}
  /* a menu near the right edge should open inwards */
  .mkt-flat .fgroup[data-menu]:nth-last-child(-n+2) > .menu-wrap{left:auto;right:0}
}
@media(min-width:940px){
  .js .mkt-flat .fgroup[data-menu] > *:not(h3){display:none}
  .js .mkt-flat .fgroup[data-menu] > .menu-wrap{display:none}
  .js .mkt-flat .fgroup[data-menu].open > .menu-wrap{display:flex}
  /* The heading looks like a button before the script touches it. */
  .js .mkt-flat .fgroup[data-menu] > h3{cursor:pointer;
    display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;
    background:var(--card);border:1.5px solid var(--line);border-radius:999px;
    font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:0;
    text-transform:none;color:var(--ink);white-space:nowrap;margin:0}
}


/* ---- how it works: the four steps ----
 *
 * Their own markup, not the listing card borrowed. The number sits in the
 * margin on a wide screen and above the heading on a phone, so a step never
 * squeezes its text into half a column beside a digit. */
.steps-big{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:760px){.steps-big{grid-template-columns:1fr 1fr;gap:16px}}
.steps-big li{counter-increment:s;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:20px 20px 20px 66px;position:relative}
.steps-big li::before{content:counter(s);position:absolute;left:20px;top:20px;
  width:34px;height:34px;border-radius:11px;background:var(--jade-soft);color:var(--jade);
  display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:15px}
.steps-big h3{font-size:17px;margin-bottom:6px}
.steps-big p{color:var(--muted);font-size:15px;margin:0}
@media(max-width:520px){
  .steps-big li{padding:18px 16px 18px 16px}
  .steps-big li::before{position:static;margin-bottom:10px}
}

/* ---- fees: the worked example ---- */
.worked .wrow{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:11px 0;border-top:1px dashed var(--line);font-size:15px}
.worked .wrow:first-of-type{border-top:0}
.worked .wrow b{font-family:var(--mono);white-space:nowrap}
.worked .wrow.total{border-top:1.5px solid var(--line);font-weight:600;font-size:16.5px}


/* ---- how it works ---- */
/* ---- hero ---- */
.hiw-hero{padding:52px 0 40px}
.hiw-hero h1{font-size:clamp(32px,5.6vw,54px);max-width:15ch}
.hiw-hero .lede{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:56ch;margin-top:18px}
.hiw-hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

/* ---- the money's journey ---- */
.journey{background:var(--ink);color:#fff;border-radius:22px;padding:30px 24px;margin:10px 0 44px;
 background-image:radial-gradient(circle at 12% 15%,rgba(230,155,25,.15),transparent 48%)}
.journey h2{color:#fff;font-size:clamp(21px,2.6vw,27px);margin-bottom:6px}
.journey .sub{color:#A8BDB2;font-size:15px;max-width:52ch}
.track{display:grid;gap:0;margin-top:28px}
@media(min-width:820px){.track{grid-template-columns:repeat(4,1fr)}}
.stop{position:relative;padding:0 0 26px 40px}
@media(min-width:820px){.stop{padding:44px 16px 0 0}}
.stop .dot{position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;
 background:var(--marigold);border:4px solid var(--ink);z-index:2}
@media(min-width:820px){.stop .dot{left:0;top:0}}
.stop::before{content:'';position:absolute;left:10px;top:14px;bottom:-6px;width:2px;background:rgba(255,255,255,.18)}
@media(min-width:820px){.stop::before{left:22px;top:10px;bottom:auto;right:0;width:auto;height:2px}
  .stop:last-child::before{display:none}}
.stop h3{color:#fff;font-size:16.5px;margin-bottom:5px}
.stop p{color:#A8BDB2;font-size:14.5px}
.stop .who{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
 color:var(--marigold);display:block;margin-bottom:6px}

/* ---- plain sections ---- */
.hiw-sec{padding:0 0 46px}
.hiw-sec > h2{font-size:clamp(23px,3vw,31px);margin-bottom:10px}
.hiw-sec > .intro{color:var(--muted);max-width:60ch;margin-bottom:22px}

.hiw-two{display:grid;gap:16px}
@media(min-width:760px){.hiw-two{grid-template-columns:1fr 1fr}}
.hiw-two .card h3{font-size:17.5px;margin-bottom:8px}
.hiw-two .card p{color:var(--muted);font-size:15px}

.guard{display:grid;gap:14px}
.guard li{list-style:none;background:var(--card);border:1px solid var(--line);border-radius:16px;
 padding:20px 20px 20px 62px;position:relative}
.guard li b{display:block;font-size:16px;margin-bottom:4px}
.guard li span{color:var(--muted);font-size:15px}
.guard li svg{position:absolute;left:20px;top:20px;width:26px;height:26px;color:var(--jade)}
.guard ul{margin:0;padding:0}

/* ---- the table ---- */
.hiw-tbl{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.hiw-tbl table{width:100%;border-collapse:collapse;font-size:15px}
.hiw-tbl th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
 color:var(--muted);padding:14px 16px;background:var(--paper);border-bottom:1px solid var(--line)}
.hiw-tbl td{padding:14px 16px;border-bottom:1px solid var(--line)}
.hiw-tbl tr:last-child td{border-bottom:0}
.hiw-tbl td.n{font-family:var(--mono);white-space:nowrap}
.hiw-tbl .fast{color:var(--jade)}
@media(max-width:620px){
  .hiw-tbl table,.hiw-tbl tbody,.hiw-tbl tr,.hiw-tbl td{display:block;width:100%}
  .hiw-tbl thead{display:none}
  .hiw-tbl tr{border-bottom:1px solid var(--line);padding:14px 16px}
  .hiw-tbl tr:last-child{border-bottom:0}
  .hiw-tbl td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:14px}
  .hiw-tbl td:first-child{font-weight:600;font-size:16.5px;padding-bottom:8px}
  .hiw-tbl td:not(:first-child)::before{content:attr(data-l);color:var(--muted);font-size:14px}

  /* The platform name is a link to that category, and at 26px it is a link a
     thumb misses. It is also the only tappable thing in the row, so it gets
     the whole width of it. */
  .hiw-tbl td:first-child a{display:block;min-height:44px;line-height:44px}
}

.cta-end{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px 24px;
 display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.cta-end .t{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.cta-end .d{color:var(--muted);font-size:15px;margin-top:4px}



/* The site header is sticky, so anything the page scrolls under needs a
   stacking context of its own or the header draws over it. The guard cards sat
   above the header in paint order and showed through it. */
.hiw-hero,.journey,.hiw-sec{position:relative;z-index:0}


/* ---- fees ---- */
.fee-hero{padding:52px 0 34px}
.fee-hero h1{font-size:clamp(32px,5.6vw,54px);max-width:16ch}
.fee-hero .lede{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:56ch;margin-top:18px}

/* the number, said once, very large */
.fee-headline{background:var(--ink);color:#fff;border-radius:22px;padding:34px 26px;margin-bottom:44px;
 background-image:radial-gradient(circle at 88% 15%,rgba(230,155,25,.16),transparent 52%);
 display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.fee-headline .pct{font-family:var(--display);font-weight:800;font-size:clamp(56px,11vw,92px);
 letter-spacing:-.05em;line-height:.9;color:var(--marigold)}
.fee-headline .say{flex:1 1 260px}
.fee-headline .say b{display:block;font-family:var(--display);font-size:clamp(19px,2.4vw,25px);
 font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.fee-headline .say span{color:#A8BDB2;font-size:15.5px}

/* the calculator */
.calc{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 24px}
.calc h3{font-size:18px;margin-bottom:4px}
.calc .hint{color:var(--muted);font-size:14px;margin-bottom:18px}
.calc label{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.calc input, .calc input[type=number]{width:100%;font:inherit;font-size:18px;font-family:var(--mono);padding:13px 15px;
 border:1.5px solid var(--line);border-radius:12px;background:var(--paper);min-height:52px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.chip{font-family:var(--mono);font-size:13px;padding:9px 13px;min-height:42px;border-radius:999px;
 border:1.5px solid var(--line);background:var(--card);cursor:pointer}
.chip:hover{border-color:var(--jade)}
.out{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.orow{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:12px 0;
 border-bottom:1px dashed var(--line);font-size:15.5px}
.orow:last-child{border-bottom:0}
.orow .v{font-family:var(--mono);white-space:nowrap;text-align:right}
.orow .v small{display:block;color:var(--muted);font-size:12.5px;font-weight:400}
.orow.fee .v{color:var(--rose)}
.orow.total{border-top:1.5px solid var(--line);border-bottom:0;margin-top:4px;padding-top:15px}
.orow.total .l{font-weight:600;font-size:17px}
.orow.total .v{font-size:20px;font-weight:700;color:var(--jade)}

/* free vs not */
.fee-cols{display:grid;gap:16px}
@media(min-width:760px){.fee-cols{grid-template-columns:1fr 1fr}}
.pane{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.pane h3{font-size:17.5px;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.pane h3 svg{width:20px;height:20px;flex:none}
.pane.free h3 svg{color:var(--jade)}
.pane.paid h3 svg{color:var(--marigold)}
.pane ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.pane li{color:var(--muted);font-size:15px;padding-left:20px;position:relative}
.pane li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;
 background:var(--line)}
.pane.free li::before{background:var(--jade-soft)}
.pane.paid li::before{background:#FBEEDA}

.faq{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;padding:18px 20px;font-weight:600;font-size:16px;
 min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);font-size:20px;color:var(--jade);flex:none}
.faq details[open] summary::after{content:'–'}
.faq p{padding:0 20px 18px;color:var(--muted);font-size:15px}

.cta-end{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px 24px;
 display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.cta-end .t{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.cta-end .d{color:var(--muted);font-size:15px;margin-top:4px}

/* The sticky header must draw over these, not under them. */
.fee-hero,.fee-headline,.fee-sec{position:relative;z-index:0}


/* ---- fees ---- */
.fee-sec{padding:0 0 46px;position:relative;z-index:0}
.fee-sec > h2{font-size:clamp(23px,3vw,31px);margin-bottom:10px}
.fee-sec > .intro{color:var(--muted);max-width:60ch;margin-bottom:22px}
.fee-hero{padding:52px 0 34px}
.fee-hero h1{font-size:clamp(32px,5.6vw,54px);max-width:16ch}
.fee-hero .lede{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:56ch;margin-top:18px}

/* the number, said once, very large */
.fee-headline{background:var(--ink);color:#fff;border-radius:22px;padding:34px 26px;margin-bottom:44px;
 background-image:radial-gradient(circle at 88% 15%,rgba(230,155,25,.16),transparent 52%);
 display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.fee-headline .pct{font-family:var(--display);font-weight:800;font-size:clamp(56px,11vw,92px);
 letter-spacing:-.05em;line-height:.9;color:var(--marigold)}
.fee-headline .say{flex:1 1 260px}
.fee-headline .say b{display:block;font-family:var(--display);font-size:clamp(19px,2.4vw,25px);
 font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.fee-headline .say span{color:#A8BDB2;font-size:15.5px}

/* the calculator */
.fee-calc{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 24px}
.fee-calc h3{font-size:18px;margin-bottom:4px}
.fee-calc .hint{color:var(--muted);font-size:14px;margin-bottom:18px}
.fee-calc label{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.fee-calc input{width:100%;font:inherit;font-size:18px;font-family:var(--mono);padding:13px 15px;
 border:1.5px solid var(--line);border-radius:12px;background:var(--paper);min-height:52px}
.fee-calc .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.fee-calc .chip{font-family:var(--mono);font-size:13px;padding:9px 13px;min-height:42px;border-radius:999px;
 border:1.5px solid var(--line);background:var(--card);cursor:pointer}
.fee-calc .chip:hover{border-color:var(--jade)}
.fee-calc .out{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.fee-calc .orow{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:12px 0;
 border-bottom:1px dashed var(--line);font-size:15.5px}
.fee-calc .orow:last-child{border-bottom:0}
.fee-calc .orow .v{font-family:var(--mono);white-space:nowrap;text-align:right}
.fee-calc .orow .v small{display:block;color:var(--muted);font-size:12.5px;font-weight:400}
.fee-calc .orow.fee .v{color:var(--rose)}
.fee-calc .orow.total{border-top:1.5px solid var(--line);border-bottom:0;margin-top:4px;padding-top:15px}
.fee-calc .orow.total .l{font-weight:600;font-size:17px}
.fee-calc .orow.total .v{font-size:20px;font-weight:700;color:var(--jade)}

/* free vs not */
.fee-cols{display:grid;gap:16px}
@media(min-width:760px){.fee-cols{grid-template-columns:1fr 1fr}}
.fee-cols .pane{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.fee-cols .pane h3{font-size:17.5px;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.fee-cols .pane h3 svg{width:20px;height:20px;flex:none}
.fee-cols .pane.free h3 svg{color:var(--jade)}
.fee-cols .pane.paid h3 svg{color:var(--marigold)}
.fee-cols .pane ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.fee-cols .pane li{color:var(--muted);font-size:15px;padding-left:20px;position:relative}
.fee-cols .pane li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;
 background:var(--line)}
.fee-cols .pane.free li::before{background:var(--jade-soft)}
.fee-cols .pane.paid li::before{background:#FBEEDA}

.fee-faq{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.fee-faq details{border-bottom:1px solid var(--line)}
.fee-faq details:last-child{border-bottom:0}
.fee-faq summary{cursor:pointer;list-style:none;padding:18px 20px;font-weight:600;font-size:16px;
 min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.fee-faq summary::-webkit-details-marker{display:none}
.fee-faq summary::after{content:'+';font-family:var(--mono);font-size:20px;color:var(--jade);flex:none}
.fee-faq details[open] summary::after{content:'–'}
.fee-faq p{padding:0 20px 18px;color:var(--muted);font-size:15px}

.cta-end{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px 24px;
 display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.cta-end .t{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.cta-end .d{color:var(--muted);font-size:15px;margin-top:4px}



/* ---- the marketplace on a phone ----
 *
 * The heading and its blurb ran to 209 pixels, which pushed the first account
 * most of a screen down. Somebody who opened a marketplace wants to see what is
 * in it; the sales copy can be smaller than the goods.
 */
@media (max-width: 620px) {
  /* Marked important because the heading carries an inline margin and the h1
     size comes from a clamp() with higher specificity. Losing that fight costs
     nearly two hundred pixels before a visitor sees a single account. */
  .head{margin-bottom:14px !important}
  .head h1{font-size:26px !important;line-height:1.15}
  .head p,.head .lede{font-size:14.5px !important}
  .head .eyebrow{margin-bottom:6px}

  /* Filter options are tapped one after another, so 38px is where a thumb
     starts catching the wrong one. */
  .mkt-filters .opt,
  .mkt-filters .speedopt,
  .mkt-filters .band{min-height:44px}

  /* Nothing on a listing card below 12.5px. Follower counts and prices are the
     reason the page exists. */
  .lst .meta,.lst .price small,.lst .ver,.lst .mine-tag{font-size:12.5px}
}


/* Anything marked hidden stays hidden.
 *
 * The attribute is implemented as `display:none` at the lowest priority, so a
 * single `display:` in a component rule silently defeats it. That is how the
 * blog editor's image picker came to be open on page load. This is one line
 * against a whole class of that mistake. */
[hidden]{display:none !important}


/* ---- the platform guide ----
 *
 * Long-form copy below the listings. Measure is capped because a 1000px line
 * of body text is unreadable however wide the screen is. */
.cat-guide{max-width:1080px}
.cat-guide h2{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.026em;margin:34px 0 10px}
.cat-guide h3{font-family:var(--display);font-size:18px;font-weight:700;margin:22px 0 7px}
.cat-guide p{margin-bottom:13px;max-width:44em;line-height:1.68}
.cat-guide ul{margin:0 0 14px;padding-left:20px;display:grid;gap:8px;max-width:44em}
.cat-tbl{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--card);margin-bottom:16px;max-width:44em}
.cat-tbl table{width:100%;border-collapse:collapse;font-size:14.5px}
.cat-tbl th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:10px 13px;background:var(--paper);border-bottom:1px solid var(--line)}
.cat-tbl td{padding:10px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.cat-tbl tr:last-child td{border-bottom:0}
@media(max-width:620px){
  .cat-guide h2{font-size:22px;margin-top:26px}
  .cat-guide h3{font-size:17px}
  .cat-tbl th,.cat-tbl td{padding:9px 10px;font-size:13.5px}
}

.cat-warn{background:#FDF3E4;border:1px solid #F0DCBB;border-radius:13px;padding:18px 20px;
  margin-bottom:16px;max-width:44em}
.cat-warn b{display:block;margin-bottom:5px;font-family:var(--display);font-size:16.5px}
.cat-warn p{margin:0;color:#6B4A12;font-size:15px}

/* The seller avatar on a listing card. Small enough not to compete with the
   follower count, which is what people are actually scanning for. */
.av-card{width:26px;height:26px;border-radius:8px;overflow:hidden;flex:none;display:block}
.av-card svg,.av-card img{display:block;width:100%;height:100%;object-fit:cover}

/* The seller, in two fixed rows. Neither wraps: the first truncates a long
   name, the second is short enough never to need to. */
.seller-who{flex-wrap:nowrap;min-width:0}
.seller-record{border-top:0;padding-top:4px;margin-top:2px;flex-wrap:nowrap}
.snm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* A field the seller left empty. Dimmed rather than hidden: a blank line reads
   as something that failed to load, while a stated gap reads as a seller who
   did not fill it in, which is the truth and mildly useful. Lighter than the
   real value, so a complete card still looks better than an incomplete one. */
.unset{opacity:.55;font-style:normal}
/* Age holds its own line. Mono, because it is a fact rather than a phrase, and
   min-height so a card without one is exactly as tall as a card with one. */
.agerow{font-family:var(--mono);font-size:10.5px;color:var(--muted);
  margin-top:6px;min-height:17px;letter-spacing:.02em}
.meta{min-height:19px}


/* ---- the listing card, in three bands ----
 *
 * What the account is, what it costs, who is selling it. Seven rows of similar
 * weight meant a buyer read every line; this lets the eye land on the size and
 * the price, which are the two things that decide anything.
 */
.lst{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:0;
  overflow:hidden;display:block;text-decoration:none;color:inherit;
  transition:border-color .15s}
/* Border only. Twenty cards that lift on hover is a grid that feels nervous. */
/* The original: a small lift and the jade line. The ink version came in with
   the three band card rebuild and was never what this site did. */
a.card.lst:hover{transform:translateY(-2px);border-color:var(--jade)}

.lst .n-head{padding:13px 15px 0;display:flex;justify-content:space-between;
  align-items:flex-start;gap:9px}
.lst .n-plat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.lst .n-dot{width:7px;height:7px;border-radius:2px;flex:none}
.lst .n-speed{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;padding-top:3px;text-align:right}

.lst .n-body{padding:9px 15px 13px}
.lst .n-num{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.lst .n-num b{font-family:var(--display);font-size:27px;font-weight:800;letter-spacing:-.04em;line-height:1}
.lst .n-num span{font-size:12.5px;color:var(--muted);font-weight:600}
/* Two fixed rows: category and city on the first, age on the second. Left to
   wrap freely the chips took two rows or three depending on how long the words
   were, so a grid of cards came out at different heights. */
/* Equal columns, so the second chip starts at the same point on every card.
   With `1fr auto` the city chip landed wherever the category happened to end,
   which was a different place on each card: scanning a row of them, nothing
   lined up. A long category now truncates instead of pushing its neighbour. */
.lst .n-facts{display:grid;grid-template-columns:1fr 1fr;gap:5px 6px;margin-top:9px;
  align-items:start}
/* Jade on pale jade, the pairing the platform chip wore before the brand
   colours took that over, and the same pair the Verified badge uses.
   Grey text on the page's own background made these read as disabled controls
   rather than as facts. Semibold is enough weight to say "this is content"
   without competing with the follower count above. */
.lst .fchip{font-family:var(--body);font-size:11.5px;font-weight:600;
  color:var(--jade);background:var(--jade-soft);border-radius:7px;
  padding:4px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  /* Fills its column rather than hugging its text, so the chips form two even
     shapes on every card instead of a ragged set of different widths. */
  justify-self:stretch;text-align:center}
/* Both chips share one row now, so the last one no longer spans. The rule
   stayed behind when the city chip came off and would have stretched the age
   chip across the full width on its own line. */
/* A field the seller left empty. Dimmed rather than absent: a gap reads as
   something that failed to load, a stated one reads as a seller who did not
   fill it in. */
/* A missing field keeps the old grey. In jade it would dress an absence up as
   a fact, and the colour is now what separates something the seller told you
   from something they did not. */
.lst .fchip.un{background:var(--paper);color:var(--muted);font-weight:400;opacity:.65}

/* White, with a rule above it. The edge does the separating rather than a
   tint, so the card stays one flat surface. */
.lst .n-price{padding:12px 15px;background:var(--card);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.lst .n-price .u{font-family:var(--mono);font-weight:700;font-size:16.5px;white-space:nowrap}
.lst .n-price .r{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}

.lst .n-seller{padding:10px 15px;display:flex;gap:8px;align-items:center;
  border-top:1px solid var(--line);min-width:0}
.lst .n-who{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.lst .n-nm{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lst .n-rec{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.lst .n-rec .stars{display:inline-flex;gap:1px;flex:none}
.lst .n-rec .stars svg{width:9px;height:9px}
.lst .mine-tag{white-space:nowrap}


/* ---- related listings ----
 * The same three bands as a marketplace card, so one account does not look
 * like two different things depending on which page it appears on. */
.rail-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  text-decoration:none;color:inherit;display:block;padding:0;transition:border-color .15s}
.rail-card:hover{border-color:var(--ink)}
.rail-card .rc-h{padding:11px 13px 0;display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.rail-card .rc-p{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.rail-card .n-dot{width:7px;height:7px;border-radius:2px;flex:none}
.rail-card .n-speed{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;padding-top:3px;text-align:right}
.rail-card .rc-b{padding:7px 13px 11px;display:flex;align-items:baseline;gap:6px}
.rail-card .rc-b b{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.03em}
.rail-card .rc-b span{font-size:11.5px;color:var(--muted);font-weight:600}
.rail-card .rc-pr{padding:10px 13px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:baseline;gap:9px}
.rail-card .rc-pr .u{font-family:var(--mono);font-weight:700;font-size:14px;white-space:nowrap}
.rail-card .rc-pr .r{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap}


/* ---- listing page ---- */
/* Full bleed, but only rounded at the bottom when it is actually last. The
   handle band follows it on a listing with a handle, and two elements both
   claiming the card's bottom corner is how the slab appeared. */
.lp-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);
  margin:16px -20px 0;overflow:hidden}
.lp-facts:last-child{margin-bottom:-20px;border-radius:0 0 15px 15px}
.lp-fact{padding:13px 16px;border-right:1px solid var(--line)}
.lp-fact:last-child{border-right:0}
.lp-fact .k{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:3px}
.lp-fact .v{font-size:14px;font-weight:600}
.lp-fact .v.un{opacity:.5;font-weight:400}
@media(max-width:620px){
  /* Three columns at 390px would be three cramped cells, so they stack and
     each keeps its label. */
  .lp-facts{grid-template-columns:1fr}
  .lp-fact{border-right:0;border-bottom:1px solid var(--line)}
  .lp-fact:last-child{border-bottom:0}
}
/* The buy panel follows the reader. The page runs past 1900px and the button
   used to be reachable only at the top, so somebody convinced by the handover
   steps had to scroll back up to act on it. */
@media(min-width:900px){
  .split > .stack:last-child{position:sticky;top:16px}
}

.buy-rows{border-top:1px solid var(--line);margin:16px -20px -20px;padding:12px 20px 14px}
.brow{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0}
.brow span:first-child{color:var(--muted)}
.brow span:last-child{font-family:var(--mono);font-weight:600;white-space:nowrap}


/* ---- listing page hero ---- */
/* Padded normally. The bands inside pull themselves out to the card edges with
   negative margins, so zeroing the padding here left them a margin with
   nothing to cancel and they overshot the card. */
.lp-hero{overflow:hidden}
.lp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.lp-plat{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.lp-plat .n-dot{width:8px;height:8px;border-radius:2px;flex:none}
.lp-speed{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;padding-top:4px;text-align:right}
/* The headline of the page. It was 30px and sharing weight with the pill. */
.lp-h1{font-family:var(--display);font-size:clamp(34px,5vw,46px);font-weight:800;
  letter-spacing:-.045em;line-height:1;margin:0}
.lp-h1 span{font-size:.33em;font-weight:600;color:var(--muted);letter-spacing:-.01em;margin-left:8px}
.lp-listed{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:9px}


/* ---- a deal in the list ---- */
.dealcard{display:block;text-decoration:none;color:inherit;padding:16px;
  border-radius:15px;transition:border-color .15s}
.dealcard:hover{border-color:var(--ink)}
.dealcard .between{margin-bottom:9px;gap:10px}
.dealcard .price{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);
  font-family:var(--mono);font-weight:700;font-size:16px}
.dealcard .deal-id{font-family:var(--mono);font-size:11px;color:var(--muted);
  margin-top:9px;padding-top:8px;border-top:1px dashed var(--line);word-break:break-all}


/* On a phone the columns stack, and moving the handover cards into the left
   column pushed the price and the buy button below them. Somebody on a small
   screen should reach the price immediately, so the buy column comes second
   there and the rest of the detail follows it. */
@media (max-width: 899px) {
  /* Natural order: the account, then what the seller says, then the price and
     the seller. I had the buy column jump to the top on the reasoning that a
     phone user wants the price immediately, but they arrived from a card that
     already showed it. What they came here for is the detail, and asking for
     money before showing it is the wrong way round. */
  .split{display:flex;flex-direction:column}
}

/* A second heading inside the description card needs air above it, or the two
   blocks of the seller's writing run together as one. */
/* Only divides when there is something above it: a listing with notes but no
   description shows one heading and needs no rule. */
.desc-card h3.desc-more:not(:first-child){margin-top:20px;padding-top:16px;
  border-top:1px dashed var(--line);margin-bottom:9px}


/* ---- the platform, in its own colour ----
 *
 * Two cues at two distances: a full-strength stripe you see scanning a grid,
 * and a pale chip you read when you stop. Pale rather than solid, because a
 * screen of eight saturated blocks would be louder than the follower counts,
 * which are the thing being compared. */
.pchip{display:inline-block;font-size:12.5px;font-weight:700;padding:5px 11px;
  border-radius:8px;white-space:nowrap;letter-spacing:-.005em;line-height:1.25}
.pchip-lg{font-size:14px;padding:6px 13px;border-radius:9px}

/* The stripe sits flush at the top, so the card clips it to its own corners. */
.lst{overflow:hidden}
.lst .n-head{padding-top:12px}
.rail-card{overflow:hidden}
.rail-card .rc-h{padding-top:11px}


/* ---- the mobile buy bar ----
 *
 * Phones only. Desktop already keeps a sticky panel in the right column, and a
 * bottom bar on a wide screen is a phone pattern out of place. */

/* Legendary: deep navy and old gold.
   Pro is already the loudest thing on a card, so a brighter badge above it
   would make every Pro seller look diminished. Darker reads as older rather
   than shinier, which is what two hundred clean handovers actually are. */
.sb-leg{background:linear-gradient(135deg,#1B3B6F,#0C1E3D);color:#EAD9A8;
  box-shadow:0 0 0 1px rgba(234,217,168,.35) inset}


/* ---- a seller's own page ---- */
.sp{padding-top:26px;padding-bottom:40px}
.sp-head{padding:0;overflow:hidden}
.sp-top{padding:20px;display:flex;gap:15px;align-items:flex-start;flex-wrap:wrap}
.sp-av{width:62px;height:62px;border-radius:16px;flex:none;overflow:hidden;display:block}
.sp-av svg,.sp-av img{display:block;width:100%;height:100%;object-fit:cover}
.sp-who{flex:1;min-width:0}
.sp-who h1{font-family:var(--display);font-size:clamp(21px,3vw,25px);font-weight:800;
  letter-spacing:-.03em;margin:0 0 3px}
.sp-since{font-size:13px;color:var(--muted)}
.sp-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.sp-stat{padding:14px 18px;border-right:1px solid var(--line)}
.sp-stat:last-child{border-right:0}
.sp-stat .v{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.03em;display:block}
.sp-stat .k{font-size:11.5px;color:var(--muted)}
.sp-measured{margin:0;padding:14px 18px;background:var(--jade-soft);font-size:13.5px;
  color:var(--jade);border-top:1px solid var(--line);line-height:1.55}
.sp-h2{font-family:var(--display);font-size:19px;font-weight:800;margin:24px 0 13px}
@media(max-width:620px){
  .sp-stats{grid-template-columns:1fr}
  .sp-stat{border-right:0;border-bottom:1px solid var(--line)}
  .sp-stat:last-child{border-bottom:0}
}
/* the address field on the profile */
.linkrow{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:11px;overflow:hidden}
.linkrow .pre{background:var(--paper);padding:11px 12px;font-family:var(--mono);font-size:13px;
  color:var(--muted);display:flex;align-items:center;white-space:nowrap}
.linkrow input{flex:1;border:0;padding:11px 12px;font-family:var(--mono);font-size:14px;min-width:0}
.linkrow input:focus{outline:2px solid var(--jade);outline-offset:-2px}
@media(max-width:480px){
  .linkrow{flex-direction:column}
  .linkrow .pre{border-bottom:1px solid var(--line)}
}

/* Fast handover. A cool blue rather than another warm tone, because it sits
   next to a tier badge and should read as a different kind of fact rather than
   a lesser version of the same one. */
.sb-fast{background:#E4F3FB;color:#12607F}

/* The verified tick.
 *
 * Blue and scalloped, the shape people already read as verification. It
 * carries its own label rather than a title attribute, because a title shows
 * nothing on a touch screen and a symbol only the initiated understand is a
 * symbol doing half its job. */
.vt{position:relative;display:inline-block;width:16px;height:16px;vertical-align:-3px;
  margin-left:5px;border:0;padding:0;background:none;cursor:pointer;line-height:0}
.vt svg{width:100%;height:100%;display:block}
.vt.lg{width:22px;height:22px;margin-left:7px}
.vt:focus-visible{outline:2px solid #2BA1F2;outline-offset:3px;border-radius:50%}
/* Same fix as app.css: fixed rather than absolute, so a card with overflow
 * cannot clip it. The public stylesheet had its own copy of this rule, which
 * is why the seller page kept clipping after app.css was fixed. */
.vt-lbl{position:fixed;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-family:var(--body);font-size:12px;font-weight:600;
  line-height:1.45;letter-spacing:0;text-transform:none;padding:7px 11px;border-radius:9px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s;z-index:600}
.vt-lbl.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--ink)}
.vt-lbl::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink)}
.vt:hover .vt-lbl,.vt:focus-visible .vt-lbl,.vt.open .vt-lbl{opacity:1}


/* ---- form fields ----
 *
 * The public stylesheet had no input rule at all, so every form outside the
 * signed-in shell rendered with the browser's own control: a thin grey box,
 * sized to its content, sitting beside a full width button. The forgotten
 * password page is where it showed worst, because the field is the only thing
 * on it.
 *
 * Ported from app.css so a form looks the same whoever is looking at it, and
 * kept in one place so the next public form inherits it. */
input,select,textarea{font-family:var(--body);font-size:16px;width:100%;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--jade)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}
textarea{min-height:90px;resize:vertical}
.field{margin-bottom:15px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.hint{font-size:13px;color:var(--muted);margin-top:5px}

@media (max-width: 620px) {
  /* Under 16px iOS zooms the page on focus, which is jarring and hard to
     undo one handed. */
  input,select,textarea{font-size:16px}
  input,select{min-height:48px}
}

/* passkeys on the profile and the login page */
.pklist{margin:10px 0 4px}
.pkrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;
  border-bottom:1px dashed var(--line);font-size:13.5px}
.pkrow:last-child{border-bottom:0}
.pkrow .muted{font-size:12px;margin-left:6px}
.pk-bad{color:var(--rose)}
.pk-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--muted);font-size:13px}
.pk-or::before,.pk-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* the remember box on the code screen */
.td-remember{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;font-size:13.5px;
  cursor:pointer;line-height:1.5}
.td-remember input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--jade)}
/* trusted devices on the profile */
.tdrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;
  border-bottom:1px dashed var(--line);font-size:13.5px}
.tdrow:last-child{border-bottom:0}
.tdrow .muted{font-size:12px;margin-left:6px}

/* A deal that ended without a handover, and one nobody can move right now. */
.d-off{background:var(--paper);color:var(--muted)}
.d-cold{background:#EAF2F8;color:#2C5C86}

/* Monetisation, stated as a claim rather than a verified fact. */
/* Same alignment as app.css: full card width, no nested-panel look. */
.monbox{border-top:1px solid #CFE6D8;border-bottom:1px solid #CFE6D8;background:#F2FAF5;
  padding:14px 20px;margin:0 -20px}
.mon{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:6px;
  background:#DCF0E4;color:#12603A;font-weight:700}
.mon::before{content:"\2713";font-size:11px}

/* The earning chip on a card. */
.mon-chip{color:#12603A;background:#DCF0E4;font-weight:600}

/* The monetisation figures, inside the box rather than bleeding out of it.
 *
 * These reused .lp-facts, which carries margin:16px -20px 0 so it can span the
 * full width of the listing card. Nested inside a bordered box that negative
 * margin pulled it out through the sides: the green box overlapped the fact
 * strip above it and left a stray divider hanging. Same look, no bleed. */
.mon-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#CFE6D8;
  border:1px solid #CFE6D8;border-radius:9px;overflow:hidden;margin-top:11px}
.mon-fact{background:#F2FAF5;padding:10px 13px}
.mon-fact .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.mon-fact .v{font-family:var(--display);font-size:17px;font-weight:800;letter-spacing:-.02em}
@media(max-width:620px){.mon-facts{grid-template-columns:1fr}}

/* Earning, in the corner the handover speed used to hold. Same size and
   position so the card keeps its shape, jade so it reads as a fact about the
   account rather than a timing note. */
.lst .n-earning,.rail-card .n-earning{font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;color:#12603A;background:#DCF0E4;
  padding:3px 8px;border-radius:5px;margin-left:auto}