/* visual-polish.css - a light finishing pass over the whole page.
   Load after every other stylesheet. Type, colour, spacing and proportion only:
   no copy, structure, behaviour, canvas or illustration changes. */

/* 1. Palette: one quiet grey for secondary text, dark enough for small type on the page ground
      (#63625d is 5.5:1 on #f4f3ef). Instruments keep their own, slightly darker grey. */
:root { --mid: #63625d; }
#connect { --cx-mid: #5f5e59; }

/* 2. Shared focus ring for links styled as buttons and the logo, matching the keys. */
.btn:focus-visible, .btn-line:focus-visible, .logo:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }

/* 3. Secondary button edge reads as a control, not a hairline. */
.btn-ghost { border-color: rgba(28, 28, 26, 0.22); }

/* 4. Section intros: a slightly shorter measure (about 70 characters) for the long ledes. */
.section-head p { max-width: 590px; }

/* ---------- Meerkat Connect, brought into the page's section rhythm ---------- */

/* 5. Same vertical rhythm as every other section. */
#connect { padding: 64px 0; }

/* 6. Head: the site's section-head pattern (label and h2 left, lede right, baselines meeting),
      h2 at the page's h2 size and in ink, so it no longer competes with the hero. */
#connect .cx-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; row-gap: 0; align-items: end; }
#connect .cx-label { grid-column: 1; grid-row: 1; margin-bottom: 12px; color: var(--mid); }
#connect .cx-title { grid-column: 1; grid-row: 2; font-size: clamp(28px, 2.7vw, 38px); letter-spacing: -0.03em; line-height: 1.1; }
#connect .cx-title span + span { color: inherit; }
#connect .cx-lede { grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: 590px; padding-bottom: 0; font-size: 17px; line-height: 1.6; }

/* 7. Library band: calmer type, same structure. */
#connect .cx-range { margin-top: 40px; grid-template-columns: 176px minmax(0, 1fr); }
#connect .cx-count { padding: 18px 20px 16px 0; }
#connect .cx-count b { font-size: 52px; letter-spacing: -0.05em; }
#connect .cx-names li { gap: 11px; padding: 14px 32px 14px 22px; }
#connect .cx-sym { width: 30px; height: 30px; font-size: 11.5px; border-radius: 6px; }
#connect .cx-nm { font-size: 24px; letter-spacing: -0.03em; }
#connect .cx-cat { font: 600 9.5px/1 var(--sans); letter-spacing: 0.08em; }

/* 8. Small labels in the page's label face (Inter, uppercase, tracked) instead of monospace.
      Monospace stays for values: step tags, setting values and the letter marks. */
#connect .cx-zones span { font: 600 10.5px/1.35 var(--sans); letter-spacing: 0.08em; }
#connect .cx-zones em { font: 400 12px/1.35 var(--sans); letter-spacing: 0; }
#connect .cx-list .cx-sub { font: 600 10px/1.2 var(--sans); letter-spacing: 0.08em; }
#connect .cx-setup dt { font: 600 10.5px/1.9 var(--sans); letter-spacing: 0.08em; }
#connect .cx-flag { font: 400 12px/1.4 var(--sans); }
#connect .cx-meta { font: 400 12.5px/1.5 var(--sans); }
#connect .cx-motion { font: 500 13px/20px var(--sans); }
#connect .cx-readout .cx-of { font: 400 12px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
#connect .cx-stage h3 span { font: 600 11px/1 var(--sans); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* 9. Instrument: the same spacing as the other instruments; the active stage is marked in the
      page's neutral selection tone (the accent stays on the node, number and title). */
#connect .cx-inst { margin-top: 40px; }
#connect .cx-stage.is-on { background: transparent; }
#connect .cx-stage.is-on[data-host] { background: var(--cx-host); }
@media (min-width: 980px) {
  #connect .cx-stage.is-on { background: rgba(28, 28, 26, 0.035); }
  #connect .cx-stage.is-on[data-host] { background: rgba(28, 28, 26, 0.03); }
}
#connect .cx-readout { padding: 14px 8px 4px; }

/* 10. Closing notes sized like Meta's four points; the disclosure control matches the
       "Under the hood" toggle (round cap, hairline ring). */
#connect .cx-kinds { margin-top: 40px; padding-top: 16px; gap: 20px 32px; }
#connect .cx-kinds h3 { font-size: 15px; letter-spacing: -0.005em; margin-bottom: 8px; }
#connect .cx-kinds p { font-size: 14px; line-height: 1.55; }
#connect .cx-setup { margin-top: 32px; }
#connect .cx-plus { border-radius: 50%; box-shadow: 0 1px 0 rgba(28, 28, 26, 0.12), inset 0 0 0 1px var(--line-2); }
#connect .cx-plus::before, #connect .cx-plus::after { width: 9px; margin-left: -4.5px; }

@media (max-width: 1080px) {
  #connect .cx-head { grid-template-columns: minmax(0, 1fr); }
  #connect .cx-lede { grid-column: 1; grid-row: 3; margin-top: 16px; max-width: 640px; }
}
@media (max-width: 720px) {
  #connect { padding: 48px 0; }
  #connect .cx-title { font-size: 28px; }
  #connect .cx-lede { font-size: 17px; }
  #connect .cx-range { margin-top: 28px; grid-template-columns: minmax(0, 1fr); }
  #connect .cx-count { padding: 14px 0 12px; }
  #connect .cx-count b { font-size: 40px; }
  #connect .cx-names li { gap: 9px; padding: 12px 24px 12px 20px; }
  #connect .cx-sym { width: 26px; height: 26px; font-size: 10.5px; }
  #connect .cx-nm { font-size: 20px; }
  #connect .cx-inst { margin-top: 28px; }
  #connect .cx-zones span { font-size: 10px; letter-spacing: 0.06em; }
  #connect .cx-kinds { margin-top: 32px; }
  #connect .cx-kinds > div + div { padding-top: 16px; border-top: 1px solid var(--line); }
}