@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Outfit:wght@600;700&family=Fraunces:wght@600&display=swap");

:root {
  --black: #111111;
  --white: #ffffff;
  --gray-100: #f7f7f7;
  --gray-200: #e5e5e5;
  --gray-400: #a3a3a3;
  --gray-600: #525252;
  --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.08);
  --shadow-soft-hover: 0 8px 20px rgba(0, 0, 0, 0.12);
}

body {
  font-family: "DM Sans", sans-serif;
  background-color: var(--white);
  color: var(--black);
  line-height: 1.5;
}

a {
  color: inherit;
}

button,
.btn,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  font-family: inherit;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  transform: translateY(1px);
  box-shadow: var(--shadow-soft-hover);
}

button:active,
.btn:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-soft-hover);
}

input,
select,
textarea {
  font-family: inherit;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

/* Compact spacing across shared pages */
.container {
  padding-top: 18px;
  padding-bottom: 18px;
}

.header {
  margin-bottom: 20px;
  padding-bottom: 10px;
}

h1 {
  margin-bottom: 12px;
}

h2,
h3 {
  margin-bottom: 8px;
}

p {
  margin-bottom: 10px;
}

.feature-form-container,
.submission-container {
  margin: 16px auto;
  padding: 18px;
}

.feature-examples {
  margin-bottom: 16px;
  padding: 12px;
}

.form-group {
  margin-bottom: 10px;
}

.form-row {
  gap: 10px;
  margin-bottom: 10px;
}

.form-section {
  padding-top: 14px;
  margin-top: 18px;
}

.form-actions {
  margin-top: 16px;
}

table {
  border-color: var(--gray-200);
}

hr,
header,
footer {
  border-color: var(--gray-200);
}