/* TrueBid layout — lock to 2026-08-17-truebid-type-layout.md
   4px grid only. Do not add 10/14/18. Do not add families. */

:root {
  --true-chrome: #2b2b2b;
  --true-ink: #333333;
  --true-panel: #2e2e2e;
  --true-paper: #ffffff;
  --true-soft: #fdf3eb;
  --true-muted: #888780;
  --true-line: #e6e4df;
  --true-orange: #ee7623;
  --true-orange-text: #ba5a10;
  --true-cta: #d9822b;
  --true-cta-fg: #faf9f7;
  --true-lead: #0f6e56;
  --true-lead-bg: #edf9f4;
  --true-cold: #888780;
  --true-cold-bg: #f0eeea;
  --font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-display: "Newsreader", "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-16: 64px;
  --space-20: 80px;
  --space-28: 112px;
  --touch: 44px;
  --measure-hero: 768px;   /* max-w-3xl */
  --measure-wide: 1024px;  /* max-w-5xl */
  --measure-board: 1152px; /* max-w-6xl */
  --measure-body: 576px;   /* max-w-xl */
  --aside: 22rem;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--true-paper);
  color: var(--true-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, [type="submit"] { font-family: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
img { display: block; max-width: 100%; }

/* Widths */
.wrap-3 { max-width: var(--measure-hero); margin: 0 auto; padding: 0 var(--space-4); }
.wrap-5 { max-width: var(--measure-wide); margin: 0 auto; padding: 0 var(--space-4); }
.wrap-6 { max-width: var(--measure-board); margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 640px) {
  .wrap-3, .wrap-5, .wrap-6 { padding: 0 var(--space-8); }
}

/* Type */
.eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--true-orange-text); /* never #EE7623 below 18px */
}
.h1 {
  margin: var(--space-5) 0 0;
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: pretty;
}
@media (min-width: 640px) { .h1 { font-size: 48px; } }
.h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.h2-sm { font-size: 24px; }
.addr {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.addr-lg { font-size: 30px; }
.addr-card { font-size: 20px; }
.money {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.money-lg { font-size: 30px; }
.money-row { font-size: 24px; }
.body { margin: var(--space-8) 0 0; max-width: var(--measure-body); font-size: 16px; line-height: 1.625; }
.ui { font-size: 14px; line-height: 1.625; }
.meta { font-size: 12px; font-weight: 500; color: var(--true-muted); }
.muted { color: var(--true-muted); }
.mono { font-family: var(--font-mono); font-size: 12px; }

.rule {
  display: block;
  width: 56px;
  height: 2px;
  margin-top: var(--space-6);
  background: var(--true-orange);
}

/* Wordmark */
.mark {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}
.mark-sm { font-size: 18px; }
.mark-md { font-size: 20px; }
.mark-lg { font-size: 30px; }
.mark .t, .mark sup { color: var(--true-orange); }
.mark .b { color: var(--true-paper); }
.mark.light .b { color: var(--true-ink); }
.mark sup {
  margin-left: 2px;
  font-size: 0.45em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
}

/* Chrome */
.chrome { background: var(--true-chrome); color: var(--true-paper); }
.chrome-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.tagline { margin: var(--space-1) 0 0; font-size: 12px; color: rgba(250,249,247,0.6); }
.nav { display: flex; align-items: center; gap: var(--space-1); }
.nav-link {
  display: inline-flex;
  min-height: var(--touch);
  align-items: center;
  padding: 0 var(--space-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Buttons — 44px always */
.btn {
  display: inline-flex;
  min-height: var(--touch);
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: 6px;
  background: var(--true-cta);
  color: var(--true-cta-fg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.btn:hover { background: var(--true-orange); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--true-line);
  color: var(--true-ink);
  text-transform: none;
  letter-spacing: 0;
  padding: 0 var(--space-5);
  font-weight: 500;
}
.btn-chrome { padding: 0 var(--space-4); border-radius: 8px; }
.btn-full { width: 100%; }

/* Sections */
/* top/bottom only — the shorthand was zeroing .wrap-* side gutters when the
   classes share an element (hero wrap-3 / section wrap-5), edge-to-edge on
   mobile (Keat 18 Aug) */
.hero { padding-top: var(--space-20); padding-bottom: var(--space-28); }
.section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.border-y { border-top: 1px solid var(--true-line); border-bottom: 1px solid var(--true-line); }
.border-t { border-top: 1px solid var(--true-line); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-10); }

.steps { display: grid; gap: var(--space-10); }
@media (min-width: 768px) { .steps { grid-template-columns: 1fr 1fr 1fr; } }
.step-n { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--true-orange-text); }
.step .h2 { margin-top: var(--space-2); font-size: 24px; }
.step p { margin: var(--space-2) 0 0; font-size: 14px; line-height: 1.625; color: var(--true-muted); }

.split { display: grid; gap: var(--space-10); }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; } }
dl { margin: var(--space-8) 0 0; }
dt { font-weight: 500; font-size: 14px; }
dd { margin: var(--space-1) 0 var(--space-5); font-size: 14px; line-height: 1.625; color: var(--true-muted); }

.panel {
  background: var(--true-panel);
  color: var(--true-paper);
  border: 2px solid var(--true-orange);
  border-radius: 20px;
  padding: var(--space-6);
}
@media (min-width: 640px) { .panel { padding: var(--space-8); } }
.panel .h2 { font-size: 24px; }
.panel .rule { margin-top: var(--space-4); }
.panel ul { margin: var(--space-6) 0 0; padding-left: 1.1rem; font-size: 14px; line-height: 1.625; color: rgba(255,255,255,0.8); }

.site-foot {
  border-top: 4px solid var(--true-orange);
  background: var(--true-chrome);
  color: var(--true-paper);
  padding: var(--space-5) 0;
  font-size: 12px;
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.foot-row a { color: rgba(250,249,247,0.75); }
.foot-copy { margin: var(--space-3) 0 0; max-width: 48rem; color: rgba(250,249,247,0.75); }
.foot-copy a { color: inherit; }

.demo-note { margin: 0; padding: 0 0 var(--space-3); font-size: 11px; color: rgba(250,249,247,0.45); }
.roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: 12px;
  background: var(--true-panel);
}
.roles button {
  min-height: var(--touch);
  border: 0;
  border-radius: 8px;
  padding: 0 var(--space-3);
  background: transparent;
  color: rgba(250,249,247,0.6);
  font-size: 14px;
  text-transform: capitalize;
}
.roles button.on { background: var(--true-orange); color: var(--true-paper); }

.grid-board { display: grid; gap: var(--space-8); padding: var(--space-8) 0 var(--space-16); }
@media (min-width: 1024px) {
  .grid-board { grid-template-columns: minmax(0,1fr) var(--aside); }
}
.cards { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { overflow: hidden; border: 1px solid var(--true-line); border-radius: 12px; }
.card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.card-body { padding: var(--space-5); }
.hero-card { overflow: hidden; border: 1px solid var(--true-line); border-radius: 12px; }
.hero-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.hero-meta { display: grid; gap: var(--space-4); padding: var(--space-5); }
@media (min-width: 640px) {
  .hero-meta { grid-template-columns: 1fr auto; align-items: end; }
}
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.tabs button {
  min-height: var(--touch);
  border: 1px solid var(--true-line);
  border-radius: 8px;
  padding: 0 var(--space-3);
  background: var(--true-paper);
  color: var(--true-muted);
  font-size: 14px;
}
.tabs button.on { background: var(--true-ink); color: var(--true-paper); border-color: var(--true-ink); }
.ledger { margin: var(--space-6) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--true-line); border-bottom: 1px solid var(--true-line); }
.ledger li {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--true-line);
}
.ledger li:first-child { border-top: 0; }
@media (min-width: 640px) {
  .ledger li { grid-template-columns: 2.5rem 1fr auto; align-items: baseline; }
}
.chip {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.chip-lead { background: var(--true-lead-bg); color: var(--true-lead); }
.chip-cold { background: var(--true-cold-bg); color: var(--true-cold); }
.chip-if { background: var(--true-soft); color: var(--true-orange-text); }
.withdrawn { opacity: 0.5; }
.field {
  width: 100%;
  min-height: var(--touch);
  margin-top: var(--space-1);
  padding: 0 var(--space-4);
  border: 1px solid var(--true-orange);
  border-radius: 999px;
  background: transparent;
  color: var(--true-paper);
  font: inherit;
  font-size: 14px;
}
.field option { color: var(--true-ink); }
.aside { display: flex; flex-direction: column; gap: var(--space-5); }
.legal { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.legal h2 { margin-top: var(--space-10); font-size: 20px; font-weight: 500; }
.legal p, .legal ul, .legal ol { margin: var(--space-3) 0 0; font-size: 14px; line-height: 1.625; }
.how-card { border: 1px solid var(--true-line); border-radius: 12px; padding: var(--space-5); }