/* Ten finite manual stories, using original product icons and partner logos. */
.about-tour {
  width: min(100%, 1040px);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  min-height: 440px;
  padding: 24px 0;
}
.about-tour h1 {
  max-width: 460px;
  margin-top: 20px;
  font-size: 34px;
  line-height: 42px;
  text-wrap: balance;
}
.about-tour .lead {
  max-width: 400px;
  font-size: 18px;
  line-height: 26px;
  margin-top: 20px;
}
.about-tour .actions {
  margin-top: 28px;
}
/* The client terms under the tour: the column edge of the tour (1080 px from 900 px wide, shell.css), muted small
   text, no card or divider. */
.about-terms {
  width: min(100%, 1080px);
  margin: 8px auto 0;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}
.about-terms p {
  max-width: 720px;
}
/* A link inside the sentence keeps the line of the text. */
.about-terms .consent-link {
  min-height: 0;
  line-height: inherit;
}
.about-visual {
  width: 100%;
  min-width: 0;
  height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--ink);
}
.about-visual:not(.is-playing) * {
  animation-play-state: paused;
}
.tour-source,
.tour-document,
.tour-partner {
  background: var(--paper);
  border-radius: 16px;
  width: 100%;
  min-width: 0;
}
.tour-source {
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 6px 12px;
}
.tour-source > span:last-child {
  grid-column: 2;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}
