/* ==========================================================================
   FIT AND CONTROL (both homepages)
   --------------------------------------------------------------------------
   The live site's boundary ledger (Connects to / Reads / Writes / Who
   approves / Records) as a spec table: each key in its own column, led by a
   small framed Lucide icon in the accent, the value beside it, hairlines
   between rows. Then the review note and the four onward links.
   Copy verbatim from the live Fit and control section. Colours come from
   the section's own vars, so it sits on night (structured) or on the
   deeper paper band (pixel) unchanged.
   ========================================================================== */

/* The five boundaries as polarsignals.com's feature grid (their
   grid-cols-1 / sm:2 / lg:3 with the matching gaps): a large monoline
   drawing with hatched fills, then the key, then the value in muted grey.
   Drawings are inline SVG in the section's heading colour; hatch patterns
   are defined per drawing. */
.fit__rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px 64px;
  margin: 40px 0 0;
}
.fit__row { display: block; }
.fit__row dt {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--heading);
}
.fit__art {
  display: block;
  width: 88px; height: 88px;
  margin-bottom: 36px;
  overflow: visible;
  color: var(--heading);
}
.fit__art * { vector-effect: non-scaling-stroke; }
.fit__art .s  { fill: none; stroke: currentColor; stroke-width: 1.25; }
.fit__art .g  { fill: var(--ground); stroke: currentColor; stroke-width: 1.25; }
.fit__art .d  { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-dasharray: 3 3; }
.fit__art .hl { stroke: currentColor; stroke-width: 1; }
.fit__art .ko { fill: none; stroke: var(--ground); stroke-width: 5; stroke-linecap: square; }
.fit__art .ck { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.fit__row dd {
  max-width: 34ch;
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-muted);
}
@media (min-width: 640px) {
  .fit__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
}
@media (min-width: 768px) {
  .fit__rows { margin-top: 48px; }
}
@media (min-width: 1024px) {
  .fit__rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
}
@media (min-width: 1280px) {
  .fit__rows { margin-top: 56px; gap: 128px 127px; }
}

/* Secondary content: one closing block under the grid, set off by a
   hairline. Left, the security-review note in muted text behind an info
   mark; right, the four onward links as a quiet 2×2 index — each a row with
   its arrow at the far edge and a hairline under it. */
.fit__aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-8);
  align-items: start;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-w) solid var(--line);
}
.fit__note {
  display: flex;
  gap: 12px;
  max-width: 52ch;
  margin: 0;
  font-size: var(--size-body);
  line-height: 1.6;
  color: var(--ink-muted);
  --icon-size: 18px;
  --icon-stroke: 1.5;
}
.fit__note .icon { margin-top: 3px; color: var(--ink-muted); }
.fit__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fit__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: var(--border-w) solid var(--line);
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--motion-base) var(--motion-ease);
}
.fit__links li:nth-child(-n+2) a { padding-top: 0; }
.fit__links a .icon { color: var(--accent-text, var(--accent)); transition: translate var(--motion-base) var(--motion-ease); }
.fit__links a:hover { color: var(--heading); }
.fit__links a:hover .icon { translate: 2px -2px; }

@media (max-width: 760px) {
  .fit__aside { grid-template-columns: 1fr; }
  .fit__links { grid-template-columns: 1fr; }
  .fit__links li:nth-child(2) a { padding-top: 12px; }
}
@media (min-width: 1280px) {
  .fit__aside { margin-top: 128px; }
}