/* Owners Row — prototype. Brand per BRAND.md: orange #F35B1C, black field,
   heavy condensed caps, flat and hard-edged. No gradients, no shadows. */

:root {
  --orange: #F35B1C;
  --ink:    #111111;
  --ink-2:  #55504B;
  --ink-3:  #8C867F;
  --rule:   #D5D1CB;
  --rule-2: #EDEAE5;
  --paper:  #FFFFFF;
  --shade:  #F4F2EF;
  --flag:   #A8281D;

  --display: "Archivo Narrow", "Oswald", "Antonio", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --body:    -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  margin: 0;
  background: var(--shade);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Variant G at app scale. The mark is an SVG with OUTLINED PATHS — see
   app/mark.svg — so it cannot reflow. It was live text in a font stack whose
   first four faces are installed on none of the target devices, which is why
   the wordmark sat off-center and the S ran past the plate.

   ONE number below. The header height is a design decision; the mark's width
   follows from its own ratio and the bars take what is left. Nothing here
   depends on a font. */
.hdr {
  --hdr-h: 80px;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: stretch;
  height: var(--hdr-h);
  background: var(--ink);
}
.plate {
  flex: none;
  height: var(--hdr-h);
  width: auto;
  aspect-ratio: 600 / 364;
  display: block;
}
.hbars { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.band {
  background: var(--ink);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 16px 8px 14px;
}
.band .step {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFF;
  opacity: 0.72;
  text-align: right;
}
.strip {
  background: var(--orange);
  color: #111;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 16px 6px 14px;
  text-align: right;
}

/* Checklist. Big tap targets — this is filled standing beside a vehicle on a
   phone, not at a desk. Ticked state is a filled chip so a glance shows what has
   been claimed. */
.ckgrp { margin-bottom: 14px; }
.ckh {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px;
}
.cks { display: flex; flex-wrap: wrap; gap: 6px; }
.ck {
  display: inline-flex; align-items: center; gap: 7px;
  border: 2px solid var(--rule); padding: 8px 11px;
  font-size: 15px; line-height: 1.25; cursor: pointer;
  user-select: none; background: var(--surface);
}
.ck input { margin: 0; width: 15px; height: 15px; accent-color: var(--orange); flex: none; }
.ck.on { border-color: var(--ink); background: var(--ink); color: #FFF; font-weight: 600; }
.ck.iss.on { border-color: var(--orange); background: var(--orange); color: #111; }

.app {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

/* ---------- Header ---------- */

/* ---------- Layout ---------- */

main { padding: 18px 16px 30px; flex: 1; }
h1 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 22px;
  margin: 0 0 4px;
  line-height: 1.05;
}
.sub { color: var(--ink-2); font-size: 15.5px; line-height: 1.45; margin: 0 0 18px; }
/* A second h1 on the same screen. Same size and weight as the first — it names
   a second thing the app does, not a subsection of the first — with a rule above
   it so the two do not read as one run-on heading. */
h1.second {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 2px solid var(--ink);
}

/* ---------- Fields ---------- */

.fld { margin-bottom: 15px; }
.lb {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 3px;
}
.req { color: var(--orange); margin-left: 5px; font-size: 9px; }
.hint { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); margin: 0 0 7px; }

input[type=text], input[type=tel], input[type=email], input[type=number], textarea, select {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 11px 12px;
  font-size: 16px; /* 16px stops iOS zooming on focus */
  font-family: var(--body);
  color: var(--ink);
  background: #FCFBFA;
  -webkit-appearance: none;
  appearance: none;
}
textarea { min-height: 78px; resize: vertical; line-height: 1.45; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--orange); outline-offset: -2px; }

select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
  border-color: var(--ink);
  font-weight: 600;
}
select:disabled { opacity: 0.4; border-color: var(--rule); }
/* A full row stays on the list, grayed. Safari and Firefox honor this; Chrome
   renders its own color for a disabled option but still refuses selection, so
   the behavior is right everywhere and only the shade varies. */
option:disabled { color: var(--ink-3); }

/* Same treatment as .tick.off and .opt.off, applied to a switch that has
   nothing to switch on — a "Show my email" with no email on file. */
.tog.off { opacity: 0.35; pointer-events: none; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- Group heading ---------- */

/* Section headings, app wide. These were 13px against a 22px h1 and 11.5px body
   copy — barely a point and a half above the smallest text on the screen, so a
   section read as a caption rather than as a division. The ladder is now
   22 / 18 / 12.5 and the divisions are visible at a glance. */
.grp {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
  margin: 30px 0 13px;
}
.grp span {
  font-family: var(--body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink-3);
  display: block;
  margin-top: 4px;
}

/* Select all / none. Sits on the heading's own line, right-aligned, so it does
   not push the "n of m ticked" count onto a third row on a phone — the heading
   block is already two lines there.
   ⚠️ Deliberately quiet: it is a convenience, not the thing the screen is for,
   and an orange button here would compete with Print. */
.pickall {
  float: right;
  font-family: var(--body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line, #ccc);
  border-radius: 5px;
  padding: 6px 11px;
  margin-left: 12px;
  cursor: pointer;
}
.pickall:hover { border-color: var(--ink); }
.pickall:focus-visible { outline: 2px solid var(--accent, #F35B1C); outline-offset: 2px; }

/* ---------- Buttons ---------- */

.btn {
  display: block;
  width: 100%;
  background: var(--ink);
  color: #FFF;
  border: 0;
  border-radius: 0;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 17px;
  font-weight: 700;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  margin-top: 6px;
}
.btn.orange { background: var(--orange); color: #111; }
/* ⚠️ Secondary, NOT disabled. This used to be muted text inside a 1px rule in
   the palette's lightest grey — which is exactly how the disabled state looks,
   so three live actions on the delivery screen read as dead. Full-strength ink
   on a 2px border: clearly secondary to the orange primary, clearly pressable. */
.btn.ghost {
  background: none;
  color: var(--ink);
  border: 2px solid var(--ink);
  font-size: 14px;
  padding: 11px;
}
.btn.ghost:active { background: var(--ink); color: #FFF; }
.btn:disabled, .btn.off {
  opacity: 0.4;
  cursor: not-allowed;
  background: none;
  color: var(--ink-3);
  border: 2px dashed var(--rule);
}
/* Copy confirmed. Orange on black rather than a green tick — the palette has two
   colors and a third one for feedback would be a third one everywhere. */
.btn.done { background: var(--orange); color: #111; }

/* ---------- Copy blocks — post it elsewhere ---------- */

/* Shown in full, not behind a "preview" fold. The seller is about to paste this
   into somebody else's site under his own name; he reads it first or he is
   posting something he has not seen. Selectable so a desktop user who blocks
   clipboard access can still drag through it. */
.cpbox {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--shade);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  padding: 12px 13px;
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
  user-select: text;
  -webkit-user-select: text;
}
.back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  padding: 12px 0 0;
  cursor: pointer;
}

/* ---------- Toggles / ticks ---------- */

.tog {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--rule-2);
  padding: 12px 0;
  cursor: pointer;
}
.tog:last-of-type { border-bottom: 1px solid var(--rule-2); }
.tog .t { font-size: 15px; }
.tog .d { font-size: 13px; line-height: 1.4; color: var(--ink-3); display: block; margin-top: 2px; }
.sw {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border: 1px solid var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.sw.on { background: var(--ink); color: #FFF; }
.sw.off { color: var(--ink-3); border-color: var(--rule); }

.tick {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-2);
  cursor: pointer;
}
.tick .box {
  width: 18px; height: 18px;
  border: 2px solid var(--ink);
  font-size: 13px;
  line-height: 15px;
  text-align: center;
  margin-top: 1px;
  color: transparent;
}
.tick.on .box { background: var(--ink); color: #FFF; }
.tick p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--ink-2); }
.tick.loud { border: 2px solid var(--ink); padding: 13px; margin-top: 8px; }
.tick.loud p { color: var(--ink); }
.tick.off { opacity: 0.35; pointer-events: none; }
.whyoff {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 6px;
}

/* ---------- Capture buttons ---------- */

.cap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--rule);
  padding: 12px;
  font-size: 14px;
  margin-bottom: 6px;
  cursor: pointer;
}
.cap .go {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  padding: 6px 9px;
  white-space: nowrap;
}
.cap.done { border: 2px solid var(--ink); }
.cap.done .go { background: var(--ink); color: #FFF; }
.cap .sub2 { grid-column: 1 / -1; font-size: 11px; color: var(--ink-3); }

/* ---------- Photos ---------- */

.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.photos .ph { aspect-ratio: 4/3; background: var(--shade); overflow: hidden; position: relative; }
.photos .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos .ph .x {
  position: absolute; top: 0; right: 0;
  background: var(--ink); color: #FFF;
  font-size: 12px; line-height: 1;
  padding: 4px 6px; cursor: pointer;
}
.photos .add {
  aspect-ratio: 4/3;
  border: 1px dashed var(--ink-3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 26px; color: var(--ink-2);
  cursor: pointer;
}
.shot { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; line-height: 1.45; }

/* ---------- Summary ---------- */

.sum { border-top: 2px solid var(--ink); margin: 6px 0 16px; }
.sum div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--rule-2); font-size: 14px;
}
.sum .k { color: var(--ink-2); }
.sum .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.sum .tot { border-bottom: 0; border-top: 2px solid var(--ink); padding-top: 11px; }
.sum .tot .k { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.07em; font-size: 16px; font-weight: 700; color: var(--ink); }
.sum .tot .v { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; }

.stripebox { border: 1px dashed var(--rule); padding: 13px; margin-top: 14px; text-align: center; }
.stripebox .l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 6px; }
.stripebox .card { font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em; color: var(--ink-2); }
.vers { font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding-top: 10px; }

/* ---------- Delivery options ---------- */

.opt {
  border: 1px solid var(--rule);
  padding: 14px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
  cursor: pointer;
}
.opt.primary { border: 2px solid var(--ink); }
.opt .nm { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 16px; font-weight: 700; }
.opt .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.opt .sb { grid-column: 1; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.opt.off { opacity: 0.35; pointer-events: none; }

/* ---------- Option cards, one pattern everywhere ----------
   .opt is the app's single option card: payment methods, delivery options, the
   condition of sale, and the kit tiers. Four separate patterns had grown up and
   a seller should not have to learn a new one on every screen. */

/* A price is the one thing a tag has to shout, so it overrides the mono tag. */
.opt .tag.price {
  font-family: var(--display); font-size: 26px; font-weight: 700;
  color: var(--orange); letter-spacing: 0.01em; line-height: 1;
}
.opt.off .tag.price { color: var(--ink-3); }
.opt.tier { margin-bottom: 12px; }
.tierlist { margin: 6px 0 0; padding: 0; list-style: none; }
.tierlist li { position: relative; padding: 3px 0 3px 16px; line-height: 1.35; }
.tierlist li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--orange); }
.opt.off .tierlist li::before { background: var(--ink-3); }
.tierfoot { font-weight: 700; color: var(--ink) !important; margin-top: 8px; }
/* Why a tier cannot be bought today. Never hidden — a customer should see it
   exists and is coming. */
.tierwhy {
  font-family: var(--mono); font-size: 11px; line-height: 1.4;
  color: var(--flag) !important; margin-top: 8px;
  text-transform: uppercase; letter-spacing: 0.02em;
}

/* The kit entry on the first screen. Orange field rather than a white card —
   it is the product that works anywhere, sitting under a lot that is one place. */
.opt.kitcard { background: var(--orange); border-color: var(--orange); }
.opt.kitcard .nm, .opt.kitcard .sb, .opt.kitcard .tag.price { color: #111; }
.opt.kitcard .kitgo {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; margin-top: 8px; font-weight: 700;
}

/* ---------- Notes / callouts ---------- */

/* VIN row: the field and its scan button on one line. */
.vinrow { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: stretch; }
.vinrow input { margin: 0; letter-spacing: 0.08em; text-transform: uppercase; }
.vinrow .btn { margin: 0; padding: 0 16px; white-space: nowrap; }

/* Camera panel and the confirm step that follows it. */
.scanwrap { border: 2px solid var(--ink); padding: 12px; margin-top: 12px; }
.scanwrap video { width: 100%; display: block; background: #000; aspect-ratio: 4 / 3; object-fit: cover; }
.scanhint { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); margin: 10px 0; }
.scanvin {
  font-family: var(--mono); font-size: 18px; letter-spacing: 0.12em;
  word-break: break-all; margin: 0 0 4px; font-weight: 600;
}

/* One messenger row in the seller form: app, link, remove. */
.socrow { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 6px; margin-bottom: 8px; align-items: stretch; }
.socrow select, .socrow input { margin: 0; min-width: 0; }
.socx {
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  font-size: 18px; line-height: 1; width: 40px; cursor: pointer; padding: 0;
}
.socx:hover { background: var(--ink); color: #FFF; }

/* The app name above its own button on the buyer page. */
.soname {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 12px 0 4px;
}

/* A switched-off contact button. Reads as a control that exists and is closed,
   which is the point — a missing button looks like a seller with no phone. */
.btn.off {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
}

/* The seller's own equipment list on the buyer page. Square markers rather than
   bullets so it reads as the same object as the printed sticker. */
.eqlist { list-style: none; margin: 0 0 16px; padding: 0; font-size: 14.5px; }
.eqlist li { position: relative; padding: 4px 0 4px 18px; line-height: 1.35; border-bottom: 1px solid var(--rule-2); }
.eqlist li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; background: var(--ink); }

.note { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); margin: 9px 0 0; }
.warn { border-left: 3px solid var(--orange); background: var(--shade); padding: 11px 13px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 16px 0 0; }
.err { color: var(--flag); font-size: 12.5px; margin: 8px 0 0; font-weight: 600; }

/* ---------- Progress ---------- */

.prog { display: flex; gap: 3px; padding: 0 16px 12px; background: var(--paper); }
.prog i { flex: 1; height: 3px; background: var(--rule); }
.prog i.on { background: var(--orange); }

/* A line where the control would have been. A ghosted checkbox reads as
   something you were meant to do and failed to — people tap grayed controls to
   find out why they are gray. A sentence cannot be argued with. */
.quiet {
  border-left: 3px solid var(--rule);
  padding: 11px 13px;
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ---------- Back to top ---------- */

/* Fixed to the viewport, not the screen markup, so it survives a re-render and
   is not rebuilt on every tick. Hidden until there is something to go back to —
   a control that is always there on a one-screen step is just clutter. */
.totop {
  position: fixed;
  right: 14px;
  /* Vertically centered, not parked at the bottom corner. On a long tick list
     the thumb is already mid-screen, and a bottom-right button sits exactly
     where the Continue button lives — two different actions in one place is how
     somebody submits a form they meant to scroll. Centering with a negative
     margin rather than a transform keeps transform free for the show/hide. */
  top: 50%;
  margin-top: -22px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: #FFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.14s linear, transform 0.14s linear, visibility 0.14s;
  z-index: 40;
}
.totop.on { opacity: 1; visibility: visible; transform: none; }
.totop svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.totop:active { background: var(--orange); color: #111; }
/* 44px is the tap target; the sticker and any print DOM must never carry it. */
@media print { .totop { display: none !important; } }

/* ---------- The kit checklist ---------- */

.shrow { border-bottom: 1px solid var(--rule-2); padding: 0 0 10px; margin-bottom: 10px; }
.shtick {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0 8px; cursor: pointer; user-select: none;
}
/* The step number, because the numbers ARE the transaction order — a seller
   looking for what comes next is looking for a number, not a name. */
.shstep {
  flex: none; width: 30px; height: 30px;
  background: var(--rule-2); color: var(--ink-3);
  font-family: var(--display); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.shrow.on .shstep { background: var(--orange); color: #111; }
.shbody { flex: 1; min-width: 0; }
.shname { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; }
.shwhat { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); margin-top: 3px; }
/* The state's own answer on whether this sheet is required, shown at the moment
   the seller decides whether to tick it. Screen only — it costs no paper, which
   is why it could move off the printed sheet. See the note at its call site. */
.shstate { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-2); margin-top: 5px; }
.shtick .box {
  flex: none; width: 22px; height: 22px; margin-top: 4px;
  border: 2px solid var(--rule); color: transparent;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.shrow.on .shtick .box { border-color: var(--ink); background: var(--ink); color: #FFF; }
.shprev {
  background: none; border: 0; padding: 0 0 0 41px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); cursor: pointer;
}
.shprev:hover { color: var(--ink); }

/* A sheet held back for legal review. Visible, so the seller knows it exists and
   is coming; inert, so it cannot be printed. Not hidden — hiding it would make
   the kit look shorter than it is. */
.shrow.gated { opacity: 0.55; }
.shrow.gated .shtick { cursor: default; }
.shrow.gated .shstep { background: var(--rule-2); color: var(--ink-3); }
.shrow.gated .shtick .box { border-style: dashed; }
.shgate {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.4;
  letter-spacing: 0.02em; color: var(--flag);
}

.shgate.land { color: var(--ink-3); }
.shprev.solo { color: var(--orange); }

/* ---------- Display objects a free customer has not bought ----------
   ⚠️ Greyed, NOT hidden, and the thumbnail stays. The row still shows what the
   object is and what it looks like — that is the entire reason it is listed.
   ⚠️ NO NAG COPY anywhere in here. This is a checklist somebody is working from
   with a buyer on the way; turning it into an ad damages the thing that makes
   the free tier trustworthy. The label states a fact — "In the $29 kit" — and
   stops. */
.shrow.locked { opacity: 0.62; }
.shrow.locked .shthumb { filter: grayscale(1); }
.shgate.lock { color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
.lockico { font-size: 11px; filter: grayscale(1); opacity: 0.75; }

/* ---------- The kit tiers ---------- */

.tierlist { margin: 0 0 12px; padding: 0; list-style: none; }
.tierlist li { position: relative; padding: 4px 0 4px 18px; font-size: 15px; line-height: 1.35; }
.tierlist li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; background: var(--orange); }
.tierfoot { font-size: 13px; font-weight: 600; margin: 0 0 12px; }

/* A tier we cannot deliver today. Greyed and unselectable, never hidden — the
   customer should be able to see it exists and is coming. The reason sits
   underneath, because "not available" without a why reads as broken. */
.tierwhy {
  font-family: var(--mono); font-size: 11px; line-height: 1.4;
  color: var(--flag); margin: 8px 0 0; text-transform: uppercase; letter-spacing: 0.02em;
}

/* ---------- Sheet thumbnails in the checklist ----------
   A real sheet at about a tenth scale. Small enough to be a glance, big enough
   that the bands, the headline and the shape of the page are recognisable —
   which is the whole job: somebody should be able to tell the checklist from
   the bill of sale without reading either. */
/* ⭐ ONE THUMB COLUMN, 96x76, and EVERYTHING IS CENTRED IN IT — Keith
   2026-08-24. The box used to be 54x70 with the artwork pinned top-left, which
   suited a portrait sheet and made the three landscape display objects look
   like postage stamps floating at the top of an empty box.
   ⚠️ The column is one width for every row on purpose. Widening it only for the
   display objects would make the sticker big and leave the list ragged, with
   three rows whose text starts further right than the other ten. */
.shthumb {
  flex: none;
  position: relative;
  width: 96px;
  height: 76px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #FFF;
  margin-top: 2px;
}
/* Absolutely positioned and translated from its own centre, because a CSS
   transform does not change layout size — a scaled 768px block still occupies
   768px, so it cannot be centred by flexbox. */
.shthumbscale {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 768px;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(0.0703);   /* 768 -> 54 wide, 70 tall */
  pointer-events: none;
}
/* Landscape artwork is scaled to fill the WIDTH of the box instead — the sticker,
   the for-sale sign and SOLD now read at roughly twice the area they did, which
   is the point of listing them at all. */
.shthumb.land .shthumbscale { transform: translate(-50%, -50%) scale(0.125); }
.shthumb .sheet.land { transform-origin: center center; }
.shrow.gated .shthumb { opacity: 0.5; }