/* 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, h4, .price, .btn, .art-say {
  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);
  /* NO will-change HERE, and it is not an oversight.
     will-change: opacity/transform makes a STACKING CONTEXT, and unlike a
     transform it does not go away when the animation finishes. Every
     revealed block kept one for ever, so the suggestion list -- which
     hangs out of the hero-ask block on z-index 40 -- was trapped inside
     that block and painted under the buttons of the NEXT one. It looked
     for all the world like a z-index problem and no z-index could fix it.
     Opacity and transform are composited anyway during a transition; the
     hint bought nothing and cost a layer per block. */
}
.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; }
/* The owner's own door. Only ever in the page for the owner, and marked
   with the gold so it reads as his rather than as one of the shop's. */
.topnav a.nav-admin { box-shadow: inset 0 -3px 0 var(--gold); border-radius: 6px; }

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);
}

/* Back into your Lineup schedule: a company code, and Lineup takes it from
   there. ONE QUIET LINE -- it is for the team of a business already here,
   not the thing being sold -- so no card, no gold, and it must never push
   the hero's banner of trades down the page. */
.crew-box {
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.crew-box label { font-size: 14.5px; color: var(--ink-2); }
.crew-box label b { color: var(--ink); font-weight: 600; }
.crew-box-row { display: flex; gap: 8px; flex: 0 1 auto; }
.crew-box input {
  width: 9.5em;
  min-width: 0;
  font: 600 14.5px/1.2 Archivo, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1.5px solid var(--ink-2);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
}
.crew-box input::placeholder { color: #9b9387; letter-spacing: .08em; }
.crew-box input:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.crew-box .btn { padding: 7px 14px; font-size: 14.5px; border-width: 1.5px; }

/* 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%); } }

/* ---- Sitework, first ----------------------------------------------------
   The one thing on the page that is for EVERY business, so it goes before the
   doors. Same language as a tool card -- a hard shadow, a 2px rule, and its
   own colour field with the drawing-board grid -- just wider.
   ITS EXAMPLES LIVE INSIDE IT (JT, 2026-09-28: "Sitework is just taking up
   too much room ... just put the examples inside of it"). The colour field
   that used to hold a word list repeating the headline now holds the three
   example websites: beside the words on a wide screen, under them when it
   is narrower, and swiped sideways on a phone. The word list (.feature-art)
   only comes back when there are no examples to show. */
.feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  margin: 44px 0 0;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.feature.has-exs { grid-template-columns: minmax(0, 1fr); }
.feature-words { padding: 22px 26px 22px; min-width: 0; }
.feature-words h2 {
  margin: 4px 0 10px;
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.04;
  text-wrap: balance;
}
.feature-words .lead { margin: 0 0 14px; max-width: 58ch; }
.feature-price { display: flex; flex-wrap: wrap; align-items: baseline;
                 gap: 6px 14px; margin: 0 0 16px; }
.feature-price b { font-size: 22px; color: var(--c); }
.feature-price span { font-size: 15px; color: var(--ink-2); }
.feature-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.feature-art, .feature-exs {
  position: relative;
  min-width: 0;
  background: var(--c);
  color: #fff;
  overflow: hidden;
}
.feature-art {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 20px;
  border-left: 2px solid var(--ink);
}
.feature-art::before, .feature-exs::before {   /* the same faint grid as a tool card */
  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;
}
.feature-art .art-who { position: relative; }
.feature-list {
  position: relative;
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  font-family: "Bricolage Grotesque", Archivo, sans-serif;
  font-weight: 800;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.14;
}
.feature-list li:last-child { opacity: .72; }
.feature-art .art-mark { font-size: 170px; right: -6px; bottom: -44px; }

/* The examples' half of the box. Under the words until the screen is wide
   enough for three cards to sit beside them at a size worth looking at. */
.feature-exs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 20px 22px 18px;
  border-top: 2px solid var(--ink);
}
@media (min-width: 1320px) {
  .feature.has-exs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .feature-exs { border-top: 0; border-left: 2px solid var(--ink); }
}
@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; }
  .feature-art { border-left: 0; border-top: 2px solid var(--ink); min-height: 190px; }
  .feature-words { padding: 24px 20px 22px; }
}
.fx-head {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 14px;
  margin: 0;
}
.fx-head .art-who { flex: none; }
.fx-note { font-size: 14.5px; opacity: .92; }

/* ---- Sitework's example websites (#examples) -----------------------------
   THE ONE PLACE THIS SITE SHOWS SCREENSHOTS, and they are not invented: each
   is the example website itself, photographed in a real browser by
   kit/shoot_examples.py, so a card cannot show anything the example does
   not have. Paper cards with a hard shadow on Sitework's colour, the same
   picture language as a tool card. */
.exs-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 0 5px 5px 0;          /* room for the cards' hard shadows */
}
@media (max-width: 759px) {     /* a phone: swipe along the three */
  .exs-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(80%, 300px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;       /* #24: no raw grey bar under the cards --
                                    the arrows below and the next card
                                    peeking in say there is more */
    /* runs to the colour field's edge, so the next card peeks in from it */
    margin-right: -22px;
    padding: 2px 22px 10px 2px;
  }
  .ex { scroll-snap-align: start; }
  .exs-grid::-webkit-scrollbar { display: none; }
}
/* THE ARROWS for a row that scrolls sideways (#24): the swiped example
   cards on a narrow screen and the tab row in the viewer. Shown by
   static/examples.js only while there is somewhere to scroll. */
.sc-btns { position: relative; display: flex; gap: 8px; margin: -4px 0 0; }
.sc-btns[hidden], .sc-b[hidden] { display: none; }
.sc-b {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--paper); color: var(--ink);
  font: 700 19px/1 Archivo, "Segoe UI", sans-serif; cursor: pointer;
}
.sc-b:hover { background: var(--ink); color: var(--paper); }
.sc-b:disabled { opacity: .35; cursor: default; background: var(--paper); color: var(--ink); }
.sc-b:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ex {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .14s, box-shadow .14s;
}
.ex:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.ex:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.ex-stage {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
}
.ex-stage::before {          /* a drawing-board grid, in ink on paper */
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(20,17,13,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(20,17,13,.07) 1px, transparent 1px);
  background-size: 18px 18px;
}
/* The site in a browser window, with the same site on a phone standing in
   front. Both run off the bottom edge on purpose: it reads as a website
   you can go into, not a picture of one. */
