/* Dedicated preview: do not inherit screenshot cropping from website cards. */
html body[data-page-family] main .case-workflow-preview {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(18px, 2.2vw, 30px);
  border-bottom: 1px solid #c4d0e3;
  border-radius: 19px 19px 0 0;
  background: linear-gradient(135deg, #edf3ff, #dfe9fb);
  color: #142b50;
  text-decoration: none;
  container-type: inline-size;
}
.case-workflow-preview * { min-width: 0; box-sizing: border-box; }
.case-workflow-top, .case-workflow-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.case-workflow-top { font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.case-workflow-brand { font-size: 26px; font-weight: 800; letter-spacing: -.05em; }
.case-workflow-caption { font-size: 12px; color: #50617d; margin-bottom: -7px; }
.case-workflow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.case-workflow-step { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 13px 11px; background: #fff; border: 1px solid #c2d1ed; border-radius: 10px; }
.case-workflow-step:not(:last-child)::after { content: "→"; position: absolute; right: -15px; top: 40%; width: 14px; text-align: center; font-size: 14px; color: #2454d7; }
.case-workflow-number { font-size: 10px; font-weight: 750; letter-spacing: .08em; color: #2454d7; }
html body[data-page-family] main .case-workflow-step strong { font-size: 14px; line-height: 1.3; font-weight: 750; color: #142b50; }
.case-workflow-step small { font-size: 10px; line-height: 1.4; color: #53647c; }
.case-workflow-capture { display: block; padding: 10px 0; background: #191919; border: 1px solid #38445b; border-radius: 8px; }
html body[data-page-family] main .case-workflow-preview .case-workflow-capture img { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 970 / 180; object-fit: contain; border: 0; border-radius: 0; margin: 0; }
.case-workflow-foot { font-size: 11px; line-height: 1.4; color: #50617d; }
.case-workflow-foot > span { font-size: 19px; color: #2454d7; }
.case-workflow-preview:focus-visible { outline: 3px solid #184cff; outline-offset: -4px; }
@container (max-width: 350px) {
  .case-workflow-step { padding: 10px 6px; }
  html body[data-page-family] main .case-workflow-step strong { font-size: 11px; }
  .case-workflow-step small { font-size: 9px; }
  .case-workflow-steps { gap: 12px; }
  .case-workflow-step:not(:last-child)::after { width: 11px; right: -12px; font-size: 11px; }
}