/* ==========================================================================
   Demo request page — public/css/pages/demo.css
   Only rules that exist nowhere else. .product-hero / .section / .card /
   .checklist / .eyebrow / .btn / .grid--2 / .visually-hidden live in
   global.css.
   ========================================================================== */

/* --- Two-column layout: pitch + form card --------------------------------- */
.demo-layout { align-items: start; gap: clamp(28px, 4vw, 56px); }

.demo-pitch__call { margin-top: 28px; font-size: var(--step--1); color: var(--body); }
.demo-pitch__call a { font-weight: 700; color: var(--navy-700); }

/* --- Form card -------------------------------------------------------------- */
.form-card { display: block; }

.field { margin-bottom: 18px; }
.field label {
  display: block; margin-bottom: 6px; font-size: var(--step--1); font-weight: 600;
  color: var(--navy-800);
}
.field input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); font: inherit; color: var(--navy-900);
  background: #fff; transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 178, 255, .18);
}

.field-error { margin-top: 6px; font-size: var(--step--2); color: #d1332f; }

.form-success {
  margin-bottom: 20px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: #e7f8ee; border: 1px solid #b9e6cb; color: #1c6b3f;
  font-weight: 600; font-size: var(--step--1);
}

.form-note { margin-top: 16px; font-size: var(--step--2); color: var(--muted); }

@media (max-width: 860px) {
  .demo-layout { grid-template-columns: 1fr; }
}