/* ==========================================================================
   get-demo.css — /get-demo, the rollout-call page. One band: the argument on the left, the form on the right, then the
   shared logo strip. No hero blob and no closing panel, because this page is the close.
   The fields borrow the hero capture's treatment from feature-v2.css (white ground, hairline, 15 to 16px body type,
   the ink-blue .btn) rather than inventing a second field language for one page.
   Loads after feature-v2.css (tokens, .h, .sub, .col, .v2-logos) and home.css (.close-facts, .close-alt).
   ========================================================================== */

/* the band clears the sticky header the way every hero does: pull up by the header height, pad it back on */
.gd-band { margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + 56px) 0 clamp(56px, 6vw, 80px) !important; background: #fff; }
.gd-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(32px, 4.5vw, 68px); align-items: start; }
.gd-copy .h { max-width: 15ch; }
.gd-copy .sub { max-width: 42ch; }
.gd-copy .close-facts { margin-top: 30px; }
.gd-copy .close-alt { margin-top: 20px; max-width: 44ch; }

/* the ?topic=partner note: one line, above the form, hidden until the query says otherwise */
.gd-topic { margin-bottom: 14px; padding: 12px 16px; border-radius: 12px; background: var(--ghost); font: 500 14px/1.5 var(--font-display); color: var(--ink); }

/* the panel */
.gd-frame { padding: clamp(22px, 2.4vw, 30px); border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line), 0 30px 60px -48px rgba(15, 13, 25, .45); }
.gd-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
/* display: grid would otherwise beat the hidden attribute once the confirmation replaces the form */
.gd-fields[hidden], .gd-done[hidden], .gd-cal[hidden], .gd-done-cta[hidden] { display: none; }
.gd-field { display: grid; gap: 7px; margin: 0; min-width: 0; }
.gd-field--wide, .gd-check, .gd-submit, .gd-fail { grid-column: 1 / -1; }
.gd-field label { font: 500 14px/1.4 var(--font-display); color: var(--ink); }
.gd-opt { margin-left: 6px; font: 400 13px/1.4 var(--font-body); color: #6b7088; }

.gd-field input, .gd-field select, .gd-field textarea {
  width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .16);
  font: 400 16px/1.45 var(--font-body); color: var(--ink);
  transition: box-shadow .2s var(--ease-out);
}
.gd-field textarea { resize: vertical; min-height: 84px; }
.gd-field textarea::placeholder { color: #6b7088; }
/* the one checkbox: the partner enquiry, which is the only reason the old dropdown existed */
.gd-partner { margin-top: -4px; }
.gd-tick { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font: 400 14.5px/1.45 var(--font-body); color: var(--ink); }
.gd-tick input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
.gd-field select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%230f0d19' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.gd-field select:invalid, .gd-field select option[value=""] { color: #6b7088; }
.gd-field input:focus-visible, .gd-field select:focus-visible, .gd-field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.gd-field input:hover, .gd-field select:hover, .gd-field textarea:hover { box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .28); }
.gd-field .is-bad { box-shadow: inset 0 0 0 1.5px #c9184a; }
.gd-err { font: 400 13px/1.45 var(--font-body); color: #c9184a; }

/* the honeypot: off-screen for people, present for anything filling every input it finds */
.gd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* interaction-only Turnstile takes no room until Cloudflare asks for a challenge, so no reserved height */
.gd-check { margin-top: 2px; }
.gd-check:empty, .gd-check .cf-turnstile:empty { display: none; }
.gd-submit { display: flex; align-items: center; }
.gd-submit .btn { padding: 14px 26px; }
.gd-submit .btn[disabled] { opacity: .6; cursor: default; }
.gd-fail { font: 400 14px/1.5 var(--font-body); color: #c9184a; }

/* the confirmation replaces the form inside the same panel, so the page does not jump */
.gd-done-h { font: 500 clamp(21px, 2vw, 25px)/1.35 var(--font-serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.gd-frame.is-done { display: grid; align-content: start; min-height: 260px; }
.gd-done-p { margin-top: 10px; font: 400 15.5px/1.55 var(--font-body); color: var(--v2-body); }
.gd-cal { margin: 18px -8px 0; }
.gd-cal .calendly-inline-widget { border-radius: 14px; overflow: hidden; }
.gd-done-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.gd-done-cta .btn { padding: 14px 26px; }
.gd-done-fine { font: 400 13.5px/1.4 var(--font-body); color: #5b6076; }
.gd-done-fine b { color: var(--ink); font-weight: 600; }

@media (max-width: 991px) {
  .gd-band { padding-top: calc(var(--header-h) + 36px) !important; }
  .gd-grid { grid-template-columns: 1fr; gap: 36px; }
  .gd-copy .h, .gd-copy .sub, .gd-copy .close-alt { max-width: none; }
}
@media (max-width: 599px) {
  .gd-fields { grid-template-columns: 1fr; }
}