/* #521: /demo ("Book a demo") page + lead form. Loaded AFTER marketing.css, which supplies the
   tokens (--ink, --muted, --line, --bg, --card, --mk-red, --mk-red-d), .mk-hero, .mk-btn and the
   footer. Only what is specific to this page lives here. */

/* Slimmer hero than the home page: the logo is already in the header bar above it. */
.dm-hero{padding:48px 22px 52px}
.dm-hero h1{max-width:none}

.dm-sec{padding:56px 0}
.dm-alt{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dm-narrow{max-width:760px}
.dm-h2{margin:0 0 12px;font-size:28px;font-weight:800;letter-spacing:-.4px}
.dm-lead{margin:0 0 18px;font-size:17px;line-height:1.6}
.dm-list{margin:0;padding-left:22px;font-size:16px;line-height:1.6}
.dm-list li{margin-bottom:10px}

/* Getting started: two numbered steps, stacked so the ORDER (private group first) reads as an order. */
.dm-steps{display:grid;gap:16px}
.dm-step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.dm-step h3{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-.2px;
  display:flex;align-items:center;gap:12px}
.dm-step p{margin:0;color:var(--muted);font-size:15px}
.dm-num{flex:none;width:30px;height:30px;border-radius:50%;background:var(--mk-red);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}

/* The form */
.dm-form{margin-top:8px}
.dm-field{margin:0 0 18px}
.dm-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dm-field label{display:block;margin:0 0 6px;font-weight:700;font-size:15px}
.dm-req,.dm-opt{font-weight:400;color:var(--muted);font-size:13px}
.dm-field input,.dm-field textarea{width:100%;min-height:44px;padding:11px 13px;border:1px solid #b9bec7;
  border-radius:10px;background:var(--card);color:var(--ink);font:inherit;line-height:1.4}
.dm-field textarea{resize:vertical;min-height:120px}
.dm-field input:focus,.dm-field textarea:focus{outline:2px solid var(--mk-red);outline-offset:1px;
  border-color:var(--mk-red)}
.dm-has-err input{border-color:var(--mk-red-d);border-width:2px}
.dm-err{margin:6px 0 0;color:var(--mk-red-d);font-size:14px;font-weight:600}
.dm-submit{width:100%}
.dm-fine{margin:14px 0 0;color:var(--muted);font-size:13px}
.dm-fine a,.dm-panel a{color:var(--mk-red-d)}

/* Result panels (thank-you, could-not-send, please-retry) */
.dm-panel{border:1px solid var(--line);border-left:5px solid var(--mk-red);border-radius:12px;
  background:var(--bg);padding:20px 22px;margin:0 0 22px}
.dm-panel h2,.dm-panel h3{margin:0 0 8px}
.dm-panel h3{font-size:18px}
.dm-panel p{margin:0 0 10px}
.dm-panel p:last-child{margin-bottom:0}
.dm-ok{border-left-color:#1a7f4b}
.dm-warn{border-left-color:#b45309}

/* Honeypot: off-screen, not display:none, because some bots skip display:none inputs. A person can
   neither see nor tab to it (tabindex=-1 in the markup, aria-hidden on the wrapper). */
.dm-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

@media (max-width:720px){
  .dm-hero{padding:34px 20px 38px}
  .dm-sec{padding:40px 0}
  .dm-h2{font-size:24px}
  .dm-row{grid-template-columns:1fr;gap:0}
  .dm-step{padding:18px 18px}
}