/*
 * v11.18 — Homepage workflow visual redesign.
 *
 * The previous cinematic skin exposed a structural weakness in the homepage
 * "AI + human customer support" / service workflow visual: four narrow columns
 * with chip-like labels created clipping pressure for labels such as
 * "AI EXECUTES" and "HUMAN OWNER". Rather than continuing to patch the old
 * column math, this stylesheet gives the visual a cleaner 2×2 board layout.
 *
 * No copy changes. The same workflow concepts remain; only the presentation is
 * rebuilt so text has enough room to breathe and the block reads as a premium
 * product visual rather than a cramped infographic.
 */

html body .home970-flow{
  position:relative!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-areas:
    "meta meta"
    "step1 step2"
    "step3 step4"
    "status status"!important;
  gap:18px!important;
  align-items:stretch!important;
  padding:24px!important;
  border-radius:28px!important;
}

html body .home970-flow-meta{grid-area:meta!important;display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin:0!important;padding:0!important}
html body .home970-flow-meta span{
  min-height:38px!important;
  padding:8px 14px!important;
  font-size:12.5px!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
  line-height:1.25!important;
  white-space:nowrap!important;
}

html body .home970-flow-line{display:none!important}

html body .home970-step{
  min-height:0!important;
  padding:20px 20px 22px!important;
  border-radius:22px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 16px 34px rgba(7,18,34,.14)!important;
}
html body .home970-step.step-intake{grid-area:step1!important}
html body .home970-step.step-ai{grid-area:step2!important}
html body .home970-step.step-human{grid-area:step3!important}
html body .home970-step.step-outcome{grid-area:step4!important}

html body .home970-step-top{
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  align-items:start!important;
  column-gap:12px!important;
  row-gap:8px!important;
  width:100%!important;
  min-height:0!important;
  margin:0 0 22px!important;
}
html body .home970-step-top span{
  width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px!important;
  border-radius:13px!important;font-size:13px!important;font-weight:800!important;
}
html body .home970-step-top em{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  width:auto!important;max-width:100%!important;min-width:0!important;
  min-height:40px!important;height:auto!important;
  margin:0!important;padding:8px 14px!important;
  border-radius:999px!important;
  font-size:12.5px!important;line-height:1.22!important;font-weight:800!important;
  letter-spacing:.045em!important;text-transform:uppercase!important;
  white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere!important;
  box-sizing:border-box!important;
}

html body .home970-step>strong{
  margin-top:0!important;
  font-size:17px!important;
  line-height:1.22!important;
  letter-spacing:-.02em!important;
  max-width:12ch!important;
}
html body .home970-step>p{
  margin:14px 0 0!important;
  font-size:14px!important;
  line-height:1.5!important;
  max-width:17ch!important;
}

/* Outcome card keeps dark text despite the shared cinematic treatment. */
html body .home970-step.step-outcome .home970-step-top em,
html body .home970-step.step-outcome .home970-step-top span,
html body .home970-step.step-outcome > strong,
html body .home970-step.step-outcome > p{color:#13243b!important}

html body .home970-flow-status{
  grid-area:status!important;
  justify-self:end!important;
  margin-top:2px!important;
  padding:10px 14px!important;
  font-size:12.5px!important;
  font-weight:700!important;
  line-height:1.25!important;
  white-space:nowrap!important;
}

/* Slightly reduce the service copy side's max width so the visual gains room. */
html body .home970-service-copy > p{max-width:26ch!important}

/* Generic safeguard for other visual pills/labels across the site. */
html body :is(.workflow-visual-step,.va102-console-flow article,.va102-audience-board-flow article,.va102-intelligence-cards article,.va102-orchestration-board article,.va104-model-flow article,.va107-layer-rail article) :is(em,small,.va102-step-label,.va103-step-label,.va104-mini-label,.va110-label){
  max-width:100%!important;
  box-sizing:border-box!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

@media (max-width: 1440px){
  html body .home970-flow{gap:16px!important;padding:20px!important}
  html body .home970-step{padding:18px!important}
  html body .home970-step>strong{font-size:16px!important;max-width:none!important}
  html body .home970-step>p{font-size:13.5px!important;max-width:none!important}
}

@media (max-width: 1180px){
  html body .home970-flow{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"meta" "step1" "step2" "step3" "step4" "status"!important}
  html body .home970-flow-status{justify-self:start!important}
}

@media (max-width: 767px){
  html body .home970-flow{padding:16px!important;gap:14px!important}
  html body .home970-flow-meta span{white-space:normal!important}
  html body .home970-step{padding:16px!important;border-radius:18px!important}
  html body .home970-step-top{grid-template-columns:36px minmax(0,1fr)!important;column-gap:10px!important;margin-bottom:18px!important}
  html body .home970-step-top span{width:36px!important;height:36px!important;min-width:36px!important}
  html body .home970-step-top em{min-height:36px!important;padding:7px 11px!important;font-size:11.75px!important}
  html body .home970-step>strong{font-size:15px!important}
  html body .home970-step>p{font-size:13px!important}
}