.ex-frame {
  position: absolute; left: 7%; width: 74%; top: 12%;
  display: block;
  background: #fff;
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(40, 6, 22, .22);
  transition: transform .35s cubic-bezier(.22, .7, .3, 1);
}
.ex-chrome {
  display: flex; align-items: center; gap: 4px;
  height: 15px; padding: 0 7px;
  background: #ece7df; border-bottom: 1px solid #d6cfc3;
}
.ex-chrome i { width: 5px; height: 5px; border-radius: 50%;
               background: #c7bfb2; flex: none; }
.ex-chrome span {
  margin-left: 6px; font-size: 8.5px; color: #5b544b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ex-frame img, .ex-phone img { display: block; width: 100%; height: auto; }
.ex-phone {
  position: absolute; right: 5%; width: 23%; top: 24%;
  display: block;
  border: 2.5px solid var(--ink);
  border-radius: 11px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 10px 20px rgba(40, 6, 22, .3);
  transition: transform .35s cubic-bezier(.22, .7, .3, 1);
}
.ex:hover .ex-frame { transform: translateY(-3px); }
.ex:hover .ex-phone { transform: translateY(-5px); }
/* The free-trial pill sits beside the plan, under the picture (#83) -- it
   used to sit on the picture and covered the example's address bar. */
.ex-free {
  display: inline-block; vertical-align: 1px; margin-left: 4px;
  background: #3ecf7a; color: #06210f;
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 0 7px; font-size: 11.5px; font-weight: 800; line-height: 1.5;
  white-space: nowrap;
}
.ex-body { display: flex; flex-direction: column; gap: 2px;
           padding: 10px 12px 12px; flex: 1; }
.ex-plan { font-size: 13px; font-weight: 600; color: var(--ink-2);
           font-variant-numeric: tabular-nums; }
.ex-plan b {
  font-family: "Bricolage Grotesque", Archivo, sans-serif;
  font-weight: 800; color: var(--c); margin-right: 4px;
}
.ex-name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: "Bricolage Grotesque", Archivo, sans-serif;
  font-weight: 800; font-size: 17px; line-height: 1.15; letter-spacing: -.01em;
}
.ex-go { flex: none; color: var(--c); transition: transform .14s; }
.ex:hover .ex-go { transform: translateX(3px); }
.ex-trade { font-size: 13px; color: var(--ink-2); }
.exs-all { position: relative; margin: 0; font-size: 14.5px; }
.exs-all a {
  color: #fff; font-weight: 700; text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, .55); padding-bottom: 2px;
}
.exs-all a:hover { border-bottom-color: #fff; }

/* THE VIEWER: the live example, in a window on this page. Opened only on a
   computer (static/examples.js); a phone goes to the example itself. */
html.exv-on { overflow: hidden; }
.exv {
  width: min(1320px, calc(100vw - 40px));
  height: min(920px, calc(100vh - 40px));
  height: min(920px, calc(100dvh - 40px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;                /* the window fills it edge to edge, so a
                                press on the dialog itself is a press on
                                the dark surround -- which closes it */
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.exv::backdrop { background: rgba(20, 17, 13, .74); }
.exv-in { display: flex; flex-direction: column; width: 100%; height: 100%; }
.exv-top {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 12px 10px 14px;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}
.exv-tabwrap { display: flex; align-items: center; gap: 6px;
               flex: 1 1 420px; min-width: 0; }
/* #24: the tab row scrolls without the browser's grey bar; the arrows
   either side (static/examples.js) move it, and the chosen tab is always
   scrolled fully into view. */
.exv-tabs { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0;
            overflow-x: auto; scrollbar-width: none;
            scroll-snap-type: x proximity; scroll-behavior: smooth; }
.exv-tabs::-webkit-scrollbar { display: none; }
.exv-tab { scroll-snap-align: start; }
.exv-sc { width: 36px; height: 36px; font-size: 16px; }
.exv-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 6px 12px;
  border: 2px solid transparent; border-radius: 12px;
  background: transparent; color: var(--ink);
  font: inherit; line-height: 1.2; text-align: left;
  white-space: nowrap; cursor: pointer;
}
.exv-tab b {
  font-family: "Bricolage Grotesque", Archivo, sans-serif;
  font-weight: 800; font-size: 15px; letter-spacing: -.01em;
}
.exv-tab span { font-size: 12.5px; color: var(--ink-2);
                font-variant-numeric: tabular-nums; }
.exv-tab:hover { background: var(--paper-2); }
.exv-tab[aria-pressed="true"] { border-color: var(--ink); background: var(--paper-2); }
.exv-size {
  display: inline-flex; flex: none;
  border: 2px solid var(--ink); border-radius: 999px; overflow: hidden;
}
.exv-size button {
  border: 0; background: transparent; color: var(--ink);
  padding: 7px 14px; font: 600 14px/1.2 Archivo, "Segoe UI", sans-serif;
  cursor: pointer;
}
.exv-size button + button { border-left: 2px solid var(--ink); }
.exv-size button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.exv-open {
  flex: none; font-weight: 700; font-size: 14.5px;
  text-decoration: none; padding: 8px 12px; border-radius: 999px;
}
.exv-open:hover { background: var(--paper-2); }
.exv-x {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--paper); color: var(--ink);
  font: 700 22px/1 Archivo, "Segoe UI", sans-serif; cursor: pointer;
}
.exv-x:hover { background: var(--ink); color: var(--paper); }
.exv-tab:focus-visible, .exv-size button:focus-visible,
.exv-open:focus-visible, .exv-x:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}
.exv-stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--paper-2);
  background-image: linear-gradient(rgba(20,17,13,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(20,17,13,.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.exv-screen { position: relative; width: 100%; height: 100%; background: #fff; }
/* A phone: the example at a real phone's size (390 x 844 inside the
   bezel), so it shows its own phone layout, not a squashed computer one --
   and SCALED to the height there is (#16): it used to be cut to fit, a
   squat box on a laptop. static/examples.js sets --phone-s from the
   stage's height; the layout box stays phone-sized and is shrunk around
   its middle, so it never runs off the bottom of the window. */
.exv-stage { overflow: hidden; }
.exv-stage[data-size="phone"] .exv-screen {
  flex: none;
  width: 410px;
  height: 864px;
  transform: scale(var(--phone-s, 1));
  transform-origin: center center;
  border: 10px solid var(--ink);
  border-radius: 42px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.exv-screen iframe { display: block; width: 100%; height: 100%;
                     border: 0; background: #fff; }
.exv-wait {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  background: #fff; color: var(--ink-2); font-weight: 700; font-size: 15px;
}
.exv-wait::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid #e7e1d6; border-top-color: var(--ink);
  animation: exv-turn .8s linear infinite;
}
@keyframes exv-turn { to { transform: rotate(360deg); } }
.exv-fail {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; text-align: center;
  background: var(--paper);
}
.exv-fail p { margin: 0; font-size: 17px; color: var(--ink-2); max-width: 36ch; }
.exv-wait[hidden], .exv-fail[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ex, .ex-frame, .ex-phone, .ex-go { transition: none; }
  .ex:hover, .ex:hover .ex-frame, .ex:hover .ex-phone,
  .ex:hover .ex-go { transform: none; }
  .exv-wait::before { animation: none; }
}

/* ---- section heads ----------------------------------------------------- */
.sec-head { margin: 76px 0 24px; max-width: 60ch; }
.sec-head h2 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 42px);
               line-height: 1.08; text-wrap: balance; }   /* a heading that wraps
               inherited the body's 1.6 and split into two floating lines */
.sec-head p { margin: 0; color: var(--ink-2); font-size: 17px;
              max-width: 62ch; }

/* ---- the tools --------------------------------------------------------- */
/* NO HOLES (#25). A grid of auto-fill columns left a card alone on the
   last row with empty cells beside it (Caliper and Sitework each sat on a
   row of their own). As a wrapping row of cards that GROW, the cards on a
   short last row share its whole width instead. Every full row is the same
   as before: as many 315px-or-wider cards as fit. */
.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.tools > .tool { flex: 1 1 315px; min-width: min(100%, 315px); }
/* A group of one card (Caliper's, "For larger distributors"): on a wide
   screen its picture sits beside its words rather than over a very wide
   card. */
@media (min-width: 760px) {
  .tools-solo > .tool { flex-direction: row; }
  .tools-solo .tool-art { flex: 0 0 40%; border-bottom: 0;
                          border-right: 2px solid var(--ink); }
  .tools-solo .tool-body { flex: 1 1 auto; }
}
.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-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.art-who {
  flex: 1 1 auto;
  min-width: 0;               /* lets it wrap INSIDE its own share of the
                                  row instead of the row growing to fit it */
  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: 4px 12px;
             flex-wrap: wrap; }
.tool-head h4 { margin: 0; font-size: 23px; }
.price { margin-left: auto; font-size: 14px; color: var(--c);
         white-space: nowrap; font-variant-numeric: tabular-nums; }
/* THE PRICE AND THE FREE TRIAL. They are what somebody compares one tool
   against another on (2026-09-30), so they sit in the same spot on every
   card: on a front-page card, one line under the name; on a trade's page,
   one above the other at the right of the name. */
.price-row { margin: 3px 0 0; display: flex; flex-wrap: wrap;
             align-items: baseline; gap: 0 11px; }
.price-row .price { margin-left: 0; font-size: 15px; }
.price-box { margin-left: auto; display: grid; justify-items: end;
             text-align: right; gap: 1px; }
.price-box .price { margin-left: 0; }
.free { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.price-box .free { font-size: 12.5px; white-space: nowrap; }
/* Who it works for (#67): "For US businesses", beside the price. */
.region { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.price-row .region { flex-basis: 100%; }
.price-box .region { font-size: 12.5px; white-space: nowrap; }

/* ---- the two groups of tools ------------------------------------------
   Built for one trade, then for any business: plainly named, and no tool in
   both (app._tool_groups sorts them). A rule under each name, in the same
   2px ink as every card's edge. */
.tool-group + .tool-group { margin-top: 48px; }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline;
              gap: 4px 14px; margin: 0 0 18px; padding-bottom: 10px;
              border-bottom: 2px solid var(--ink); }
.group-head h3 { margin: 0; font-size: clamp(21px, 2.5vw, 27px);
                 line-height: 1.15; }
.group-head p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.blurb { margin: 10px 0 16px; font-size: 15px; color: var(--ink-2); }
/* WHAT IT IS, then WHAT IT DOES in two lines: what you give it and what it
   gives back. Each label sits above its line rather than beside it -- a
   card can be 315px wide, and a label column would leave the words a
   sliver. The label is in the tool's own colour so the two rows read as
   one pair at a glance. */
.tool-kind { margin: 4px 0 0; font-size: 14.5px; font-weight: 600;
             color: var(--ink-2); }
.tool-io { margin: 14px 0 18px; display: grid; gap: 12px; }
.tool-io > div { display: grid; gap: 3px; }
.tool-io dt { font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
              text-transform: uppercase; color: var(--c); }
.tool-io dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.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); }

/* ---- websites made with Sitework -------------------------------------
   Each card is drawn in THAT site's own colours, so it looks like the page
   it leads to. The colours come from Sitework already checked, and are
   checked again here (#rrggbb only) before they reach a style. */
.made-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 18px;
}
.made-one {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
  padding: 18px 18px 16px;
  text-decoration: none;
  background: var(--mbg);
  color: var(--mink);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  transition: transform .14s, box-shadow .14s;
}
.made-one:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.made-top { display: flex; align-items: flex-start; gap: 10px; }
.made-top b { flex: 1 1 auto; min-width: 0; font-size: 20px; line-height: 1.15;
              overflow-wrap: anywhere; }
.made-top i { flex: none; font-style: normal; font-size: 12.5px; font-weight: 700;
              background: var(--macc); color: var(--mai); border-radius: 999px;
              padding: 4px 11px; }
.made-meta { font-size: 14.5px; opacity: .85; }
.made-host { margin-top: auto; font-size: 12.5px; opacity: .7;
             overflow-wrap: anywhere; }

/* ---- why --------------------------------------------------------------- */
/* Five points: as a wrapping row of growing blocks, a short last row is
   shared out rather than leaving point 05 alone beside a hole (#25). */
.why-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 34px;
}
.why-grid > .why-one { flex: 1 1 320px; min-width: min(100%, 320px); }
.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; }

