/* Additions for the content from Insula CMS: rich text and the "Request a demo" form */

.rich { display: flex; flex-direction: column; gap: 16px }
.rich a { color: var(--accent) }
.rich ul, .rich ol { margin: 0; padding-left: 1.2em }
.rich h2, .rich h3, .rich h4 { font-family: 'Chakra Petch', sans-serif; text-transform: uppercase }

html { scroll-padding-top: 88px }

.demo-form { display: flex; flex-direction: column; gap: 28px }
.demo-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px 24px }
.demo-form__field { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.demo-form__field--wide { grid-column: 1 / -1 }
.demo-form__field > label { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #bdbdbd }
.demo-form input[type=text], .demo-form input[type=email], .demo-form input[type=tel], .demo-form select, .demo-form textarea {
  box-sizing: border-box; width: 100%; font: inherit; font-size: 16px; color: #ffffff; background: #0b0b0b;
  border: 1px solid #333333; border-radius: 0; padding: 12px 14px; outline: none
}
.demo-form textarea { resize: vertical; min-height: 120px }
.demo-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8a8a8a 50%), linear-gradient(135deg, #8a8a8a 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat }
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { border-color: var(--accent) }
.demo-form [aria-invalid=true] { border-color: #ff4d4d }
.demo-form__check { display: flex; gap: 12px; align-items: flex-start; color: #cfcfcf; cursor: pointer }
.demo-form__check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); flex: none }
.demo-form__help { font-size: 14px; color: #8a8a8a }
.demo-form__error { font-size: 14px; color: #ff7a7a }
.demo-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden }
.demo-form button:hover { filter: brightness(1.1) }
.demo-form button:focus-visible, .demo-form__check input:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px }

.form-notice { margin: 0; padding: 16px 20px; border: 1px solid #333333; font-size: 16px }
.form-notice--ok { border-color: var(--accent); color: #ffffff }
.form-notice--error { border-color: #ff4d4d; color: #ffb3b3 }