/* Hunts landing (docs/landing-prd.md). Extends the app's system - but this page
   is PUBLIC and design.gkmur.com is tailnet-only, so the shared tokens are
   INLINED here (values from gkmur/design-system tokens.css v0.1.2) instead of
   linked. Same cascade discipline: dark default, light via media query,
   explicit data-theme wins both. */

@font-face { font-family:'Switzer'; src:url('/switzer-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Switzer'; src:url('/switzer-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Switzer'; src:url('/switzer-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Boska'; src:url('/boska-500.woff2') format('woff2'); font-weight:500; font-display:block; }
@font-face { font-family:'IBM Plex Mono'; src:url('/plex-mono-500.woff2') format('woff2'); font-weight:500; font-display:swap; }

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  color-scheme: light dark;
  --bg:#161618; --text:#e8e8ed; --muted:#9a9aa0; --line:#2a2a2e; --card:#1d1d20;
  --well:#0e0e10; --accent:#e8e8ed;
  --shadow-sm:0 2px 8px rgba(0,0,0,.2); --shadow:0 8px 24px rgba(0,0,0,.3);
  --radius:12px; --radius-lg:16px; --radius-pill:999px;
  --tracking-tight:-0.04em; --tracking-normal:-0.01em; --tracking-wide:0.05em;
  --mark:#ff3300;   /* the wordmark dot - the one brand colour on the page */
  /* The brand red as TEXT, which is a different job: the like count is 12px, so
     it needs 4.5:1 and --mark is only ever a graphic (3:1). Re-derived when the
     mark went to 032c red - a find-and-replace would have carried the OLD red's
     measurement onto a new hue, which is the whole trap this comment exists for.

     On dark the brand red now passes on its own (4.58:1 on the card, 4.93 on the
     page), so the token IS the mark - it used to be #f4646b, a lifted tint that
     was not the brand red at all, because the old #e3131e only reached 3.51.

     On light it does not: #ff3300 is 3.67:1 on white. So the light value is the
     same hue (12 degrees, full saturation) walked down to 39% lightness, which
     is the darkest step that still clears every light surface - 5.63 on the
     card, 5.26 on the page, 4.65 on the well. The well is in there because a
     token that only works on the one surface it happens to be used on today is
     how a contrast bug ships later. */
  --like:#ff3300;
  /* the app reserves green for a price that fell; same token, same values
     (6.23:1 on the dark pill, 5.47:1 on the light one) */
  --st-ok:#35b364;
  --font:'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* the wordmark is an SVG, so the hero face is free to be its own voice:
     Boska's sharp-contrast serif over the monochrome grid is the editorial
     register the page is going for. */
  --display:'Boska', 'Times New Roman', serif;
  /* the stat numbers, and nothing else. Plex's humanist spurs sit with Boska
     where a geometric mono fought it. */
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease:cubic-bezier(.22,1,.36,1); --t-fast:120ms; --t-med:200ms;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:#f7f7f9; --text:#1c1c1f; --muted:#5f5f66; --line:#e4e4e9; --card:#ffffff;
    --well:#e9e9ee; --accent:#1c1c1f; --st-ok:#0c7a2f; --like:#c72800;
    --shadow-sm:0 2px 8px rgba(0,0,0,.04); --shadow:0 8px 24px rgba(0,0,0,.06);
  }
}
:root[data-theme="light"] {
  --bg:#f7f7f9; --text:#1c1c1f; --muted:#5f5f66; --line:#e4e4e9; --card:#ffffff;
  --well:#e9e9ee; --accent:#1c1c1f; --st-ok:#0c7a2f; --like:#c72800;
  --shadow-sm:0 2px 8px rgba(0,0,0,.04); --shadow:0 8px 24px rgba(0,0,0,.06);
}

/* The page is five tab stops and had no focus indicator on any of them - the
   only :focus rule was a border-colour shift on the email field, about 1.3:1
   against its own resting border, which is not an indicator. :focus-visible so
   a mouse click on the CTA does not draw a ring. */
:focus-visible {
  outline:2px solid var(--text); outline-offset:3px; border-radius:2px;
}

body {
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:15px; line-height:1.6;
  letter-spacing:var(--tracking-normal);
  -webkit-font-smoothing:antialiased;
}

/* ---- masthead: the app's idiom, one hairline under it */
.mast {
  max-width:1200px; margin:0 auto; padding:34px 32px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
/* The compact lockup, same as the app header. A masthead is a fixed-height row
   like any other, and the full mark's tail bought nothing here: at 25px letters
   it was a hairline hanging into the padding below.

   min-height, not padding: the ink is 26px and a tap target needs 44, and the
   drawing used to smuggle that in through the tail. Now that the box is the
   letters, the row has to ask for the 44 out loud - which is the point of the
   lockup, not a cost of it.

   There is one lockup now (2026-08-11). The tailed mark that owned
   bin/og-card.html is retired - it carried a different T, a red plus with scope
   arcs, and two contradictory Ts on one site is worse than either. */
.mark { color:var(--text); display:flex; align-items:center; min-height:44px; }
/* 26 is the cap height plus 3 units of bleed each side - about 25.3 of letter.
   brand/wordmark.svg's viewBox IS the letters' own box apart from that bleed, so
   this number still means what it says: no overhang correction, which is what
   the 44-against-a-253.86-unit-drawing here used to be. The bleed exists because
   the export is flush to its ink and flush ink antialiases to a shaved edge. */
.mark svg { display:block; height:26px; width:auto; }
.mast-cta {
  font-size:13px; font-weight:500; color:var(--muted); text-decoration:none;
  border:1px solid var(--line); border-radius:var(--radius-pill); padding:8px 16px;
  transition:color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.mast-cta:hover { color:var(--text); border-color:var(--muted); }

main { border-top:1px solid var(--line); }

/* ---- hero */
.hero { max-width:1200px; margin:0 auto; padding:96px 32px 56px; }
.hero h1 {
  font-family:var(--display); font-weight:500;
  font-size:clamp(40px, 6.4vw, 78px); line-height:1.02;
  letter-spacing:-0.02em;
  /* 18ch holds the headline to two lines - 14ch broke it into three, which read
     as a paragraph rather than a statement. balance evens the two. */
  max-width:18ch; text-wrap:balance;
}
.hero .sub {
  margin-top:24px; color:var(--muted); font-size:17px;
  /* 62ch, not 52: the copy is one sentence now, and 52 broke it 68 characters
     then 30 - a second line less than half the first. balance, because the h1
     has it and a phone will still wrap this. */
  max-width:62ch; text-wrap:balance;
}
/* the waitlist is the only conversion point on the page, so it gets a real
   heading - dropping the mono eyebrow left it with none */
.waitlist h2 {
  font-family:var(--display); font-weight:500; font-size:clamp(28px, 3.4vw, 38px);
  line-height:1.1; letter-spacing:-0.02em;
}
.cta {
  display:inline-block; margin-top:32px;
  background:var(--text); color:var(--bg); text-decoration:none;
  font-weight:600; font-size:15px; letter-spacing:var(--tracking-normal);
  border-radius:var(--radius-pill); padding:13px 28px;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}
.cta:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.cta:active { transform:none; }

/* ---- the arrival -----------------------------------------------------------
   ONE entrance for the whole first screen, in reading order: headline, sub,
   numbers, button, sources. Not a stagger on the sources row alone - that was
   the rejected version of this idea, because animating one row of an otherwise
   static hero singles it out for no reason and reads as a twitch rather than an
   arrival.

   8px of travel and 420ms on the page's own --ease. The travel is small on
   purpose: a hero that slides a long way makes a fast connection feel slow, and
   the only thing this has to do is say the page composed itself rather than
   snapping into place.

   60ms between steps, so the tail lands at 660ms. The headline's delay is ZERO -
   it is the largest thing on screen and therefore the LCP element, and starting
   it late would push a real metric to buy a flourish.

   Nothing here delays interaction: opacity and transform only, and `both` holds
   the from-state rather than a `visibility` toggle, so the button is clickable
   the whole way in even while it is fading.

   Gated on no-preference and given nothing in return. The reduced-motion block
   below keeps fades where a fade CARRIES meaning - one thing replacing another -
   and a first paint replaces nothing, so the honest reduced version of an
   arrival is simply arriving. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .sub, .hero .stats, .hero .cta, .marks {
    animation: rise 420ms var(--ease) both;
  }
  .hero .sub   { animation-delay: 60ms; }
  .hero .stats { animation-delay: 120ms; }
  .hero .cta   { animation-delay: 180ms; }
  .marks       { animation-delay: 240ms; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
}

/* ---- the marks band: full bleed, centred, its own layer.
   The favicon art is 32x32, so 20 was the ceiling; 18 also leaves the band
   quieter between the CTA above it and the lane below.
   It sits last before the lane now, so it owns the 64 that pays the strip's
   facing padding (64 + the strip's own 8 = the 72 every lane is given). */
/* In the column and on the hero's left edge, not full bleed. The old comment
   here argued that a centred row INSIDE the 1200px column would read as a
   misalignment, so edge-to-edge would read as its own layer. The premise did not
   survive the render: eight short names never reach the edges, so on a wide
   screen it read as a centred cluster floating under a hard-left hero - which is
   the misalignment it was trying to avoid, plus it looked like the "as seen in"
   strip it explicitly is not. Sharing the hero's edge makes it read as what it
   is: the list of sites, attached to the claim above it. */
.marks { max-width:1200px; margin:0 auto; padding:0 32px 64px; }
.src-mk {
  display:flex; flex-wrap:wrap; justify-content:flex-start;
  gap:12px 26px; list-style:none; margin:0; padding:0;
}
/* .72 resting, NOT .5 - measured, not eyeballed. At .5 a dimmed name sat at
   3.24:1 against the page in BOTH themes, under the 4.5 a 15px face needs, so
   the row's default state was a contrast failure and the highlight was the only
   legible moment. .72 clears 4.5 and narrows the range the highlight travels,
   which reads calmer as well as passing. */
.src-mk li {
  display:flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:15px; font-weight:500; color:var(--text);
  opacity:.72; transition:opacity var(--t-med) var(--ease);
}
/* .on is gone from the marketplaces - landing.js says why - but the resting .72
   and its transition stay, because they are what the hover below eases. */
@media (hover: hover) and (pointer: fine) {
  .src-mk li:hover { opacity:1; }
}
.src-mk .fav { width:18px; height:18px; flex:none; }

/* ---- stats: one inline row. Four equal tiles of big-number-over-label gave
   every figure the same weight, so none of them landed, and the numbers were
   sized like the page's headline while saying less than it. Small, mono, one
   word each - a caption on the band above, which is what they are. */
/* Inside the hero, above the button, on the hero's own left edge. It was a
   centred full-width band below the button, and both halves of that were wrong:
   the numbers are the strongest claim the page can make - they prove the thing
   runs - and they were sitting past the point where a reader has already
   decided, on an axis nothing else on the page uses. Above the button they are
   a reason to press it. No max-width or gutter of its own any more; the hero
   supplies both. */
.stats {
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-start;
  gap:10px; margin-top:24px;
}
.stat { display:flex; align-items:baseline; gap:7px; font-size:14px; }
/* ::after on all-but-last, not ::before on all-but-first: a wrapped separator
   lands at the END of line one rather than opening line two with a stray dot. */
.stat:not(:last-child)::after { content:"\00b7"; color:var(--muted); margin-left:10px; }
/* ...and under 480 there is no good end of line one either. The row measures 319
   plus separators and gaps against 326 of usable width on a 390px phone, so it
   wraps 2-up and the trailing dot hangs off the right edge pointing at nothing.
   Below the wrap the dots come out entirely and the column gap does their job:
   a separator exists to say "these are separate", which a 20px gap already says
   without leaving punctuation stranded. Kept in ONE place with the rule it
   overrides, not in the 720px block, because 480 is the measured wrap point of
   THIS row and has nothing to do with the page's layout breakpoint. */
@media (max-width: 479px) {
  .stats { gap:6px 20px; }
  .stat:not(:last-child)::after { content:none; }
}
.stat b {
  font-family:var(--mono); font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:var(--tracking-normal);
}
.stat span { color:var(--muted); }

/* ---- the strip: two full-bleed lanes, one either side of the how-it-works
   Every lane sits in the same 72px of air top and bottom, and the neighbouring
   sections give up their facing padding to pay for it - .stats keeps 64 (+8
   here = 72), .how and .waitlist open on 0. The 8px top is not slack: the cards
   lift 2px on hover inside an overflow:hidden wrap, and 0 clips the lift. */
.strip-wrap {
  overflow:hidden; padding:8px 0 72px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
/* The drift itself is NOT here - landing.js drives each row's transform, one
   row per pointer, because hover slows a lane rather than stopping it and CSS
   cannot ease `animation-duration`: changing it keeps the elapsed time and
   rescales the progress fraction, so the row jumps. */
.strip { display:flex; gap:20px; width:max-content; will-change:transform; }
@media (prefers-reduced-motion: reduce) {
  /* nothing to switch off - the JS never starts - so this only has to hand the
     rows back to the reader as a normal scroller */
  .strip-wrap { overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  /* Fewer and gentler, not none: the waitlist swap keeps its fades, because the
     fade is what says one thing replaced the other. What goes is travel - and
     the drawn tick, which arrives complete. */
  #wl-form.gone, .wl-done { transform:none; }
  .wl-msg { transform:none; }
  .wl-tick path { stroke-dashoffset:0; }
  .wl-done.in .wl-tick path { transition:none; }
}

.pick {
  width:250px; flex:none; cursor:pointer;
  background:var(--card); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.pick:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.pick .ph {
  aspect-ratio:4/5; background:var(--well); position:relative;
}
.pick .ph img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity var(--t-fast) var(--ease);
}
/* the card goes to the waitlist, not the listing - say so before the click
   rather than after it, or a product click that scrolls reads as a trick */
.pick .ph::after {
  content:"join to see the feed";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:500; color:var(--text);
  /* fast, not medium: a decided click can beat a 200ms fade, and then the
     scroll-to-waitlist happens with no explanation on screen */
  opacity:0; transition:opacity var(--t-fast) var(--ease);
}
.pick:hover .ph img { opacity:.18; }
.pick:hover .ph::after { opacity:1; }
.pick .tag {
  position:absolute; top:10px; left:10px;
  font-size:11px; font-weight:600; font-variant-numeric:tabular-nums;
  background:var(--bg); color:var(--text);
  border-radius:var(--radius-pill); padding:4px 10px;
}
.pick .meta { position:relative; padding:12px 14px 14px; }
.pick .brand {
  font-weight:600; font-size:13px; white-space:nowrap; padding-right:24px;
  overflow:hidden; text-overflow:ellipsis;
}
.pick .title {
  color:var(--muted); font-size:12px; line-height:1.4; height:2.8em;
  overflow:hidden; margin-top:2px;
}
.pick .row {
  display:flex; align-items:baseline; gap:10px; margin-top:8px;
  font-size:12px;
}
/* retail idiom: price in the brand sans at weight, tabular figures for the
   alignment mono used to provide - no marketplace sets prices in a mono */
.pick .price { font-weight:600; font-size:13px; font-variant-numeric:tabular-nums; }
.pick .price.cut { color:var(--st-ok); }
.pick .was {
  color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums;
  text-decoration-thickness:1px; margin-left:-4px;
}
/* 12px, not 11 - the only 11 on the page was this, and it was also the only
   text that failed contrast. One size out of the scale, one failure out. */
.pick .eng { font-family:var(--font); margin-left:auto; color:var(--muted); font-size:12px; }
.pick .eng.likes { color:var(--like); }

/* Touch gets a lane it can actually use. The drift, the hover label and the
   tap-to-waitlist were all pointer ideas: a row of cards invites a swipe and
   overflow:hidden ate it, while a tap did something the reader was never told
   about, because the label announcing it is :hover-only and never fires. So on
   a coarse pointer the lane is a plain horizontal scroller and a card is a
   picture. landing.js skips drive() and the click handler to match. */
@media (hover: none) {
  /* No edge fade: on a marquee it hides the seam, but on a lane the reader
     scrolls themselves it fades the card at the edge they are scrolled TO and
     reads as a cut-off. The gutter matches the rest of the mobile page, so the
     lane starts where the copy does instead of flush against the screen. */
  .strip-wrap {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:none; mask-image:none;
  }
  .strip { will-change:auto; padding:0 24px; }
  .pick { cursor:default; }
  .pick .ph::after { content:none; }
}

/* ---- how it works
   No border-top on either of these any more. A hairline with 56px of air on
   both sides reads as a divider between two things rather than the start of
   one, and with a lane above AND below the copy there is nothing left to
   divide - the lanes ARE the section break. The rules that remain are the ones
   that mark a boundary rather than a gap: main, the stats row, the footer. */
.how { max-width:1200px; margin:0 auto; padding:0 32px 64px; }
/* No 01/02/03/04. The counters implied a sequence these four do not have - they
   are parallel properties, not steps you take in order - and the bold title of
   each already anchors it. */
.how ol {
  list-style:none;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:40px 32px;
}
/* 15px, not 14. This block is ~110px of quiet text between two 400px bands of
   photography, and at 14 it read as a caption on the lane above rather than the
   middle beat of the page. It sits one step under the hero sub (17px) and well
   over the card titles (12px), which is the order it should be read in. */
.how li { font-size:15px; line-height:1.55; color:var(--muted); }
.how li b { display:block; color:var(--text); font-weight:600; margin-bottom:8px; }

/* ---- the watching line: closes the how-it-works rather than sitting in its
   own section. Centred against four left-aligned steps on purpose - the steps
   are a list to read down, this is one statement to land on, and the change of
   axis is what marks the difference. One step under .waitlist h2: it closes a
   section, it does not head one. */
.src-line {
  margin-top:52px; text-align:center;
  font-family:var(--display); font-weight:500;
  font-size:clamp(24px, 3vw, 34px); line-height:1.15;
  letter-spacing:-0.02em; color:var(--muted);
}
.src-dz { color:var(--text); }
/* Without JS every name renders, so they need to read as a list rather than run
   together. The cycling state drops the separator with the same rule it drops
   the stacking. */
.src-dz > span + span::before { content:", "; }
/* justify-items:start so each stacked span keeps its OWN width (the default
   stretch sizes every span to the widest name, which is also what made the
   cell measure wrong). landing.js sets the width to the visible name each
   turn, so the centred line re-centres on what is actually readable instead
   of leaving a "Maison Margiela"-sized hole after a short name. */
.src-dz.cycling {
  display:inline-grid; justify-items:start; white-space:nowrap;
  transition:width 260ms var(--ease);
}
.src-dz.cycling > span {
  grid-area:1/1; opacity:0; transform:translateY(4px);
  transition:opacity 140ms var(--ease), transform 140ms var(--ease);
}
.src-dz.cycling > span::before { content:none; }
.src-dz.cycling > span.on { opacity:1; transform:none; transition-duration:260ms; }
/* the turn the sentence builds to: same size, dropped back to the voice of
   "Watching for" so it reads as the sentence closing rather than another brand */
.src-any { color:var(--muted); }


/* ---- waitlist */
.waitlist { max-width:1200px; margin:0 auto; padding:0 32px 88px; }
/* .wl-sub is gone with the copy it styled - index.html says why. The h2 now
   runs straight into the form, and .wl-swap's own 28px top is the gap. */
/* One cell, two children stacked in it. Joining REPLACES the form rather than
   appending a line under a form still offering to do what you just did, and
   because both children sit in the same cell the section never changes height,
   so nothing below it moves during the swap. */
.wl-swap { display:grid; margin-top:28px; max-width:440px; }
.wl-swap > * { grid-area:1/1; }
#wl-form { display:flex; gap:12px; }
#wl-form.gone {
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
/* The confirmation waits out the form's 120ms exit before it starts. A true
   crossfade of two different things reads as mush; a handoff reads as one
   replacing the other. */
.wl-done {
  display:flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(6px);
  transition:opacity var(--t-med) var(--ease) 120ms,
             transform var(--t-med) var(--ease) 120ms;
}
.wl-done[hidden] { display:none; }
.wl-done.in { opacity:1; transform:none; }
.wl-done p { font-size:15px; }
.wl-done strong { font-weight:600; color:var(--text); }
.wl-done span { color:var(--muted); margin-left:6px; }
/* Drawn, not faded in. This is a once-ever action, which is the one tier where
   the delight budget is allowed to be spent. 22 is the path length, rounded up.
   It starts after the text so the eye lands on the words first. */
.wl-tick { width:20px; height:20px; flex:none; overflow:visible; }
.wl-tick path {
  stroke:var(--mark); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:22; stroke-dashoffset:22;
}
.wl-done.in .wl-tick path {
  stroke-dashoffset:0; transition:stroke-dashoffset 260ms var(--ease) 200ms;
}
#wl-email {
  flex:1; min-width:0; font:inherit; color:var(--text);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:12px 20px;
  transition:border-color var(--t-med) var(--ease);
}
#wl-email:focus { border-color:var(--muted); }
#wl-form button {
  font:inherit; font-weight:600; cursor:pointer;
  background:var(--text); color:var(--bg); border:0;
  border-radius:var(--radius-pill); padding:12px 24px;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}
#wl-form button:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
#wl-form button:active { transform:translateY(0); }
/* Pending is a class, not :disabled, and landing.js only adds it after 140ms -
   so a round trip that beats that never flashes a spinner, which is the normal
   case now that the confirmation mail is sent after the response rather than
   inside it. The button holds its width through the swap (the label goes
   invisible rather than away) so the row cannot resize under the cursor. */
#wl-form button { position:relative; }
.wl-lbl { transition:opacity var(--t-fast) var(--ease); }
#wl-form.pending { cursor:default; }
#wl-form.pending .wl-lbl { opacity:0; }
#wl-form.pending button { transform:none; box-shadow:none; }
#wl-form.pending button::after {
  content:""; position:absolute; inset:0; margin:auto;
  width:15px; height:15px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--bg) 35%, transparent);
  border-top-color:var(--bg);
  animation:wl-spin 620ms linear infinite;
}
/* linear, because a spinner is constant motion - any ease reads as a stutter.
   A CSS animation also runs off the main thread, so it keeps turning while the
   page is busy, which is exactly when it is on screen. */
