/* One event, one forecast, one decision. */
.bid-story {
  border:1px solid #d9e8f2;
  border-radius:24px;
  background:white;
  overflow:hidden;
  box-shadow:0 25px 70px -48px #477d9a80;
  text-align:left}

.bs-product {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 38px;
  border-bottom:1px solid #e6eff6;
  background:#fbfdff}

.bs-product-name {
  display:flex;
  align-items:center;
  gap:15px;
  min-width:0}
.bs-thumb {
  width:55px;
  height:55px;
  flex:none;
  background:#ecf7ff;
  border-radius:13px;
  padding:3px}
.bs-product h3 {
  font-size:20px;
  letter-spacing:-.025em}
.bs-product p {
  font-size:11px;
  color:#7891a2;
  margin-top:5px}
.bs-example {
  font-size:10px;
  color:#7b94a6;
  flex:none}

.bs-sequence {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  padding:20px 38px 0}
.bs-sequence button {
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  border:0;
  border-bottom:2px solid #e5eff6;
  text-align:left;
  padding:13px 0 16px;
  min-height:50px;
  color:#8ca1af}
.bs-sequence button>span {
  font-size:11px;
  font-variant-numeric:tabular-nums}
.bs-sequence button>strong {
  font-size:13px;
  font-weight:500}
.bs-sequence button>i {
  position:absolute;
  bottom:-2px;
  left:0;
  height:2px;
  background:#1e9fd6;
  width:var(--progress,0%)}
.bs-sequence button[aria-pressed=true] {
  color:#0d89bd}
.bs-sequence button[data-done=true] {
  color:#49778f}

.bs-stage {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:15px 38px 3px;
  min-height:62px}
.bs-stage>p {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:#5f8ca6;
  line-height:1.5;
  min-width:0}
.bs-stage>p>i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#27a4d5;
  box-shadow:0 0 0 4px #eaf6fd;
  flex:none}
.bs-play {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:none;
  padding:10px 2px;
  min-height:44px;
  background:none;
  border:0;
  font-size:11px;
  color:#6b8ea3;
  white-space:nowrap}
.bs-play:hover {
  color:#0589c0}
.bs-play>span {
  display:inline-block;
  width:12px;
  text-align:center}

.bs-plot {
  position:relative;
  margin:0;
  padding:17px 29px 21px;
  background:radial-gradient(ellipse at 50% 47%,#f3faff 0,white 69%)}
.bs-chart-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin:0 9px 12px}
.bs-chart-heading h4 {
  font-size:13px;
  color:#496a7f}
.bs-chart-heading>span {
  font-size:10px;
  color:#7e9eb1;
  white-space:nowrap}
.bs-plot>svg {
  width:100%;
  height:auto;
  touch-action:pan-y;
  cursor:crosshair}
.bs-plot>figcaption {
  font-size:11px;
  color:#7a96a8;
  line-height:1.7;
  text-align:center;
  margin:13px 12px 0}
.bs-tooltip {
  position:absolute;
  z-index:4;
  pointer-events:none;
  width:180px;
  padding:12px 14px;
  background:#fffffff5;
  border:1px solid #cce4f2;
  border-radius:10px;
  box-shadow:0 8px 22px -12px #3c72895c;
  font-size:10px;
  line-height:1.5;
  color:#7791a2}
.bs-tooltip b {
  color:#35586e;
  font-weight:500}
.bs-tooltip strong {
  display:block;
  font-size:20px;
  font-weight:500;
  letter-spacing:-.03em;
  color:#078fca;
  margin-top:4px}
.bs-tooltip small {
  font-size:9px;
  display:block;
  margin-top:3px}
.bs-tooltip .bs-tip-limit {
  color:#526d7d;
  padding-top:6px;
  margin-top:6px;
  border-top:1px solid #e1edf5}

.bs-outcome {
  margin:0 29px 29px;
  border:1px solid #dcecf6;
  border-radius:16px;
  overflow:hidden;
  background:#fff}
.bs-outcome-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:19px 25px 0}
.bs-outcome-head h4 {
  font-size:14px;
  color:#35576c}
.bs-outcome-head>span {
  font-size:10px;
  color:#7b94a4}
.bs-comparison {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  margin:20px 25px 0;
  gap:30px}
.bs-comparison>div {
  min-width:0;
  padding:0 0 23px}
.bs-comparison p {
  font-size:12px;
  color:#638094;
  line-height:1.5}
.bs-selected {
  padding-left:30px!important;
  border-left:1px solid #d9eaf5}
.bs-selected p {
  color:#048bc3;
  display:flex;
  align-items:center;
  gap:6px}
.bs-selected p>i {
  font-size:11px;
  font-style:normal}
.bs-bid {
  display:block;
  font-size:11px;
  color:#7b95a5;
  line-height:1.6;
  margin-top:7px;
  font-variant-numeric:tabular-nums}
.bs-comparison strong {
  display:block;
  font-size:37px;
  line-height:1.2;
  letter-spacing:-.045em;
  font-weight:500;
  color:#668799;
  margin-top:9px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap}
.bs-selected strong {
  color:#078fca}
.bs-conclusion {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:20px;
  align-items:center;
  padding:20px 25px;
  background:#edf8ff;
  border-top:1px solid #dcecf6}
.bs-conclusion>div>strong {
  display:block;
  font-size:25px;
  line-height:1.2;
  letter-spacing:-.035em;
  color:#098ec5;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  white-space:nowrap}
.bs-conclusion>div>span {
  display:block;
  font-size:10px;
  color:#638fa9;
  margin-top:4px}
.bs-conclusion>p {
  font-size:12px;
  line-height:1.8;
  color:#4d7891;
  max-width:600px}
.bs-conclusion>button {
  grid-column:1/3;
  justify-self:start;
  background:none;
  border:0;
  padding:5px 0;
  min-height:36px;
  font-size:11px;
  color:#0d8ec5}
.bs-conclusion>button>span {
  padding-left:6px}
.bs-limits {
  display:flex;
  justify-content:center;
  gap:26px;
  padding:13px 22px;
  font-size:10px;
  color:#7695a9;
  background:#f9fcff;
  border-top:1px solid #e3f0f7}
.bs-limits span {
  display:flex;
  gap:6px;
  align-items:center}
.bs-limits i {
  font-style:normal;
  color:#229fcd}

.bid-story[data-playing=true][data-phase="0"] .bs-signal {
  stroke-dasharray:55;
  animation:bs-data-signal 2.5s ease-in-out infinite}
.bid-story[data-phase="2"] .bs-selected strong {
  color:#038bc6}
.bid-story[data-playing=true] .bs-stage>p>i {
  animation:bs-status 2.6s ease-in-out infinite}
@keyframes bs-data-signal {
  0% {
  stroke-dashoffset:55;
  opacity:.3}
65%,100% {
  stroke-dashoffset:0;
  opacity:1}
}
@keyframes bs-status {
  50% {
  box-shadow:0 0 0 6px #eaf6fd}
}

@media(max-width:850px) {
  .bs-product {
  padding:22px 27px}
.bs-event {
  padding:26px 27px;
  gap:28px}
.bs-event>p {
  padding-left:27px}
.bs-event>p>strong {
  font-size:17px}
.bs-sequence {
  padding-inline:27px;
  gap:19px}
.bs-stage {
  padding-inline:27px}
.bs-plot {
  padding-inline:17px}
.bs-chart-heading {
  margin-inline:10px}
.bs-outcome {
  margin-inline:22px}
.bs-conclusion {
  grid-template-columns:175px minmax(0,1fr)}
.bs-comparison strong {
  font-size:32px}
.bs-outcome-head>span {
  font-size:9px}
}

@media(max-width:600px) {
  .bid-story {
  border-radius:17px;
  margin-inline:-5px}
.bs-product {
  padding:19px 20px;
  gap:12px;
  align-items:start}
.bs-product-name {
  gap:11px}
.bs-thumb {
  width:43px;
  height:43px;
  border-radius:10px}
.bs-product h3 {
  font-size:16px;
  line-height:1.35}
.bs-product p {
  font-size:9px;
  margin-top:4px}
.bs-example {
  font-size:8px;
  line-height:1.65;
  max-width:54px}
.bs-event {
  padding:25px 21px;
  gap:20px;
  align-items:center}
.bs-demand {
  grid-template-columns:1fr;
  gap:0}
.bs-demand svg {
  display:none}
.bs-demand>strong {
  font-size:35px}
.bs-demand>strong>span {
  font-size:21px}
.bs-demand>span {
  font-size:9px;
  white-space:nowrap}
.bs-event>p {
  padding-left:19px;
  font-size:11px;
  line-height:1.8}
.bs-event>p>strong {
  font-size:15px;
  line-height:1.45;
  display:block;
  margin-top:4px}
.bs-event>p br {
  display:none}
.bs-sequence {
  padding-inline:20px;
  gap:13px}
.bs-sequence button {
  display:block;
  padding:8px 0 12px;
  min-height:59px}
.bs-sequence button>span {
  font-size:9px;
  display:block;
  margin-bottom:4px}
.bs-sequence button>strong {
  font-size:10px;
  display:block;
  white-space:nowrap}
.bs-stage {
  padding:9px 20px 1px;
  gap:12px;
  min-height:66px}
.bs-stage>p {
  font-size:10px;
  gap:8px;
  max-width:220px;
  min-height:32px}
.bs-play {
  font-size:9px;
  gap:4px;
  min-height:44px}
.bs-play>span {
  width:9px}
.bs-plot {
  padding:13px 9px 20px}
.bs-chart-heading {
  align-items:start;
  gap:10px;
  margin:0 11px 14px}
.bs-chart-heading h4 {
  font-size:11px;
  max-width:190px;
  line-height:1.65}
.bs-chart-heading>span {
  font-size:8px;
  padding-top:3px}
.bs-plot>figcaption {
  font-size:9px;
  max-width:255px;
  margin:14px auto 0;
  line-height:1.8}
.bs-outcome {
  margin:0 13px 15px;
  border-radius:12px}
.bs-outcome-head {
  display:block;
  padding:17px 17px 0}
.bs-outcome-head h4 {
  font-size:13px}
.bs-outcome-head>span {
  display:block;
  font-size:9px;
  margin-top:4px}
.bs-comparison {
  gap:13px;
  margin:18px 17px 0}
.bs-comparison>div {
  padding-bottom:19px}
.bs-comparison p {
  font-size:10px;
  min-height:30px;
  line-height:1.5}
.bs-selected {
  padding-left:13px!important}
.bs-selected p {
  align-items:start;
  gap:5px}
.bs-selected p>i {
  font-size:9px}
.bs-bid {
  font-size:9px;
  line-height:1.7;
  margin-top:4px;
  max-width:124px}
.bs-comparison strong {
  font-size:25px;
  margin-top:9px}
.bs-conclusion {
  grid-template-columns:minmax(0,1fr);
  padding:18px 17px;
  gap:11px}
.bs-conclusion>div {
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap}
.bs-conclusion>div>strong {
  font-size:24px}
.bs-conclusion>div>span {
  font-size:9px;
  margin:0}
.bs-conclusion>p {
  font-size:11px;
  line-height:1.85}
.bs-conclusion>button {
  grid-column:auto;
  font-size:10px;
  min-height:40px;
  padding:7px 0}
.bs-limits {
  padding:12px 17px;
  gap:10px;
  font-size:8px;
  justify-content:space-between;
  line-height:1.7}
.bs-limits span {
  gap:4px;
  align-items:start}
.bs-tooltip {
  width:162px;
  padding:10px 12px;
  font-size:9px}
.bs-tooltip strong {
  font-size:18px}
.bs-tooltip small {
  font-size:8px}
.decision-section .section-heading>p br {
  display:none}
}

@media(max-width:360px) {
  .bs-product {
  padding-inline:17px}
.bs-product h3 {
  font-size:14px}
.bs-example {
  max-width:44px;
  font-size:7px}
.bs-event {
  gap:15px;
  padding-inline:18px}
.bs-event>p {
  padding-left:15px}
.bs-event>p>strong {
  font-size:14px}
.bs-sequence,.bs-stage {
  padding-inline:17px}
.bs-sequence {
  gap:10px}
.bs-sequence button>strong {
  font-size:9px}
.bs-comparison {
  margin-inline:14px;
  gap:10px}
.bs-selected {
  padding-left:10px!important}
.bs-comparison strong {
  font-size:22px}
.bs-bid {
  font-size:8px}
.bs-limits {
  font-size:7px}
.bs-conclusion>p {
  font-size:10px}
}

@media(prefers-reduced-motion:reduce) {
  .bid-story .bs-signal,.bid-story .bs-stage>p>i {
  animation:none!important}
}

.bs-product {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto}
.bs-product-name {
  display:grid;
  grid-template-columns:55px minmax(0,1fr)}
.bs-stage {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto}
.bs-stage>p {
  font-variant-numeric:tabular-nums}
.bs-limits {
  display:grid;
  grid-template-columns:max-content max-content}
.bs-limits>span {
  white-space:nowrap}
.bs-chart-heading>span {
  font-size:12px;
  color:#4889ad;
  letter-spacing:-.01em}

@media(max-width:600px) {
  .bs-product-name {
  grid-template-columns:43px minmax(0,1fr)}
.bs-limits {
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.bs-limits>span {
  white-space:normal}
.bs-chart-heading>span {
  font-size:9px}
.bs-product h3 {
  white-space:nowrap}
.bs-stage>p {
  max-width:none}
}

@media(max-width:360px) {
  .bs-product {
  column-gap:8px}
.bs-product-name {
  gap:8px}
.bs-product h3 {
  font-size:13px}
.bs-chart-heading>span {
  font-size:8px}
}

.bs-step {
  position:relative;
  min-width:0;
  border-bottom:2px solid #e5eff6}
.bs-step>button {
  width:100%;
  min-width:0;
  border-bottom:0}
.bs-step>i {
  position:absolute;
  bottom:-2px;
  left:0;
  height:2px;
  background:#1e9fd6;
  width:var(--progress,0%)}
.bs-stage>p {
  grid-column:1;
  grid-row:1;
  width:100%}
.bs-stage>.bs-play {
  grid-column:2;
  grid-row:1;
  display:block;
  justify-self:end;
  width:94px;
  text-align:right}
.bs-play>span {
  margin-right:6px}

@media(max-width:600px) {
  .bs-stage>.bs-play {
  width:76px}
.bs-play>span {
  margin-right:3px}
}