/* ============================================================
   Book a Demo page. Two-column layout, sticky form on desktop.
   Append to app.css or load separately, it reuses brand tokens.
   ============================================================ */
.demo {
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(45% 40% at 88% -5%, rgba(45,127,249,.14), transparent 60%),
    radial-gradient(40% 38% at 5% 8%, rgba(255,176,32,.10), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--grey) 38%);
}
/* Faint control-room grid, masked so it fades toward the edges */
.demo::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grey-200) 1px, transparent 1px),
    linear-gradient(90deg, var(--grey-200) 1px, transparent 1px);
  background-size: 44px 44px; opacity: .55;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 80%);
  mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 80%);
}
.demo__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

/* ---------- Intro side ---------- */
.demo__title { font-size: clamp(2rem, 4.5vw, 3.2rem); margin: .6rem 0 1rem; }
.demo__lead { font-size: 1.14rem; color: var(--ink-soft); max-width: 44ch; }
.demo__points { list-style: none; padding: 0; margin: 1.8rem 0; display: grid; gap: .6rem; }
.demo__points li { position: relative; padding: .85rem 1rem .85rem 2.9rem; color: var(--ink); font-weight: 500; background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-md); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.demo__points li:hover { transform: translateX(3px); box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.demo__points li::before { content: ''; position: absolute; left: 1rem; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--blue-100); }
.demo__points li::after { content: ''; position: absolute; left: 1.42rem; top: 50%; width: 8px; height: 5px; margin-top: -3px; border-left: 2px solid var(--blue-600); border-bottom: 2px solid var(--blue-600); transform: rotate(-45deg); }

/* Trust signals */
.demo__trust { margin: 1.6rem 0; padding-top: 1.4rem; border-top: 1px solid var(--grey-200); }
.demo__trustlabel { display: block; font-size: .92rem; color: var(--ink-faint); margin-bottom: .7rem; }
.demo__trustlabel strong { color: var(--ink); font-family: var(--font-mono); }
.demo__trustlogos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.demo__trustlogos li { font-family: var(--font-display); font-weight: 600; color: var(--ink-soft); opacity: .7; letter-spacing: -.01em; }
.demo .quote { margin-top: 1.6rem; }

/* ---------- Form side ---------- */
.demo__formwrap { position: sticky; top: 96px; }
.demo__form { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.2rem); box-shadow: var(--shadow-lg); }
/* Gradient accent bar across the top of the card */
.demo__form::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue) 0%, #7FB2FF 50%, var(--amber) 100%); }
.demo__formhead { margin-bottom: 1.5rem; }
.demo__formbadge { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .7rem; font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-600); background: var(--blue-100); padding: .3rem .7rem; border-radius: var(--r-pill); }
.demo__formtitle { font-size: 1.5rem; margin: 0 0 .35rem; }
.demo__formsub { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* Refined fields, scoped to the demo form so the inputs feel premium */
.demo__form .field { margin-bottom: 1.05rem; }
.demo__form .field label { font-size: .82rem; letter-spacing: .01em; color: var(--ink-soft); }
.demo__form .field input, .demo__form .field select, .demo__form .field textarea { background: #fff; border: 1.5px solid var(--grey-300); border-radius: var(--r-md); box-shadow: inset 0 1px 2px rgba(11,31,58,.04); }
.demo__form .field input::placeholder, .demo__form .field textarea::placeholder { color: var(--ink-faint); }
.demo__form .field input:hover, .demo__form .field select:hover, .demo__form .field textarea:hover { border-color: var(--ink-faint); }
.demo__form .btn--block { margin-top: .4rem; padding-block: 1rem; font-size: 1.02rem; }

.demo__note { margin-top: 1rem; font-size: .82rem; color: var(--ink-faint); line-height: 1.5; }
.demo__success { margin-top: 1rem; padding: .8rem 1rem; background: rgba(54,211,153,.14); border: 1px solid rgba(54,211,153,.4); border-radius: var(--r-sm); color: #1F8A4C; font-size: .9rem; }
@media (max-width: 860px) {
  .demo__grid { grid-template-columns: 1fr; }
  .demo__formwrap { position: static; }
}