/* JTS — the hub.

   THE BRIEF: it must not look like the tools. Each product site is a dark,
   quiet working screen, because that is what somebody stares at on a
   Tuesday night doing their figures. This is the opposite job -- a shop
   front a stranger lands on for six seconds -- so it is light, loud and
   typographic, and it has to make two doors obvious at a glance: buy one,
   or sell one.

   WHERE THE LOOK COMES FROM: trade signage. Heavy grotesque type, flat
   colour fields, hard black rules and a hard offset shadow rather than a
   soft blur -- the way a sign painter or a truck door is lettered, not the
   way a SaaS landing page is. That is also why the palette is a warm paper
   white with real ink black and one gold, instead of the pastel gradient
   every other software page opens with.

   DELIBERATELY SINGLE-THEME. It commits to a light identity the way a
   printed thing does, so it does not follow the machine into dark mode --
   but every colour is stated explicitly and `body` sets its own ground, so
   it renders identically whatever the host prefers. */

:root {
  --paper:   #fffdf9;
  --paper-2: #f6f1e7;
  --ink:     #14110d;
  --ink-2:   #514a41;
  --rule:    #14110d;
  /* GOLD IS THE ACTION COLOUR, AND IT IS RATIONED.
     It gets the primary button, the focus ring, the one rule beside the
     hero note, and exactly ONE figure in the seller band -- the 85%,
     which is the promise that band exists to make. Everything else that
     used to be gold is white or ink now. Six gold things in one screen
     is not an accent, it is a background. */
  --gold:    #f2a20c;
  --gold-2:  #d98c00;
  --bad:     #b3261e;
  --r:       16px;
  /* WIDTH. The page used to stop at 1120px, which on a 1920 screen is the
     middle 58% and a lot of empty paper. The cap is now much wider and the
     gutter scales with the viewport, so it fills a big monitor and still
     breathes on a laptop.
     WHAT IS *NOT* ALLOWED TO GROW WITH IT: running text. A paragraph past
     roughly 70 characters a line is measurably harder to read, so prose
     keeps a ch-based cap and the extra width goes to the GRIDS instead --
     more tool cards per row, not longer sentences. */
  --wrap:    1720px;
  --gutter:  clamp(16px, 2.6vw, 52px);
  --shadow:  6px 6px 0 var(--ink);
  --c:       #14110d;            /* per-tool, set inline */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0 var(--gutter);
  background: var(--paper);
  color: var(--ink);
  font: 16.5px/1.6 Archivo, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .price, .btn, .art-say, .sellband-facts b {
  font-family: "Bricolage Grotesque", Archivo, "Segoe UI", Helvetica, Arial,
               sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
}

a { color: inherit; }

/* ---- scroll reveal ----------------------------------------------------
   The hiding only happens once the script has said it can un-hide. If the
   script never runs -- old browser, blocked, an error above it -- the page
   is simply a normal readable page rather than a blank one. */
.can-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.22,.7,.3,1),
              transform .55s cubic-bezier(.22,.7,.3,1);
  will-change: opacity, transform;
}
.can-reveal .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .can-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .strip-run { animation: none !important; }
}

/* ---- header ------------------------------------------------------------ */
.top {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px 0 8px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand { display: flex; align-items: center; text-decoration: none;
         width: fit-content; }
.jts-mark { width: 40px; height: 40px; display: block; }
.topnav { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.topnav a { text-decoration: none; font-size: 15px; font-weight: 600;
            padding: 9px 14px; border-radius: 999px; }
.topnav a:hover { background: var(--paper-2); }
.nav-cta {
  background: var(--ink);
  color: var(--paper) !important;
  border: 2px solid var(--ink);
}
.nav-cta:hover { background: var(--gold); color: var(--ink) !important; }

main { max-width: var(--wrap); margin: 0 auto; }

/* ---- hero -------------------------------------------------------------- */
.hero { padding: 40px 0 0; }
.hero-in { max-width: min(1180px, 100%); }
.eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(38px, 7vw, 76px);
  line-height: .98;
  text-wrap: balance;
}
.lead { font-size: clamp(17px, 2.1vw, 20px); color: var(--ink-2);
        margin: 0 0 22px; max-width: 58ch; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }

.btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.btn-go { background: var(--gold); color: var(--ink); box-shadow: var(--shadow); }
.btn-go:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.btn-go:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.hero-note {
  font-size: 15px; color: var(--ink-2); margin: 0;
  padding-left: 14px; border-left: 4px solid var(--gold);
}

/* the marquee of trades -- five colours moving, so the page has life above
   the fold without a video or a stock photograph */
.hero-strip {
  margin: 40px calc(-1 * var(--gutter)) 0;
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  background: var(--paper-2);
  overflow: hidden;
  padding: 11px 0;
}
.strip-run {
  display: flex;
  gap: 34px;
  width: max-content;
  animation: run 38s linear infinite;
}
.strip-run span {
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c); white-space: nowrap;
}
.strip-run span::after { content: " ✦"; opacity: .45; }
@keyframes run { from { transform: none; } to { transform: translateX(-50%); } }

