.demo-section {
  scroll-margin-top: calc(var(--atende-space-12) + var(--atende-space-4));
  padding-block: var(--atende-space-12);
  background: var(--atende-color-brand-deep);
  color: var(--atende-color-on-dark);
}
.demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: min-content min-content 1fr;
  grid-template-areas: "intro form" "experience form" "guide form";
  align-items: start;
  column-gap: var(--atende-space-12);
  row-gap: var(--atende-space-6);
}
.demo-copy, .demo-experience, .demo-form-shell, .demo-form { min-width: 0; }
.demo-intro { grid-area: intro; }
.demo-intro h2 { margin-top: 0; }
.demo-copy > p:not(.eyebrow) { color: var(--atende-color-muted-light); line-height: 1.6; margin-bottom: 0; }
.demo-experience { grid-area: experience; }
.demo-roles { display: grid; gap: var(--atende-space-6); list-style: none; padding: 0; margin: 0; }
.demo-roles li { display: grid; grid-template-columns: calc(var(--atende-space-8) * 2) minmax(0, 1fr); align-items: start; gap: var(--atende-space-4); }
.demo-role-icon { width: calc(var(--atende-space-8) * 2); height: calc(var(--atende-space-8) * 2); }
.demo-roles li > div { display: grid; gap: var(--atende-space-1); }
.demo-roles strong { color: var(--atende-color-on-dark); font-size: 1.125rem; }
.demo-roles span { color: var(--atende-color-muted-light); line-height: 1.6; }
.demo-documentation { grid-area: guide; display: flex; align-items: center; gap: var(--atende-space-3); margin: 0; font-size: .875rem; }
.demo-documentation img { flex: 0 0 var(--atende-space-6); }
.demo-documentation a, .demo-privacy a { color: var(--atende-color-brand); text-decoration: underline; text-underline-offset: .2em; }
.demo-section .eyebrow, .demo-documentation a { color: var(--atende-color-accent); }
.demo-section:focus-visible, .demo-documentation a:focus-visible { outline-color: var(--atende-color-accent); }
.demo-form-shell {
  grid-area: form;
  color: var(--atende-color-text);
  padding: var(--atende-space-8);
  border: 1px solid var(--atende-color-border);
  border-radius: var(--atende-radius-xl);
  background: var(--atende-color-surface);
  box-shadow: none;
}
.demo-form-shell h3 { font-size: 1.5rem; margin: 0 0 var(--atende-space-6); letter-spacing: -.03em; }
.demo-form { display: grid; gap: var(--atende-space-3); }
.demo-assurances { display: grid; gap: var(--atende-space-3); list-style: none; margin: var(--atende-space-3) 0 0; padding: 0; }
.demo-assurances li { display: grid; grid-template-columns: var(--atende-space-6) minmax(0, 1fr); gap: var(--atende-space-3); align-items: start; }
.demo-assurances p { margin: 0; color: var(--atende-color-muted); font-size: .875rem; line-height: 1.6; }
.demo-assurances strong { color: var(--atende-color-text); }
.demo-details { color: var(--atende-color-muted); font-size: .875rem; }
.demo-details summary { min-height: var(--atende-control-height); padding-block: var(--atende-space-3); color: var(--atende-color-brand); cursor: pointer; }
.demo-details p { margin: 0 0 var(--atende-space-3); line-height: 1.6; }
.demo-form label { font-size: .875rem; font-weight: 800; }
.demo-form input {
  width: 100%;
  min-width: 0;
  min-height: var(--atende-control-height);
  padding: var(--atende-space-3) var(--atende-space-4);
  border: 1px solid var(--atende-color-border);
  border-radius: var(--atende-radius-sm);
  background: var(--atende-color-background-muted);
  color: var(--atende-color-text);
  transition: border-color var(--atende-transition-fast), background var(--atende-transition-fast);
}
.demo-form input::placeholder { color: var(--atende-color-muted); }
#public-demo-email:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--surface) inset; }
#public-demo-email:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--surface) inset, 0 0 0 4px var(--atende-focus-ring); }
.demo-form input:focus-visible { border-color: var(--atende-color-brand); background: var(--atende-color-surface); }
.demo-form input[aria-invalid="true"] { border-color: var(--atende-color-danger); }
.demo-form-actions { display: grid; gap: var(--atende-space-3); margin-top: var(--atende-space-3); }
.demo-form-actions .button { width: 100%; min-height: var(--atende-control-height); white-space: normal; }
.demo-form button:disabled { cursor: not-allowed; opacity: .65; }
.demo-form button[aria-busy="true"] { cursor: progress; }
.demo-feedback {
  margin: 0;
  padding: var(--atende-space-3);
  border-radius: var(--atende-radius-sm);
  color: var(--atende-color-muted);
  background: var(--atende-color-background-muted);
  font-size: .875rem;
  overflow-wrap: anywhere;
}
.demo-feedback:empty, #public-demo-cooldown:empty, .demo-honeypot { display: none; }
.demo-form[data-demo-state="error"] .demo-feedback { color: var(--atende-color-danger); background: var(--atende-color-danger-soft); }
.demo-form:is([data-demo-state="unavailable"], [data-demo-state="cooldown"]) .demo-feedback { color: var(--atende-color-warning); background: var(--atende-color-warning-soft); }
.demo-form[data-demo-state="success"] .demo-feedback { color: var(--atende-color-success); background: var(--atende-color-success-soft); }
.demo-change-email {
  justify-self: start;
  min-height: var(--atende-control-height);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--atende-color-brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.demo-challenge { display: grid; justify-items: start; gap: var(--atende-space-2); margin-block: var(--atende-space-2); }
.demo-challenge > p { margin: 0; font-size: .875rem; }
#public-demo-challenge-title { font-weight: 800; }
#public-demo-turnstile { display: grid; justify-items: stretch; width: 100%; min-width: 0; max-width: 100%; }
.demo-privacy { margin: 0; color: var(--atende-color-muted); font-size: .75rem; }

@media (max-width: 900px) {
  .demo-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "form" "experience" "guide"; gap: var(--atende-space-6); }
}
@media (max-width: 640px) {
  .demo-roles li { grid-template-columns: var(--atende-space-12) minmax(0, 1fr); gap: var(--atende-space-3); }
  .demo-role-icon { width: var(--atende-space-12); height: var(--atende-space-12); }
  .demo-form-shell { padding: var(--atende-space-5); }
}
@media (max-width: 390px) {
  .demo-layout { width: min(calc(100% - var(--atende-space-4)), var(--shell)); }
  .demo-form-shell { padding-inline: var(--atende-space-3); }
}