/* /automation/ — page-specific additions to styles.css */

.auto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 48rem) {
  .auto-grid { grid-template-columns: 1fr; }
}

.auto-grid h3 { margin: 0 0 .5rem; font-size: 1.2rem; }

.auto-grid p { margin: 0 0 .75rem; color: var(--muted); }

.ba {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem .75rem;
  margin: 0 0 .75rem;
  font-size: .95rem;
}

.ba dt { font-weight: 700; color: #B42318; }

.ba dt.good { color: #0F766E; }

@media (prefers-color-scheme: dark) {
  .ba dt { color: #FF8A80; }
  .ba dt.good { color: #5EEAD4; }
}

.ba dd { margin: 0; }

.flow { display: flex; flex-wrap: wrap; gap: .4rem; }

.flow span {
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .2rem .65rem;
  background: var(--bg);
  color: var(--ink);
}

.steps { padding-left: 1.25rem; max-width: 44rem; }

.steps li { margin: .5rem 0; }

.prices {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.prices th, .prices td {
  text-align: left;
  padding: .7rem .6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.prices th { color: var(--muted); font-weight: 600; font-size: .9rem; }

.stamp { margin-top: .75rem; }