/* ---- the two doors ----------------------------------------------------- */
/* NOT 50/50. Almost everybody landing here is buying, not selling, so an
   even split pushes the minority path at everybody -- and the dark panel
   pulls the eye HARDER than the light one, so equal size actually made
   selling win. Buying gets the room; selling stays plainly visible but
   reads as the turning off the main road. */
.doors {
  display: grid;
  grid-template-columns: 1.75fr 1fr;
  gap: 18px;
  margin: 54px 0 0;
  align-items: stretch;
}
.door {
  display: block;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  padding: 26px 24px 22px;
  background: var(--paper);
  box-shadow: var(--shadow);
  transition: transform .14s, box-shadow .14s;
}
.door:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.door-sell { background: var(--ink); color: var(--paper); }
.door-sell .door-tag { color: #a89f92; }
.door-sell p { color: #cfc7bb; }
.door-tag { font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
            text-transform: uppercase; color: var(--ink-2); }
.door h2 { margin: 8px 0 10px; font-size: clamp(30px, 4.2vw, 46px); }
.door-sell { padding: 22px 20px 20px; }
.door-sell h2 { font-size: clamp(21px, 2.2vw, 27px); margin: 6px 0 8px; }
.door-sell p { font-size: 14.5px; margin-bottom: 12px; }
.door-sell .door-tag, .door-sell .door-go { font-size: 13px; }
.door p { margin: 0 0 16px; font-size: 16px; color: var(--ink-2); }
.door-go { font-weight: 700; font-size: 15.5px; }

/* ---- section heads ----------------------------------------------------- */
.sec-head { margin: 76px 0 24px; max-width: 60ch; }
.sec-head h2 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 42px); }
.sec-head p { margin: 0; color: var(--ink-2); font-size: 17px;
              max-width: 62ch; }

/* ---- the tools --------------------------------------------------------- */
.tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 315px), 1fr));
  gap: 20px;
}
.tool {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
  transition: transform .14s, box-shadow .14s;
}
.tool:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }

/* THE PICTURE. There are no photographs on this site and no invented
   screenshots -- so the image for each tool is its own promise, set large
   on its own colour. It says something true and it cannot go stale. */
.tool-art {
  position: relative;
  background: var(--c);
  color: #fff;
  padding: 20px 20px 22px;
  min-height: 186px;
  display: flex;
  flex-direction: column;
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
}
.tool-art::before {           /* a faint grid, like a drawing board */
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .5;
}
.art-who {
  position: relative;
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; opacity: .85;
}
.art-say {
  position: relative;
  margin-top: auto;
  font-size: 23px;
  line-height: 1.12;
  text-wrap: balance;
}
.art-mark {
  position: absolute;
  right: -10px; bottom: -34px;
  font-family: "Bricolage Grotesque", Archivo, sans-serif;
  font-weight: 800;
  font-size: 150px;
  line-height: 1;
  color: rgba(255, 255, 255, .13);
  pointer-events: none;
}
.tool-body { padding: 18px 20px 20px; display: flex; flex-direction: column;
             flex: 1; }
.tool-head { display: flex; align-items: baseline; gap: 12px; }
.tool-head h3 { margin: 0; font-size: 23px; }
.price { margin-left: auto; font-size: 14px; color: var(--c);
         white-space: nowrap; font-variant-numeric: tabular-nums; }
.blurb { margin: 10px 0 16px; font-size: 15px; color: var(--ink-2); }
.go { margin-top: auto; font-weight: 700; font-size: 15.5px; color: var(--c); }
.by { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }

/* ---- why --------------------------------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 26px 34px;
}
.why-one { border-top: 3px solid var(--ink); padding-top: 14px; }
.why-n { font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
         color: var(--ink-2); }
.why-one h3 { margin: 6px 0 6px; font-size: 19px; }
.why-one p { margin: 0; font-size: 15.5px; color: var(--ink-2);
             max-width: 46ch; }

/* ---- the seller band --------------------------------------------------- */
.sellband {
  margin: 84px calc(-1 * var(--gutter)) 0;
  background: var(--ink);
  color: var(--paper);
  border-top: 2px solid var(--ink);
  padding: 46px var(--gutter) 50px;
}
.sellband-in {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px;
  align-items: start;
}
.sellband .eyebrow { color: #a89f92; }
.sellband h2 { margin: 0 0 14px; font-size: clamp(25px, 3.2vw, 34px); }
.sellband .lead { color: #cfc7bb; }
.sellband .state {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 15.5px;
  margin: 0 0 20px;
}
.sellband-facts { list-style: none; margin: 0; padding: 0; display: grid;
                  gap: 2px; }
.sellband-facts li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.18);
}
.sellband-facts li:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.sellband-facts b { font-size: 22px; color: var(--paper); min-width: 4.6em; }
.sellband-facts li:first-child b { color: var(--gold); }
.sellband-facts span { font-size: 15px; color: #cfc7bb; }

/* ---- cards and forms (sell, terms, privacy) ---------------------------- */
.card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  padding: 26px 24px 22px;
  margin: 0 0 22px;
  box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 12px; font-size: 24px; }
