/* Safety step: align the information screen with the compact quiz card system. */
.story-screen--mechanism {
  width: min(100%, 560px);
  min-height: calc(100svh - 109px);
  background:
    radial-gradient(circle at 50% 37%, rgba(255, 226, 218, 0.34), transparent 34%),
    #fff;
}

.story-screen--mechanism > .eyebrow {
  display: inline-flex;
  align-self: center;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff0ed;
  letter-spacing: 0.07em;
}

.story-screen--mechanism > h1 {
  max-width: 430px;
  margin-bottom: 0;
  font-size: clamp(28px, 7.4vw, 35px);
  line-height: 1.08;
}

.story-screen--mechanism .mechanism-card {
  overflow: visible;
  margin: 24px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.story-screen--mechanism .mechanism-card > img {
  display: none;
}

.story-screen--mechanism .mechanism-card__steps {
  display: grid;
  gap: 11px;
  background: transparent;
}

.story-screen--mechanism .mechanism-card__steps article {
  min-height: 86px;
  padding: 14px 15px;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  border: 1px solid rgba(23, 32, 43, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(35, 40, 48, 0.075);
}

.story-screen--mechanism .mechanism-card__steps article + article {
  border-top: 1px solid rgba(23, 32, 43, 0.08);
}

.story-screen--mechanism .mechanism-card__steps article > span {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff0ed, #ffe5df);
}

.story-screen--mechanism .mechanism-card__steps strong {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.25;
}

.story-screen--mechanism .mechanism-card__steps p {
  margin: 0;
  color: #74767c;
  font-size: 11px;
  line-height: 1.42;
}

.story-screen--mechanism .screen-cta {
  min-height: 58px;
  margin-top: 22px;
  border-radius: 18px;
  font-size: 15px;
  box-shadow: 0 12px 28px rgba(255, 111, 97, 0.22);
}

@media (min-width: 0px) {
  .story-screen--mechanism {
    min-height: 100svh;
    padding: 24px 18px max(22px, env(safe-area-inset-bottom));
  }

  .story-screen--mechanism > h1 {
    max-width: 350px;
    font-size: clamp(27px, 7.3vw, 32px);
  }

  .story-screen--mechanism .mechanism-card {
    margin-top: 20px;
  }

  .story-screen--mechanism .mechanism-card__steps article {
    min-height: 80px;
    padding: 12px 13px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    border-radius: 18px;
  }

  .story-screen--mechanism .mechanism-card__steps article > span {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .story-screen--mechanism .mechanism-card__steps strong {
    font-size: 13px;
  }

  .story-screen--mechanism .mechanism-card__steps p {
    font-size: 10px;
  }

  .story-screen--mechanism .screen-cta {
    margin-top: 20px;
  }
}

@media (max-height: 700px) {
  .story-screen--mechanism {
    padding-top: 18px;
  }

  .story-screen--mechanism > .eyebrow {
    margin-bottom: 9px;
  }

  .story-screen--mechanism .mechanism-card {
    margin-top: 15px;
  }

  .story-screen--mechanism .mechanism-card__steps {
    gap: 8px;
  }

  .story-screen--mechanism .mechanism-card__steps article {
    min-height: 72px;
    padding-block: 9px;
  }
}