body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:#0b0b0b; color:#f5f5f5; }
.hero { background:#ffd400; color:#111; padding:16px 24px; font-weight:700; }
.container, .row { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.card { background:#151515; border:1px solid #2a2a2a; border-radius:12px; padding:16px; margin-bottom:16px; }
input, textarea { width:100%; padding:10px 12px; margin:6px 0; border-radius:8px; border:1px solid #2a2a2a; background:#0f0f0f; color:#fff; }
button { padding:10px 14px; border-radius:10px; border:0; background:#ffd400; color:#111; font-weight:700; cursor:pointer; }
a { color:#ffd400; }
:root { --bnb-yellow: #f6c90e; --bnb-black: #111; }
h1,h2,h3 { color: var(--bnb-black); }
a { color: var(--bnb-black); }
button { background: var(--bnb-black); color: #fff; }
.progress-bar > div { background: var(--bnb-yellow); }

/* --- Form layout fixes --- */
.form-card { max-width: 820px; margin: 24px auto; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two columns */
  gap: 12px;                         /* <-- stops inputs from touching */
  align-items: end;
}

@media (max-width: 900px) {
  .form-row { grid-template-columns: 1fr; } /* stack on mobile */
}

.field { display: flex; flex-direction: column; gap: 6px; }

input[type="text"],
input[type="url"],
textarea {
  width: 100%;
  box-sizing: border-box;            /* <-- prevents overflow */
}

textarea {
  display: block;
  max-width: 100%;
}

/* Branding */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #111; border-radius: 12px; padding: 6px;
  box-shadow: 0 0 0 1px #111;            /* crisp edge on yellow hero */
}
.brand-logo { width: 44px; height: 44px; display: block; }
.brand-title { font-weight: 800; font-size: 22px; line-height: 1.1; color: #111; }
.brand-sub { color: #111; opacity: .8; font-size: 14px; }