.kitcta{margin:28px 0 8px;padding:20px 22px;border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:10px;background:var(--surface-2)}
.kitcta .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent-ink);margin:0 0 6px}
.kitcta h3{font-family:var(--serif);font-size:19px;line-height:1.25;margin:0 0 8px;
  color:var(--ink);font-weight:600}
.kitcta p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0 0 14px;
  max-width:62ch}
.kitcta .kbuy{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* Restated in full because an <a> here inherits the body link styling, which is an
   underlined inline link - the same trap the toolkit page's button hit. */
.kitcta a.kgo{display:inline-block;padding:8px 15px;border-radius:7px;
  /* --accent-ink, not --accent: white on --accent was 3.37-3.78 and this is the
     primary action on 54 pages. `color:var(--surface)` inverts with the theme - white
     on dark teal in light mode (6.31), near-black on bright teal in dark mode (7.59) -
     where a fixed #fff failed the dark palette outright. */
  background:var(--accent-ink);color:var(--surface);font-size:13.5px;font-weight:600;
  line-height:1.3;text-decoration:none;border:1px solid var(--accent-ink)}
.kitcta a.kgo:hover{background:var(--accent);border-color:var(--accent)}
.kitcta a.kalt{display:inline-block;padding:8px 15px;border-radius:7px;
  background:transparent;color:var(--accent-ink);font-size:13.5px;font-weight:600;
  line-height:1.3;text-decoration:none;border:1px solid var(--line)}
.kitcta a.kalt:hover{border-color:var(--accent)}
.kitcta .kmeta{font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:.03em;margin:14px 0 0}
/* A <button> beside two <a>s matches nothing by default - font, padding, radius,
   colour AND line-height all have to be restated, and line-height is the one that gets
   missed: it leaves the button a few px shorter than the links with everything else
   identical. Measured against .kalt rather than eyeballed. */
.kitcta button.kwhy{appearance:none;display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:7px;background:transparent;color:var(--muted);
  font-family:inherit;font-size:13.5px;font-weight:600;line-height:1.3;
  border:1px solid transparent;cursor:pointer}
.kitcta button.kwhy:hover{color:var(--ink-2)}
.kitcta .kwhy .chev{width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .12s}
.kitcta .kwhy[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-1px,-1px)}
.kwhy-panel[hidden]{display:none}
.kwhy-panel{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.kwhy-panel dl{margin:0}
.kwhy-panel dt{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 3px}
.kwhy-panel dd{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0 0 12px;
  max-width:62ch}
.kwhy-panel dd:last-of-type{margin-bottom:0}
@media (max-width:620px){
  body .kitcta{padding:16px 16px}
  body .kitcta .kbuy{gap:8px}
  body .kitcta a.kgo,body .kitcta a.kalt{flex:1 1 auto;text-align:center}
}