/* ---- see one work first (#113, #116) ------------------------------------
   One compact tile per tool that has a no-sign-up page, edged in the
   tool's own colour. A wrapping row of growing tiles, so a short last row
   is shared out instead of leaving a hole (#25); two to a row on a phone so
   ten tools are not ten screens of scrolling. */
.try-grid { list-style: none; margin: 0; padding: 0;
            display: flex; flex-wrap: wrap; gap: 14px; }
.try-grid > li { flex: 1 1 200px; min-width: 0; display: flex; }
.try-one {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px;
  min-height: 112px; padding: 14px 16px 13px;
  background: var(--paper); color: var(--ink); text-decoration: none;
  border: 2px solid var(--ink); border-left: 10px solid var(--c);
  border-radius: 14px; box-shadow: var(--shadow);
  transition: transform .14s, box-shadow .14s;
}
.try-one:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.try-one b { font-size: 18px; line-height: 1.15; }
.try-who { font-size: 14px; color: var(--ink-2); line-height: 1.3; }
.try-go { margin-top: auto; padding-top: 6px; font-weight: 700;
          font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.try-one:hover .try-go { text-decoration: underline; }
@media (max-width: 560px) {
  .try-grid { gap: 10px; }
  .try-grid > li { flex-basis: 140px; }
  .try-one { padding: 12px 12px 11px; border-left-width: 7px; min-height: 0; }
  .try-one b { font-size: 16.5px; }
  .try-who, .try-go { font-size: 13.5px; }
}

/* ---- why trust a small company (#111, #116) -----------------------------
   Four promises: one column on a phone, two by two from 600px, one row of
   four from 1100px -- never three and a lone one. */
.trust-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.trust-grid > .why-one { min-width: 0; }
@media (min-width: 600px) {
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.trust-more { display: flex; flex-wrap: wrap; align-items: center;
              gap: 12px 22px; margin: 30px 0 0; }
.quotes-h { margin: 40px 0 14px; font-size: 21px; }
.quotes { display: flex; flex-wrap: wrap; gap: 18px; }
.quote { flex: 1 1 300px; min-width: min(100%, 300px); margin: 0;
         background: var(--paper); border: 2px solid var(--ink);
         border-radius: var(--r); padding: 18px 20px; }
.quote blockquote { margin: 0 0 10px; font-size: 17px; line-height: 1.45; }
.quote figcaption { font-size: 14px; color: var(--ink-2); font-weight: 600; }

/* ---- 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; }
.addr-help p { margin: 0 0 6px; }
.addr-help ol { margin: 0 0 8px; padding-left: 22px; }
.addr-help li { margin: 2px 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; }
.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: 640px) {
  .hero { padding: 24px 0 0; }
  .hero-strip { margin: 30px calc(-1 * var(--gutter)) 0; }
  .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 {
  /* WAS position:absolute, top-right of the whole card -- and the who-text
     flowed full width beneath it with nothing reserving the badge's space,
     so a long who-text (two lines) ran its second line straight under it.
     Now it sits in the .art-head flex row instead: same visual spot on a
     one-line who-text, but it physically cannot be overlapped, because the
     row gives it its own width and .art-who wraps around what is left. */
  flex: none;
  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 {
  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); }


/* ---------------------------------------------------------------------------
   "WHAT FITS MY TRADE"

   The box is the first thing on the page and it is meant to look like the
   one control that matters -- same hard rule and offset shadow as every
   other pressable thing here, but full width and tall enough to read as an
   invitation rather than a search field tucked in a corner.
   --------------------------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

.tradebox { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px;
  max-width: 640px; }
.tradebox input {
  flex: 1 1 260px; min-width: 0; font: inherit; font-size: 17px;
  padding: 13px 16px; color: var(--ink); background: var(--paper);
  border: 2px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.tradebox input::placeholder { color: #9a9086; }
.tradebox input:focus { outline: none; box-shadow: 8px 8px 0 var(--gold); }
.tradebox .btn { flex: 0 0 auto; }

/* ---------------------------------------------------------------- the
   suggestions under "What do you do?" (tradebox.js)

   The input sits in .tb-field so the list can hang off it. The field keeps
   the old flex sizing the bare input had, or the box would stop growing
   with the row. */
.tradebox .tb-field { position: relative; flex: 1 1 260px; min-width: 0; }
.tradebox .tb-field input { width: 100%; }

.tb-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 8px);
  margin: 0; padding: 4px; list-style: none;
  max-height: 336px; overflow-y: auto;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.tb-list[hidden] { display: none; }

