/* Demonstration request form — Claralix */
dialog{max-height:calc(100vh - 64px);overflow-y:auto}
.demo-form{margin-top:28px;display:flex;flex-direction:column;gap:18px;text-align:left}
.demo-form .ff{display:flex;flex-direction:column;gap:7px}
.demo-form .ff-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.demo-form label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.demo-form input[type=text],.demo-form input[type=email],.demo-form select,.demo-form textarea{
  font:15px/1.5 var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--line);
  border-radius:3px;padding:12px 13px;min-height:46px;width:100%;box-sizing:border-box}
.demo-form textarea{min-height:88px;resize:vertical;line-height:1.55}
.demo-form select{appearance:none;-webkit-appearance:none;padding-right:36px;background-repeat:no-repeat;
  background-position:right 13px center;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2365676b' stroke-width='1.6'/%3E%3C/svg%3E")}
.demo-form input:focus-visible,.demo-form select:focus-visible,.demo-form textarea:focus-visible{
  outline:2px solid var(--foundation-green);outline-offset:1px;border-color:var(--foundation-deep)}
.demo-form .ff-check{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;font-size:13px;
  line-height:1.55;letter-spacing:0;text-transform:none;font-weight:400;color:var(--muted)}
.demo-form .ff-check input{width:18px;height:18px;min-height:0;margin:2px 0 0;accent-color:var(--foundation-deep)}
.demo-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.demo-form button[type=submit]{align-self:flex-start;margin-top:4px}
.form-note{margin-top:18px;font-size:12px;line-height:1.55;color:var(--muted)}
/* Phone layout: full-height sheet, compact rhythm, so the whole form fits one screen on an 812px viewport */
@media(max-width:600px){
  dialog{margin:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0;padding:18px 18px 20px}
  dialog .eyebrow{font-size:10px}
  dialog h2{font-size:28px;line-height:1.08;margin:6px 0 0}
  dialog h2+p{font-size:13px;line-height:1.45;margin:8px 0 0;color:var(--muted)}
  .demo-form{margin-top:14px;gap:11px}
  .demo-form .ff{gap:4px}
  .demo-form label{font-size:10px;letter-spacing:.12em}
  .demo-form .ff-row{grid-template-columns:1fr 1fr;gap:11px}
  .demo-form input[type=text],.demo-form input[type=email],.demo-form select{min-height:42px;padding:9px 11px;font-size:14px}
  .demo-form select{padding-right:32px;background-position:right 11px center}
  .demo-form textarea{height:64px;min-height:64px;padding:9px 11px;font-size:14px;line-height:1.45}
  .demo-form .ff-check{font-size:12px;line-height:1.45;gap:9px}
  .demo-form .ff-check input{width:16px;height:16px;margin-top:1px}
  .demo-form button[type=submit]{min-height:46px;margin-top:0;padding:6px 7px 6px 16px}
}
/* Privacy notice links (form consent line and footer) — hand-maintained, see CLAUDE-CODE-HANDOVER.md §3 */
.demo-form .ff-check .privacy-link{color:var(--foundation-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.demo-form .ff-check .privacy-link:hover,.demo-form .ff-check .privacy-link:focus-visible{text-decoration-color:currentColor}
footer .footer-privacy{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9d3cd;display:inline-block;padding:6px 0;margin:-6px 0}
footer .footer-privacy:hover,footer .footer-privacy:focus-visible{text-decoration-color:currentColor}
/* In-dialog confirmation (demo-form.js) */
.demo-form.is-sending button[type=submit]{opacity:.72;cursor:progress}
dialog.is-sent .demo-form{display:none}
dialog #dialog-title:focus{outline:none}
dialog.is-sent #dialog-title em{color:var(--foundation-teal)}
dialog.is-sent .eyebrow{color:var(--foundation-teal)}
@media(max-width:600px){dialog.is-sent{display:flex;flex-direction:column;justify-content:center}}