/* Small project layer on top of Oat — conversion-focused tweaks. */
:root { --oat-primary: #2563eb; }

body { line-height: 1.55; }

main.container { max-width: 1040px; }

.card, .box {
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  padding: 1.25rem;
  background: #fff;
}
.box { background: #f8fafc; }

.button.large { padding: .85rem 1.6rem; font-size: 1.05rem; }
.button.w-100 { width: 100%; }
.buttons.justify-center { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }

.badge { background: #eef2ff; color: #3730a3; border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; }

label { display: block; font-weight: 600; margin-bottom: .25rem; }
label input, label select, label textarea { font-weight: 400; width: 100%; }

table.table { width: 100%; border-collapse: collapse; }
table.table th, table.table td { padding: .5rem .6rem; border-bottom: 1px solid #eef0f3; text-align: left; vertical-align: top; }

fieldset.box legend { padding: 0 .4rem; }

.animate-pop-in { animation: popin .25s ease-out; }
@keyframes popin { from { transform: scale(.96); opacity: 0 } to { transform: scale(1); opacity: 1 } }

/* Responsive: stack columns on small screens */
@media (max-width: 720px) {
  [class*="col-"] { width: 100% !important; flex: 0 0 100% !important; }
  [data-topnav] nav { flex-wrap: wrap; gap: .5rem; }
}