@keyframes wl-spin { to { transform:rotate(1turn); } }
#wl-form button:disabled { opacity:1; cursor:default; }
.wl-msg {
  margin-top:14px; font-size:13px; color:var(--muted); min-height:1.5em;
  opacity:0; transform:translateY(-3px);
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.wl-msg.show { opacity:1; transform:none; }
/* Under the field, not in the footer. "What happens after I type this" is asked
   with the cursor in the input, and a footer answers it where nobody is looking.
   Outside .wl-swap on purpose: that cell stacks the form and the confirmation to
   hold the section's height, and a third child would sit on top of both. */
.wl-note { margin-top:14px; font-size:13px; color:var(--muted); }

footer {
  max-width:1200px; margin:0 auto; padding:24px 32px 40px;
  border-top:1px solid var(--line);
  font-size:12px; color:var(--muted);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
}
footer a { color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
footer a:hover { color:var(--text); }
/* Same separator rule as the stats row, and the same reason for dropping it: a
   wrapped row leaves the last dot pointing at nothing. The footer stacks below
   720 rather than at 480, because it is three items and it runs out of room
   first. */
footer > *:not(:last-child)::after { content:"\00b7"; color:var(--muted); margin-left:12px; }
@media (max-width: 720px) {
  footer { flex-direction:column; gap:8px; }
  footer > *:not(:last-child)::after { content:none; }
}

@media (max-width: 720px) {
  .hero { padding:64px 24px 44px; }
  .mast, .stats, .how, .waitlist, footer { padding-left:24px; padding-right:24px; }
  /* 44px minimum touch target - the desktop pill is 31px tall */
  .mast-cta { padding:13px 18px; }
  .stats { padding-bottom:18px; }
  .marks { padding:0 20px 40px; }
  .src-mk { gap:11px 20px; }
  /* the same rhythm, scaled: 48 around a lane instead of 72 */
  .strip-wrap { padding-bottom:48px; }
  .how { padding-bottom:40px; }
  .how ol { grid-template-columns:1fr; gap:28px; }
  .src-line { margin-top:36px; }
  .pick { width:210px; }
}

/* Marketplace favicons, inlined. Fetched ONCE server-side and bundled rather
   than hotlinked: a public page must not hand every visitor's IP to a
   third-party favicon service on every card render. The art is 32x32, so 20px
   in the sources row is the practical ceiling - above native it goes soft. The
   `.s-*` background rules are deliberately NOT scoped to .pick: the card and the
   sources row draw the same twelve images from one set of bytes. */
.fav {
  background-size:contain; background-repeat:no-repeat; background-position:center;
  border-radius:4px;
}
.pick .fav {
  position:absolute; top:12px; right:14px; width:17px; height:17px; opacity:.85;
}
.fav.s-grailed { background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAfCAYAAACGVs+MAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAeGVYSWZNTQAqAAAACAAEARoABQAAAAEAAAA+ARsABQAAAAEAAABGASgAAwAAAAEAAgAAh2kABAAAAAEAAABOAAAAAAAAANgAAAABAAAA2AAAAAEAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAHwAAAAACe3F3AAAACXBIWXMAACE4AAAhOAFFljFgAAAEc0lEQVRIDcWXN0t2WRDHx5xzznkVwQDGRqxEC7GytLNVCwULP4GNoIWtoF/ATgUFCxUDJkwgZhezmHN69v4OHPeJ+gjuuwPDufeEmTn/Sfe6mEwmPxGZN/gvg/84uf5xjVYK/3cD3K0Mcur1/f1dnp+f5e3tTe13dXUVT09PcXd3F55/Qj8y4Pr6Wo6Pj+Xw8FAODg7k9vZWPj4+xMfHR6KioiQ+Pl4iIyPF399fzWHQd/T9DkMCN93a2pKhoSHFS0tLcn5+Li8vL0q+m5ubREdHS05OjhQXF0tBQYFkZ2dLbGysMsTFxcWxHWSBwesG2yUDatPo6KipqqrKZCgyGZIcMuspKSmm2tpaU0dHh2l8fNx0cXFhMlCyK5vJLxEw1mVyclIaGhpkdXXV5hbcnD24ASI29vb21Mg8yLGWm5srQUFBNueZ+NKA/f19aW1ttVEeGBio/I3fX19f5ezsTG5ubuT+/l4eHh7k6OhI1tfXJSQkRHFwcLBkZWWJh4eHjREODXh6epK2tjaZmZmxOJSamiotLS1SXl4ucXFx8vj4KNvb2zI7Oytzc3OyuLgoGxsbsru7KxERERIeHq4CkzEmJsZCFi8ODVhbW5OBgQGLA97e3tLU1CT19fXi5eWl1rhdaGioemeOdCQVQQGXgBCogA7usE5ThwYMDw/L1dWVhQH4sq6u7lO5XkQpyJCO6enpCh0j+JTfyQQy5EcxoINPK9BjRUWFhIWF6dfPkTTD39rXOjCZ18zN7aWjXQTI752dnU8F+iEvL08/qpFqeHd3pwJQw41yTRQiUDFnp1yAYGv4EUqV04RC/ExRIgAvLy/l9PRUL6uRipiRkaEY18B+fjTff8kuAiyb34R3a/gIKJRubm7K1NSUQoxqaX4Od5WWlqp6EBAQIElJSYiyILudg6Ai180JwScnJ59TGMQckPr6+n7Omz9QqLTvrS+g99kYgFDSKTExUe/5HBcWFtQzexCIkdyqsLBQ3ZQ+kJmZqaKelHWGbFygLS0qKpLBwUELGaRmc3OzKjDso7DgZ5oQzWl+fl6Wl5dV5WR0hmwQ0IdIOWtoV1ZWpK+vT30LAC0BRY5TA6iKBClnKD4EMkh9Rw4NyM/Pl7KyMovzCO3u7paenh5VfnmnwhGIY2NjMjExoTKCYKSUO0M2LtCHgLaxsVHVdvPgoz60t7fL9PS06vmkIwrpB3yksJfGxO01a5n2RocGsLmyslI6OztV/afjaaJL9vb2ig40ICctNeREP4bRqPScPms9OnQBG6lk1dXV0tXVpXq69WFghlGmFRGYOoMwgKqKcbA9+hIBDuCKmpoaSUtLk/7+fhkZGVHtVn8Psoc+z7dBSUmJEDu4gIwBCSqhbka8W5OLYblTPybcADfgY+KAMkwfQCidLiEhQZKTk1VtwCWkJZnCBcgWsgO2NsJpA8wtB1YygE8u6gGuonjZ++IxP2fv+VsX2DtEqYZ/g74Mwt9Q8J0MbYAev9v/6+u4gPz422AwtZ8rxsJ/Rf8A2U9he4uoRMYAAAAASUVORK5CYII="); }
.fav.s-ebay { background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAChklEQVRYCe1WMWtUQRCe3X27L+cpxoiYa2JxNrFQSBMtLFIZVITUdnYWxx1EBElzTdQiBydXSH6AWEoQbMVOq1jFRlEQkuCJ3Jkz8N7em/Xb5JDjyJPLCTZ5C8Pu7MzOfPPt8uYRZeOoMyBGJaBcLp+VUp7z55VSX1ZWVr6NEuvQAEql0hkkvI9kt4UQBeccYd7C/DxJkseNRqN5GCCHAlCpVAoI/sIYM2utfYukr30yzHNhGF6O4/gd1IV6vb7l94cZwTBO3qdarcpWq/VIaz0bRdESM9dQbdSzmXa7fQ+2ZQB7CEB3wIobJvbQDJQWFy8EzOvO8at6/cnCQcHLlcqaIHFNKTlTq9U2DvIZ3JODG/06SvBl7Elg7cVABSYhsQbSAXxf/BPYE/gpXI/WKsRbuPRnH/b+mIPrVOPXmSvnpXNPpRB5UMpRKCdrUzeLq+M3PliWP4iFGA9/0sbcdTplWuRxxFFu4k23MP3+uPukxzrbwOgL/CWI7z6Yb34cTO711DcgXJJ3JK9qKUIGDceimHjXkJ3ITxNZ1CvJyYB04MggCoOQXG6XTstNCsKTRSVk0afvxhThWvIHJf8rAIdHhPOxdQ4Aejz6y+AuBAC8FbOFGvslTN6LkZUTosRr2MeIEwclZey7pBj/x3YGIGMgYyBjIJUBdBix92n7x68Rooikm96QUgEw2aYQ1EGHG3lIREchO0pz6u9aKoCp9fVNtMpVCfBjiGSARqH5kDJ9osloorAnGrOXQAsKjCApQaKj1aX576l/SKnd0Jc9KezyNunPxHQrYXeCky4Tx+g0aEYMeKqLboVug2UCrg3uDCqEJUnqOOaXdqf5bGQKs4MZA0eCgd8K1gAwvEGr5wAAAABJRU5ErkJggg=="); }
.fav.s-vestiaire { background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABIFBMVEX/WieyRSRaLiCkQiOiQSOpQyT+Wid/OCIeHh6BOSL8WSeYPyMfHh5yNSL7WSb6WSc6JR8hHx57NyJbLiGhQSPpVCaxRSQnIR/lUybyVyeoQySHOiJ5NiJzNSL9WSc3JR/TTiXOTSXiUia/SSRJKR9IKR+SPSJtMyKdQCOfQSM/JyDxVicqIR7sVSbPTSWnQyRkMSFvMyF9NyJULSC4RyXHSyQuIh/5WSfgUiYxIx77WSdCJx+4RySOPCJmMSHtVSYkHx4jHx5HKSBlMSAyIx+XPiPBSSQiHx7sVSf0VyY9Jh9hMCG3RyQpIR9XLSD0VyeSPSO1RiQpIR6QPSPnUyYwIx/vViZ4NiJ8NyHFSyXGSyVpMiHVTyaMOyJxNCH////USOkeAAAAeGVYSWZNTQAqAAAACAAEARoABQAAAAEAAAA+ARsABQAAAAEAAABGASgAAwAAAAEAAgAAh2kABAAAAAEAAABOAAAAAAAAACAAAAABAAAAIAAAAAEAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAAAZE/caAAAACXBIWXMAAATsAAAE7AGKbv1yAAABB0lEQVQ4EdXO11ICQRSE4RZ1OMIqICpmUcyYxYQ5B1TMCeH9H8OZXigoOXuvcwPb/1dTA/yb0xKqnVb35jZ+tTc834TFPx0Rt5qoJ9LZ1QAQixMkamO3JEnrpse/obe69KX6643/BlIUg9V5aPhXB0YIQv4+OpZuAuME3gRDZrKpA1MU0ywzswqYI5g3NmUXFhWQ9Z+5ZNPyitKBVV6xZtt6TgUbBJtb2N7JqwC7FHvYD+sdUYIDE08HgMMjJ45zJwEdOOUVZ+eB4ILg8sqCyLWmzI0TBZtu7+S+qJAHBx6B/JP9fVbAS0LkNQa8OfiuABREPtyeFPE+NfBVKn27vViuZLT+R7cfPDcXhO80HBMAAAAASUVORK5CYII="); }
.fav.s-realreal { background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAERUlEQVR42u2WT2gUdxTHP7+ZcWdnN5o1wW2MVdvd4CV6EUIrCEqJSME/iRcLCYgeezGIWrVSwVp7aGrTUqQYD0VbYz3oJYg9RC9CipCCf8CTl1hjQqZZs0lMJpnf7/Wwu9PEmNBC1R7yYGB478f8vvPe+77vUyIivEGzeMO2AGABgANgjOHfksGyCtiNMfOeU0pFz0vjr4uGIoIxBtu2ZwN4+PAhvv8nxhgmJsYRgWQygVIWSikmJwOCIMCybJLJBGGoWbu2FhHo7u4mkUgQj8eLWRSGh/MYY4jFYqTTaaqqqli+vCrKWCl7UQlOnfqCS5d+ZvXqd8lmsziOTU/P70xMTKC1ZuXKlWQyGcbGRrl//wHDwzk6Oi5TX1/PyEieM2e+4fbt23ieh1KKffv2kkqlePToEV1dNwGora3l0KGDbNlSPxOEiMju3R/J1q0fiu/7UrK6uvdk2bK3xPOScvLk55H/zp07Ul29Qi5e/CnydXZ2SiJRJtXVb8uqVe/Is2fPolhPT4+sWLFKPC8pyeRiuX79uoiIaK1FRMQC8DyPtrYzVFZWYozh+fNxtNYYY4plmcAYQxAE1NXV0dLSQi6XQ0SK5wSlVPFd4/s+YRgSBAHr16+nsbEB27ZxHIfTp78kDMOoKS2AhoYGampqotRMr1Gpk0t+Ywy7du1i3bq1ANi2jVJqBotKlymlMMaQzWYIgkk8z+Px4z/wfT+KOQA7d+6IOnV+ShVAZLMZstkMWutZXV36TqnrlVIEQRCBdF2XRCLx94/9k4vnumAuc10XpRTxeBylFLdu3SIedxkY6KexsYElS5agtUYpVcjAXENivuEyH7je3l5c16Wv7ynt7efp7v6NeNylqeljTpz4DBGJyuz8l8Om0IiGtrbvePDgPk+f9jM+Pk5lZSVXrvzChg3vv1otECmw4dy5Hzhy5AgjIyOk02mGhoa4du0aAGEYvloxsiwL3/dpbm6iubmJ/v5+KioqaGv7lqtXr+I4DlrrVweg1B4iQmvrV6xZs4axsTFSqRQHDhykt7c3ovNLAWhtIvrM9OtZylcaRKXUT1c/YwwVFRWcPfs9WmtisRiDg4Ps398SxY0xMwEopbBti0TCY2pqCtu2I7S2bROLLZqp5Y5TPFPguOM4hKHGdePYtk0YhmzcuJFjx44yMDBAOp3mxo1faW39GsdxCkyQaTY5OSldXTfl8OFPJB5PyOLFKXFdTzKZGmlvPy/37t0TY0w0x5886ZOOjsuyefMH4jgxKS9fKo4Tkz179kpnZ6fk83nRWksYhrJt2w6xLEfKy5fKokWuHD16TPr6+sSZvTzApk2b2L59e+QLwyny+TygZoxdy1KUlZVx/PinRTk2KGUxOjpazKYd8f3ChR+5e/cusVgMEcjlcq9vIZneIy9dyabbfOtZSZRe3HLmspJOlLL24lnLsl7fSrawli8A+N8C+AvOrWZIIA3HsgAAAABJRU5ErkJggg=="); }
.fav.s-depop { background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAE3klEQVRYCcVXS2hcZRT+/jv3ziSTBgPBNrUjTWqaB1Td+KKKRJqUQkuRFtqCIrQg7cJlF4Kiq0pXorjwUWjAjUWouyKYiFn4aiiU+optU5OQFLVQFQdtZuY+/M599b5mOjddeIbhv///n3O+85//nHPPVWiTVrCpV0EfBrTtFpwJim3jf4Mv/jvHHwA1VYD9tQPzcgXXb/p7LQfVcpeb1/HA/RbMo1Q+4QCjOtBt+0KcuxQo0TgzgSrnczacKR3GexXMr/hsmUMgm9q8isFSJ5xDgPUymUYKUFTuIABPCfgLYoROXnqJP/wMFE7egjqzFfO1LJlMAxaxeYCAJyiwvwAULT4Ep81SkrUmiilLQ1DncJYGvdKPpYUkb8qA3wheh3a6BIw1CHunEycVJufiEYMe4fFnirCP9CWMiBnwK/r7G8Ak73lsLadOggfziDdmqPvwRiwuRvfc5wX0d5BxshPqUC23wwN1rccSPXELzhle5+EBLK4Kt3jIJbrpAO9sX31N4HJR4rPoPx01olswBMtDZW7JwwoGK8zdaW4OM41ykoXywb0oPvowYPugjoN/z36K+uwF6jJi+ngFkqpX6iiMD+LasswZaNZRRj3B01bHpFMTSTUbHXvG0fX8s7Hdxi9LqM2e5wnjBsgBiTXEgGRtwauaVDgm2U5JmTWTmfAbPQCref54WM6EYOtSXsk+2t7pxUPBX8yVZ967AOYgwaLEqGDzCrTtOpxuCZ/mJAINupM1rmsdlEExJeHDdZunL7Fq5CDxDTWwpGtP6pyMt5YlR0FHee8udO7ZgUKF75+ODt8ASjLwjJEtrVVk7PoXtEPnGR50UyGDSdxb6OtDz1uvo7x/F82+q0hJIQi2+HK9ODhNDpRuoOft11A+sDu9fZcrHqJaTwOySe68c/dOlPfx5FGyLNQufAfzx6tupDuM9tIzT8AYzn8NopYGODd4BffFfeDNSk8/To64jfXZS7h58CWYy0uuWQ5fdr0fvJPbAD+Eb2gK6vvoAYNnN+K7u4JpOJoLyy64u+++51hoVFjRQ752HgRbJD9Piys37ew//krp0bcNwRgaYWbwDAIsfx4jLwkm/9O6BvsrE6rK+A5bLU+Zwuq5L7Du2HPQ7ukO9RcfGsW9506jdv4iUOPL27FRfOqRcL+dBwFn9ajq7B+ZhuZl1us5lpjHom9ChSJWv/wWf598Fz0njtNcEfNIH9wM+a+VpGVjzzgn2JrXvaqprEqoGIvVN0/hz+NvoHHpJzjVf9rDlCpZaF4zPCz1mWC7lzfPzrcIa5rxPpR4rRBQMoJFc2MfjK1boG3ohZLS65biZvYwN765CHP+GhnihkhO0QB6XR+XjjmMnhUMvMCCdIr7RS8Jo8o9I7yCld6NcgbPygW+fW2y7oPVGf0vVrDwoayFHGxAP6ZlnxQDNtkNSUT5FpeXkZ96dxojqkMtolswBCtYDD0gC9KU8gom6bQxMmYW6EAwz+iZ77p+hlcQa0pDD4hC6VYNOEeYlmyh1W335EFL8AqA6BKdojvaEQtrzABZkL7dZv/OlPyIt12XoIm5SZjaIJERWdEhukRn8ptA1DTV/b9+mollAUnHbKJxTMv5ccqz80tZf38TO99AV9bY1ANJ5uDz3GILR+UT3E99njNPplgzcn2e/weRJJzcVgUGOgAAAABJRU5ErkJggg=="); }
.fav.s-poshmark { background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAEJklEQVRYCe1WbWxTZRR+7r1t7RjL6jY799WCtNsAmUO3EWIMU6lDEz+CEGIm4ycmJsbwg+AfP6IGxD8Y/xh/mChGo2YxRuMwaFKCwRCc4MbArjC6raxstLi54brdL8+548bq9nbdINkfzk16b9/7vuc87znPc94rvaY8a2IJTV7C2Fbo2wCWPAOOm+WAqRvgK9NkSYEkS5lDwuebAqDrGpZ5ClBUXYailaWQXQ4kI0NInhtEeuI6FMUpDGy/WBwAEq5h6Ahsrkfz6zvge7AWEl1srOm+n7pwfH+7dZcVxRoX/SwKgG5oqH6iAds+exl5hcsxfLYfidN90FUdVRuCWPVoHcrqV6B95yH0dvxGmRCHEb8RQDYNE8u9HrS822YF/+XQtwi/9SUmUqO0QkJByZ145M3n0PTCFoQOtGH49wGMJ64RJ+bm+9yjguA8rJsaap9ugneND5d/jeLovsP4K3UNChxwKi5cT47hx32fYvBkBKV1fqx67D5rjcjlggEY0HHXmirL3x/fnEKh34sHWkMobwhYvFBkB9JjfyMW7rF4UVJTPkslmWAWDIAXK8R2Ni09jZonG7D145dQ39YMzVStcYn46HDPKMCc56TJGYBJnlh2OjSi+g2vFIn1LisyJEUiBZhQjWl4KCvBx++HNqUifrIXMhVIZDmR0NB1yEQi72of4KTgvMX/GZOT2V5RF8DmA8+jpLoCfeFuxI71gMsiMvGbGyt416VrfWh+dQf8m9ZipCuGZDQx2x/hanl7Fxp3t8Dtyac5Qzi69xNMjnJDWmQGdNp5ZWOQ9L4HxYEyTP45gYETESwrLpgFQKIylK7zY2piEj1fncDxg18jdWEoaw9gJ8IMcM3zaCehg21W8N4jnbSjw4h3R/HM+y/OAsADHXs/AqaBq9G4VfdsDch2IATA3W4Fpdy3sRZXuvvx3e4PkRpIzDRc+6BhKtgsJ8BDPRfhQh4cOZwBNgChCljvlRuq4bjDiWhHJ0YHRuCUXbROgjGtWQw3NIME8a8iuBllq7cdNPMuzABPso9UlpnNfKfkwqkPfiBQp5EiotXvetjyx6AWY0IArN3EmUukfd0qhbswnxg9bpGKj9wrkRjc7nzUPNVo6T9xJpZV7yJwwhKwdi/QLoe7+lHREERofyvySwqh6lNUHBVFvrsRemcnytffg6t0/ke/74QiCfcjig8p22c594CVm+7F9s/3oKCsCCPnB5E8H4eaVlHZFCB1lGPschLtre/h0rHueSU3F4qsAHiBpqvwb1yNh17ZiuCW9VCcMz1e01QM/hxB+I0vcDHctSDmZwKZFwBP5kw4nC541/ngqSq2CDkWTyFFXEiPc6dbeOptEDkB4Mnc6w1Tt9dZd1miQ0jwofGfiVn+5AydJck6v9UmVMGtDiTydxvAkmfgH9bibOjSce3GAAAAAElFTkSuQmCC"); }
.fav.s-yahoo-jp { background-image:url("data:image/png;base64,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"); }
.fav.s-mercari-jp { background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAEsElEQVRYCa1XaWhcVRT+7puk00yWTjdCSxXUiG1BQ6lUY0usvzSCf1L/lUr80R/Wpa6lLYIgKooVl9Ligog/xL2KVYsUBEtQSEMbQW2MjbaaNoqJSZtkppPJe8fv3Jk3TjLzXt7EHLjvbmf5zrnnLs8AMCyVkgQIVKyrKkBR0LA1LGisdWOZ9hjMVmV0Ie/E3Pghg78m8oIVAVHm2YrVq4YllrxLYkuOi7NYphUd0zny5EGEVQV7fiOIueAxYpktZLofYq4PYrbjRrrhjh587bG3Og/f2dHqCDYD0kgfhzjfOZVOf3bklsQA22q74Lm2i2mGYYeGJdywL+1Nomfj7Xj+iQNDY8uXLyOAAhkH4PQZ18OeL24073HCzIyAZf+TYWy0HjsP0PD6gobZGl4GJ1va8MyzbyNdXwtnslTAqWY8XGQ9F9s+bzHvFwMQwaoaxCbayULDZkOpeMiI52F8URK7Xj+K35quRnU2mNcQBLIYMJn0Tf4uoPGlq2n8DQg25ZcnWEPZmUkc39iGM7MYV1EhOEZilaDmHq5Knoz7NL2m8bmS4KfmFkzFosl7U+Qz6FAA9B7c0uYqNqNJl3CpXDUm6hpyqV0yX2ZARQxW+BHQXPDKsEUcUvEs6sZGI/KTjSJMm3M+gOiCgZwGa7//DjENbQRymH3clm/OI4AF2NB5BFf+0ovsgnAEugvcLM5OXkq9Wh6AZoiXZonojtpzHCTGhrH9xd1oGL2ArG61MuTmxlPxTHrXV621g6UAeEJg7Rpg6zagqYkgeJp4zBgts5ETR3PXUezd3cFInMIUjWUWApPxXK2RueJsP+57cmffRzcnPlV1mj2a+1VwFnfxiFqHlSuBb74ELr8MGOLxffe9wLFj5KS21MVcbQ9QlQwgnoip+mX4dvMdONV8A8YaliAxfgGrf+xG69eHkRgZ+AG4tI7GcyFWALzZTggSIre1i0xMiGy6VeTRx0XODYr09on0nRbZ8Qi37CIRk5x+E868GbWvfFjIQp1G27X5PtvWFp0mlS5BFce5hvj5NPDCfmB8HEgmgf5fgQP7gAd3MGRlDvmZwWBOwKlhYfw10A7jb/vTTU7vqRJ/qasJRBihv4eBdz8E2tqAfQS052FgKW9XzZWoFLJkpQCUOU7U/kXJwCHFHcF3Dz74BKjje2PNNbl+VAAhfNMBGHp9ogd46SDTQ/ODYBSIBUPWDEPvEkh9XYjKyqZsIhREDG+S84PAU89xvZj1+oLI8urS5VCyQFhrVOaJfACqMRcNR6+zoivtob25sINJpAA0uf4/qRLrhQJQta6I9NPj5v+yUGfI13NSGyyMSJq5cHGM+IoAcqYyoi7x+tUm5WxMVTuDqg8SL/8gCVJJ0NddC/wzAvzxO8XnAMSgE66z3WC4txiAWiSICE8yT99aNFzpUhjpIuJX4Nby/2FAt5U6bj+2oR2SXZfzQGJFLLmFVnYS1vrc1By/xnRT7cuD7sghHvKpvJaCTW0UOkUmLBD7k5F7HUd/lvtKrGFvP9z4x2F/TEEAfDUzgET8MQFmNewb0NoHEVZb/jn8moXptHM+QzGgsHYhIvP1c1opAB+cBeJ3imrVVxH9C0teyjuLP7a4AAAAAElFTkSuQmCC"); }
.fav.s-craigslist { background-image:url("data:image/png;base64,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"); }
.fav.s-fb { background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAFJUlEQVRYCbVXW2hcRRj+Zu8xl4qWihG1SBRiS6WiggqalhT1oVW0+mBFregGfFCRqngDRShVUbQvvVikpQ8KXmjzIFhJDRb6kKLQaq2tF6QXb4TG5rq73d3x+87ZyZ49e3aTEPxh9sz8889//2f+NZgDpJ6wSwzQG4uh11os59HLKsdP8vujNdhrgW8K23AMMJzODOQ3Azxp2zJF3EeqRzhuRBxtKHMWZi9OMY4yRjm+I92uXAZ78J75l9iG0FSBlj57b9niZRPD9RBllOAwa6cI8baEwzz3Un6b+SJM5taRCix8zLaPJfEaN5+mVXGUHPkcv/IIkLNlbM4Dr2O7mQxzqFOg9XF7SSmO3RS8alYWkyPzwQN9phly4s31I0VKGEjE8OD4VvOPR1z5mab31htsa2YM/TywcjZWF+mZIsPSkgTSHDFykxIl4vJFTrgwTkKc6yK+yhncT0+c8+Txx22L2qT78BbjvWEm4bK4QOFLO4G7lgG3dAFdi4C2DHCe+JEJ4PdhYBMjf+QUkJBwAb8Mx7v5S/EcA6yMqirQ2mfv5Nm9xKXqMlyUFZCF2s/eDryyBljU7nbqvw9sAT45BGTonWkwKMUs1k5uN3uE89MkaxeUy3iTq6bCdaBA1z58K7B5XXPholUo6oBJTUNfRdZeoD1PAXruHpvAsplcr3gvvpinV9exjUQoJ+qA0lXWGevdLUigh6KB9XWEEQglXe+1wOUXRWwSNToF/Pw3MFkAkoy3ciFSCSlmKDNrP06kunA1F8u9kovmW8XSAzddVV0GZwd/AZ75CDj6BzBVUSBO/6ZkXhj80NyQsrgmxjJZwUB0NEs8nVfmJ8ls8cIwNz/zX/wUOPQr404vpUmn8nP3Q90JZXIc7QzFSimwejbW60wmBbRyhOH0CHCCrk8y213dR4W/5pzvhRVyUPdM1vM9gBs1TCqLHCtDGS+a4BsYGX/HQLSMqBS40uGivnx60ZH23SnXKq5hiJPThSwqudztc4rxnK9UmD6w7jSZbMNIebfaUr74/U8BC7yq5W1HZZwQx0iWS5iEOjh1FrjjHWB4vEEl+IReCTJvwUs1GuQBWdfREr0vrFwd3v+B797wGPciPBbgdJK3IoYUjGYgC+cKR874D1XDc77MYzH6bX/lQo6kVVYr9nOF4382KUMxo2doV3+CP/tNCWP0QntNEEkj4RPsJA6cANp5X2u9hDmheRB08Xx/2rdYhqnChn4jfSP3k4hv4Tm+P4OG12GS9/I+XcrN3gKFQZ748lng5q6geOCnv4CeTcBZXr3hBK2lrKz0PFN47jhWxdgcnOfyw7D1wYOqEzeC+ODc7btvcC9ybrGT9hc9J7FL+YyNgjrZSJDr3YgkINLtu28jOslgyA+zagP9AJtF4t+gW/wLsuHpeW74CVJgab7g2rLpNJnsRD/d934jL8xTtH+c0iRjYitzrgLTCqhH81pnNo7/ixIq5TIG8lNszwMvRlUBacRulQ3kQ6yGAU8JuWy+IB7KrSL2sRdbh92GtVKFWgWIV9/OBFnDfzVv827INbukqmwazPykLqkTbiti7cQOw0e7FuSYemBSMhzPp/vsIMtzo4njOq9MZ+MR0cgsli5d/i0zfmNuh/mc/CKhzgNBKv2ny8fZMRWx3hYhZUYTwRa7QqzS894TWWwxzhB+TeGP5uLomaLwIM/wPNoDQaotZoQh2UnOu/jHpZsd0W3cvpujm+MK4inenOGLOMR2bIDKDBY+MEe5Nyv4Dy9Dn0aaHlPDAAAAAElFTkSuQmCC"); }
.fav.s-uniqlo { background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAM1BMVEX/AAD/////wMD/gID/oKD/4OD/QED/ICD/MDD/EBD/YGD/kJD/8PD/0ND/cHD/sLD/UFCt7zh/AAAARGVYSWZNTQAqAAAACAABh2kABAAAAAEAAAAaAAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAAgoAMABAAAAAEAAAAgAAAAAKyGYvMAAADzSURBVDgRzVPtjsMwCMMhy9fSbu//tGdYm2Vate7HnXRWpQZwKRgi8k8QQpESgsg1RBGzpIXrVByQJAGMAUXMEgX5AzMhnhGQTzIgfiZcQHyqQY1xQIh1QbcutB0R+FUHTAKo0HjLUBhGzw+CHhAkq66VsjRNUlVJTdqGTL9ymH/hCevqP9qTvxRpzuxVc6gbXto0H+Um5bLHOb+nUO7sWCpJE2Hsg7rTpPAF2SjDNiUNw/E9IbIu1rRn6BzMXAO74LMaISiRb+54dnHnrAAOg0trSC4M7lsFfKWb7zPX3lEkxxA59BkL5oswR7ZzszvzJ/gBUykFZEQPflEAAAAASUVORK5CYII="); }
.fav.s-gshop { background-image:url("data:image/png;base64,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"); }