.tour-source > .ft-icon,
.tour-document-title > .ft-icon,
.tour-file-row > .ft-icon {
  color: var(--action);
}
.tour-transfer {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tour-transfer-dot {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: var(--action);
  animation: tour-transfer 1400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-transfer-dot:nth-child(2) {
  animation-delay: 120ms;
}
.tour-transfer-dot:nth-child(3) {
  animation-delay: 240ms;
}
.tour-document {
  padding: 24px;
  display: grid;
  gap: 16px;
}
.tour-document-title {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 28px;
}
.tour-document-title strong {
  font-size: 18px;
  line-height: 26px;
}
.tour-data {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--ft-field-active-surface);
  border-radius: 8px;
  font-size: 16px;
  line-height: 22px;
}
.tour-data > .ft-icon {
  color: var(--action);
  width: 20px;
  height: 20px;
}
.tour-data-company {
  animation: tour-fill 1800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-data-contact {
  animation: tour-fill 1800ms 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-comparison {
  width: 100%;
  display: grid;
  gap: 12px;
}
.tour-partner {
  padding: 20px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 12px 16px;
  align-items: center;
  animation: tour-align 1300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-partner-1 {
  animation-delay: 120ms;
}
.tour-partner-2 {
  animation-delay: 240ms;
}
.tour-brand {
  height: 36px;
  display: flex;
  align-items: center;
  min-width: 0;
}
.tour-brand .partner-logo-window {
  width: 164px;
}
.tour-brand-image {
  width: 112px;
  height: 36px;
  object-fit: contain;
  object-position: left center;
}
.tour-partner-2 .tour-brand-image {
  width: 164px;
}
.tour-measures {
  grid-column: 1;
  display: flex;
  gap: 20px;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
.tour-selection {
  grid-column: 2;
  grid-row: 1/3;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ft-field-default-stroke);
  border-radius: 50%;
}
.tour-selection.is-selected {
  border: 0;
  color: var(--action);
  animation: tour-choose 2100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-selection > .ft-icon {
  width: 22px;
  height: 22px;
}
.tour-document-status {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--action);
  background: var(--action-wash);
  font-size: 12px;
  line-height: 18px;
  animation: tour-reveal 1600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  font-size: 16px;
  line-height: 23px;
  animation: tour-reveal 1700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-file-row:nth-child(3) {
  animation-delay: 140ms;
}
.tour-file-row:nth-child(4) {
  animation-delay: 280ms;
}
@keyframes tour-transfer {
  0%,
  10% {
    opacity: 0;
    transform: translateY(-14px);
  }
  45% {
    opacity: 1;
  }
  85%,
  100% {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes tour-fill {
  0%,
  35% {
    opacity: 0;
    transform: translateY(-16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes tour-align {
  0%,
  10% {
    opacity: 0.35;
    transform: translateX(32px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes tour-choose {
  0%,
  65% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes tour-reveal {
  0%,
  25% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1000px) {
  .about-tour {
    gap: 40px;
  }
  .about-tour h1 {
    font-size: 30px;
    line-height: 38px;
  }
  .tour-measures {
    gap: 16px;
  }
}
@media (max-width: 760px) {
  .about-tour {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 8px 0 24px;
    max-width: 480px;
    min-height: 0;
  }
  .about-terms {
    max-width: 480px;
    margin-top: 0;
  }
  .about-tour h1 {
    margin-top: 16px;
    font-size: 30px;
    line-height: 38px;
  }
  .about-tour .lead {
    font-size: 16px;
    line-height: 24px;
    margin-top: 16px;
  }
  .about-tour .actions {
    margin-top: 24px;
  }
  .about-visual {
    height: 340px;
  }
  .tour-document,
  .tour-source,
  .tour-partner {
    padding: 20px;
  }
}
@media (max-width: 380px) {
  .about-tour h1 {
    font-size: 28px;
    line-height: 36px;
  }
  .about-tour .actions {
    gap: 20px;
  }
  .tour-document,
  .tour-source,
  .tour-partner {
    padding: 20px 16px;
  }
  .tour-measures {
    gap: 12px;
    font-size: 13px;
  }
  .tour-document-title {
    gap: 8px;
  }
  .tour-document-title strong {
    font-size: 17px;
  }
  .tour-document-status {
    font-size: 11px;
    padding: 4px 6px;
  }
  .tour-file-row {
    font-size: 15px;
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-visual * {
    animation: none !important;
  }
  .tour-transfer-dot {
    opacity: 0;
  }
}

.tour-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
}
.tour-lookup,
.tour-route-item,
.tour-send-ready,
.tour-send-done {
  background: var(--paper);
  border-radius: 16px;
  width: 100%;
  min-width: 0;
}
.tour-route {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.tour-route-item {
  min-height: 148px;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  animation: tour-reveal 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
  font-size: 16px;
  line-height: 22px;
}
.tour-route-item:nth-child(3) {
  animation-delay: 180ms;
}
.tour-route-result {
  animation-delay: 360ms;
}
.tour-route-item > .tour-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}
.tour-route-arrow {
  color: var(--action);
  display: flex;
  justify-content: center;
  animation: tour-reveal 900ms 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-route-arrow:nth-child(4) {
  animation-delay: 480ms;
}
.tour-lookup {
  padding: 20px 24px;
  display: grid;
  gap: 14px;
  font-size: 14px;
  color: var(--muted);
}
.tour-inn-slots {
  display: flex;
  gap: 7px;
}
.tour-inn-slots i {
  height: 28px;
  flex: 1;
  min-width: 0;
  border-radius: 4px;
  background: var(--action-wash);
  animation: tour-reveal 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-inn-slots i:nth-child(n + 4) {
  animation-delay: 150ms;
}
.tour-inn-slots i:nth-child(n + 8) {
  animation-delay: 300ms;
}
.tour-company {
  animation: tour-reveal 1100ms 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-parameters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.tour-parameter {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--ft-field-active-surface);
  border-radius: 8px;
  font-size: 16px;
  line-height: 22px;
  animation: tour-reveal 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-parameter:nth-child(2) {
  animation-delay: 100ms;
}
.tour-parameter:nth-child(3) {
  animation-delay: 200ms;
}
.tour-parameter:nth-child(4) {
  animation-delay: 300ms;
}
.tour-fit-row {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 48px;
  font-size: 16px;
  line-height: 23px;
  animation: tour-reveal 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-fit-row:nth-child(3) {
  animation-delay: 180ms;
}
.tour-fit-row:nth-child(4) {
  animation-delay: 360ms;
}
.tour-fit-icon {
  font: 24px/24px FinTabloIcons !important;
  width: 24px;
  flex: 0 0 24px;
  color: var(--action);
}
.tour-fit-check .tour-fit-icon::before {
  content: "\e981";
}
.tour-fit-question .tour-fit-icon::before {
  content: "\e925";
  color: var(--muted);
}
.tour-fit-warning .tour-fit-icon::before {
  content: "\e985";
  color: var(--ft-danger-hover);
}
.tour-preferential {
  gap: 24px;
}
.tour-preferential .tour-brand-image {
  width: 190px;
  height: 38px;
}
.tour-contact-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.tour-contact-fields > span {
  padding: 14px 8px;
  border-radius: 8px;
  background: var(--ft-field-active-surface);
  font-size: 14px;
  text-align: center;
  animation: tour-reveal 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-contact-fields > span:nth-child(2) {
  animation-delay: 120ms;
}
.tour-contact-fields > span:nth-child(3) {
  animation-delay: 240ms;
}
.tour-note {
  display: flex;
  gap: 12px;
  padding: 20px 16px;
  border-radius: 8px;
  background: var(--action-wash);
  animation: tour-reveal 1200ms 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-note > div {
  display: grid;
  gap: 6px;
}
.tour-note strong {
  font-size: 16px;
  line-height: 22px;
}
.tour-note span {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
.tour-draft .tour-data {
  justify-content: flex-start;
  animation: tour-reveal 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-draft .tour-data:nth-child(3) {
  animation-delay: 180ms;
}
.tour-draft .tour-data > .ft-icon {
  margin-left: auto;
}
.tour-draft-next {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 22px;
  animation: tour-reveal 1200ms 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-send {
  width: 100%;
  display: grid;
  justify-items: center;
}
.tour-send .tour-transfer {
  justify-content: center;
}
.tour-send-ready {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 24px;
  animation: tour-reveal 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-send-done {
  padding: 28px 24px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px 16px;
  align-items: center;
  animation: tour-reveal 1200ms 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tour-send-done > .tour-icon {
  width: 40px;
  height: 40px;
  grid-row: 1/3;
  color: var(--success);
}
.tour-send-done > strong {
  font-size: 22px;
  line-height: 28px;
}
.tour-send-done > span {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
@media (max-width: 1000px) {
  .tour-route {
    gap: 6px;
    grid-template-columns: 1fr 20px 1fr 20px 1fr;
  }
  .tour-route-item {
    padding: 16px 8px;
    font-size: 15px;
  }
}
@media (max-width: 760px) {
  .tour-route-item {
    min-height: 140px;
  }
  .tour-preferential {
    gap: 24px;
  }
}
@media (max-width: 380px) {
  .tour-lookup {
    padding: 20px 16px;
  }
  .tour-route {
    grid-template-columns: 1fr;
    gap: 8px;
    justify-items: center;
  }
  .tour-route-item {
    min-height: 64px;
    flex-direction: row;
    width: 100%;
    padding: 14px 20px;
    justify-content: flex-start;
    gap: 16px;
  }
  .tour-route-arrow {
    display: none;
  }
  .tour-parameters {
    gap: 8px;
  }
  .tour-parameter {
    padding: 14px 12px;
    font-size: 15px;
  }
  .tour-data {
    padding: 12px;
    font-size: 15px;
  }
  .tour-draft .tour-data {
    gap: 8px;
  }
  .tour-contact-fields {
    gap: 6px;
  }
  .tour-contact-fields > span {
    padding: 14px 4px;
  }
  .tour-send-ready,
  .tour-send-done {
    padding: 20px 16px;
  }
  .tour-send-done {
    gap: 8px 12px;
  }
}