/* PAI FLOW: layouts and high-resolution assets specific to this product. */
.flow-page { --product-muted: #627187; }
.flow-page .product-opening { background: #f5f7f9; }
.flow-page .product-opening::before {
  left: auto;
  right: max(0px, calc((100% - 1440px) / 2));
  transform: none;
  width: min(100%, 1125px);
  background: url('/assets/images/product/flow/pai-flow-hero-bg-hq-v3.png') right bottom / auto 112% no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 96%, transparent);
}
.flow-page .product-hero-description { max-width: 580px; color: #526278; }
.flow-page .product-tagline { font-size: clamp(21px, 1.85vw, 26px); }
.flow-page .product-label { color: #65758e; }
.flow-page .product-overview-section { padding-block: 64px 72px; }
.flow-page .product-overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; }
.flow-page .overview-copy { align-self: start; }
.flow-page .product-overview > img { border-radius: 12px; box-shadow: 0 16px 32px -22px #12243e66; }
.flow-page .feature-grid { gap: 32px; margin-top: 44px; }
.flow-page .feature-item { padding-top: 24px; border-top: 1px solid #dce5f0; }
.flow-page .feature-icon { width: 54px; height: 54px; margin-bottom: 16px; border-radius: 12px; }
.flow-page .feature-icon svg { width: 30px; height: 30px; }
.flow-page .feature-item p { color: var(--product-muted); }
.flow-page .product-key-feature { padding-block: 72px; background: linear-gradient(110deg, #f5f8fd, #edf4ff); }
.flow-page .key-feature-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.flow-page .data-list { border: 1px solid #e7eef9; box-shadow: 0 12px 32px -24px #3570bb66; }
.flow-page .data-list li { padding-inline: 18px; gap: 12px; }
.flow-page .product-workflow { display: block; padding-block: 76px; }
.flow-workflow-heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: end; }
.flow-workflow-heading .product-label { grid-column: 1 / -1; }
.flow-page .flow-workflow-heading h2 { font-size: clamp(26px, 2.55vw, 36px); }
.flow-page .flow-workflow-heading .product-copy { margin: 0 0 4px; max-width: 510px; font-size: 16px; }
.flow-page .flow-workflow-heading .product-desktop-break { display: none; }
.flow-page .workflow-steps { gap: 28px; margin-top: 34px; }
.flow-page .workflow-steps img { border: 1px solid #e5ebf3; border-radius: 10px; background: #f7f9fc; }
.flow-page .workflow-steps li:nth-child(3) img { clip-path: none; }
.flow-page .workflow-steps h3 { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; text-align: left; font-size: 16px; }
.flow-step-number { flex: none; color: var(--product-blue); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.flow-page .workflow-steps li:not(:last-child)::after { right: -24px; top: calc((100vw - 180px) * .09375 - 15px); width: 20px; height: 30px; background: transparent; color: #7c9bc5; font-size: 26px; }
.flow-page .product-showcase { background: #f6f8fc; }
.flow-page .product-screen { grid-template-columns: minmax(0, .85fr) minmax(0, 2fr); gap: 48px; padding-block: 72px; }
.flow-page .product-screen > img { border-radius: 12px; filter: none; box-shadow: 0 24px 46px -30px #16325466; }
.flow-page .product-screen .product-copy { font-size: 16px; line-height: 1.85; }
.flow-page .product-usecases { padding-block: 48px 72px; border-top: 1px solid #dce5f0; }
.flow-page .usecase-grid { gap: 24px; margin-top: 28px; }
.flow-page .usecase-grid img { border-radius: 10px; }
.flow-page .usecase-grid h3 { margin-top: 16px; font-size: 17px; }
.flow-page .usecase-grid article::after { display: none; }
@media (min-width: 1296px) {
  .flow-page .workflow-steps li:not(:last-child)::after { top: 90px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .flow-page .product-opening::before { background-image: linear-gradient(90deg, #f7f9fc, #f7f9fcef 48%, #f7f9fc77 65%, transparent 90%), url('/assets/images/product/flow/pai-flow-hero-bg-hq-v3.png'); background-size: 100% 100%, auto 112%; }
  .flow-page .product-hero-description { max-width: 490px; }
  .flow-page .product-overview { gap: 32px; }
  .flow-page .feature-grid { gap: 24px; }
  .flow-page .key-feature-layout { grid-template-columns: 1fr; gap: 32px; }
  .flow-page .key-feature-copy .product-copy { max-width: 580px; }
  .flow-page .data-diagram { width: min(100%, 740px); justify-self: center; }
  .flow-page .data-list li { min-height: 52px; font-size: 14px; }
  .flow-page .workflow-steps { gap: 24px; }
  .flow-page .workflow-steps h3 { font-size: 14px; gap: 7px; }
  .flow-page .workflow-steps li:not(:last-child)::after { right: -22px; }
  .flow-workflow-heading { gap: 0 32px; }
  .flow-page .flow-workflow-heading .product-copy { font-size: 15px; }
  .flow-page .product-screen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px; }
  .flow-page .product-screen .product-copy { font-size: 15px; }
  .flow-page .usecase-grid h3 { font-size: 15px; }
}
@media (max-width: 767px) {
  .flow-page .product-opening::before {
    background-image: linear-gradient(90deg, #f7f9fcf5, #f7f9fce8 48%, #f7f9fc80), url('/assets/images/product/flow/pai-flow-hero-bg-hq-v3.png');
    background-position: 65% bottom;
    background-size: cover;
    mask-image: none;
  }
  .flow-page .product-hero-description { max-width: 390px; }
  .flow-page .product-overview-section { padding-block: 40px 44px; }
  .flow-page .product-overview { grid-template-columns: 1fr; gap: 28px; }
  .flow-page .feature-grid { margin-top: 30px; gap: 26px 20px; }
  .flow-page .feature-item { padding-top: 20px; }
  .flow-page .feature-icon { width: 46px; height: 46px; margin-bottom: 12px; }
  .flow-page .feature-icon svg { width: 27px; height: 27px; }
  .flow-page .product-key-feature { padding-block: 44px; }
  .flow-page .key-feature-layout { grid-template-columns: 1fr; gap: 28px; }
  .flow-page .data-list li { padding-inline: 8px; gap: 8px; }
  .flow-page .product-workflow { padding-block: 44px; }
  .flow-workflow-heading { display: block; }
  .flow-page .flow-workflow-heading h2 { font-size: 26px; }
  .flow-page .flow-workflow-heading .product-copy { margin-top: 16px; font-size: 14px; }
  .flow-page .workflow-steps { gap: 28px 20px; margin-top: 28px; }
  .flow-page .workflow-steps h3 { margin-top: 12px; font-size: 13px; gap: 6px; }
  .flow-step-number { font-size: 11px; }
  .flow-page .workflow-steps li::after { display: none; }
  .flow-page .product-screen { grid-template-columns: 1fr; gap: 28px; padding-block: 44px; }
  .flow-page .product-screen .product-copy { font-size: 14px; }
  .flow-page .product-screen > img { border-radius: 8px; }
  .flow-page .product-usecases { padding-block: 36px 44px; }
  .flow-page .usecase-grid { gap: 28px; margin-top: 24px; }
  .flow-page .usecase-grid h3 { margin-top: 12px; font-size: 16px; }
}