/*
 * Book a Demo landing pages — shared by book-a-demo.html (generic) and
 * book-ai-demo.html (Automotive Testing Expo / Quix AI). Selectors here are
 * page-agnostic (.hero--demo, .bad-*), so both pages link this one stylesheet.
 *
 * Conversion-focused, single purpose: a two-column hero pairs the demo copy
 * (left) with the HubSpot form (right), followed by the customer-logo strip and
 * the closing CTA. Only loaded on these pages, so the .logos-section / .hero
 * overrides below are safe to scope by element.
 *
 * Reuses the site design tokens (css/variables.css), the .hero base + corner
 * brackets (css/hero.css), the .bracket primitive (css/brackets.css), the logos
 * strip (css/logos.css) and the .book-demo CTA (css/tf.css).
 */

/* ── Hero: two-column copy + form ─────────────────────────────────────────── */
.hero--demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 72px;
  /* Top-align the columns so the eyebrow lines up with the top of the form card
     (rather than the copy floating to the vertical centre). The hero is
     content-height — no forced 100vh — so there's no dead space above the copy. */
  align-items: start;
  padding-top: 72px;
  padding-bottom: 96px;
}

.bad-hero__copy {
  max-width: 620px;
}

.bad-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 24px;
}

.bad-hero__heading {
  font-family: var(--font-sans);
  font-weight: 500;            /* Geist Medium — matches industry/product H1 */
  font-size: 40px;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 36px;
}

/* Lead paragraph under the H1 (whitepaper page) — a regular-weight intro that
   sits above the "what you'll learn" list. The demo pages skip straight from
   the heading to .bad-expect__intro, so this is only used where present. */
.bad-hero__lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 32px;
}

.bad-expect__intro {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--white);
  margin: 0 0 20px;
}

.bad-expect {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bad-expect li {
  position: relative;
  padding-left: 26px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

/* Orange square marker — the brand's pixel-square motif. */
.bad-expect li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--orange);
}

.bad-expect strong {
  color: var(--white);
  font-weight: 600;
}

/* ── Form card (right column) ─────────────────────────────────────────────── */
.bad-form {
  position: relative;
  align-self: start;
  background: rgba(10, 10, 10, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 40px 36px 44px;
  backdrop-filter: blur(2px);
}

/* Orange L corner brackets on the card, using the shared .bracket primitive
   (callers position it — see css/brackets.css). */
.bad-form .bracket--tl { top: -2px;    left: -2px; }
.bad-form .bracket--tr { top: -2px;    right: -2px; }
.bad-form .bracket--bl { bottom: -2px; left: -2px; }
.bad-form .bracket--br { bottom: -2px; right: -2px; }

.bad-form__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 8px;
}

.bad-form__sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 28px;
}

/* Container the HubSpot embed renders into. min-height reserves space so the
   card doesn't collapse/jump before the (async) form script loads. */
.bad-form__embed {
  min-height: 380px;
}

/* ── HubSpot form, themed to the dark card ────────────────────────────────────
 * The v2 `hbspt.forms.create` embed renders inline DOM (not an iframe), so its
 * standard class names can be styled from here. Without this the form's default
 * dark labels are invisible on the dark card. (The form is fetched from
 * hsforms.net, so it only appears when the page is served over http(s).)
 */
.bad-form__embed .hs-form-field {
  margin-bottom: 18px;
}

/* Force a single column on the narrow card, even if the form is built with
   2-column rows in HubSpot. */
.bad-form__embed fieldset {
  max-width: none !important;
}
.bad-form__embed fieldset .hs-form-field {
  width: 100% !important;
  float: none !important;
}
.bad-form__embed .input { margin-right: 0 !important; }

.bad-form__embed label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}

.bad-form__embed label .hs-form-required {
  color: var(--orange);
  margin-left: 2px;
}

.bad-form__embed .hs-field-desc {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 8px;
}

.bad-form__embed .hs-input,
.bad-form__embed input[type="text"],
.bad-form__embed input[type="email"],
.bad-form__embed input[type="tel"],
.bad-form__embed input[type="number"],
.bad-form__embed textarea,
.bad-form__embed select {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 11px 12px;
  transition: border-color 0.2s;
}

.bad-form__embed .hs-input:focus,
.bad-form__embed textarea:focus,
.bad-form__embed select:focus {
  outline: none;
  border-color: var(--orange);
}

.bad-form__embed .hs-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Native dropdown options paint on the OS menu (white), so keep their text dark. */
.bad-form__embed select.hs-input option {
  color: #000;
}

/* ~2 lines tall by default (the "tell us about yourself" message field);
   resize:vertical lets people drag it taller if they want to write more. */
.bad-form__embed textarea.hs-input {
  min-height: 60px;
  resize: vertical;
}

/* Checkbox / radio lists (e.g. consent, multi-select) */
.bad-form__embed ul.inputs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bad-form__embed .hs-form-booleancheckbox-display,
.bad-form__embed .hs-form-checkbox-display,
.bad-form__embed .hs-form-radio-display {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.8);
}
.bad-form__embed .hs-form-booleancheckbox-display input,
.bad-form__embed .hs-form-checkbox-display input,
.bad-form__embed .hs-form-radio-display input {
  width: auto;
  margin-top: 3px;
  accent-color: var(--orange);
}

/* Submit button — matches the site's orange CTA. */
.bad-form__embed .hs-button,
.bad-form__embed input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  margin-top: 8px;
  background: var(--orange);
  color: var(--black);
  border: none;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 28px;
  transition: opacity 0.2s;
}
.bad-form__embed .hs-button:hover {
  opacity: 0.85;
}

/* Validation + post-submit messages */
.bad-form__embed .hs-error-msg,
.bad-form__embed .hs-error-msgs label {
  color: #ff8a8a;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
/* Match the form's intro line (.bad-form__sub): mono, small, letter-spaced.
   Font/size set on the container; the inner <p>/<span> inherit it. */
.bad-form__embed .submitted-message,
.bad-form__embed .hs-richtext {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: none;
}
/* HubSpot stamps an inline near-black color (#222229) directly on the message's
   inner <span>s. An inline style beats any stylesheet rule, so only !important
   on the descendants overrides it — without this the thank-you text reads
   near-black ("too dark") on the dark card instead of light like .bad-form__sub. */
.bad-form__embed .submitted-message,
.bad-form__embed .submitted-message *,
.bad-form__embed .hs-richtext,
.bad-form__embed .hs-richtext * {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ── Page-scoped chrome tweaks ────────────────────────────────────────────── */
/* No hero/logo overlap on this page — the logo strip sits cleanly below the
   hero instead of being pulled up over it (index/industry behaviour). */
.logos-section {
  margin-top: 0;
  background: none;
  padding-top: 72px;
}

/* ── Closing CTA additions (over the shared .book-demo) ───────────────────── */
.bad-cta__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.bad-cta__line {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ── Mobile / tablet ──────────────────────────────────────────────────────── */
@media (max-width: 1300px) {
  .hero--demo {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: stretch;
    padding: 40px 24px 56px;
    min-height: 0;
  }

  .bad-hero__heading {
    font-size: 30px;
  }

  .bad-form {
    padding: 32px 24px 36px;
  }

  .logos-section {
    padding-top: 48px;
  }
}

@media (max-width: 620px) {
  .bad-hero__heading {
    font-size: 26px;
  }
}