/* freshpilot — demo only */

.demo-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 80px 0;
  align-items: start;
}

.demo-info h1 { margin-bottom: 16px; }

.demo-info > p { font-size: 17px; color: var(--bark-soft); line-height: 1.65; margin-bottom: 36px; }

.demo-expect {
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 36px;
}

.demo-expect-item { display: flex; gap: 14px; align-items: flex-start; }

.demo-expect-icon {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%; background: var(--forest-light);
  color: var(--forest); display: flex;
  align-items: center; justify-content: center;
  font-size: 16px; margin-top: 2px;
}

.demo-expect-item h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px; font-weight: 600; margin-bottom: 2px;
}

.demo-expect-item p { font-size: 14px; color: var(--bark-soft); line-height: 1.5; }

.demo-note {
  font-size: 14px; color: var(--bark-muted);
  display: flex; align-items: center; gap: 8px;
}

.demo-form-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-md);
}

.demo-form-card h2 { font-size: 24px; margin-bottom: 8px; }

.demo-form-card > p { font-size: 14px; color: var(--bark-soft); margin-bottom: 28px; }

.form-row { margin-bottom: 16px; }

.form-row label {
  display: block; font-size: 13px; font-weight: 600;
  margin-bottom: 6px; color: var(--bark);
}

.form-row input, .form-row textarea {
  width: 100%; padding: 12px 16px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px; color: var(--bark);
  background: var(--cream);
  transition: border-color 0.2s;
  outline: none;
}

.form-row input:focus, .form-row textarea:focus { border-color: var(--forest); }

.form-row textarea { resize: vertical; min-height: 80px; }

.form-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-submit { margin-top: 8px; }

.form-submit .btn { width: 100%; }

.form-consent { margin-bottom: 16px; }

.consent-label {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--bark-soft); line-height: 1.5; cursor: pointer;
}

.consent-label input[type="checkbox"] {
  margin-top: 3px; min-width: 16px; width: 16px; height: 16px;
  accent-color: var(--forest); cursor: pointer;
}

.consent-label a { color: var(--forest); text-decoration: underline; }

.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

/* Submission feedback, written by js/demo-form.js. Empty and unstyled until then --
   the element is always in the DOM so its aria-live region can announce changes. */
.form-status:empty { display: none; }

.form-status {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
}

.form-status-success {
  background: var(--forest-light);
  color: var(--forest-deep); /* 7.24:1 on --forest-light */
}

/* --clay-deep is only 4.13:1 on --clay-light and 4.49:1 on --cream, so it fails WCAG
   AA at this size in both places. #8F4A2E is the same hue darkened until it passes
   everywhere it could land: 5.57:1 here, 6.59:1 on --white, 6.06:1 on --cream. */
.form-status-error {
  background: var(--clay-light);
  color: #8F4A2E;
}

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

@media (max-width: 600px) {
  .demo-layout { padding: 48px 0; }
  .demo-form-card { padding: 28px 24px; }
}

@media (max-width: 600px) {
  .form-row-grid { grid-template-columns: 1fr; }
}