/* AI capability illustrations from the approved reference; isolated to this module. */
.page-saas .saas-work-heading { margin: 0 0 34px; text-align: center; }
.page-saas .saas-work-heading h2 { margin: 0; color: #112344; font-size: 36px; line-height: 1.4; font-weight: 700; scroll-margin-top: 96px; }
.page-saas .saas-work-heading p { margin: 10px 0 0; color: #526786; font-size: 18px; line-height: 1.7; }
.page-saas .saas-work-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.page-saas .saas-work-card { min-width: 0; padding: 18px 15px 14px; border: 1px solid #dce7fc; border-radius: 8px; background: #f7faff; }
.page-saas .saas-work-card__header { display: flex; align-items: flex-start; gap: 14px; margin: 0 3px 18px; }
.page-saas .saas-work-card__header > div { min-width: 0; flex: 1; }
.page-saas .saas-work-card h3 { margin: 0; color: #112344; font-size: 23px; line-height: 1.4; font-weight: 700; }
.page-saas .saas-work-card__header p { margin: 4px 0 0; color: #526786; font-size: 15px; line-height: 1.6; }
.page-saas .saas-work-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 9px; background-image: url('../images/saas/ai-workflows-reference.webp'); background-size: 2955.5556% auto; background-repeat: no-repeat; }
.page-saas .saas-work-icon--products { background-position: 3.3722% 16.0944%; }
.page-saas .saas-work-icon--pages { background-position: 53.956% 16.0944%; }
.page-saas .saas-work-icon--orders { background-position: 3.3722% 59.9785%; }
.page-saas .saas-work-icon--themes { background-position: 53.956% 59.9785%; }
.page-saas .saas-work-label { flex-shrink: 0; margin-top: 5px; padding: 4px 10px; border-radius: 12px; color: #51678c; background: #e9f0ff; font-size: 11px; line-height: 1.5; }
.page-saas .saas-work-visual { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: zoom-in; appearance: none; }
.page-saas .saas-work-crop { --work-x: 52; --work-y: 225; --work-h: 288; display: block; position: relative; width: 100%; aspect-ratio: 720 / var(--work-h); overflow: hidden; }
.page-saas .saas-work-crop--pages { --work-x: 832; }
.page-saas .saas-work-crop--orders { --work-y: 624; --work-h: 298; }
.page-saas .saas-work-crop--themes { --work-x: 832; --work-y: 624; --work-h: 298; }
.page-saas .saas-work-crop img { position: absolute; display: block; width: 221.666667%; max-width: none; height: auto; left: calc(var(--work-x) / 720 * -100%); top: calc(var(--work-y) / var(--work-h) * -100%); }
.page-saas .saas-work-zoom { position: absolute; right: 6px; bottom: 5px; padding: 5px 9px; border: 1px solid #dce7fc; border-radius: 4px; background: #fff; color: #1f5cce; font-size: 12px; line-height: 1.5; opacity: 0; transition: opacity .18s; }
.page-saas .saas-work-visual:hover .saas-work-zoom,
.page-saas .saas-work-visual:focus-visible .saas-work-zoom { opacity: 1; }
.page-saas .saas-work-visual:focus-visible,
.page-saas .saas-work-dialog button:focus-visible { outline: 3px solid #edab40; outline-offset: 4px; }
.page-saas .saas-work-footnote { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; margin-top: 24px; }
.page-saas .saas-work-footnote p { margin: 0; color: #526786; font-size: 13px; line-height: 1.8; }
.page-saas .saas-work-footnote a { font-size: 13px; white-space: nowrap; }
.page-saas .saas-work-dialog { width: min(1080px,calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; padding: 22px; border: 1px solid #dce7fc; border-radius: 8px; background: #f7faff; color: #15294b; box-sizing: border-box; }
.page-saas .saas-work-dialog::backdrop { background: rgb(13 27 49 / 65%); }
.page-saas .saas-work-dialog__header { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.page-saas .saas-work-dialog__header h2 { margin: 0; font-size: 22px; line-height: 1.5; }
.page-saas .saas-work-dialog button { flex-shrink: 0; min-width: 64px; min-height: 44px; border: 1px solid #ccdaee; border-radius: 5px; background: #fff; color: #1f5cce; cursor: pointer; font: inherit; }
.page-saas .saas-work-dialog__hint { margin: 8px 0 18px; font-size: 13px; line-height: 1.7; color: #526786; }
.page-saas .saas-work-dialog__scroll { overflow: auto; overscroll-behavior: contain; }
.page-saas .saas-work-dialog__scroll .saas-work-crop { min-width: 720px; }
@media (max-width:1100px) {
  .page-saas .saas-work-grid { grid-template-columns: minmax(0,1fr); max-width: 740px; margin-inline: auto; gap: 24px; }
  .page-saas .saas-work-card { padding: 20px; }
}
@media (max-width:767px) {
  .page-saas .saas-work-heading h2 { font-size: 28px; }
  .page-saas .saas-work-heading p { font-size: 16px; }
  .page-saas .saas-work-card { position: relative; padding: 16px 10px 12px; }
  .page-saas .saas-work-card__header { gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
  .page-saas .saas-work-card h3 { padding-right: 64px; font-size: 21px; }
  .page-saas .saas-work-card__header p { font-size: 14px; }
  .page-saas .saas-work-label { position: absolute; top: 17px; right: 13px; margin: 0; }
  .page-saas .saas-work-zoom { position: static; display: block; width: max-content; margin: 12px auto 0; opacity: 1; min-height: 32px; }
  .page-saas .saas-work-footnote { align-items: flex-start; justify-content: flex-start; gap: 12px; }
  .page-saas .saas-work-dialog { padding: 16px; }
}
@media (prefers-reduced-motion:reduce) { .page-saas .saas-work-zoom { transition: none; } }