/* ToolTable HQ site styles.
   One spacing scale (fleet/house_style.md 2). Every vertical gap on this site
   comes from a --space-* token; nothing sets an ad hoc margin. */

:root {
  --ink: #1B2430;
  --teal: #2A6F6F;
  --amber: #E8B04B;
  --paper: #FAF7F2;
  --card: #FFFFFF;
  --slate: #6B7280;
  --line: #E4DED2;
  --tint: #F0EBE0;
  --green: #3F7D53;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 20px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --measure: 65ch;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
}

a { color: var(--teal); }

h1, h2, h3 { line-height: 1.2; }

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

/* ---- rhythm -------------------------------------------------------------
   One rule owns section padding. Sections never carry their own, and the
   first heading and last paragraph inside one are flush, so stacking two
   sections gives one gap rather than two. */

section { padding: var(--space-6) 0; }
section > .wrap > :first-child,
section.wrap > :first-child { margin-top: 0; }
section > .wrap > :last-child,
section.wrap > :last-child { margin-bottom: 0; }

section h2 {
  font-size: 1.45rem;
  margin: 0 0 var(--space-3);
}

section p { max-width: var(--measure); margin: 0 0 var(--space-3); }
section p:last-child { margin-bottom: 0; }

section.tint { background: var(--tint); }

/* ---- header and footer -------------------------------------------------- */

header.site {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

header.site img { height: 26px; width: auto; display: block; }

header.site nav a {
  margin-left: var(--space-3);
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}

footer.site {
  border-top: 1px solid var(--line);
  padding: var(--space-5) 0;
  color: var(--slate);
  font-size: 0.9rem;
  background: var(--card);
}

footer.site p { margin: 0 0 var(--space-1); max-width: var(--measure); }
footer.site p:last-child { margin-bottom: 0; }

/* ---- hero --------------------------------------------------------------- */

.hero { padding: var(--space-6) 0 var(--space-5); }

.hero h1 {
  font-size: 2.1rem;
  margin: 0 0 var(--space-2);
  max-width: 26ch;
}

.hero .sub {
  font-size: 1.1rem;
  color: var(--slate);
  max-width: var(--measure);
  margin: 0;
}

/* ---- disclosure ----------------------------------------------------------*/

.disclosure {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 6px;
  padding: var(--space-3);
  font-size: 0.92rem;
  color: var(--slate);
  max-width: var(--measure);
}

.disclosure p { margin: 0 0 var(--space-1); }
.disclosure p:last-child { margin-bottom: 0; }

.verified {
  color: var(--slate);
  font-size: 0.9rem;
  margin: 0 0 var(--space-3);
}

/* ---- comparison table ----------------------------------------------------*/

.table-scroll { overflow-x: auto; }

table.compare {
  border-collapse: collapse;
  width: 100%;
  max-width: none;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 0.95rem;
}

table.compare th, table.compare td {
  border: 1px solid var(--line);
  padding: var(--space-2);
  text-align: left;
  vertical-align: top;
}

table.compare thead th {
  background: var(--teal);
  color: #fff;
  font-weight: 700;
}

table.compare td:first-child, table.compare th:first-child {
  font-weight: 600;
  white-space: nowrap;
}

table.compare tbody tr:nth-child(even) { background: var(--tint); }

.table-note {
  font-size: 0.85rem;
  color: var(--slate);
  margin-top: var(--space-2);
}

.badge-recurring {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: var(--space-1);
}

/* ---- bottom line / picks ---------------------------------------------- */

ul.picks { padding-left: var(--space-3); margin: 0 0 var(--space-3); max-width: var(--measure); }
ul.picks li { margin-bottom: var(--space-2); }
ul.picks li:last-child { margin-bottom: 0; }

.vendor-links a {
  font-weight: 700;
  text-decoration: none;
  margin-right: var(--space-2);
}

/* ---- cards and lists ---------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
}

.card h3 { margin: 0 0 var(--space-1); font-size: 1.05rem; }
.card p { margin: 0 0 var(--space-3); color: var(--slate); font-size: 0.95rem; }
.card a { font-weight: 700; text-decoration: none; margin-top: auto; }

ul.inside { padding-left: var(--space-3); margin: 0 0 var(--space-4); max-width: var(--measure); }
ul.inside li { margin-bottom: var(--space-2); }
ul.inside li:last-child { margin-bottom: 0; }

.note { font-size: 0.9rem; color: var(--slate); }

.siblings {
  font-size: 0.95rem;
  color: var(--slate);
  max-width: var(--measure);
}