/* Text slides converted from images on /work/stock-market-app */
.tx-slide {
  box-sizing: border-box;
  display: block;
  width: 100vw;
  max-width: 100%;
  margin: 0;
  padding: 48px 24px;
  background: #fff;
  color: #6a6a6a;
  font-family: Montserrat, Raleway, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  position: static;
  text-align: left;
}
.tx-slide h2, .tx-slide h3, .tx-slide p, .tx-slide ul, .tx-slide ol, .tx-slide li {
  margin: 0;
  padding: 0;
  font-family: inherit;
}
.tx-slide strong { font-weight: 600; color: #4a4a4a; }
.tx-slide ul { list-style: none; }
.tx-slide ul > li { position: relative; padding-left: 1.1em; }
.tx-slide ul > li::before { content: "\2022"; position: absolute; left: 0.25em; top: 0; font-size: 0.8em; color: #777; }
.tx-slide .tx-h {
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #444;
  line-height: 1.2;
  font-size: 28px;
  margin-bottom: 24px;
}

/* --- Slide 2: the challenge --- */
.tx-s2 { display: grid; grid-template-columns: 1fr; gap: 32px; }
.tx-s2 .tx-col-a p + p { margin-top: 1.9em; }
.tx-s2 .tx-h { color: #6b6b6b; font-size: 34px; }
.tx-s2 .tx-col-b p { color: #666; }
.tx-s2 .tx-col-b p.tx-duration { color: #111; font-weight: 400; margin-top: 0.6em; }

/* --- Slide 3: design process --- */
.tx-s3 { color: #555; }
.tx-s3 .tx-h { color: #2a2a2a; }
.tx-flow { list-style: none; display: grid; grid-template-columns: 1fr; gap: 20px; position: relative; }
.tx-flow > li { position: relative; }
.tx-step-box {
  background: #2f2037;
  color: #f2eef4;
  text-align: center;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
  padding: 18px 8px;
  letter-spacing: 0;
}
.tx-flow ul { margin-top: 14px; font-size: 14px; line-height: 1.5; color: #555; }
.tx-flow ul > li { padding-left: 1.4em; }
.tx-flow ul > li::before { left: 0.5em; }

/* --- Slide 4: understanding the user --- */
.tx-s4 ul { max-width: 62em; }
.tx-s4 ul > li { margin-bottom: 0.7em; color: #555; }
.tx-s4 .tx-ref { overflow-wrap: anywhere; }

/* --- Slide 7: solution --- */
.tx-s7 { display: grid; grid-template-columns: 1fr; gap: 0 48px; color: #6a6a6a; }
.tx-s7 .tx-h { grid-column: 1 / -1; font-size: 24px; }
.tx-s7 h3 { font-weight: 700; color: #2b2b2b; font-size: 19px; line-height: 1.35; margin: 1.6em 0 0.6em; }
.tx-s7 p + p { margin-top: 1.7em; }
.tx-s7 h3 + p, .tx-s7 h3 + ul { margin-left: 0; }
.tx-s7 ul > li { margin-bottom: 0.2em; }

@media (min-width: 992px) {
  .tx-slide {
    aspect-ratio: 2500 / 1406;
    padding: 0;
    font-size: 1.16vw;
    line-height: 2.34vw;
    overflow: hidden;
    position: relative;
  }
  .tx-slide > * { position: absolute; }
  .tx-slide .tx-h { margin-bottom: 0; font-weight: 600; }

  /* slide 2 */
  .tx-s2 { display: block; }
  .tx-s2 .tx-col-a { left: 10.4vw; top: 16.05vw; width: 33.8vw; }
  .tx-s2 .tx-col-b { left: 56vw; top: 15.5vw; width: 36vw; }
  .tx-s2 .tx-h { font-size: 3.2vw; line-height: 1.2; margin-bottom: 3.55vw; }
  .tx-s2 .tx-col-b p.tx-duration { margin-top: 0.3vw; }

  /* slide 3 */
  .tx-s3 .tx-h { left: 11vw; top: 12.85vw; font-size: 2.15vw; }
  .tx-flow { position: absolute; display: block; left: 7.5vw; right: 7.1vw; top: 22.9vw; height: 14vw; }
  .tx-flow::before { /* loop line */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4.72vw;
    border: 1px solid #2f2037; border-bottom: 0; box-sizing: border-box;
  }
  .tx-flow::after { /* top arrow head, pointing left */
    content: ""; position: absolute; left: 43vw; top: -0.52vw; width: 0; height: 0;
    border-top: 0.55vw solid transparent; border-bottom: 0.55vw solid transparent; border-right: 0.85vw solid #2f2037;
  }
  .tx-flow > li { position: absolute; top: 2.4vw; width: 17.8vw; }
  .tx-flow > li:nth-child(1) { left: 3.6vw; }
  .tx-flow > li:nth-child(2) { left: 23.9vw; }
  .tx-flow > li:nth-child(3) { left: 43.9vw; }
  .tx-flow > li:nth-child(4) { left: 63.9vw; }
  .tx-step-box { font-size: 1.32vw; font-weight: 300; padding: 0; height: 4.6vw; display: flex; align-items: center; justify-content: center; position: relative; }
  .tx-flow > li::before { /* connector line into box */
    content: ""; position: absolute; top: 2.3vw; right: 100%; width: 2.6vw; border-top: 1px solid #2f2037;
  }
  .tx-flow > li:nth-child(1)::before { width: 3.6vw; }
  .tx-flow > li:nth-child(4)::after { /* stub after last box */
    content: ""; position: absolute; top: 2.3vw; left: 100%; width: 3.6vw; border-top: 1px solid #2f2037;
  }
  .tx-flow > li:nth-child(1) .tx-step-box::before, .tx-flow > li:nth-child(4) .tx-step-box::after {
    content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -0.55vw;
    border-top: 0.55vw solid transparent; border-bottom: 0.55vw solid transparent; border-left: 0.85vw solid #2f2037;
  }
  .tx-flow > li:nth-child(1) .tx-step-box::before { left: -2.3vw; }
  .tx-flow > li:nth-child(4) .tx-step-box::after { left: calc(100% + 1.75vw); }
  .tx-flow ul { margin-top: 2.4vw; font-size: 1.07vw; line-height: 1.39vw; padding-left: 0; }
  .tx-flow ul > li { padding-left: 2.25vw; }
  .tx-flow ul > li::before { left: 0.9vw; }

  /* slide 4 */
  .tx-s4 .tx-h { left: 11.3vw; top: 7.35vw; font-size: 2.3vw; }
  .tx-s4 ul { left: 10.1vw; top: 12.45vw; width: 59vw; max-width: none; }
  .tx-s4 ul > li { margin-bottom: 0; padding-left: 1.25vw; font-size: 1.2vw; line-height: 2.41vw; }
  .tx-s4 ul > li::before { left: 0.1vw; }

  /* slide 7 */
  .tx-s7 { display: block; }
  .tx-s7 .tx-h { left: 12.1vw; top: 5.5vw; font-size: 1.7vw; }
  .tx-s7 .tx-col-a { left: 12vw; top: 12.3vw; width: 35vw; }
  .tx-s7 .tx-col-b { left: 54vw; top: 12.3vw; width: 37vw; }
  .tx-s7 .tx-col-a, .tx-s7 .tx-col-b { font-size: 1.2vw; line-height: 1.98vw; }
  .tx-s7 h3 { font-size: 1.64vw; font-weight: 600; margin: 0 0 0.6vw; line-height: 1.95vw; }
  .tx-s7 .tx-col-a h3 { margin-top: 3.6vw; margin-left: -1vw; }
  .tx-s7 .tx-col-b h3 { margin-top: 4vw; max-width: 35vw; padding-left: 1.65vw; text-indent: -1.65vw; }
  .tx-s7 .tx-col-b ul { max-width: 28.5vw; }
  .tx-s7 .tx-col-b h3:first-child { margin-top: 0; }
  .tx-s7 h3 + ul { margin-top: 1.1vw; }
  .tx-s7 p + p { margin-top: 1.98vw; }
  .tx-s7 .tx-col-b h3 + p, .tx-s7 .tx-col-b h3 + ul { margin-left: 1.7vw; }
  .tx-s7 .tx-col-a h3 + ul { margin-left: 0; }
  .tx-s7 ul > li { padding-left: 1.2vw; margin-bottom: 0; }
  .tx-s7 ul > li::before { left: 0.2vw; }
}

@media (min-width: 600px) and (max-width: 991px) {
  .tx-slide { padding: 56px 48px; font-size: 18px; }
  .tx-s2 { grid-template-columns: 1fr 1fr; gap: 48px; }
  .tx-s7 { grid-template-columns: 1fr 1fr; }
  .tx-flow { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}

/* Single column: show "THE CHALLENGE:" before the context paragraphs. */
@media (max-width: 599px) {
  .tx-s2 .tx-col-b { order: -1; }
}