.card h3 { margin: 20px 0 5px; font-size: 17.5px; }
.card h3:first-child { margin-top: 0; }
.narrow { max-width: 720px; }

.fld { margin: 0 0 16px; }
.fld-label { display: block; font-size: 13px; font-weight: 600;
             color: var(--ink-2); margin-bottom: 6px; }
.fld-note { font-size: 14px; color: var(--ink-2); margin: 14px 0 0; }

input, textarea {
  width: 100%;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  padding: 12px 13px;
  font: inherit;
  font-size: 16px;
}
textarea { resize: vertical; }
input:focus, textarea:focus { outline: 3px solid var(--gold); outline-offset: 1px; }

.warn {
  background: #fdeceb;
  border: 2px solid var(--bad);
  color: #7d1c16;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 18px;
  font-size: 15.5px;
}
.state { font-size: 15.5px; background: var(--paper-2);
         border: 2px solid var(--ink); border-radius: 12px;
         padding: 13px 15px; margin: 16px 0 0; }

/* ---- tables (admin only) ---------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 9px 10px;
                   border-bottom: 1px solid #ded5c6; font-size: 14.5px;
                   vertical-align: top; }
.tbl th { font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
          color: var(--ink-2); }
.tbl td.n, .tbl th.n { text-align: right;
                       font-variant-numeric: tabular-nums; }
.tiny { font-size: 13px; }
.dim { color: var(--ink-2); }

/* ---- footer ------------------------------------------------------------ */
.foot { max-width: var(--wrap); margin: 0 auto; padding: 26px 0 34px; }
.sellband + .foot { padding-top: 26px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center;
           font-size: 14.5px; border-top: 2px solid var(--ink);
           padding-top: 18px; }
.foot-links { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a { text-decoration: none; color: var(--ink-2); font-weight: 600; }
.foot-links a:hover { color: var(--ink); }

/* ---- narrow ------------------------------------------------------------ */
@media (max-width: 880px) {
  .doors { grid-template-columns: 1fr; }
  .door-sell h2 { font-size: 24px; }
  .sellband-in { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 640px) {
  .hero { padding: 24px 0 0; }
  .hero-strip { margin: 30px calc(-1 * var(--gutter)) 0; }
  .sellband { margin: 60px calc(-1 * var(--gutter)) 0;
              padding: 44px var(--gutter) 48px; }
  .sec-head { margin-top: 56px; }
  .foot-links { margin-left: 0; }
  .art-mark { font-size: 110px; }
}

/* ---- verified ----------------------------------------------------------
   VERIFIED MEANS JTS BUILT IT. Nothing else. It sits on the coloured art
   panel, so it is white-on-colour rather than another use of the gold --
   the gold is rationed to three resting things and a badge on five cards
   at once would make it a background. */
.vbadge {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vbadge svg { width: 12px; height: 12px; flex: none; }

/* the same badge sitting in a sentence, where it has to explain itself */
.vbadge-inline {
  position: static;
  background: var(--ink);
  border-color: var(--ink);
  vertical-align: middle;
  margin-right: 2px;
}
.vnote {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--ink-2);
  max-width: 62ch;
}

/* ---- signing in, and your tools --------------------------------------- */
.slim { max-width: 560px; margin: 48px auto 0; }
.slim.wide { max-width: 1000px; }
.slim h1 { font-size: clamp(32px, 5vw, 52px); margin: 0 0 14px; }

.form-card {
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: 24px;
  margin: 24px 0;
}
.form-card h2 { margin: 0 0 8px; font-size: 24px; }

.fld { display: block; margin: 0 0 16px; }
.fld > span {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 6px;
}
.fld > span em { font-style: normal; text-transform: none; letter-spacing: 0;
                 font-weight: 500; opacity: .8; }
.fld input, .fld select {
  width: 100%;
  font: 16px Archivo, "Segoe UI", sans-serif;
  padding: 12px 13px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
}
.fld input:focus-visible, .fld select:focus-visible,
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.form-note { font-size: 14.5px; color: var(--ink-2); margin: 14px 0 0; }
.form-bad, .form-ok {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 15px;
  border: 2px solid var(--bad);
  color: var(--bad);
  background: #fff5f4;
}
.form-ok { border-color: #1d7a3f; color: #14612f; background: #f1faf3; }

/* a tool already attached to this account */
.acct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 18px;
  margin: 24px 0;
}
.acct-one {
  border: 2px solid var(--ink);
  border-left: 10px solid var(--c);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
}
.acct-one h3 { margin: 4px 0 2px; font-size: 22px; }
.acct-who { font-size: 11px; font-weight: 700; letter-spacing: .12em;
            text-transform: uppercase; color: var(--ink-2); }
.acct-as { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-2); }
.btn-small { padding: 10px 16px; font-size: 15px; }
.acct-one form { margin: 12px 0 0; }
.acct-one .linkish {
  background: none; border: 0; padding: 0; box-shadow: none;
  font: inherit; font-size: 13px; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.acct-one .linkish:hover { color: var(--bad); }