/* /brigada/ page. The lockup SVGs come from assets/brigada/ (flame + Space Grotesk, text as paths). */

.hero { padding: 72px 0 88px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 920px) { .hero .wrap { grid-template-columns: 1fr; gap: 44px; } }

.hero-copy { display: grid; gap: 24px; min-width: 0; }
.hero-copy .lead { font-size: 20px; color: var(--muted); max-width: 560px; }

/* Clear space around the lockup: at least the flame core's height on every side. */
.wordmark { padding: 16px 0; }
.wordmark img { width: 360px; height: auto; }
@media (max-width: 420px) { .wordmark img { width: 270px; } }


.cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Pain list */

.pains { list-style: none; margin: 0; padding: 0; counter-reset: pain; display: grid; gap: 0; border-top: 1px solid var(--line); }
.pains li {
  counter-increment: pain; display: grid; grid-template-columns: 56px 1fr; gap: 12px;
  padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 19px;
}
.pains li::before { content: "0" counter(pain); font: 500 13px/2.1 var(--mono); color: var(--muted); }

/* Architecture strip */

.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 40px; }
.flow-step {
  border: 1px solid var(--line); background: var(--surface); padding: 20px; display: grid; gap: 6px; align-content: start;
}
.flow-step + .flow-step { border-left: 0; }
.flow-step:first-child { border-radius: var(--r) 0 0 var(--r); }
.flow-step:last-child { border-radius: 0 var(--r) var(--r) 0; }
.flow-step strong { font-size: 18px; letter-spacing: -0.01em; }
.flow-step span:not(.label) { color: var(--muted); font-size: 15px; }
.flow-step .label { color: var(--muted); }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; }
  .flow-step + .flow-step { border-left: 1px solid var(--line); border-top: 0; }
  .flow-step:first-child { border-radius: var(--r) var(--r) 0 0; }
  .flow-step:last-child { border-radius: 0 0 var(--r) var(--r); }
}

/* Gates */

.gates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .gates { grid-template-columns: 1fr; } }
.gate { border: 1px solid var(--line); border-radius: var(--r); padding: 24px; display: grid; gap: 10px; align-content: start; background: var(--surface); }
.gate .default { font: 500 13px/1.4 var(--mono); }
.gate p { color: var(--muted); }

/* CLIs */

.clis { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.clis li {
  font: 500 15px/1 var(--mono); border: 1px solid var(--fg); border-radius: var(--r);
  padding: 12px 16px;
}
.clis li.exp { border-style: dashed; border-color: var(--muted); color: var(--muted); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; gap: 32px; } }
.prose { display: grid; gap: 16px; color: var(--muted); }
.prose strong { color: var(--fg); font-weight: 500; }

.notice {
  border: 1px solid var(--fg); border-radius: var(--r); padding: 20px 24px; display: grid; gap: 8px;
}
.notice p { color: var(--fg); }

/* Install */

.steps { display: grid; gap: 28px; counter-reset: step; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 12px; min-width: 0; }
.step::before { counter-increment: step; content: "0" counter(step); font: 500 13px/2 var(--mono); color: var(--muted); }
.step > div { display: grid; gap: 12px; min-width: 0; }
.step p { color: var(--muted); }

.reqs { margin: 0; padding-left: 20px; color: var(--muted); display: grid; gap: 6px; }

.footer-mark img { width: 150px; height: auto; margin: 10px 0; }

@media (max-width: 600px) {
  .pains li, .step { grid-template-columns: 32px 1fr; }
  .section { padding: 64px 0; }
}