/* The demo form: the cookie banner's card, centred, in the site's own variables (with fallbacks). */
.sg-lock, .sg-lock body { overflow: hidden; }
.sg-modal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(26,25,23,.42); opacity: 0; pointer-events: none; transition: opacity .35s cubic-bezier(.16,1,.3,1); }
.sg-modal.is-on { opacity: 1; pointer-events: auto; }
.sg-modal__box { position: relative; width: 100%; max-width: 28rem; padding: 2rem 1.75rem 1.5rem; border: 1px solid var(--hairline-strong, rgba(26,25,23,.22)); border-radius: 20px; background: var(--air, #faf8f2); color: var(--fg, #1a1917); box-shadow: 0 40px 80px -40px var(--shadow-strong, rgba(48,38,20,.35)), 0 10px 30px -18px rgba(48,38,20,.3); font-family: var(--font-sans, Inter, sans-serif); font-size: .9375rem; line-height: 1.55; transform: translateY(12px); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.sg-modal.is-on .sg-modal__box { transform: none; }
.sg-modal__x { position: absolute; top: .75rem; right: .9rem; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: var(--fg-3, #6e685e); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.sg-modal__x:hover, .sg-modal__x:focus-visible { background: rgba(26,25,23,.06); color: var(--fg, #1a1917); }
.sg-modal__eb { margin: 0 0 .6rem; font-family: var(--font-mono, monospace); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3, #6e685e); }
.sg-modal__title { margin: 0; font-family: var(--font-sans, Inter, sans-serif); font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.sg-modal__text { margin: .75rem 0 0; color: var(--fg-2, #3b3833); }
.sg-demo { display: grid; gap: .9rem; margin-top: 1.25rem; }
.sg-demo .input { height: 3.25rem; padding: 0 .25rem; }
.sg-demo__check { display: flex; gap: .6rem; align-items: flex-start; font-size: .875rem; line-height: 1.45; color: var(--fg-2, #3b3833); cursor: pointer; }
.sg-demo__check input { flex: none; width: 1.05rem; height: 1.05rem; margin: .12rem 0 0; accent-color: var(--fg, #1a1917); }
.sg-demo__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sg-demo__go { display: inline-flex; align-items: center; justify-content: center; height: 3.25rem; padding: 0 1.6rem; border-radius: 999px; border: 1.5px solid var(--fg, #1a1917); background: var(--fg, #1a1917); color: var(--surface-0, #f3efe6); font: 600 1rem var(--font-sans, Inter, sans-serif); cursor: pointer; transition: opacity .2s; }
.sg-demo__go:hover { opacity: .9; }
.sg-demo__go:disabled { opacity: .55; cursor: wait; }
.sg-demo__go:focus-visible, .sg-demo__check input:focus-visible { outline: 2px solid var(--fg, #1a1917); outline-offset: 3px; }
.sg-demo__msg { min-height: 1.3em; margin: 0; font-size: .875rem; color: var(--fg-2, #3b3833); }
.sg-demo__msg.is-ok { color: var(--ok, #3f7a4f); }
.sg-demo__msg.is-err { color: var(--err, #b4452a); }
.sg-demo__small { margin: 0; font-family: var(--font-mono, monospace); font-size: .6875rem; letter-spacing: .06em; line-height: 1.6; color: var(--fg-3, #6e685e); }
.sg-demo__small a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.sg-demo__done { margin-top: 1.25rem; }
.sg-demo__done[hidden], .sg-demo[hidden] { display: none; }
.sg-demo__lead { margin: 0 0 1rem; color: var(--ok, #3f7a4f); font-weight: 500; }
.sg-demo__links { display: grid; gap: .6rem; }
.sg-demo__dl { display: flex; align-items: center; justify-content: center; height: 3rem; padding: 0 1.25rem; border-radius: 999px; border: 1.5px solid var(--fg, #1a1917); color: var(--fg, #1a1917); font: 600 .9375rem var(--font-sans, Inter, sans-serif); text-decoration: none; }
.sg-demo__dl.is-main { background: var(--fg, #1a1917); color: var(--surface-0, #f3efe6); }
.sg-demo__dl:hover { opacity: .88; }
.sg-demo__dl:focus-visible { outline: 2px solid var(--fg, #1a1917); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sg-modal, .sg-modal__box { transition: none; } }