.tb-opt {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 12px; border-radius: 6px;
  font-size: 16px; line-height: 1.25; color: var(--ink);
  cursor: pointer;
}
/* ONE highlight for both the mouse and the arrow keys, so there are never
   two rows looking chosen at once. The script moves .on on hover as well
   as on ArrowDown, rather than leaving :hover to fight it. */
.tb-opt.on { background: var(--gold); }

.tb-name { flex: 1 1 auto; min-width: 0; }
/* The typed part, shown bold. Weight only -- colouring it as well reads as
   a link inside something that is already the thing you are about to press. */
.tb-opt b { font-weight: 700; }

/* Which word matched, when it is not visible in the heading. */
.tb-hit {
  flex: 0 0 auto; font-size: 13.5px; color: var(--ink-2);
  max-width: 45%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-opt.on .tb-hit { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .tb-opt { transition: background .08s linear; }
}

.hero .tradebox { margin-top: 18px; }
/* AND BELT AND BRACES: its own layer above the buttons that follow it, so
   the list is on top even mid-animation, when the transform genuinely does
   make a context and z-index inside it cannot reach out. */
.hero-ask { margin: 22px 0 0; position: relative; z-index: 5; }
.hero-ask .eyebrow { margin-bottom: 0; }
.ask-eg { font-size: 14.5px; color: var(--ink-2); margin: 4px 0 0; }
.ask-eg a { color: var(--ink-2); }
.ask-eg a:hover { color: var(--ink); }
/* TOUCH-SIZED ON A PHONE (#26): the quick links were 16px tall and the
   footer links 23px -- easy to miss with a thumb. About 44px each now. */
@media (max-width: 640px) {
  .ask-eg { line-height: 1.25; }
  .ask-eg a { display: inline-block; padding: 12px 1px; }
  .foot-links { row-gap: 0; }
  .foot-links a { display: inline-block; padding: 11px 0; }
}
/* The page-not-found page (#80): its box and a way back to every tool. */
.oops .hero-ask { margin-top: 26px; }
.oops-go { margin-top: 22px; }

.ask { padding: 34px 0 6px; }
/* Same guarantee as .hero-ask: the suggestion list hangs out of this
   block, so the block itself has to outrank whatever follows it. */
.ask-in { max-width: min(900px, 100%); position: relative; z-index: 5; }
.ask h1 { margin: 2px 0 0; font-size: clamp(34px, 6vw, 62px);
  text-wrap: balance; }

.shape { margin: 16px 0 6px; font-size: 17px; color: var(--ink-2);
  max-width: 66ch; }
.shape-guess { border-left: 4px solid var(--gold); padding-left: 14px; }

.answer { padding: 8px 0 0; }
.answer-h { margin: 26px 0 16px; font-size: clamp(22px, 3vw, 30px); }

.fits { display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.fit {
  position: relative; padding: 20px 22px 22px 26px;
  background: var(--paper); border: 2px solid var(--rule);
  border-radius: var(--r); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
/* The tool's own colour, the same one its card carries on the front page,
   so the thing you clicked and the thing you land on are visibly one
   object. */
.fit::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 10px; background: var(--c);
  border-radius: calc(var(--r) - 2px) 0 0 calc(var(--r) - 2px); }
.fit-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fit-head h3 { margin: 0; font-size: 25px; }
.fit-rank {
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  background: var(--c); color: #fff; border-radius: 999px;
  padding: 3px 9px; align-self: center;
}
.fit-head .price { margin-left: 0; font-weight: 700; font-size: 15px;
  color: var(--ink-2); }
.fit-why { margin: 0; font-size: 16.5px; line-height: 1.5; max-width: 60ch; }
.fit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.fit-chips span {
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px;
  border: 1.5px solid var(--rule); color: var(--ink-2);
}
.fit .btn { align-self: flex-start; margin-top: 2px; }
.fit .by { font-size: 13px; color: var(--ink-2); }

.nofit { border: 2px dashed var(--rule); border-radius: var(--r);
  padding: 22px 24px; max-width: 70ch; background: var(--paper-2); }
.nofit h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 30px); }
.nofit p { margin: 0 0 12px; color: var(--ink-2); font-size: 16.5px; }

