/* Give the calculation field the main share of the opening demonstration. */
.automation {
  max-width:none;
  margin-top:49px}
.automation-heading {
  padding:32px 36px 24px}
.automation-heading h2 {
  font-size:32px}
.automation-heading>p {
  font-size:12px}
.automation-canvas {
  grid-template-columns:minmax(0,.9fr) minmax(0,1.75fr) minmax(0,.95fr);
  padding:3px 18px 7px;
  background:radial-gradient(ellipse at 53% 55%,#eaf7ff 0,transparent 59%),linear-gradient(180deg,#fff,#f8fcff)}

.auto-stage {
  padding:9px 18px 17px;
  min-height:400px}
.stage-heading {
  margin-bottom:24px}
.stage-heading h3 {
  font-size:15px}
.stage-heading>span {
  font-size:10px}
.auto-source .source-stack {
  margin-top:auto;
  margin-bottom:auto;
  min-height:208px;
  gap:15px;
  padding-top:16px;
  padding-bottom:13px}
.data-ticket {
  padding:14px 12px;
  min-height:49px}
.data-ticket>span {
  font-size:11px}
.ticket-line {
  width:15px}
.auto-stage .stage-note {
  min-height:44px;
  padding-top:20px;
  font-size:10px;
  line-height:1.7}

.auto-model {
  padding-inline:24px}
.forecast-count {
  display:flex;
  gap:17px;
  align-items:center;
  margin-top:0}
.forecast-count strong {
  font-size:48px;
  line-height:1.15}
.forecast-count>span {
  max-width:127px;
  font-size:11px;
  line-height:1.65}
.field-phase {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  line-height:1.6;
  color:#7fa1b7;
  margin-top:13px;
  min-height:17px}
.field-phase>i {
  width:4px;
  height:4px;
  background:#36a8d6;
  border-radius:50%;
  flex:none}
.forecast-field {
  margin-top:9px;
  padding:0;
  flex:1;
  display:flex;
  align-items:center}
.forecast-field svg {
  width:100%;
  height:auto;
  overflow:visible}
.auto-model .stage-note {
  padding-top:2px}
.stage-connector {
  top:205px;
  background:#f1f9fe;
  width:31px;
  height:31px;
  right:-16px;
  border-color:#cfe8f7}

.auto-result .chosen-ticket {
  margin-top:auto;
  margin-bottom:auto;
  min-height:241px;
  padding:20px 17px;
  position:relative;
  background:linear-gradient(160deg,#fff,#f5fbff)}
.chosen-label {
  font-size:10px}
.chosen-ticket>strong {
  font-size:41px;
  margin-top:10px}
.chosen-profit {
  display:block;
  padding-top:19px;
  margin-top:20px}
.chosen-profit>span {
  display:block;
  font-size:10px;
  max-width:none}
.chosen-profit>b {
  display:block;
  margin-top:5px;
  font-size:26px;
  color:#3080ac}
.chosen-check {
  margin-top:19px;
  font-size:9px}
.chosen-ticket:after {
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid #5db9e230;
  border-radius:15px;
  pointer-events:none;
  opacity:0}
.auto-result .stage-note {
  padding-top:20px}

.automation-feedback {
  height:45px;
  position:relative;
  margin:0 23px;
  background:#f8fcff}
.automation-feedback>svg {
  width:100%;
  height:40px}
.automation-feedback>span {
  position:absolute;
  left:50%;
  top:13px;
  transform:translateX(-50%);
  background:#f8fcff;
  padding:0 14px;
  font-size:9px;
  white-space:nowrap;
  line-height:1.7;
  color:#7fa1b6}
.automation-foot {
  padding:20px 35px}
.automation-foot .replay {
  font-size:11px;
  min-height:40px}
.automation-promise strong {
  font-size:12px}
.automation-promise p>span {
  font-size:10px}
.automation-progress {
  height:3px}

@keyframes return-current {
  from {
  stroke-dashoffset:0}
to {
  stroke-dashoffset:-292}
}

@keyframes quiet-ticket {
  0%,100% {
  transform:translateX(0);
  box-shadow:0 3px 8px -6px #426e8950}
50% {
  transform:translateX(2px);
  box-shadow:0 7px 16px -12px #1b8bc273}
}

@keyframes chosen-breath {
  0%,100% {
  opacity:.15;
  transform:scale(.995)}
50% {
  opacity:.7;
  transform:scale(1.015)}
}

@keyframes model-light {
  0%,100% {
  opacity:.45}
50% {
  opacity:1}
}

.automation[data-running=true] .return-flow {
  animation:return-current 5s linear infinite}
.automation[data-running=true] .data-ticket {
  animation:quiet-ticket 4.4s ease-in-out infinite}
.automation[data-running=true] .data-ticket:nth-child(2) {
  animation-delay:.4s}
.automation[data-running=true] .data-ticket:nth-child(3) {
  animation-delay:.8s}
.automation[data-running=true] .field-phase>i {
  animation:model-light 1.8s ease-in-out infinite}
.automation[data-running=true][data-stage="2"] .chosen-ticket:after,.automation[data-running=true][data-stage="3"] .chosen-ticket:after {
  animation:chosen-breath 2.5s ease-in-out infinite}
.automation[data-running=true][data-stage="3"] .return-flow {
  stroke:#36a1d2;
  stroke-width:2}

/* Longer forecast sweep and a moving optimum, with stable labels around them. */
.decision-workspace {
  grid-template-columns:minmax(0,2.65fr) minmax(0,1fr)}
.forecast-workspace {
  padding:28px 22px 25px;
  background:radial-gradient(ellipse at 48% 43%,#f6fbff 0,white 67%)}
.forecast-head {
  padding-bottom:17px}
.forecast-head h4 {
  font-size:14px}
.forecast-head p {
  font-size:11px}
.forecast-badge {
  font-size:10px;
  padding:5px 9px}
.forecast-legend {
  font-size:10px;
  gap:20px;
  margin-top:13px}
.decision-answer {
  padding:28px 22px}
.answer-bid {
  margin-top:31px}
.answer-bid>strong {
  font-size:43px;
  font-variant-numeric:tabular-nums}
.answer-profit {
  margin-top:27px;
  padding-top:24px}
.answer-profit>strong {
  font-size:30px;
  font-variant-numeric:tabular-nums}
.decision-answer>p {
  font-size:11px;
  margin-top:22px}
.answer-constraints {
  margin-top:25px}
.decision-answer>.replay {
  font-size:10px;
  min-height:43px;
  margin-top:auto}
.decision-process {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  min-height:24px;
  margin-top:19px;
  font-size:10px;
  color:#5d94b3;
  line-height:1.6}
.decision-process>.process-light {
  width:5px;
  height:5px;
  flex:none;
  border-radius:50%;
  background:#3da8d4;
  box-shadow:0 0 0 4px #e9f6ff}
.decision-process>span:nth-child(2) {
  min-width:181px;
  text-align:left}
.decision-process>i {
  width:33px;
  height:2px;
  border-radius:1px;
  background:linear-gradient(90deg,#d6edf9,#72c6e8,#d6edf9);
  background-size:200% 100%}

@keyframes process-stream {
  to {
  background-position:-200% 0}
}

@keyframes event-signal {
  0%,100% {
  box-shadow:0 0 0 0 #68bce900}
50% {
  box-shadow:0 0 0 5px #68bce91a}
}

.decision-demo[data-playing=true] .decision-process>i {
  animation:process-stream 2s linear infinite}
.decision-demo[data-playing=true] .decision-process>.process-light {
  animation:model-light 1.8s ease-in-out infinite}
.decision-demo[data-playing=true][data-phase="3"] .demand-event {
  animation:event-signal 1.5s ease-in-out infinite}
.decision-demo[data-playing=true][data-phase="2"] .answer-label i {
  box-shadow:0 0 0 5px #d8effb;
  transition:box-shadow .6s}
.decision-demo[data-playing=true][data-phase="2"] .answer-top>span:last-child {
  color:#1d91c0}
.explore-hint {
  margin-top:11px}
.decision-loop-progress {
  height:2px;
  background:#eaf4fb}
.decision-loop-progress>i {
  display:block;
  height:100%;
  width:0;
  background:#84cee9}
.demand-event {
  transition:background .8s,box-shadow .8s}
.decision-demo[data-moment="0"] .demand-event {
  background:#f6f9fc}
.decision-demo[data-moment="1"] .demand-event {
  background:#ebf7ff}

@media(min-width:1200px) {
  .automation {
  width:calc(100% + 48px);
  margin-left:-24px}
.automation-canvas {
  min-height:480px}
.auto-stage {
  min-height:438px}
}

@media(max-width:1100px) {
  .automation-heading {
  padding:28px}
.automation-heading h2 {
  font-size:29px}
.automation-canvas {
  grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr) minmax(0,.9fr);
  padding-inline:10px}
.auto-stage {
  padding-inline:14px;
  min-height:378px}
.stage-heading h3 {
  font-size:13px}
.stage-heading {
  gap:8px}
.auto-model {
  padding-inline:18px}
.forecast-count strong {
  font-size:41px}
.forecast-count>span {
  font-size:10px}
.data-ticket {
  padding:13px 9px;
  gap:8px}
.data-ticket>span {
  font-size:10px}
.ticket-line {
  display:none}
.auto-result .chosen-ticket {
  padding:17px 13px;
  min-height:226px}
.chosen-ticket>strong {
  font-size:34px}
.chosen-profit>b {
  font-size:23px}
.chosen-profit>span {
  font-size:9px}
.chosen-check {
  font-size:8px;
  gap:5px}
.field-phase {
  font-size:9px}
.auto-stage .stage-note {
  font-size:9px}
.stage-connector {
  top:192px}
.automation-foot {
  padding:19px 28px}
.decision-workspace {
  grid-template-columns:minmax(0,2.3fr) minmax(0,1fr)}
.answer-bid>strong {
  font-size:37px}
.answer-profit>strong {
  font-size:27px}
.decision-answer {
  padding-inline:19px}
.forecast-head h4 {
  font-size:12px}
.forecast-badge {
  font-size:9px}
.forecast-legend {
  font-size:9px}
}

@media(max-width:850px) {
  .automation-canvas {
  grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);
  padding:0 15px 17px}
.auto-stage {
  min-height:0}
.auto-source {
  grid-column:1;
  grid-row:1}
.auto-model {
  grid-column:2;
  grid-row:1}
.auto-source .source-stack {
  min-height:195px}
.auto-result {
  grid-column:1/3;
  grid-row:2;
  display:grid;
  grid-template-columns:1fr 2fr;
  align-items:center;
  gap:13px 27px;
  margin-top:18px;
  padding-top:23px!important;
  border-left:0!important;
  border-top:1px solid #e0edf5}
.auto-result .stage-heading {
  grid-column:1;
  grid-row:1;
  margin:0}
.auto-result .chosen-ticket {
  grid-column:2;
  grid-row:1/3;
  min-height:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px 22px;
  align-items:center;
  padding:18px 20px}
.chosen-label {
  grid-column:1;
  grid-row:1}
.chosen-ticket>strong {
  grid-column:1;
  grid-row:2;
  margin:0;
  font-size:36px}
.chosen-profit {
  grid-column:2;
  grid-row:1/3;
  margin:0;
  padding:0;
  border:0}
.chosen-profit>b {
  font-size:24px}
.chosen-profit>span {
  font-size:9px}
.chosen-check {
  grid-column:1/3;
  grid-row:3;
  margin-top:7px;
  padding-top:10px;
  border-top:1px solid #e0edf5;
  font-size:9px}
.auto-result .stage-note {
  grid-column:1;
  grid-row:2;
  margin:0;
  padding:0;
  min-height:0;
  max-width:150px}
.auto-model .stage-connector {
  display:none}
.forecast-count strong {
  font-size:44px}
.auto-model .stage-note {
  padding-top:6px;
  min-height:31px}
.forecast-field {
  margin-top:12px}
.automation-feedback {
  margin-inline:18px}
.automation-promise strong {
  font-size:11px}
.automation-foot .replay {
  font-size:10px}
.decision-workspace {
  grid-template-columns:minmax(0,1fr)}
.forecast-workspace {
  padding:26px 22px}
.decision-answer {
  padding:24px 28px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.answer-bid,.answer-profit {
  margin:0;
  padding:0;
  border:0}
.answer-bid>strong {
  font-size:41px}
.answer-profit>strong {
  font-size:33px}
.decision-answer>p {
  margin:0;
  font-size:12px}
.answer-constraints {
  margin:0}
.decision-answer>.replay {
  margin:0;
  min-height:35px}
.decision-process {
  font-size:11px}
.forecast-head h4 {
  font-size:13px}
}

@media(max-width:600px) {
  .automation {
  margin-top:31px;
  margin-inline:-5px;
  width:auto}
.automation-heading {
  padding:24px 23px 17px}
.automation-heading h2 {
  font-size:26px}
.automation-heading>p {
  font-size:10px}
.automation-canvas {
  display:block;
  padding:0 21px 5px;
  background:radial-gradient(ellipse at 50% 47%,#eef9ff 0,transparent 59%),#fcfeff}
.auto-stage {
  padding:18px 0 22px;
  min-height:0}
.auto-source .source-stack {
  margin:0;
  padding:0;
  min-height:0;
  gap:8px}
.data-ticket {
  min-height:43px;
  padding:10px 10px;
  gap:8px}
.data-ticket>span {
  font-size:9px}
.stage-heading {
  margin-bottom:16px;
  gap:9px}
.stage-heading h3 {
  font-size:14px}
.stage-heading>span {
  font-size:9px}
.auto-stage .stage-note {
  font-size:9px;
  min-height:0;
  padding-top:13px}
.auto-model {
  display:block;
  padding:24px 0 21px}
.forecast-count {
  display:flex;
  align-items:center;
  gap:19px;
  margin-top:3px}
.forecast-count strong {
  font-size:45px}
.forecast-count>span {
  font-size:10px;
  max-width:135px;
  line-height:1.7;
  margin:0}
.field-phase {
  margin-top:14px;
  font-size:10px;
  gap:7px;
  min-height:19px}
.forecast-field {
  width:calc(100% + 12px);
  margin-left:-6px;
  margin-top:16px;
  display:block;
  min-height:0}
.forecast-field svg {
  width:100%;
  height:auto}
.auto-model .stage-note {
  font-size:9px;
  padding-top:0;
  margin-top:0}
.auto-result {
  display:block;
  margin-top:0;
  padding-top:21px!important;
  border-top:1px solid #deedf6}
.auto-result .stage-heading {
  margin-bottom:16px}
.auto-result .chosen-ticket {
  padding:19px 16px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:5px 16px;
  min-height:0}
.chosen-label {
  font-size:9px}
.chosen-ticket>strong {
  font-size:33px}
.chosen-profit>span {
  font-size:9px;
  max-width:none}
.chosen-profit>b {
  font-size:23px;
  margin-top:5px}
.chosen-check {
  font-size:9px;
  margin-top:8px;
  padding-top:12px}
.auto-result .stage-note {
  padding-top:13px;
  max-width:none}
.automation-feedback {
  height:32px;
  margin:0 12px}
.automation-feedback svg {
  display:none}
.automation-feedback>span {
  top:5px;
  font-size:8px;
  background:transparent}
.automation-foot {
  padding:17px 23px;
  gap:15px}
.automation-promise strong {
  font-size:10px;
  max-width:220px;
  white-space:normal}
.automation-promise p>span {
  font-size:9px;
  max-width:220px;
  white-space:normal}
.automation-foot .replay {
  font-size:9px;
  min-height:42px}
.automation-feedback .return-flow {
  animation:none!important}
.forecast-workspace {
  padding:25px 12px 23px}
.forecast-head {
  padding:0 7px 19px;
  gap:12px}
.forecast-head h4 {
  font-size:12px}
.forecast-head p {
  font-size:10px}
.forecast-badge {
  font-size:8px;
  padding:5px 7px}
.forecast-legend {
  font-size:8px;
  gap:11px;
  margin-top:14px}
.decision-process {
  font-size:10px;
  margin-top:19px;
  gap:7px}
.decision-process>span:nth-child(2) {
  min-width:173px}
.decision-process>i {
  width:24px}
.explore-hint {
  font-size:9px;
  line-height:1.8;
  margin-top:13px}
.decision-answer {
  padding:24px 21px;
  gap:18px 19px}
.answer-bid>strong {
  font-size:35px}
.answer-profit>strong {
  font-size:28px}
.answer-profit>span {
  font-size:9px}
.decision-answer>p {
  font-size:11px;
  line-height:1.85}
.answer-constraints {
  font-size:9px;
  gap:8px 14px}
.decision-answer>.replay {
  font-size:10px;
  min-height:39px}
.answer-bid,.answer-profit {
  margin:0;
  padding:0;
  border:0}
.decision-insight {
  padding-top:22px}
.stage-connector {
  display:none}
}

@media(max-width:360px) {
  .automation-heading h2 {
  font-size:24px}
.automation-promise strong {
  font-size:9px}
.automation-promise p>span {
  font-size:8px}
.forecast-count strong {
  font-size:42px}
.forecast-count>span {
  font-size:9px;
  max-width:118px}
.chosen-ticket>strong {
  font-size:30px}
.chosen-profit>b {
  font-size:20px}
.field-phase {
  font-size:9px}
.forecast-head h4 {
  font-size:11px}
.forecast-head p {
  font-size:9px}
.forecast-badge {
  font-size:7px}
.decision-process {
  font-size:9px}
.decision-process>span:nth-child(2) {
  min-width:157px}
.answer-bid>strong {
  font-size:31px}
.answer-profit>strong {
  font-size:24px}
.answer-constraints {
  font-size:8px}
}

@media(prefers-reduced-motion:reduce) {
  .automation .return-flow,.automation .data-ticket,.automation .chosen-ticket:after,.automation .field-phase>i,.decision-demo .decision-process>i,.decision-demo .process-light,.decision-demo .demand-event {
  animation:none!important}
}


.auto-model .forecast-field {
  flex:none;
  display:block}
.auto-model .stage-note {
  margin-top:10px;
  padding-top:0;
  flex:none}
.stage-connector {
  top:50%;
  margin-top:-15px}