/* ===================== DEMO REQUEST FORM (/demo page) ===================== */
.df-page {
  max-width: 480px; margin: 0 auto; padding: 64px 20px 80px;
}
.df-page h1 {
  font-family: "Baloo 2", sans-serif; font-weight: 500;
  font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.04em; line-height: 1.1;
  margin: 0 0 10px; color: var(--ink);
}
.df-sub { font-size: 15px; color: var(--ink-2); margin: 0 0 28px; }
.df-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 28px 24px;
}
.df-form { display: flex; flex-direction: column; gap: 16px; }
.df-field { display: flex; flex-direction: column; gap: 6px; }
.df-field span { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.df-field input, .df-field select {
  font: inherit; font-size: 15px; color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 10px 16px; background: var(--bg);
}
/* A true pill shape reads oddly on a multi-line box, so the textarea gets a
   generous-but-not-fully-round radius instead of matching the 999px above. */
.df-field textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: 20px;
  padding: 10px 16px; background: var(--bg); resize: vertical;
}
.df-field input:focus, .df-field textarea:focus, .df-field select:focus {
  outline: 2px solid var(--rust); outline-offset: 1px;
}
/* intl-tel-input renders its own flag-dropdown chrome around the phone
   input; round its outer container to match instead of the bare input. */
.df-field .iti { width: 100%; }
.df-field .iti input {
  border-radius: 999px !important;
  width: 100%;
}
.df-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.df-submit {
  border: none; cursor: pointer; margin-top: 4px;
  border-radius: 999px;
  justify-content: center; width: 100%;
}
.df-submit:disabled { opacity: 0.6; cursor: default; }
.df-error { font-size: 13px; color: var(--rust); margin: 0; }
.df-success { text-align: center; padding: 20px 0; }
.df-success p { font-size: 16px; color: var(--ink); margin: 0 0 4px; }
.df-success .df-success-sub { font-size: 13px; color: var(--ink-2); }
.df-success .df-success-cta { margin: 20px 0 0; }