/* Product tour of real recordings inside a laptop frame, after Dilara's mockups (design/reference). */

/* the tour: a numbered list of recordings beside a laptop that plays them; one step shows the laptop alone,
   two or three steps a row above it (TeoWebsiteProductTour) */

.teo-website-tour {
  position: relative;
}

.teo-website-tour-listed {
  display: grid;
  grid-template-columns: minmax(260px, 405fr) minmax(0, 910fr);
  grid-template-areas: "side stage";
  column-gap: clamp(12px, 2vw, 32px);
  align-items: start;
}

.teo-website-tour-listed .teo-website-tour-side {
  grid-area: side;
}

.teo-website-tour-listed .teo-website-tour-stage {
  grid-area: stage;
}

.teo-website-tour-compact, .teo-website-tour-single {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: 24px;
}

.teo-website-tour-compact .teo-website-tour-stage, .teo-website-tour-single .teo-website-tour-stage {
  width: 100%;
  max-width: 940px;
}

.teo-website-tour-side {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.teo-website-tour-stage {
  position: relative;
  min-width: 0;
  margin: 0;
}

/* the list of recordings */

.teo-website-tour-pick {
  margin: 0 0 10px;
  color: #8bafd4;
  font-size: 16px;
  font-weight: 500;
}

.teo-website-tour-list {
  position: relative;
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teo-website-tour-step {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 14px 0 18px;
  border: 1px solid rgba(120, 165, 235, 0.2);
  border-radius: var(--teo-website-radius-small);
  background: linear-gradient(180deg, rgba(9, 22, 52, 0.66), rgba(2, 9, 26, 0.78));
  box-shadow: inset 0 1px 0 rgba(160, 200, 255, 0.06);
  color: #c4d4e8;
  font: 500 16px/1.3 var(--teo-website-font-body);
  text-align: left;
  cursor: pointer;
  transition: min-height 0.25s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.teo-website-tour-step:hover {
  border-color: var(--teo-website-border-strong);
  background: linear-gradient(180deg, rgba(14, 34, 78, 0.75), rgba(4, 14, 38, 0.82));
  color: #fff;
}

.teo-website-tour-step:focus-visible {
  outline-offset: 2px;
  border-radius: var(--teo-website-radius-small);
}

.teo-website-tour-number {
  flex: 0 0 42px;
  color: #7090c2;
  font-variant-numeric: tabular-nums;
}

.teo-website-tour-name {
  flex: 1 1 auto;
  min-width: 0;
}

.teo-website-tour-play {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.teo-website-tour-play i {
  margin-left: 2px;
  line-height: 1;
}

.teo-website-tour-step.teo-website-active {
  min-height: 48px;
  border-color: #55ccf7;
  background: linear-gradient(180deg, #0b2c7e, #021a56);
  box-shadow: 0 0 0 0.5px #55ccf7, 0 0 18px rgba(85, 204, 247, 0.35), inset 0 1px 0 rgba(200, 235, 255, 0.2);
  color: #fff;
}

.teo-website-tour-step.teo-website-active .teo-website-tour-number {
  color: #57abdf;
}

.teo-website-tour-step.teo-website-active .teo-website-tour-play {
  border-color: #e7f1fb;
  background: #e7f1fb;
  color: #072cb0;
}

/* how far the playing recording is, a fine line along the bottom of its row */
.teo-website-tour .teo-website-tour-progress {
  height: 2px;
  background: linear-gradient(90deg, rgba(85, 204, 247, 0.25), #7fdcff);
  transition: width 0.25s linear;
}

/* the laptop: silver rim, black bezel, the deck in perspective under it */

.teo-website-tour .teo-website-laptop-lid {
  padding: 2.6% 2% 2.1%;
  border: 2px solid transparent;
  border-radius: 20px 20px 7px 7px;
  background: linear-gradient(180deg, #060709, #020203) padding-box,
      linear-gradient(180deg, #eef2fa 0%, #b3bdd2 35%, #8792ab 70%, #c9d1e1 100%) border-box;
  box-shadow: 0 0 0 1px rgba(6, 14, 34, 0.7), 0 0 26px rgba(70, 150, 255, 0.35), 0 40px 90px -40px rgba(10, 80, 255, 0.7);
}

.teo-website-tour .teo-website-laptop-lid::before {
  top: 1.9%;
  background: #1a2130;
  box-shadow: inset 0 0 0 1.5px #0b0f17;
}

.teo-website-tour .teo-website-laptop-screen {
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  background: #000;
}

.teo-website-tour .teo-website-laptop-base {
  height: auto;
  margin-top: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 14px 16px rgba(0, 3, 14, 0.8));
}

.teo-website-tour .teo-website-laptop-base::before {
  display: none;
}

.teo-website-tour .teo-website-laptop-base svg {
  display: block;
  width: 100%;
  height: auto;
}

/* play and pause over the screen: shown while the recording waits, on hover and on focus */

.teo-website-tour-toggle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.teo-website-tour-toggle:focus-visible {
  outline-offset: -4px;
}

.teo-website-tour-toggle-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 9.5%, 74px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(20, 20, 24, 0.78);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.92), 0 12px 32px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: clamp(22px, 2.6vw, 36px);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.teo-website-tour-toggle-disc i {
  line-height: 1;
}

.teo-website-tour-toggle-disc .bi-play-fill {
  margin-left: 0.12em;
}

.teo-website-tour-stopped .teo-website-tour-toggle-disc,
.teo-website-tour-toggle:hover .teo-website-tour-toggle-disc,
.teo-website-tour-toggle:focus-visible .teo-website-tour-toggle-disc {
  opacity: 1;
  transform: none;
}

/* the caption under the laptop, aligned with the screen */

.teo-website-tour-caption {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: clamp(24px, 3vw, 44px) 7% 0;
}

.teo-website-tour-caption-in {
  animation: teo-website-tour-caption-in 0.35s ease both;
}

@keyframes teo-website-tour-caption-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.teo-website-tour-caption-eyebrow {
  margin: 0 0 12px;
  color: #57a8d8;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.teo-website-tour .teo-website-tour-caption-title {
  color: #eef0f5;
  font-size: clamp(24px, 2.35vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.teo-website-tour-caption-text {
  margin: 10px 0 0;
  color: #bdcbe1;
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.45;
}

.teo-website-tour-caption-note {
  display: block;
  margin-top: 12px;
  color: #5d8bc9;
  font-size: 14px;
  line-height: 1.4;
}

/* two or three recordings: a centred row above the laptop */

.teo-website-tour-compact .teo-website-tour-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.teo-website-tour-compact .teo-website-tour-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.teo-website-tour-compact .teo-website-tour-step, .teo-website-tour-compact .teo-website-tour-step.teo-website-active {
  width: auto;
  min-width: 230px;
  min-height: 46px;
}

/* the home page: heading and list on the left, laptop on the right, on a stage of blue light */

.teo-website-tour-section {
  overflow: hidden;
  isolation: isolate;
  padding: clamp(64px, 5vw, 76px) 0 clamp(64px, 6.5vw, 96px);
  background:
      radial-gradient(ellipse 9% 42% at 97% 76%, rgba(40, 132, 255, 0.85), rgba(10, 92, 235, 0.4) 50%, rgba(0, 70, 210, 0) 100%),
      radial-gradient(ellipse 30% 26% at 76% 86%, rgba(16, 76, 190, 0.55), rgba(16, 76, 190, 0) 100%),
      radial-gradient(ellipse 20% 28% at 93% 0%, rgba(64, 162, 255, 0.95), rgba(13, 113, 251, 0.5) 45%, rgba(0, 89, 242, 0) 100%),
      radial-gradient(ellipse 46% 40% at 80% 0%, rgba(0, 89, 242, 0.92), rgba(0, 58, 173, 0.45) 50%, rgba(0, 31, 93, 0) 100%),
      radial-gradient(ellipse 46% 56% at 68% 40%, rgba(0, 66, 200, 0.85), rgba(0, 50, 140, 0.45) 55%, rgba(0, 45, 122, 0) 100%),
      radial-gradient(ellipse 14% 50% at 100% 46%, rgba(0, 50, 150, 0.7), rgba(0, 35, 109, 0) 100%),
      linear-gradient(180deg, var(--teo-website-background) 0%, #01030c 10%, #01040f 75%, var(--teo-website-background) 100%);
}

/* faint streaks of light in the top right corner */
.teo-website-tour-section::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 52%;
  height: 70%;
  background: repeating-linear-gradient(97deg, rgba(130, 200, 255, 0) 0 38px, rgba(130, 200, 255, 0.07) 38px 40px, rgba(130, 200, 255, 0) 40px 76px);
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 100% 0, #000, rgba(0, 0, 0, 0) 75%);
  mask-image: radial-gradient(ellipse 75% 85% at 100% 0, #000, rgba(0, 0, 0, 0) 75%);
  pointer-events: none;
}

/* the light ends softly where the next section begins */
.teo-website-tour-section::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(3, 9, 28, 0), var(--teo-website-background));
  pointer-events: none;
}

/* the backlight catches the rim of the lid */
.teo-website-tour-section .teo-website-laptop-lid {
  box-shadow: 0 0 0 1px rgba(6, 14, 34, 0.7), 0 0 16px rgba(90, 175, 255, 0.65), 0 0 48px rgba(40, 135, 255, 0.5);
}

/* the glossy floor the laptop stands on, from the deck down and across the whole width */
.teo-website-tour-section .teo-website-laptop::after {
  content: '';
  position: absolute;
  z-index: -3;
  top: 100%;
  left: -100vw;
  right: -100vw;
  height: 460px;
  margin-top: -7%;
  background: linear-gradient(180deg, rgba(4, 40, 110, 0) 0, rgba(8, 52, 130, 0.6) 16px, rgba(2, 30, 84, 0.78) 60px, rgba(1, 30, 86, 0.66) 55%,
      rgba(3, 9, 28, 0) 100%);
  pointer-events: none;
}

/* the light of the screen and the rim mirrored on the floor under the laptop */
.teo-website-tour-section .teo-website-laptop-lid::after {
  content: '';
  position: absolute;
  z-index: -2;
  top: 100%;
  left: -16%;
  right: -16%;
  height: 420px;
  margin-top: 6%;
  background:
      radial-gradient(ellipse 3% 85% at 89% 0, rgba(60, 140, 255, 0.85), rgba(60, 140, 255, 0) 100%),
      radial-gradient(ellipse 15% 100% at 94% 0, rgba(16, 104, 240, 0.85), rgba(0, 64, 183, 0.5) 50%, rgba(0, 64, 183, 0) 100%),
      radial-gradient(ellipse 40% 60% at 50% 0, rgba(14, 64, 180, 0.7), rgba(8, 44, 130, 0.35) 55%, rgba(8, 44, 130, 0) 100%),
      radial-gradient(ellipse 4% 60% at 11% 0, rgba(44, 134, 251, 0.45), rgba(44, 134, 251, 0) 100%);
  filter: blur(8px);
  pointer-events: none;
}

.teo-website-tour-section .teo-website-laptop::before {
  inset: -18% -16% 2% -12%;
  background: radial-gradient(ellipse 50% 50% at 53% 50%, rgba(48, 152, 255, 1), rgba(14, 112, 250, 0.9) 58%, rgba(0, 70, 210, 0) 100%);
  filter: blur(34px);
}

.teo-website-tour-shell {
  max-width: 1400px;
}

.teo-website-tour-layout {
  display: grid;
  grid-template-columns: minmax(280px, 405fr) minmax(0, 910fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "heading stage" "side stage";
  column-gap: 8px;
  align-items: start;
}

/* the list and the laptop of the tour take their places in this grid */
.teo-website-tour-layout > .teo-website-tour {
  display: contents;
}

.teo-website-tour-layout > .teo-website-heading {
  grid-area: heading;
  position: relative;
  z-index: 1;
  margin: 0 -64px 0 0;
}

.teo-website-tour-layout .teo-website-tour-side {
  grid-area: side;
  margin-top: 26px;
}

.teo-website-tour-layout .teo-website-tour-stage {
  grid-area: stage;
  margin-top: 40px;
}

.teo-website-tour-section .teo-website-eyebrow {
  margin-bottom: 14px;
  color: #69bdde;
  font-size: 15px;
  letter-spacing: 0.3em;
}

/* the mockup sets this title in a medium weight, lighter than the bold of the base title */
.teo-website-tour-section .teo-website-title {
  font-size: clamp(36px, 4.45vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.teo-website-tour-section .teo-website-lead {
  max-width: 470px;
  margin-top: 24px;
  color: #c3d0e2;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.48;
}

/* narrower screens */

@media (max-width: 1080px) {
  .teo-website-tour-layout {
    grid-template-columns: minmax(260px, 340fr) minmax(0, 620fr);
  }

  .teo-website-tour-layout > .teo-website-heading {
    margin-right: -40px;
  }

  .teo-website-tour-step {
    min-height: 40px;
  }

  .teo-website-tour-step.teo-website-active {
    min-height: 44px;
  }
}

/* one column: the list becomes a row that scrolls sideways, right above the laptop */
@media (max-width: 900px) {
  .teo-website-tour-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "heading" "side" "stage";
  }

  .teo-website-tour-layout > .teo-website-heading {
    margin: 0;
  }

  .teo-website-tour-section .teo-website-laptop-lid::after {
    height: 200px;
  }

  .teo-website-tour-layout .teo-website-tour-side {
    margin-top: 28px;
  }

  .teo-website-tour-layout .teo-website-tour-stage {
    margin-top: 18px;
  }

  .teo-website-tour-listed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "side" "stage";
    row-gap: 18px;
  }

  .teo-website-tour-list, .teo-website-tour-compact .teo-website-tour-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 calc(-1 * var(--teo-website-gutter));
    padding: 2px var(--teo-website-gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--teo-website-gutter);
    scrollbar-width: none;
  }

  .teo-website-tour-list::-webkit-scrollbar {
    display: none;
  }

  .teo-website-tour-compact .teo-website-tour-side {
    align-items: stretch;
  }

  .teo-website-tour-list > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .teo-website-tour-step, .teo-website-tour-compact .teo-website-tour-step,
  .teo-website-tour-step.teo-website-active {
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 16px 0 14px;
    white-space: nowrap;
  }

  .teo-website-tour-number {
    flex: 0 0 auto;
    margin-right: 10px;
  }

  .teo-website-tour-play {
    display: none;
  }

  /* two or three recordings share the width and wrap instead of scrolling */
  .teo-website-tour-compact .teo-website-tour-list {
    flex-wrap: wrap;
    margin: 0;
    padding: 2px 0 4px;
    overflow: visible;
  }

  .teo-website-tour-compact .teo-website-tour-list > li {
    flex: 1 1 140px;
  }

  .teo-website-tour-compact .teo-website-tour-step, .teo-website-tour-compact .teo-website-tour-step.teo-website-active {
    width: 100%;
    white-space: normal;
  }

  .teo-website-tour-section {
    background:
        radial-gradient(ellipse 80% 40% at 60% 38%, rgba(0, 80, 222, 0.5), rgba(0, 71, 210, 0) 75%),
        linear-gradient(180deg, var(--teo-website-background) 0%, #01030c 12%, #01040f 70%, var(--teo-website-background) 100%);
  }

  .teo-website-tour-section::before {
    width: 100%;
    height: 50%;
  }

  .teo-website-tour-section .teo-website-laptop::after {
    height: 220px;
  }
}

/* phones: a slimmer laptop, the deck reduced to its lip */
@media (max-width: 600px) {
  .teo-website-tour .teo-website-laptop-lid {
    margin: 0 3%;
    padding: 2.4% 2.2% 2.6%;
    border-radius: 12px 12px 4px 4px;
  }

  .teo-website-tour .teo-website-laptop-lid::before {
    width: 4px;
    height: 4px;
    margin-left: -2px;
    top: 1.6%;
  }

  .teo-website-tour .teo-website-laptop-base {
    height: 10px;
    border-radius: 2px 2px 12px 12px / 2px 2px 100% 100%;
    background: linear-gradient(180deg, #e3e8f1 0%, #aab3c2 50%, #6a7383 100%);
  }

  .teo-website-tour .teo-website-laptop-base svg {
    display: none;
  }

  .teo-website-tour .teo-website-laptop-base::before {
    display: block;
    width: 18%;
    height: 45%;
  }

  .teo-website-tour-section .teo-website-laptop::after {
    margin-top: -1%;
    height: 160px;
  }

  .teo-website-tour-caption {
    margin: 22px 0 0;
  }

  .teo-website-tour-caption-eyebrow {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .teo-website-tour-caption-text {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .teo-website-tour-step, .teo-website-tour-play, .teo-website-tour-toggle-disc, .teo-website-tour .teo-website-tour-progress {
    transition: none;
  }

  .teo-website-tour-caption-in {
    animation: none;
  }
}