/* ─────────────────────────────────────────────────────────────────────────
   V5 homepage — what changed from V4.

   V4 closed on a headline and two buttons that sent visitors to demo.html.
   V5 folds that page into the closing section, so the form is on the homepage
   and "Request a demo" is a scroll instead of a navigation.

   Everything here is additive and scoped to V5-only classes. microsite.css,
   masthead-v4.css and demo.css are untouched, which is what keeps index-v4.html
   rendering exactly as it did.
   ───────────────────────────────────────────────────────────────────────── */

/* demo.css hangs these tokens off .demo-page, the body class on demo.html.
   The homepage body has no such class, so the closing section declares them
   itself — same values, same source of truth as the page they came from. */
.closing--form {
  --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);
}

/* The section now holds a form, not one line of copy, so it stops being a
   viewport-height panel and grows to whatever the form needs. */
.closing--form {
  min-height: 0;
  align-items: start;
  padding-block: var(--space-3xl);
}

/* A scroll target under a fixed masthead lands with its first line hidden behind
   the bar. This offsets the anchor by the pinned height plus a little air. */
.closing--form {
  scroll-margin-top: calc(var(--nav-h) + var(--space-m));
}

/* demo.html's two-column split, minus its page padding — on the homepage the
   surrounding .frame already supplies that. */
.closing-form-grid {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  /* 34rem is demo.css's own form column (.demo-grid), not a number picked by
     eye — this card is that page's card, so it gets that page's width. It was
     31rem while the form was hand-written and five fields short; the HubSpot
     form carries two more, and at 31rem its longest labels ("Document
     generated per month") wrapped to two lines and the card read as cramped. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  /* Centred against the card, as on demo.html. The copy is shorter than the
     form, so aligning both to the top leaves the left column hanging over a
     tall empty gap. */
  align-items: center;
  gap: var(--space-2xl);
}

/* .demo-copy is a query container sized for demo.html's hero, where the headline
   is an .h1 keyed to container width. Here the headline is an .h2 with its own
   size below, so the container does nothing and the column just needs its width
   released — the grid track already constrains it. */
.closing-form-copy {
  max-width: none;
}

/* The same size and tracking as the page's own hero headline — --fs-hero,
   the display face, the hero's letter- and word-spacing. The page opens and
   shuts on the same note, which is what the V4 closing headline did too.

   No text-wrap:balance here. Balance evens the lines out, which on a
   three-clause sentence splits it somewhere other than the commas; letting it
   fill each line breaks it after "quotes," and "contracts," on its own. */
.closing-form-headline {
  margin-bottom: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.035em;
  /* word-spacing: -0.3em removed with the mono face -- it compensated for a
     monospace space glyph and collapses the spaces in a proportional one. */
  color: var(--text-primary);
}

/* .demo-sub is sized for the demo page's hero column. Beside the form on a wider
   homepage grid it wants a measure, or it runs to the full track. */
.closing--form .demo-sub {
  max-width: 46ch;
}

/* ───────── masthead call-to-action fade ─────────
   Past the tools section there is a live form on screen, so the masthead's two
   buttons stop being the way to act and start being competition for it. They
   fade out and stop taking clicks; the logo and the bar itself stay.

   Toggled by .is-cta-hidden in home-v5.js. Opacity and visibility rather than
   display, so the buttons keep their box and the masthead does not reflow —
   the logo would otherwise jump as they vanish. */
.topnav .nav-ai-cta,
.topnav .signup-cta {
  transition: opacity .3s ease, transform .3s ease;
}
.topnav.is-cta-hidden .nav-ai-cta,
.topnav.is-cta-hidden .signup-cta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .topnav .nav-ai-cta,
  .topnav .signup-cta { transition: none; }
  .topnav.is-cta-hidden .nav-ai-cta,
  .topnav.is-cta-hidden .signup-cta { transform: none; }
}

/* ───────── stacked ───────── */
@media (max-width: 900px) {
  .closing-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
  }
  .closing-form-copy { max-width: 46rem; }
  .closing--form .demo-form-card { max-width: 38rem; }
}

/* One field per row on a phone, at demo.css's own breakpoint for the same
   thing (.demo-field-row, 640px). A media query rather than the container
   query microsite.css uses for the same collapse: that one is written against
   the AI dialog, which is its own query container, and this card is not one.
   Making it one would not help either — the card is ~496px wide on a desktop,
   already inside that query's 520px, so every screen would get one column. */
@media (max-width: 640px) {
  .closing--form .hubspot-embed .hs-form { grid-template-columns: minmax(0, 1fr); }
}