/* ─────────────────────────────────────────────────────────────────────────
   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);
  /* One sentence per line, which is the whole shape of this headline. In the
     two-column layout the track was narrow enough to do that on its own; once
     the section stacks, the copy gets the full 46rem and "Faster quotes. Simpler
     contracts." fits on one line, so the three-beat rhythm collapses to a ragged
     two. The cap is in em, so it tracks the font at every size: the longest
     single sentence ("More deals closed.") is about 8.6em wide and the shortest
     two-sentence pair about 15.2em, so 11em sits between them and can only ever
     fit one. Above 1260px the column is already narrower than 11em, so this
     changes nothing there. */
  max-width: 11em;
  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 ─────────
   The form card is a fixed 34rem, so every pixel the viewport loses comes out of
   the copy column. The headline is three sentences and it is meant to read as
   three lines, one per sentence — that shape needs about 530px at --fs-hero.
   Measured against the live page, the copy track is 529px at a 1260px viewport
   and 511px at 1240px, which is where the third line gives way: the headline
   goes to four lines and starts breaking mid-sentence ("Simpler / contracts.
   More / deals closed.") while the form beside it has not moved at all. By
   1100px the copy track is 388px and the headline is five lines.

   Shrinking the headline instead is not a trade worth making: holding three
   lines at 1080px would take about 43px against the hero's 56px, and the page
   opening and closing on the same size is the point of this headline.

   So the split ends at 1260px, not the 900px it was written at. Below that the
   copy runs across the top and the form sits under it, and both get the full
   frame — the card comes up to the copy's own 46rem so the two read as one
   column rather than two ragged left-aligned blocks. */
@media (max-width: 1260px) {
  .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: 46rem; }
}

/* 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); }
}

/* The same trade microsite.css makes for the V4 closing headline at 520px, one
   step later because this one sits in a wider column. At 344px and up the three
   sentences each hold a line at --fs-hero; at 330px "Simpler contracts." no
   longer does, and the headline breaks mid-sentence. min() gives up the last few
   points of size instead, so the one-sentence-per-line shape survives to 320. */
@media (max-width: 360px) {
  .closing-form-headline { font-size: min(var(--fs-hero), 8.6vw); }
}