.rest { margin: 34px 0 0; }
/* THE PILLS BELONG TO ONE LIST: "The other N" on a trade's answer page.
   They used to hang off `.rest` alone -- which is also the plain bullet
   list on the desk, the tool page, the sell pages -- so any link inside
   one of those came out as a full-width pill that turned solid black on
   hover. That was the bar under "1 new seller to approve" on JT's desk. */
.rest-tools h3 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 10px; }
.rest-tools ul { list-style: none; margin: 0; padding: 0; display: flex;
  flex-wrap: wrap; gap: 8px; }
.rest-tools a { display: flex; align-items: baseline; gap: 8px;
  padding: 8px 13px; border: 2px solid var(--rule); border-radius: 999px;
  color: var(--ink); text-decoration: none; background: var(--paper); }
.rest-tools a:hover { background: var(--c); color: #fff; border-color: var(--c); }
.rest-tools a span { font-size: 13px; opacity: .72; }

.alltrades { margin: 70px 0 0; }
.trade-list { list-style: none; margin: 0; padding: 0; columns: 5 200px;
  column-gap: 26px; }
.trade-list li { break-inside: avoid; margin: 0 0 5px; }
.trade-list a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.trade-list a:hover { color: var(--ink); text-decoration: underline; }

/* THE LIST FOLDED AWAY under one trade's answer (bug list #122): one line
   that opens it, instead of 235 links of phone screen. /for itself shows
   it open, with no fold. */
.alltrades-fold > summary {
  cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ink);
  padding: 12px 0; list-style-position: inside;
}
.alltrades-fold > summary:hover { text-decoration: underline; }
.alltrades-fold > summary:focus-visible { outline: 3px solid var(--gold);
  outline-offset: 3px; border-radius: 4px; }
.alltrades-fold[open] > summary { margin-bottom: 14px; }

/* "Type your trade first." under the box (bug list #27). Its own line,
   the full width of the form, so it never squeezes the button. */
.tradebox .tb-err { flex: 1 0 100%; margin: 0; font-size: 15px;
  font-weight: 600; color: var(--bad); }
.tradebox .tb-err[hidden] { display: none; }

@media (max-width: 640px) {
  .fits { grid-template-columns: 1fr; }
  .tradebox .btn { width: 100%; }
}


/* "Call me" -- the name shown top right instead of an email address. */
.named{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:14px 0 22px}
.named label{font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-2)}
.named input{font:inherit;font-size:15px;padding:8px 12px;width:200px;
  color:var(--ink);background:var(--paper);
  border:2px solid var(--rule);border-radius:var(--r)}
.named input:focus{outline:none;border-color:var(--ink)}
.named .tiny{flex:1 1 240px}

/* ---- hero warmth --------------------------------------------------------
   The page was paper and ink and one gold button: right for a trade sign,
   and cold as the first thing anybody sees. This is the whole of the
   change -- a warm wash that fades out before the fold, the gold carried
   under the headline, and the box given a little more weight than the
   things around it. Nothing here should be nameable at a glance. */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 420px at 12% -8%,
                    rgba(224, 160, 58, .13), transparent 62%),
    radial-gradient(900px 380px at 88% -14%,
                    rgba(15, 123, 84, .07), transparent 60%);
}
/* the warmth has to stop somewhere, and a hard edge would be the one thing
   anybody noticed about it */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
}
.hero-in { position: relative; z-index: 1; }
/* THE BANNER HAS TO SIT ABOVE THAT FADE TOO. It is the last thing in the
   hero, so the fade's bottom 120px -- the part that is nearly solid paper --
   was painted straight over it: every trade washed out to a ghost, and only
   the two ends that stick out into the side margins, past the fade's edge,
   stayed clear. Its own background is solid, so lifting it hides the fade
   behind it and the wash still blends everywhere else. */
.hero-strip { position: relative; z-index: 1; }
/* ...AND SO DOES EVERYTHING ELSE IN A HERO. Only the front page wraps its
   hero in .hero-in; every other page (/sell, /terms, a tool page, the seller
   pages) puts its words and buttons straight in the section, so the fade was
   drawn over the last 120px of them -- JT, 2026-09-27: "i cant rlly see some
   of the text it fades away". Every child sits above the fade; the fade then
   only ever blends the background wash, which is all it was for. */
.hero > * { position: relative; z-index: 1; }

/* a short gold rule under the headline, the width of a few words */
.hero h1::after {
  content: "";
  display: block;
  width: 88px; height: 5px;
  margin: 18px 0 0;
  border-radius: 3px;
  background: var(--gold);
}

/* the box is the point of the page, so it reads as a panel rather than as
   two controls floating on the ground */
.hero-ask {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(26, 24, 21, .10);
  border-radius: 16px;
  padding: 16px 18px 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
  max-width: 760px;
}
.hero-ask .eyebrow { margin-bottom: 6px; }
.ask-eg { margin-top: 8px; }

/* each trade in its own colour, a shade stronger than it was */
.strip-run span { opacity: .92; }

/* NO DARK VARIANT HERE, on purpose. This page is deliberately one world --
   paper and ink, like a trade sign -- and nothing else in the stylesheet
   redefines --paper. A prefers-color-scheme block would have fired on a
   machine set to dark and left this panel at 4% white ON THE LIGHT GROUND,
   which is to say invisible. Measured, not guessed. */

/* ---- the selling half ---------------------------------------------------
   Same paper and ink as the rest: 2px rules, a hard offset shadow rather
   than a blur, gold rationed to the one thing that is an action. The room
   meter is the only new idea here, and it earns its place -- JT's whole
   instruction for the hosting tier was "give them a limit, and it shows
   them how much the limit is". */

.room-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.room-head h2 { margin: 0; }
.room-plan {
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2);
}
.room-grid {
  display: grid; gap: 18px; margin: 0 0 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.room-one { min-width: 0; }
.room-nums { font-size: 15px; color: var(--ink-2); margin: 0 0 8px; }
.room-nums b { font-size: 26px; color: var(--ink); }

/* THE BAR IS NEVER THE ONLY SIGNAL. The figures above it say the same
   thing in words, so somebody who cannot tell the fill from the track --
   or is reading it printed -- still knows where they are. */
.bar {
  height: 10px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--paper); overflow: hidden;
}
.bar span {
  display: block; height: 100%; background: var(--ink);
  border-radius: 999px;
}
.bar span.full { background: var(--bad); }

.plan-grid {
  display: grid; gap: 16px; margin: 14px 0 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.plan {
  border: 2px solid var(--ink); border-radius: var(--r);
  padding: 18px 20px; background: var(--paper);
}
.plan.on { box-shadow: 6px 6px 0 var(--ink); }
.plan h3 { margin: 0 0 4px; }
.plan-price { font-size: 24px; font-weight: 700; margin: 0 0 10px; }
.plan-price .dim { font-size: 15px; font-weight: 400; }
.plan-now {
  margin: 10px 0 0; font-size: 13px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-2);
}

