/* ===== DEMO PAGE ===== */
.demo-hero {
  background: var(--c-dark);
  color: var(--cloud);
  position: relative;
  overflow: hidden;
}
.demo-hero-inner {
  max-width: var(--page-max); margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start;
}
.demo-hero-text .eyebrow { margin-bottom: 1.2rem; /* color — owned by typography.css */ }
.demo-hero-text h1 { font-family: var(--font-heading, 'Manrope', system-ui, sans-serif); font-weight: 800; font-size: var(--text-4xl, 3.5rem); /* 56px — spec H1 */ line-height: 1.054; margin-bottom: 1.6rem; letter-spacing: -0.03em; color: var(--cloud, #F5F7FA); /* restore light text on dark-navy hero */ }
.demo-hero-text p { font-size: var(--type-lead-size, 1.25rem); color: rgba(245, 247, 250, 0.82); font-weight: var(--type-lead-weight, 400); line-height: var(--type-lead-lh, 1.6); margin-bottom: 1rem; }

.demo-form-wrap { background: white; padding: 2.8rem 2.4rem; border-top: 3px solid var(--teal); }
.demo-form-wrap h2 { font-family: var(--font-heading, 'Manrope', system-ui, sans-serif); font-weight: 600; /* font-size — 22px H3 via typography.css .demo-form-wrap h2 selector */ color: var(--navy); margin-bottom: calc(0.5rem + 1.25rem); }
.demo-form-wrap .form-sub { font-size: 0.88rem; color: var(--gray-mid); margin-bottom: 1.8rem; line-height: 1.60; }

/*
  Keep the local card closer to the former FlowSense form without crossing
  into HubSpot's cross-origin iframe. The html[data-fsx] specificity is
  intentional: system.css has a later, broader .demo-form-wrap rule.
*/
html[data-fsx="marketing"] .demo-form-wrap { padding: 2.4rem 1.5rem 1.25rem; }
html[data-fsx="marketing"] .demo-form-wrap .form-sub { margin-bottom: 1rem; }

/*
  HubSpot's V4 embed renders this form inside a cross-origin iframe. The
  form editor is the supported surface for its field, validation, and button
  styling; these rules intentionally manage only the local frame bounds.
*/
.flowsense-hubspot-form { min-width: 0; width: 100%; }
.flowsense-hubspot-form .hs-form-frame { display: block; min-width: 0; width: 100%; }
.flowsense-hubspot-form .hs-form-frame > iframe { border: 0; display: block; max-width: 100%; width: 100%; }

.demo-why { background: var(--white); padding-block: var(--section-space-standard); }
.demo-why-inner { max-width: var(--page-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.demo-why-card { border-top: 2px solid var(--teal); padding-top: 1.4rem; }
.demo-why-num { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: var(--type-data-size, 0.8125rem); font-weight: var(--type-data-weight, 500); letter-spacing: var(--type-data-ls, 0.01em); color: var(--teal); margin-bottom: 0.7rem; }
.demo-why-card h3 { font-family: var(--font-heading, 'Manrope', sans-serif); font-weight: var(--type-h3-weight, 600); font-size: var(--type-h3-size, 1.375rem); color: var(--navy); margin-bottom: 0.7rem; line-height: var(--type-h3-lh, 1.375); }
.demo-why-card p { font-size: 1.0625rem; color: var(--ink); line-height: 1.60; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1060px) {
  .demo-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .demo-why-inner { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
  .demo-hero-text h1 { font-size: 2.25rem; /* 36px — spec H1 mobile */ }
  html[data-fsx="marketing"] .demo-form-wrap { padding: 2rem 1.25rem 1rem; }
}