/* Book a demo, v2: shared by / and /automate (moved out of v5/automate.css, 3 Oct 2026).
   Needs the page's .btn / .btn-brand and its colour variables; demo.js adds the base modal. */
/* Book a demo (3 Oct): the button and its form, in the page's own system. Ember is the one main action;
   the form is a dark case like the account seal, Syne heading, quiet labels, what happens next. */
[data-demo].btn-brand{position:relative}
[data-demo].btn-brand::after{content:"";width:14px;height:14px;margin-right:-3px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--eo,ease)}
[data-demo].btn-brand:hover::after{transform:translateX(3px)}
.demo-scrim[data-v="2"]{background:rgba(6,6,9,.7);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%)}
.demo-scrim[data-v="2"] .demo-box{position:relative;width:min(468px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:30px;border:0;border-radius:20px;
  background:linear-gradient(180deg,#16161b 0%,#0e0e12 100%);box-shadow:0 0 0 1px rgba(255,255,255,.075),inset 0 1px 0 rgba(255,255,255,.08),0 50px 110px -30px #000;
  font-family:"Schibsted Grotesk",system-ui,sans-serif;color:#f3f1eb;animation:dmIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes dmIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
.demo-scrim[data-v="2"] .dm-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:none;color:#85858d;display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.demo-scrim[data-v="2"] .dm-x:hover{background:rgba(255,255,255,.07);color:#fff}
.demo-scrim[data-v="2"] .dm-x svg{width:16px;height:16px}
.demo-scrim[data-v="2"] .dm-k{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8e8e96}
.demo-scrim[data-v="2"] .dm-k::before{content:"";width:18px;height:1px;background:#ff5a2e}
.demo-scrim[data-v="2"] h3{margin:-4px 0 0;padding-right:36px;font-family:Syne,sans-serif;font-weight:500;font-size:28px;line-height:1.06;letter-spacing:-.02em;color:#f6f4ee}
.demo-scrim[data-v="2"] .dsub{margin:10px 0 20px;font-size:15px;line-height:1.5;color:#b4b4bb}
.demo-scrim[data-v="2"] .dm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.demo-scrim[data-v="2"] .dm-f{margin-bottom:12px}
.demo-scrim[data-v="2"] .dm-f label{margin:0 0 6px}
.demo-scrim[data-v="2"] .dm-opt{color:#6f6f78;font-weight:400}
.demo-scrim[data-v="2"] label{display:block;margin:0 0 7px;font-family:"Schibsted Grotesk",sans-serif;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:#a9a9b1}
.demo-scrim[data-v="2"] input,.demo-scrim[data-v="2"] textarea{display:block;width:100%;box-sizing:border-box;padding:13px 14px;border:0;border-radius:12px;font:16px/1.4 "Schibsted Grotesk",sans-serif;color:#f6f4ee;
  background:#1b1b21;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);outline:none;resize:none;transition:box-shadow .15s,background .15s}
.demo-scrim[data-v="2"] input::placeholder,.demo-scrim[data-v="2"] textarea::placeholder{color:#64646c}
.demo-scrim[data-v="2"] input:hover,.demo-scrim[data-v="2"] textarea:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.demo-scrim[data-v="2"] input:focus,.demo-scrim[data-v="2"] textarea:focus{background:#1e1e25;box-shadow:inset 0 0 0 1.5px #ff5a2e,0 0 0 4px rgba(255,90,46,.14)}
.demo-scrim[data-v="2"] .dm-f.bad input{box-shadow:inset 0 0 0 1.5px #ff7a70}
.demo-scrim[data-v="2"] .dm-go{width:100%;height:50px;margin-top:8px;border-radius:12px;font-size:15.5px;gap:10px;background:#ff5a2e;border:0;box-shadow:none}
.demo-scrim[data-v="2"] .dm-go:hover{background:#ff6c44}
.demo-scrim[data-v="2"] .dm-go svg{width:17px;height:17px;transition:transform .25s}
.demo-scrim[data-v="2"] .dm-go:hover svg{transform:translateX(3px)}
.demo-scrim[data-v="2"] .dm-go[disabled]{opacity:.7;cursor:progress}
.demo-scrim[data-v="2"] .demo-msg{min-height:0;margin:10px 0 0;font-size:13px;color:#ff8a80}
.demo-scrim[data-v="2"] .demo-msg:empty{margin:0}
.demo-scrim[data-v="2"] .dm-next{display:grid;grid-template-columns:repeat(3,1fr);margin:20px 0 0;padding:16px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.08)}
.demo-scrim[data-v="2"] .dm-next li{font-size:12.5px;line-height:1.35;color:#a9a9b1;padding-right:8px}
.demo-scrim[data-v="2"] .dm-next b{display:block;margin-bottom:4px;font-family:"Geist Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.12em;color:#ff5a2e}
.demo-scrim[data-v="2"] .dm-done{text-align:center;padding:18px 4px 6px}
.demo-scrim[data-v="2"] .dm-tick{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;color:#ff5a2e;
  background:radial-gradient(circle,rgba(255,90,46,.16),rgba(255,90,46,.04));box-shadow:inset 0 0 0 1.5px rgba(255,90,46,.5)}
.demo-scrim[data-v="2"] .dm-tick svg{width:28px;height:28px;stroke-dasharray:24;stroke-dashoffset:24;animation:dmTick .5s .15s ease forwards}
@keyframes dmTick{to{stroke-dashoffset:0}}
.demo-scrim[data-v="2"] .dm-done .dsub{margin:10px auto 22px;max-width:30ch}
.demo-scrim[data-v="2"] .dm-time{display:flex;width:100%;height:50px;border-radius:14px;border:0;background:linear-gradient(180deg,#ff6b3d,#f4511f)}
.demo-scrim[data-v="2"] .dm-time[hidden]{display:none}
.demo-scrim[data-v="2"] .dm-close{display:block;min-height:40px;margin:10px auto 0;padding:8px 16px;border:0;background:none;color:#8e8e96;font:500 14px "Schibsted Grotesk",sans-serif;cursor:pointer}
.demo-scrim[data-v="2"] .dm-close:hover{color:#fff}
.demo-scrim[data-v="2"] .dm-x:focus-visible,.demo-scrim[data-v="2"] .dm-go:focus-visible,.demo-scrim[data-v="2"] .dm-close:focus-visible{outline:2px solid #ff5a2e;outline-offset:2px}
@media (max-width:520px){
  .demo-scrim[data-v="2"]{padding:14px}
  .demo-scrim[data-v="2"] .demo-box{border-radius:20px;padding:22px;max-height:calc(100dvh - 28px)}
  .demo-scrim[data-v="2"] h3{font-size:25px}
  .demo-scrim[data-v="2"] .dm-row{grid-template-columns:1fr;gap:0}
  .demo-scrim[data-v="2"] .dm-next li{font-size:12px}
}
@keyframes dmUp{from{transform:translateY(40px);opacity:.4}}
@media (prefers-reduced-motion:reduce){.demo-scrim[data-v="2"] .demo-box,.demo-scrim[data-v="2"] .dm-tick svg{animation:none;stroke-dashoffset:0}}