/* TerraFab OS marketing site — Request a Demo (/request-demo).
   Source: HANDOVER-marketing-site.md §6.3 (structure) + Request Demo.dc.html
   (verbatim copy — the doc doesn't inline the full pitch/list text).
   Front-end only: state, validation, fake success — no network call.
   Qualifier questions (development type, dwelling count, project value,
   funding source, target start) are explicitly NOT built per the doc's own
   instruction, pending Terry's sign-off on the field list. */

.tf-demo-section {
  max-width: 1280px; margin: 0 auto; padding: 80px 48px 104px;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,520px); gap: 64px; align-items: start;
}
.tf-demo-hero__list { display: grid; gap: 20px; max-width: 56ch; margin-bottom: 44px; }
.tf-demo-hero__item { display: flex; gap: 16px; align-items: flex-start; }
/* --tf-coral fails AA at this size on --tf-sand -- darkened per §2's own
   fallback instruction (see contact.css's note on the same finding). */
.tf-demo-hero__num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: var(--tf-coral-press); padding-top: 2px; }
.tf-demo-hero__item-title { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.tf-demo-hero__item-body { font-size: 14.5px; line-height: 1.6; color: rgba(22,33,31,0.7); }

.tf-demo-hero__callout {
  background: var(--tf-shell); border: 1px solid var(--tf-line); border-radius: 14px; padding: 24px 26px;
  max-width: 56ch;
}
.tf-demo-hero__callout-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: rgba(22,33,31,0.5);
  margin-bottom: 10px; text-transform: uppercase;
}
.tf-demo-hero__callout-body { font-size: 15px; line-height: 1.6; color: rgba(22,33,31,0.75); }

.tf-demo-form-wrap { position: sticky; top: 96px; }

@media (max-width: 1099px) {
  /* min-width: 0 on the grid items -- see home.css's identical note on
     the same CSS Grid min-content-floor issue. */
  .tf-demo-section { grid-template-columns: 1fr; }
  .tf-demo-section > * { min-width: 0; }
  .tf-demo-form-wrap { position: static; }
}
@media (max-width: 767px) {
  .tf-demo-section { padding: 56px 24px 64px; }
}