/* Put the actual product proof before its detailed explanation. */
body.v17 .v9-workflow {
  grid-template-areas: "intro preview" "support preview";
  grid-template-rows: auto 1fr;
  row-gap: 0;
}
body.v17 .v9-workflow-copy { grid-area: intro; }
body.v17 .v9-workflow-preview { grid-area: preview; }
body.v17 .v17-workflow-support { grid-area: support; min-width: 0; }
body.v17 .v17-demo-followup {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}
body.v17 .v17-demo-followup > p { margin: 0; color: var(--body); font-size: 11px; line-height: 1.75; }
body.v17 .v17-demo-followup .button { min-height: 44px; }

@media (max-width: 1050px) {
  body.v17 .v9-workflow {
    grid-template-areas: "intro" "preview" "support";
    grid-template-rows: auto;
    row-gap: 24px;
  }
}

@media (max-width: 700px) {
  body.v17.v8 .v7-product-preview #role-title { min-height: 2.4em; }
  /* All three roles use genuine mobile viewports in the same phone. */
  body.v17.v8.v7 .v7-product-preview [data-current-role] .v6-role-crop {
    box-sizing: border-box;
    width: min(100%, 300px);
    max-width: 100%;
    aspect-ratio: auto;
    margin-inline: auto;
    border: 6px solid #102b42;
    border-radius: 23px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px #8da7ba, 0 14px 32px #09234017;
  }
  body.v17.v8.v7 .v7-product-preview [data-current-role] .v6-role-crop #role-image {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    left: auto;
    top: auto;
  }
  body.v17.v8.v7 .v7-product-preview [data-current-role] .v5-case-figure figcaption {
    width: min(100%, 300px);
    margin-inline: auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  body.v17 .v17-demo-followup .button { width: 100%; }
}