/* one listing waiting to be looked at */
.rev {
  border-top: 2px solid var(--ink); padding: 16px 0 18px;
}
.rev:first-of-type { border-top: 0; }
.rev-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.rev-head b { font-size: 19px; }
.rev form { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
/* the note box takes the room, the two buttons keep their own size */
.rev form input[name=note] { flex: 1 1 260px; min-width: 0; }
.rev form button { flex: 0 0 auto; }

.two-up {
  display: grid; gap: 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.gen-add {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin: 16px 0 0;
}
.gen-add input { flex: 1 1 240px; min-width: 0; }
.gen-add button { flex: 0 0 auto; }

/* KEYED ON THE ELEMENT, not on a class. The stylesheet gives every input
   its full row width, and a select in one of these rows would otherwise
   eat the row and squash whatever sits beside it -- which has happened
   here twice before, once to a GitHub token box and once to a checkbox. */
.rev form select,
.gen-add select,
.tbl select { width: auto; }
/* On a phone a wide table scrolls inside itself instead of pushing the
   whole page sideways (found on the owner's desk, 2026-09-29). */
@media (max-width: 700px) {
  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* The way in on /sell. A row, so the secondary link sits beside the
   button rather than under it and the two read as one choice. */
.hero-cta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 22px 0 10px;
}

/* Connecting a tool up: the two keys, and the code to paste. */
.wiring > li { margin: 0 0 18px; }
.keys {
  border: 2px solid var(--ink); border-radius: var(--r);
  padding: 16px 18px; margin: 18px 0; background: var(--paper-2, var(--paper));
}
.keybox {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: 0;
}
.code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55;
  border: 2px solid var(--ink); border-radius: var(--r);
  padding: 14px 16px; margin: 10px 0 14px;
  /* Code is the one thing that must NOT be reflowed to fit, so it gets
     its own scrollbar rather than making the page scroll sideways. */
  overflow-x: auto; white-space: pre;
}
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em;
}

/* The owner's desk: whether each tool answered when it was asked how it
   is doing. Colour AND a title that says why, so it is not carried by hue
   alone. */
