/* ─────────────────────────────────────────────────────────────────────────
   Request a demo — lead capture page.

   Layers on top of microsite.css: every token, primitive (.frame, .btn,
   .h1, .lead, .eyebrow), the .topnav, the .hero fluid field, and .pagefoot
   come from there unchanged. This file only adds the two-column lead layout
   and the form itself.
   ───────────────────────────────────────────────────────────────────────── */

.demo-page {
  --demo-error: #FF6B6B;
  --demo-card-bg: color-mix(in oklab, var(--surface-card) 88%, transparent);
  --demo-card-border: color-mix(in oklab, var(--text-primary) 12%, transparent);
  --demo-input-bg: color-mix(in oklab, var(--bg) 55%, transparent);
}

/* ───────── hero shell ─────────
   .hero ships with padding-bottom:0 because on the home page a logo band sits
   under it. Nothing follows here, so the hero closes itself. */
.demo-hero {
  display: flex;
  min-height: 100svh;
  align-items: center;
  padding-top: calc(var(--nav-h) + var(--space-m));
  padding-bottom: var(--space-2xl);
}

.demo-grid {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  align-items: center;
  gap: var(--space-3xl);
  padding-inline: calc(var(--pad) + var(--gutter-wide));
}

/* ───────── left column ───────── */
/* A query container so the headline can size itself against this column
   rather than the viewport. In the two-column layout the grid squeezes this
   track to ~370-550px no matter how wide the screen gets, so a viewport-keyed
   --fs-hero (up to 67px) wraps the headline to four lines. */
.demo-copy {
  max-width: 34rem;
  container-type: inline-size;
  /* One ink for the whole left column under the headline. The subhead, the
     payoff line, and the three points are one piece of copy read top to bottom,
     so any of them sitting brighter than the others reads as emphasis nobody
     intended. */
  --demo-copy-ink: color-mix(in oklab, var(--text-primary) 72%, var(--text-secondary));
}
/* --text-tertiary is too dim against the dark hero at this size — the eyebrow
   is the first line on the page and has to be readable. */
.demo-copy .eyebrow { color: var(--text-secondary); }
.demo-copy .h1 {
  margin-bottom: var(--space-m);
  font-family: var(--font-display);
  /* 11.4cqw keeps the longest <br>-separated line inside the column, so the
     headline holds at three lines. --fs-hero still wins once the layout stacks
     under 1024px and the column gets wide again. */
  font-size: min(var(--fs-hero), 11.4cqw);
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.demo-sub {
  max-width: 42ch;
  margin-bottom: var(--space-l);
  color: var(--demo-copy-ink);
}
/* The payoff line belongs to the three points below it, not to the paragraph
   above — so it keeps the full --space-l gap under .demo-sub and sits tight
   against the list. Proximity is what does the grouping here. */
.demo-sub-kicker {
  max-width: 42ch;
  margin: 0 0 var(--space-s);
  color: var(--demo-copy-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 500;
}
/* Full body size, same ink as the subhead and the payoff line above it — these
   three lines are the offer itself, not a footnote to it. The larger type needs
   a little more air between rows, hence --space-s over --space-xs. */
.demo-points {
  display: grid;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--demo-copy-ink);
  font-size: var(--fs-body);
}
.demo-points li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.5;
}
.demo-points li::before {
  content: '';
  position: absolute;
  top: .52em;
  left: 0;
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--accent);
}

/* ───────── the card ───────── */
.demo-form-card {
  padding: clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem);
  border: 1px solid var(--demo-card-border);
  border-radius: 18px;
  background: var(--demo-card-bg);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 28px 70px -40px rgba(0, 0, 0, .9);
}
.demo-form-title { color: var(--text-primary); }
.demo-form-copy {
  margin: var(--space-2xs) 0 var(--space-l);
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

/* ───────── fields ───────── */
.demo-form { display: grid; gap: var(--space-m); }
.demo-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
}
.demo-field { display: grid; gap: 8px; min-width: 0; }
.demo-field label {
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: 500;
}
.demo-field input,
.demo-field select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--demo-input-bg);
  color: var(--text-primary);
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.demo-field input::placeholder { color: var(--text-tertiary); }
/* Native select chrome differs per platform; draw our own caret so the field
   reads as the same control as the text inputs beside it. */
.demo-field select {
  appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
/* The disabled placeholder option greys out; a chosen value reads as normal text. */
.demo-field select:invalid { color: var(--text-tertiary); }
.demo-field input:focus,
.demo-field select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
/* An error only shows after the field has been judged — see demo.js. */
.demo-field.is-invalid input,
.demo-field.is-invalid select { border-color: var(--demo-error); }
.demo-field.is-invalid input:focus,
.demo-field.is-invalid select:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--demo-error) 24%, transparent); }
.demo-error {
  min-height: 0;
  color: var(--demo-error);
  font-size: var(--fs-cap);
  line-height: 1.4;
}
.demo-error:empty { display: none; }

/* ───────── opt-in checkbox ───────── */
.demo-optin {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  cursor: pointer;
}
.demo-optin input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.demo-optin-box {
  display: grid;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  place-items: center;
  border: 1px solid color-mix(in oklab, var(--text-primary) 30%, transparent);
  border-radius: 6px;
  background: var(--demo-input-bg);
  color: var(--bg);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.demo-optin-box svg { width: 13px; height: 13px; opacity: 0; transition: opacity .12s ease; }
.demo-optin input:checked + .demo-optin-box {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.demo-optin input:checked + .demo-optin-box svg { opacity: 1; }
.demo-optin input:focus-visible + .demo-optin-box { outline: 2px solid var(--accent); outline-offset: 3px; }
.demo-optin-text { color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.45; }

/* ───────── submit, status, legal ───────── */
.demo-submit {
  justify-content: center;
  width: 100%;
  padding: var(--btn-py-lg) var(--btn-px-lg);
  font-size: var(--fs-body);
}
.demo-submit[disabled] { opacity: .6; cursor: progress; }
.demo-form-status {
  min-height: 0;
  color: var(--demo-error);
  font-size: var(--fs-small);
}
.demo-form-status:empty { display: none; }
.demo-legal {
  color: var(--text-tertiary);
  font-size: var(--fs-cap);
  line-height: 1.5;
}
.demo-legal a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.demo-legal a:hover { color: var(--text-primary); }

/* ───────── confirmation ───────── */
.demo-done { display: grid; gap: var(--space-m); justify-items: start; }
.demo-done-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--accent);
}
.demo-done-mark svg { width: 100%; height: 100%; }
.demo-done-title { color: var(--text-primary); }
.demo-done-title:focus { outline: 0; }
.demo-done-copy { max-width: 44ch; color: var(--text-secondary); }
.demo-done-copy strong { color: var(--text-primary); font-weight: 500; }
.demo-done-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-2xs);
}

/* ───────── shape breakpoints ───────── */
@media (max-width: 1024px) {
  .demo-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .demo-hero { min-height: 0; }
  .demo-copy { max-width: 46rem; }
  .demo-form-card { max-width: 38rem; }
}
/* One input per row on a phone. Two-up survived down to 520px, which left
   ~205px per control and wrapped the longer labels ("Documents Generated/mo")
   onto two lines. 640px is the ceiling for phone widths; tablets at 768px and
   up keep the two-column form. */
@media (max-width: 640px) {
  .demo-field-row { grid-template-columns: minmax(0, 1fr); }
}