.wsServiceOverviewGrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; max-width: 1180px; margin: 0 auto; }
.wsServiceOverviewText .wsSectionTitle { text-align: left; margin: 8px 0 16px; }
.wsServiceParagraph { font-size: 16px; line-height: 1.75; color: #475569; margin: 0 0 16px; }
.wsServiceUseCases { background: #f4f8ff; border: 1px solid #dbe7fb; border-radius: 16px; padding: 28px; }
.wsServiceUseCases h3 { font-size: 17px; font-weight: 800; color: #0b1a38; margin: 0 0 16px; }
.wsServiceUseCases ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wsServiceUseCases li { display: flex; gap: 10px; font-size: 14.5px; color: #1e293b; line-height: 1.5; }
.wsServiceFeatureGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wsServiceFaqList { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.wsServiceFaqItem { border: 1px solid #e2eaf6; border-radius: 12px; background: #fff; padding: 20px 22px; }
.wsServiceFaqItem h3 { margin: 0 0 8px; font-weight: 700; color: #0b1a38; font-size: 16px; }
.wsServiceFaqItem p { margin: 0; color: #475569; line-height: 1.7; font-size: 15px; }

@media (max-width: 900px) {
  .wsServiceOverviewGrid { grid-template-columns: 1fr; gap: 24px; }
  .wsServiceFeatureGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .wsServiceFeatureGrid { grid-template-columns: 1fr; }
  .wsServiceUseCases { padding: 22px; }
}

.wsShowcase { background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%); padding: 80px 24px; }
.wsShowcaseInner { max-width: 1180px; margin: 0 auto; }
.wsShowcaseBrand { display: block; width: 160px; max-width: 100%; margin: 0 auto 20px; }
.wsShowcaseBrand img { display: block; width: 100%; height: auto; }
.wsShowcaseList { display: grid; gap: 64px; margin-top: 48px; }
.wsShowcaseRow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px; align-items: center; }
.wsShowcaseRow:nth-child(even) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.wsShowcaseRow:nth-child(even) .wsShowcaseFrame { order: -1; }
.wsShowcaseLabel { display: inline-flex; align-items: center; gap: 8px; color: #0066ff; font-weight: 800; }
.wsShowcaseText h3 { font-size: 26px; line-height: 1.25; color: #0b1a38; margin: 14px 0 12px; }
.wsShowcaseText p { font-size: 15.5px; line-height: 1.75; color: #475569; margin: 0 0 18px; }
.wsShowcaseFrame { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #dbe7fb; box-shadow: 0 24px 60px -24px rgba(11, 26, 56, .28); }
.wsShowcaseFrame img, .wsShowcasePhone img { display: block; width: 100%; height: auto; }
.wsShowcaseMobile { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 80px; padding: 48px; border-radius: 20px; background: #0b1a38; }
.wsShowcaseMobile .wsSectionKicker { color: #7cb4ff; }
.wsShowcaseMobile .wsShowcaseText h3 { color: #fff; }
.wsShowcaseMobile .wsShowcaseText p, .wsShowcaseMobile .wsTabPoints li { color: #cbd5e1; }
.wsShowcasePhone { margin: 0 auto; width: 100%; max-width: 280px; max-height: 520px; overflow: hidden; border-radius: 32px; border: 8px solid #1e293b; background: #fff; }

@media (max-width: 900px) {
  .wsShowcase { padding: 56px 16px; }
  .wsShowcaseRow, .wsShowcaseRow:nth-child(even), .wsShowcaseMobile { grid-template-columns: 1fr; gap: 24px; }
  .wsShowcaseRow:nth-child(even) .wsShowcaseFrame { order: 0; }
  .wsShowcaseMobile { padding: 32px 24px; margin-top: 56px; }
}

/* One screenshot at a time, with a bounded preview for long captures. */
.wsShowcase.isTabbed { padding: 48px 24px; }
.isTabbed .wsShowcaseBrand { width: 120px; margin-bottom: 12px; }
.wsShowcaseTabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 24px 0; }
.wsShowcaseTabs button { padding: 10px 18px; border: 1px solid #dbe7fb; border-radius: 10px; background: #fff; color: #475569; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.wsShowcaseTabs button[aria-selected="true"] { color: #fff; background: #0066ff; border-color: #0066ff; }
.wsShowcaseTabs button:focus-visible { outline: 3px solid #7cb4ff; outline-offset: 3px; }
.isTabbed .wsShowcaseList { display: block; margin-top: 0; }
.isTabbed .wsShowcaseRow, .isTabbed .wsShowcaseMobile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px; min-height: 380px; }
.isTabbed [role="tabpanel"][hidden] { display: none; }
.isTabbed .wsShowcaseRow .wsShowcaseFrame { order: 0; }
.isTabbed .wsShowcaseFrame { height: 380px; overflow: auto; }
.isTabbed .wsShowcaseFrame, .isTabbed .wsShowcasePhone {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #9dbce8 #f1f6ff;
}
.isTabbed .wsShowcaseFrame::-webkit-scrollbar, .isTabbed .wsShowcasePhone::-webkit-scrollbar { width: 6px; height: 6px; }
.isTabbed .wsShowcaseFrame::-webkit-scrollbar-track, .isTabbed .wsShowcasePhone::-webkit-scrollbar-track { background: #f1f6ff; }
.isTabbed .wsShowcaseFrame::-webkit-scrollbar-thumb, .isTabbed .wsShowcasePhone::-webkit-scrollbar-thumb { background: #9dbce8; border-radius: 999px; }
.isTabbed .wsShowcaseFrame::-webkit-scrollbar-thumb:hover, .isTabbed .wsShowcasePhone::-webkit-scrollbar-thumb:hover { background: #0066ff; }
@media (prefers-reduced-motion: reduce) {
  .isTabbed .wsShowcaseFrame, .isTabbed .wsShowcasePhone { scroll-behavior: auto; }
}
.isTabbed .wsShowcaseMobile { margin-top: 0; padding: 24px 32px; }
.isTabbed .wsShowcasePhone { max-width: 220px; height: 332px; max-height: none; overflow: auto; border-radius: 20px; }
@media (max-width: 900px) {
  .wsShowcase.isTabbed { padding: 36px 16px; }
  .isTabbed .wsShowcaseRow, .isTabbed .wsShowcaseMobile { grid-template-columns: 1fr; gap: 20px; min-height: 0; }
  .isTabbed .wsShowcaseFrame { height: clamp(240px, 55vw, 380px); }
  .isTabbed .wsShowcaseMobile { padding: 24px; }
  .wsShowcaseTabs { gap: 6px; }
  .wsShowcaseTabs button { padding: 9px 12px; }
}