.desk-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px;
}
.desk-dot.up { background: #1d7a3f; }
.desk-dot.down { background: #b23a1f; box-shadow: 0 0 0 2px #f6d9d2; }

/* ---- the owner's notification center (admin.html #whats-new) ----------- */
.topnav a.nav-admin { position: relative; }
.nav-count { display: inline-block; min-width: 20px; padding: 1px 6px;
  margin-left: 4px; border-radius: 999px; background: var(--bad);
  color: #fff; font-size: 12px; font-weight: 700; line-height: 18px;
  text-align: center; font-variant-numeric: tabular-nums; }
.feed-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
/* Each GROUP has one colour, used for its picture, its word and its tab,
   so the kind of thing reads before the words do. Colours are deep enough
   to carry white-on-colour and to read as text on the paper. */
#whats-new { --g-asks: #2f5bd3; --g-people: #0f7a6c; --g-money: #1e8a4c;
  --g-lost: var(--bad); --g-other: #6b6358; }
.g-asks { --g: var(--g-asks); --g-soft: #eaf0fd; }
.g-people { --g: var(--g-people); --g-soft: #e4f4f1; }
.g-money { --g: var(--g-money); --g-soft: #e6f5ec; }
.g-lost { --g: var(--g-lost); --g-soft: #fbeceb; }
.g-other { --g: var(--g-other); --g-soft: var(--paper-2); }

.feed-waiting { display: flex; gap: 12px; align-items: center; margin: 10px 0 0;
  padding: 12px 14px; border-radius: 12px; background: #eaf0fd;
  border: 2px solid var(--g-asks); font-size: 15px; }
.feed-since { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 12px 0 0; }
.feed-since-lead { font-size: 14px; color: var(--ink-2); margin-right: 2px; }
.feed-chip { display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 8px; border-radius: 999px; border: 0;
  background: var(--g-soft); color: var(--g); font: inherit; font-size: 14px;
  cursor: pointer; }
.feed-chip:disabled { cursor: default; }
.feed-chip b { font-variant-numeric: tabular-nums; }
.feed-chip-ico { display: inline-flex; }
.feed-chip-ico svg { width: 16px; height: 16px; }
.feed-jump { background: none; border: 0; padding: 0; margin-left: 4px;
  font: inherit; font-size: 14px; color: var(--g-asks);
  text-decoration: underline; cursor: pointer; }

.feed-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 4px;
  padding-bottom: 10px; border-bottom: 1px solid var(--paper-2); }
.feed-tab { padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--paper-2); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.feed-tab:hover { border-color: var(--g, var(--ink)); }
.feed-tab.is-on { background: var(--g, var(--ink)); border-color: var(--g, var(--ink));
  color: #fff; }
.feed-tab-n { font-weight: 500; opacity: .75; margin-left: 2px;
  font-variant-numeric: tabular-nums; }

.feed { list-style: none; margin: 8px 0 0; padding: 0; }
.feed-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px;
  align-items: start; padding: 12px 10px; border-top: 1px solid var(--paper-2);
  border-radius: 10px; }
.feed-item:first-child { border-top: 0; }
.feed-item.is-new { background: #fff6df; }
/* An ask still waiting on him is edged in its colour whether or not it is
   new, so an old unanswered message can never pass for a quiet row. */
.feed-item.is-open { box-shadow: inset 4px 0 0 var(--g-asks); background: #f3f6fe; }
.feed-item.is-new.is-open { background: #fff6df; }
.feed-item.is-handled { opacity: .72; }
.feed-divider { list-style: none; display: flex; align-items: center; gap: 10px;
  margin: 10px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); }
.feed-divider::before, .feed-divider::after { content: ""; flex: 1;
  border-top: 1px solid var(--paper-2); }
.feed-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; background: var(--g);
  color: #fff; flex: none; }
.feed-waiting .feed-ico { width: 32px; height: 32px; }
.feed-body { min-width: 0; }
.feed-body p { margin: 0; }
.feed-top { font-size: 15px; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 8px; }
.feed-kind { font-weight: 700; color: var(--g); }
.feed-where { color: var(--ink-2); font-size: 13px; }
.feed-new { display: inline-block; padding: 0 7px;
  border-radius: 999px; background: var(--gold); color: var(--ink);
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; }
.feed-done-tag { font-size: 12px; font-weight: 600; color: var(--g-money); }
.feed-who { font-size: 14px; overflow-wrap: anywhere; margin-top: 2px !important; }
.feed-said { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.feed-quote { margin: 8px 0 0; padding: 10px 14px; border-radius: 10px;
  background: var(--paper); border: 1px solid #d5def5;
  border-left: 4px solid var(--g-asks); font-size: 15px; line-height: 1.5;
  white-space: pre-line; overflow-wrap: anywhere; max-width: 72ch; }
.feed-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 10px; }
.feed-doneform { margin: 0; }
.feed-btn { display: inline-block; padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--g-asks); background: var(--paper);
  color: var(--g-asks); font: inherit; font-size: 13.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; }
.feed-btn:hover { background: #eaf0fd; }
.feed-btn.is-main { background: var(--g-asks); color: #fff; }
.feed-btn.is-main:hover { background: #2349ad; }
.feed-doneform .linkish { background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink-2); text-decoration: underline; }
.feed-when { font-size: 12px; color: var(--ink-2); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.feed-none { margin: 12px 0 0; }
@media (max-width: 560px) {
  .feed-item { grid-template-columns: 36px 1fr; }
  .feed-when { grid-column: 2; }
}
/* Two lists (JT, 2026-10-10): asks, then sign-ups. Without the script both
   show, each under its heading; with it, the tabs pick one. */
.feed-panel[hidden] { display: none; }
.feed-panel-title { margin: 18px 0 0; font-size: 16px; color: var(--g); }
#whats-new.has-tabs .feed-panel-title { position: absolute; width: 1px;
  height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* HIDDEN: small and quiet. Nothing in it is waiting on him. */
.feed-hidden { margin: 18px 0 0; border-top: 1px solid var(--paper-2);
  padding-top: 10px; }
.feed-hidden > summary { display: inline-block; cursor: pointer;
  font-size: 13px; color: var(--ink-2); text-decoration: underline;
  list-style: none; }
.feed-hidden > summary::-webkit-details-marker { display: none; }
.feed-hidden-lead { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.feed-hidden-list .feed-item { padding: 8px 10px; opacity: .85; }
.feed-hidden-list .feed-ico { width: 28px; height: 28px; border-radius: 8px; }
.feed-hidden-list .feed-ico svg { width: 16px; height: 16px; }
.feed-hidden-list .feed-said { max-height: 6.2em; overflow: hidden; }
.feed-why { font-size: 12px; font-weight: 600; color: var(--ink-2);
  overflow-wrap: anywhere; }

/* ---- where a seller's tool lives: two buttons (JT, 2026-09-27) ----------
   "select a button to either enter their own website or have the website
   on JTS". The chosen one is filled; the other waits, outlined. */
.where-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
              margin: 8px 0 12px; }
.where-opt { display: flex; flex-direction: column; align-items: flex-start;
             gap: 4px; text-align: left; font: inherit; color: var(--ink);
             background: var(--paper); border: 2px solid var(--ink);
             border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.where-opt b { font-size: 16px; }
.where-opt span { font-size: 14px; color: var(--ink-2); }
.where-opt:hover { background: #fff6e2; }
.where-opt.on { background: var(--gold); box-shadow: 4px 4px 0 var(--ink); }
.where-opt.on span { color: var(--ink); }
.where-opt:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }
.where-opt:disabled { cursor: not-allowed; opacity: .55; }
.where-opt:disabled:hover { background: var(--paper); }
@media (max-width: 560px) { .where-pick { grid-template-columns: 1fr; } }
.addr-help ul { margin: 0 0 8px; padding-left: 22px; }
.build-err { white-space: pre-wrap; font-size: 14px; }
details.adv { margin: 16px 0 8px; }
details.adv summary { cursor: pointer; font-weight: 700; }

/* ---- the owner's desk: tools not published yet (admin.html #not-published)
   A new tool is live on its own address but JT's alone until he says
   publish (2026-09-30). Its real card on the left -- the same macro the
   front page draws, so the preview cannot be a different card -- and the
   door in on the right. Stacked on a phone. */
.pv-lead { margin: 0 0 18px; color: var(--ink-2); max-width: 70ch; }
.pv-one { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
          gap: 20px 28px; align-items: start; }
.pv-one + .pv-one { margin-top: 26px; padding-top: 22px;
                    border-top: 2px solid var(--rule); }
.pv-card .tool { max-width: 340px; }
.pv-what h3 { margin: 0 0 4px; font-size: 22px; }
.pv-addr { margin: 0 0 14px; font-size: 15px; }
.pv-btns { display: flex; flex-wrap: wrap; align-items: center;
           gap: 10px 18px; margin: 0 0 10px; }
.pv-pill { display: inline-block; margin-left: 8px; padding: 1px 8px;
           border-radius: 999px; font-size: 11.5px; font-weight: 700;
           letter-spacing: .04em; background: var(--gold); color: var(--ink);
           text-decoration: none; vertical-align: 2px; }
@media (max-width: 760px) { .pv-one { grid-template-columns: 1fr; } }

/* ---- accounts and sign-in (bug list 2026-10-04: #2, #7, #8, #13, #17,
   #19, #123, #247) ---------------------------------------------------------
   THE HEADER ON A PHONE (#13). It wrapped to 120px signed out and, signed
   in, the pill held the whole email address and ran the page off the side.
   Now nothing in it wraps. Up to 640px wide the links take their short
   names (Tools, Sell, Sign in) and "Your tools" goes (the pill goes to the
   same page); the long names need about 500px, so a narrower breakpoint
   left the 481-520px band running off the side. Below 480px the spacing
   tightens too. The pill is the one thing that may shrink: a long display
   name is cut short with an ellipsis rather than pushing the page wide. */
.topnav { min-width: 0; }
.topnav a { white-space: nowrap; flex: none; }
.nav-short { display: none; }
.topnav .nav-cta { display: inline-block; max-width: 18em; min-width: 4.5em;
                   flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis;
                   vertical-align: middle; }
@media (max-width: 640px) {
  .nav-long, .topnav .nav-wide { display: none; }
  .nav-short { display: inline; }
  .topnav .nav-cta { max-width: 11em; }
}
@media (max-width: 480px) {
  .top { padding: 12px 0 8px; gap: 10px; }
  .jts-mark { width: 36px; height: 36px; }
  .topnav { gap: 2px; }
  .topnav a { padding: 8px 10px; font-size: 14.5px; }
  .topnav .nav-cta { max-width: 9em; }
}

/* Sign in and Create account side by side, each its own form (#19); one
   column on a phone. Also the three boxes of "Your account". */
.auth-grid { display: grid; gap: 0 24px; align-items: start;
             grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.auth-grid .form-card { margin: 18px 0; }
.auth-grid .form-card h3 { margin: 0 0 12px; font-size: 20px; }
.acct-h { margin: 32px 0 6px; font-size: 28px; }

/* A <label for> above its box (#7, #17): the same look the wrapping
   labels have always had. */
.fld > label:not(.fld-label) {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 6px;
}
.fld > label em, .fld-label i { font-style: normal; text-transform: none;
  letter-spacing: 0; font-weight: 500; opacity: .8; }
.fld textarea { width: 100%; }
/* The rule under a password box (#8), and what is wrong with a box, said
   beside it (STANDARDS section 7). */
/* Written .fld .x so they beat the older ".fld > span" label look (small
   capitals), which would otherwise shout the hint in upper case. */
.fld .fld-hint, .fld-hint { display: block; margin: 6px 0 0; font-size: 13.5px;
            font-weight: 400; letter-spacing: 0; text-transform: none;
            color: var(--ink-2); }
.fld .fld-bad, .fld-bad { display: block; margin: 6px 0 0; font-size: 14px;
           font-weight: 600; letter-spacing: 0; text-transform: none;
           color: var(--bad); }
.fld [aria-invalid="true"] { border-color: var(--bad); }
.consent { margin: 4px 0 16px; }

/* A password box with its Show button inside the same rounded box. The
   button is only drawn once the script that works it has run. */
.pw-row, .fld .pw-row { position: relative; display: block; margin: 0;
          letter-spacing: 0; text-transform: none; font-weight: 400; }
.pw-row input { padding-right: 76px; }
.pw-show {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  min-height: 34px; padding: 4px 10px; border: 0; border-radius: 8px;
  background: var(--paper-2); color: var(--ink); cursor: pointer;
  font: 600 14px Archivo, "Segoe UI", sans-serif;
}
.pw-show:hover { background: #ece4d5; }

/* The box nobody sees, on the public forms: only a robot fills it in. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px;
      overflow: hidden; }

/* JT's desk: who asked to be told when a tool opens (#119). */
.wl-one + .wl-one { margin-top: 22px; padding-top: 18px;
                    border-top: 2px solid var(--rule); }
.wl-one h3 { margin: 0 0 8px; }
.wl-btns { display: flex; flex-wrap: wrap; align-items: center;
           gap: 10px 18px; margin: 12px 0 0; }
.wl-btns form, .wl-one td form { margin: 0; }
.wl-one .linkish, .wl-btns .linkish {
  background: none; border: 0; padding: 0; font: inherit; font-size: 14px;
  color: var(--ink-2); text-decoration: underline; cursor: pointer; }

/* ---- Pricing and About in the header (#118, #111) ----------------------
   Only where there is room: they are in the footer on every page, so a
   phone header keeps its one row (#13). From 701px up they fit beside
   Browse tools and the sign-in pill (about 550px of the 664px a 701px
   screen leaves), so a 737px tablet shows them too; signed in, the name
   pill is the one thing that gives way (ellipsis). Below that, the phone
   header is unchanged. */
@media (max-width: 700px) { .topnav .nav-roomy { display: none; } }

/* ---- the footer's two halves (#72, STANDARDS 4) -------------------------
   The name and the hub's own pages on the left, the five links every JTS
   site shares on the right. */
.foot-own { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.foot-own a { text-decoration: none; color: var(--ink-2); font-weight: 600; }
.foot-own a:hover { color: var(--ink); }
@media (max-width: 640px) {
  .foot-own { row-gap: 0; }
  .foot-own a { display: inline-block; padding: 11px 0; }
}

/* ---- the legal pages (#75, #76, #77) -----------------------------------
   The shared core (templates/_jts_*_core.html) is a run of h2 sections;
   on the hub they sit in a card like every other page's words. */
.legal-card h2 { font-size: 21px; margin: 26px 0 8px; }
.legal-card > h2:first-child,
.legal-card > .jts-legal > h2:first-child { margin-top: 0; }
.jts-legal p, .jts-legal ul { font-size: 16px; color: var(--ink-2);
                              line-height: 1.55; margin: 0 0 10px; }
.jts-legal ul, .legal-card ul.lead { padding-left: 20px; }
.jts-legal li, .legal-card ul.lead li { margin: 0 0 8px; }
.jts-legal b { color: var(--ink); }
.jts-legal a { color: var(--ink); }
.jts-legal-date { font-size: 14px; margin-top: 16px !important; }
.legal-card ul.lead { font-size: 16px; line-height: 1.55; }

/* ---- About and Pricing (#111, #118) ------------------------------------ */
.card .about-h { margin-top: 26px; font-size: 21px; }
.about-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
.price-group { max-width: 980px; margin: 0 0 30px; }
.price-group-h { font-size: 24px; margin: 8px 0 12px; }
.price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pricing-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 8px 24px; align-items: start;
  background: var(--paper); border: 2px solid var(--ink);
  border-left: 10px solid var(--c); border-radius: 14px;
  padding: 16px 18px;
}
.price-name { font-weight: 700; font-size: 19px; color: var(--ink);
              text-decoration: none; }
.price-name:hover { text-decoration: underline; }
.price-tag { margin: 4px 0 0; color: var(--ink-2); font-size: 15.5px; }
.price-region { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2);
                font-weight: 600; }
.price-cost p { margin: 0; }
.price-main { font-weight: 700; font-size: 18px; }
.price-year { font-size: 15px; color: var(--ink-2); }
.price-free { font-size: 15px; margin-top: 2px !important; }
.price-more { font-size: 14px; color: var(--ink-2); margin-top: 4px !important; }
@media (max-width: 640px) {
  .pricing-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the product in the hero (#112) ------------------------------------
   Words on the left, two real tool screens on the right from 1100px; the
   screens go under the words on anything narrower. The phone overlaps the
   laptop's corner, so the pair reads as one picture. */
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.hero-shot { position: relative; margin: 0; max-width: 680px;
             padding: 0 0 26px 0; }
.shot-laptop {
  background: #1b1d22; border: 2px solid var(--ink); border-radius: 14px;
  padding: 10px 10px 12px; box-shadow: var(--shadow);
  margin-right: 70px;
}
.shot-laptop img, .shot-phone img { display: block; width: 100%; height: auto;
                                    border-radius: 6px; }
.shot-phone {
  position: absolute; right: 0; bottom: 18px; width: 28%;
  min-width: 108px; max-width: 190px;
  background: #1b1d22; border: 2px solid var(--ink); border-radius: 22px;
  padding: 7px; box-shadow: 4px 4px 0 var(--ink);
}
.shot-phone img { border-radius: 15px; }
.hero-shot figcaption { margin-top: 12px; font-size: 13.5px;
                        color: var(--ink-2);
                        /* clear of the phone, which hangs over this corner */
                        padding-right: clamp(118px, 31%, 200px); }
@media (min-width: 1100px) {
  .hero-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
              align-items: center; gap: 48px; }
  .hero-row .hero h1, .hero-row h1 { font-size: clamp(38px, 5vw, 66px); }
  .hero-shot { max-width: none; }
}
@media (max-width: 480px) {
  .shot-laptop { margin-right: 46px; padding: 6px 6px 8px; border-radius: 10px; }
  .shot-phone { border-radius: 16px; padding: 5px; }
  .shot-phone img { border-radius: 11px; }
}