/* ============================================================
   3Powers — get started + who it's for.
   ============================================================ */

.start-steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  margin: 0 0 var(--space-12);
  padding: 0;
  list-style: none;
}
.start-steps li {
  counter-increment: step;
  border: 1px solid var(--code-border);
  border-radius: var(--radius-default);
  padding: var(--space-7);
}
.start-steps li::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-kicker);
  color: var(--gold-bright);
  margin-bottom: var(--space-3);
}
.start-steps h3 { margin: 0 0 6px; font-size: 1.02rem; font-family: var(--font-sans); font-weight: 600; }
.start-steps p { margin: 0; font-size: var(--text-small); color: var(--text-on-ink-muted); line-height: 1.55; }
.start-steps code { color: var(--gold-bright); font-size: 0.86rem; }

.cmd-stack {
  max-width: 760px;
  margin: 0 auto var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cmd-stack .cmd { max-width: none; font-size: 0.92rem; }

.start-aside {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-on-ink-muted);
}

/* ---- who it's for ---- */
.audience {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
  margin-top: var(--space-12);
}
.audience article { border-top: 1px solid var(--line); padding-top: var(--space-6); }
.audience h3 { margin: 0 0 8px; font-size: var(--text-h3); }
.audience p { margin: 0; color: var(--text-muted); font-size: var(--text-small); line-height: 1.6; }

/* ---- language matrix ---- */
.langs {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--text-small);
}
.langs th, .langs td {
  text-align: left;
  padding: 13px var(--space-5);
  border-bottom: 1px solid var(--line);
}
.langs th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  color: var(--text-muted);
}
.langs td { color: var(--text-secondary); }
.langs td b { color: var(--ink); font-weight: 600; }

@media (max-width: 960px) {
  .start-steps, .audience { grid-template-columns: 1fr; }
}