/* =============================================================================
   service-app.css — app 會務管理系統 Landing Page
   區塊：Hero → 會務挑戰 → 核心功能 → 成功案例 → 更多功能 → Final CTA。
   class 前綴 .sapp-，僅供 products/service-app.php 使用；Hero、區塊標題組、
   卡片與面板語彙對齊 css/aais-crm.css、css/aais-home-line.css，背景依
   「白底／surface-inner 交替」排列。
   ============================================================================= */

.sapp-page {
  --ds-font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --sapp-section-space: clamp(var(--ds-space-2xl), 8vw, var(--ds-space-4xl));
  font-family: var(--ds-font-sans);
  background: var(--ds-color-page);
}

.sapp-page main [id] { scroll-margin-top: 100px; }

.sapp-container {
  width: min(100% - clamp(32px, 8vw, 64px), var(--ds-container-max));
  margin-inline: auto;
}

.sapp-section-intro {
  max-width: 640px;
  margin: 0 auto var(--ds-space-2xl);
  text-align: center;
}

.sapp-section-intro h2 { margin-block: var(--ds-space-sm) var(--ds-space-md); }

@keyframes sapp-rise {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
              transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--reveal-index, 0) * 80ms);
}

[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sapp-page [data-reveal] { transition: none; opacity: 1; transform: none; }
  .sapp-page [class*="__eyebrow"],
  .sapp-hero__title, .sapp-hero__lead, .sapp-hero__highlights, .sapp-hero__actions {
    animation: none !important; opacity: 1; transform: none; filter: none;
  }
}

/* =============================================================================
   1. Hero（與其他雲端系統子頁同款：滿版情境圖、左側文字欄）
   ============================================================================= */
.sapp-hero {
  display: flex;
  align-items: center;
  min-height: clamp(420px, 42vw, 640px);
  padding-top: clamp(112px, 20vw, 144px);
  padding-bottom: var(--ds-space-3xl);
  background-image: url("../assets/images/service-app/app-banner.webp");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.sapp-hero__content { max-width: 640px; }

.sapp-hero__eyebrow { animation: sapp-rise .8s cubic-bezier(.16, 1, .3, 1) .08s both; }

.sapp-hero__title {
  margin-block: var(--ds-space-md) var(--ds-space-lg);
  animation: sapp-rise .9s cubic-bezier(.16, 1, .3, 1) .16s both;
}

.sapp-hero__lead { animation: sapp-rise .9s cubic-bezier(.16, 1, .3, 1) .26s both; }

.sapp-hero__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-xs) var(--ds-space-xl);
  list-style: none;
  margin: var(--ds-space-lg) 0 0;
  padding: 0;
  animation: sapp-rise .9s cubic-bezier(.16, 1, .3, 1) .32s both;
}

.sapp-hero__highlights li {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  font-weight: var(--ds-weight-medium);
}

.sapp-hero__highlights .ds-icon { font-size: 18px; color: var(--ds-color-primary); }

.sapp-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-space-lg);
  margin-top: var(--ds-space-xl);
  animation: sapp-rise .9s cubic-bezier(.16, 1, .3, 1) .4s both;
}

/* =============================================================================
   2. 會務挑戰（2×2 橫向卡片：圖示在左、文字在右）
   ============================================================================= */
.sapp-pain {
  background: var(--ds-color-surface-inner);
  padding-block: var(--sapp-section-space);
}

.sapp-pain__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-lg);
}

.sapp-pain__card {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--ds-space-lg);
  border: var(--ds-border-width) solid var(--ds-color-border);
  transition: border-color var(--ds-duration-slow) var(--ds-ease),
              box-shadow var(--ds-duration-slow) var(--ds-ease);
}

.sapp-pain__card:hover,
.sapp-pain__card:focus-within { border-color: var(--ds-color-primary); }

.sapp-pain__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 56px;
  aspect-ratio: 1 / 1;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary-wash);
  transition: background-color var(--ds-duration-slow) var(--ds-ease);
}

.sapp-pain__icon .ds-icon {
  color: var(--ds-color-primary);
  font-size: 26px;
  transition: color var(--ds-duration-slow) var(--ds-ease);
}

.sapp-pain__card:hover .sapp-pain__icon,
.sapp-pain__card:focus-within .sapp-pain__icon { background: var(--ds-color-primary); }

.sapp-pain__card:hover .sapp-pain__icon .ds-icon,
.sapp-pain__card:focus-within .sapp-pain__icon .ds-icon { color: var(--ds-color-on-primary); }

.sapp-pain__card-body h3 { margin-bottom: var(--ds-space-xs); }

/* =============================================================================
   3. 核心功能（三個情境分類＋半截手機預覽＋功能選擇＋單一說明，底部淡紫色帶收尾）
   ============================================================================= */
.sapp-features {
  /* 手機寬度與可見比例：顯示整支手機上方 90% */
  --sapp-phone-w: clamp(260px, 28vw, 380px);
  --sapp-phone-visible: .9;
  --sapp-phone-pad: var(--ds-space-2xl);
  padding-top: var(--sapp-section-space);
  background: var(--ds-color-page);
}

.sapp-features__categories {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(var(--ds-space-lg), 3vw, var(--ds-space-xl));
}

.sapp-features__tabs .ds-pill-tabs__tab {
  height: var(--ds-control-height-md);
  padding-inline: var(--ds-space-lg);
  font-size: var(--ds-text-nav-label-size);
  line-height: var(--ds-text-nav-label-line);
}

.sapp-features__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--ds-space-xl), 6vw, var(--ds-space-4xl));
  align-items: end;
}

/* --- 手機預覽：底邊即淡紫色帶的頂邊 --- */
.sapp-features__display {
  position: relative;
  display: flex;
  justify-content: center;
}

/* 以手機底部為圓心的品牌色光暈，與手機一起停在色帶邊界 */
.sapp-features__display::before {
  content: "";
  position: absolute;
  inset: 10% 0 0;
  background: radial-gradient(60% 75% at 50% 100%, var(--ds-color-secondary-wash), transparent 72%);
  pointer-events: none;
}

/* 外框、螢幕與陰影共用這一個裁切邊界；左右上預留的 pad 需大於陰影模糊半徑，
   否則陰影會被切成方形色塊 */
.sapp-features__crop {
  position: relative;
  width: calc(var(--sapp-phone-w) + var(--sapp-phone-pad) * 2);
  height: calc(var(--sapp-phone-pad) + var(--sapp-phone-w) * 1007 / 650 * var(--sapp-phone-visible));
  overflow: hidden;
}

.sapp-features__phone {
  position: absolute;
  top: var(--sapp-phone-pad);
  left: var(--sapp-phone-pad);
  width: var(--sapp-phone-w);
  aspect-ratio: 650 / 1007;
  filter: drop-shadow(0 12px 20px rgba(30, 14, 98, .12));
}

/* inset 對齊 app-frame.png 透明螢幕區的實測位置；圓角依手機寬度等比縮放 */
.sapp-features__screens {
  position: absolute;
  inset: 3.178% 5.538% 0.099% 6.615%;
  overflow: hidden;
  border-radius: calc(var(--sapp-phone-w) * .058);
  background: var(--ds-color-card);
}

.sapp-features__screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity var(--ds-duration-media) var(--ds-ease),
              transform 700ms var(--ds-ease),
              visibility 0s linear var(--ds-duration-media);
}

.sapp-features__screen.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.sapp-features__bezel {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sapp-features__zoom {
  position: absolute;
  top: var(--sapp-phone-pad);
  right: max(0px, calc(50% - var(--sapp-phone-w) / 2 - var(--ds-space-md) - var(--ds-control-height-icon)));
  z-index: 3;
  box-shadow: var(--ds-shadow-sm);
}

/* --- 右欄：分類面板疊在同一格，高度取最高者，切換時版面不跳動 --- */
.sapp-features__panels {
  display: grid;
  align-self: center;
  padding-bottom: var(--ds-space-2xl);
}

.sapp-features__panel,
.sapp-features__copy {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
}

/* 子層 visibility: visible 會蓋過父層的 hidden，說明需同時限定在選取中的分類內 */
.sapp-features__panel.is-active,
.sapp-features__panel.is-active .sapp-features__copy.is-active { visibility: visible; }

.sapp-features__picker.ds-line-tabs--stacked {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--ds-space-xl);
}

/* 選取底線改由 ::after 由左展開，邊框維持 1px，避免選取時文字位移 */
.sapp-features__picker .sapp-features__option {
  position: relative;
  padding-block: var(--ds-space-md);
  border-bottom: var(--ds-border-width) solid var(--ds-color-border);
  font-size: var(--ds-text-body-lg-size);
  line-height: var(--ds-text-body-lg-line);
}

.sapp-features__picker .sapp-features__option[aria-selected="true"] {
  border-bottom-width: var(--ds-border-width);
  border-bottom-color: var(--ds-color-border);
}

.sapp-features__option::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--ds-border-width-emphasis);
  background: var(--ds-color-secondary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ds-duration-media) var(--ds-ease),
              opacity var(--ds-duration-fast) var(--ds-ease);
}

.sapp-features__option:hover::after {
  opacity: .25;
  transform: scaleX(1);
}

.sapp-features__option[aria-selected="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.sapp-features__copies {
  display: grid;
  margin-top: var(--ds-space-xl);
}

.sapp-features__copy-title { text-wrap: balance; }

.sapp-features__copy-body {
  max-width: 30em;
  margin-top: var(--ds-space-sm);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-body-md-line);
}

/* 切換時新內容由下淡入，功能選項依序錯落 */
@keyframes sapp-features-rise {
  from { opacity: 0; transform: translateY(12px); }
}

.sapp-features__panel.is-active .sapp-features__option,
.sapp-features__copy.is-active > * {
  animation: sapp-features-rise var(--ds-duration-media) var(--ds-ease) both;
}

.sapp-features__panel.is-active .sapp-features__option:nth-child(2) { animation-delay: 40ms; }
.sapp-features__panel.is-active .sapp-features__option:nth-child(3) { animation-delay: 80ms; }
.sapp-features__panel.is-active .sapp-features__option:nth-child(4) { animation-delay: 120ms; }
.sapp-features__copy.is-active > :nth-child(2) { animation-delay: 70ms; }

/* --- 淡紫色帶：核心功能區的收尾，也是手機的裁切邊界 --- */
.sapp-features__band {
  height: clamp(var(--ds-space-xl), 5vw, var(--ds-space-3xl));
  background: var(--ds-color-secondary-wash);
  border-top: var(--ds-border-width) solid color-mix(in srgb, var(--ds-color-secondary) 16%, transparent);
}

/* --- 放大畫面 --- */
.sapp-features__lightbox {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.sapp-features__lightbox::backdrop {
  background: rgba(15, 10, 40, .72);
  backdrop-filter: blur(6px);
}

.sapp-features__lightbox[open] { animation: sapp-features-zoom-in var(--ds-duration-slow) var(--ds-ease); }

@keyframes sapp-features-zoom-in {
  from { opacity: 0; transform: scale(.96); }
}

.sapp-features__lightbox-inner { position: relative; }

.sapp-features__lightbox-img {
  display: block;
  width: auto;
  height: min(calc(100dvh - var(--ds-space-3xl)), 976px);
  max-width: calc(100vw - var(--ds-space-xl));
  object-fit: contain;
  border-radius: var(--ds-space-lg);
  box-shadow: var(--ds-shadow-panel);
}

.sapp-features__lightbox-close {
  position: absolute;
  top: var(--ds-space-sm);
  right: var(--ds-space-sm);
}

@media (prefers-reduced-motion: reduce) {
  .sapp-features__screen,
  .sapp-features__option::after { transition: none; }
  .sapp-features__screen { transform: none; }
  .sapp-features__panel.is-active .sapp-features__option,
  .sapp-features__copy.is-active > *,
  .sapp-features__lightbox[open] { animation: none; }
}

/* =============================================================================
   4. 成功案例（淺底；白色面板內左清單右照片，下方導入單位標誌牆）
   ============================================================================= */
.sapp-cases {
  background: var(--ds-color-secondary-wash);
  padding-block: var(--sapp-section-space);
}

.sapp-cases__intro { max-width: 640px; }

/* --- 成功案例清單的切換列 --- */
.sapp-cases__accordion {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
}

.sapp-cases__row {
  border: var(--ds-border-width) solid transparent;
  border-radius: var(--ds-radius-lg);
  transition: background-color var(--ds-duration-slow) var(--ds-ease),
              border-color var(--ds-duration-slow) var(--ds-ease),
              box-shadow var(--ds-duration-slow) var(--ds-ease);
}

.sapp-cases__row.is-active {
  background: var(--ds-color-card);
  border-color: var(--ds-color-hairline);
  box-shadow: var(--ds-shadow-panel);
}

.sapp-cases__item-heading { margin: 0; font: inherit; }

.sapp-cases__trigger {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  width: 100%;
  padding: var(--ds-space-sm) var(--ds-space-md);
  background: none;
  border: 0;
  border-radius: var(--ds-radius-lg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

.sapp-cases__row:not(.is-active) .sapp-cases__trigger:hover {
  background: color-mix(in srgb, var(--ds-color-card) 70%, transparent);
}

.sapp-cases__trigger:focus-visible {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

.sapp-cases__trigger-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-lg-size);
  font-weight: var(--ds-weight-medium);
}

.sapp-cases__row.is-active .sapp-cases__trigger-title {
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-semibold);
}

.sapp-cases__trigger-tagline {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  font-weight: 400;
}

.sapp-cases__chevron {
  flex-shrink: 0;
  color: var(--ds-color-text-muted);
  transition: transform var(--ds-duration-slow) var(--ds-ease),
              color var(--ds-duration-slow) var(--ds-ease);
}

.sapp-cases__row.is-active .sapp-cases__chevron {
  transform: rotate(180deg);
  color: var(--ds-color-primary);
}

.sapp-cases__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ds-duration-slow) var(--ds-ease);
}

.sapp-cases__row.is-active .sapp-cases__panel { grid-template-rows: 1fr; }

.sapp-cases__panel-inner {
  min-height: 0;
  overflow: hidden;
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.sapp-cases__panel-inner p { margin: 0; padding: 0 var(--ds-space-md) var(--ds-space-md); }

@media (prefers-reduced-motion: reduce) {
  .sapp-cases__track,
  .sapp-cases__panel { transition: none; }
}

.sapp-cases__switcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--ds-space-xl), 5vw, var(--ds-space-3xl));
  align-items: center;
  padding: clamp(var(--ds-space-lg), 3vw, var(--ds-space-xl));
  background: var(--ds-color-card);
  border: var(--ds-border-width) solid var(--ds-color-hairline);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-panel);
}

/* 白色面板上，選取列改用淺底區分，不再疊白卡 */
.sapp-cases__row.is-active {
  background: var(--ds-color-surface-inner);
  box-shadow: none;
}

.sapp-cases__row:not(.is-active) .sapp-cases__trigger:hover { background: var(--ds-color-surface-inner-soft); }

.sapp-cases__display { min-width: 0; }

.sapp-cases__frame {
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  aspect-ratio: 751 / 697;
}

.sapp-cases__track {
  display: flex;
  height: 100%;
  transition: transform var(--ds-duration-media) var(--ds-ease);
}

.sapp-cases__slide { flex: 0 0 100%; min-width: 0; height: 100%; }

.sapp-cases__photo { display: block; width: 100%; height: 100%; object-fit: cover; }

.sapp-cases__wall {
  margin-top: clamp(var(--ds-space-2xl), 6vw, var(--ds-space-3xl));
  text-align: center;
}

.sapp-cases__wall-title {
  margin-bottom: var(--ds-space-xl);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-headline-sm-size);
  line-height: var(--ds-text-headline-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.sapp-cases__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--ds-space-md);
}

.sapp-cases__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-md) var(--ds-space-sm);
  background: var(--ds-color-card);
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
}

.sapp-cases__item img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: var(--ds-radius-lg);
}

.sapp-cases__item span {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  text-align: center;
}

/* =============================================================================
   5. 更多功能（白底＋網點裝飾；15 項功能以小卡排成 5×3）
   ============================================================================= */
.sapp-more {
  position: relative;
  padding-block: var(--sapp-section-space);
}

.sapp-more__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/images/shared/dot-light-bg.webp") top center / 100% auto no-repeat;
}

.sapp-more > .sapp-container { position: relative; z-index: 1; }

.sapp-more__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ds-space-md);
}

.sapp-more__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-lg) var(--ds-space-md);
  background: var(--ds-color-card);
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  text-align: center;
  transition: border-color var(--ds-duration-slow) var(--ds-ease),
              box-shadow var(--ds-duration-slow) var(--ds-ease),
              transform var(--ds-duration-slow) var(--ds-ease);
}

.sapp-more__item:hover {
  border-color: var(--ds-color-primary);
  box-shadow: var(--ds-shadow-panel);
  transform: translateY(-2px);
}

.sapp-more__icon { display: block; width: 44px; height: 44px; }

.sapp-more__item span {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
  font-weight: var(--ds-weight-medium);
}

@media (prefers-reduced-motion: reduce) {
  .sapp-more__item { transition: none; }
  .sapp-more__item:hover { transform: none; }
}

/* =============================================================================
   6. Final CTA（ds-panel：左側 APP 畫面貼齊面板下緣、右側文字與按鈕）
   ============================================================================= */
.sapp-cta-section {
  background: var(--ds-color-surface-inner);
  padding-block: var(--sapp-section-space);
}

.sapp-cta {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(var(--ds-space-xl), 5vw, var(--ds-space-3xl));
  align-items: end;
  overflow: hidden;
  padding: var(--ds-space-xl) var(--ds-space-xl) 0;
}

.sapp-cta__visual { display: flex; justify-content: center; }
.sapp-cta__visual img { display: block; width: 100%; height: auto; }

.sapp-cta__content {
  align-self: center;
  min-width: 0;
  padding-bottom: var(--ds-space-xl);
  container-type: inline-size;
}

.sapp-cta__content .ds-lead { max-width: 620px; margin-top: var(--ds-space-md); }

.sapp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-md);
  margin-top: var(--ds-space-lg);
}

/* 平板以上標題不斷行，字級依本欄寬度（÷16.5）縮放，下限不小於導言 */
@media (min-width: 768px) {
  .sapp-cta__title {
    font-size: clamp(var(--ds-text-body-lg-size), min(2.6vw, calc(100cqi / 16.5)), var(--ds-text-headline-md-size));
    line-height: 1.4;
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  .sapp-cta { padding: var(--ds-space-2xl) var(--ds-space-2xl) 0; }
}

/* =============================================================================
   置中標題：桌機使用完整欄寬、以容器寬度限制字級，導言維持閱讀行長
   ============================================================================= */
@media (min-width: 1024px) {
  .sapp-section-intro {
    max-width: none;
    container-type: inline-size;
  }

  .sapp-section-intro > h2.ds-title-lg {
    font-size: min(var(--ds-text-headline-lg-size), 4cqi);
    white-space: nowrap;
  }

  .sapp-section-intro > .ds-lead {
    max-width: 640px;
    margin-inline: auto;
  }

  .sapp-section-intro > h2 br { display: none; }
}

/* =============================================================================
   響應式
   ============================================================================= */
@media (max-width: 1023px) {
  .sapp-cases__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sapp-more__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .sapp-pain__grid { grid-template-columns: 1fr; }

  /* 單欄：分類 → 功能選擇 → 說明 → 半截手機 → 色帶；分類名稱可換行，不橫向捲動 */
  .sapp-features { --sapp-phone-pad: var(--ds-space-lg); }
  .sapp-features__categories { margin-bottom: var(--ds-space-xl); }
  .sapp-features__tabs.ds-pill-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    border-radius: var(--ds-radius-lg);
  }
  .sapp-features__tabs .ds-pill-tabs__tab {
    justify-content: center;
    height: auto;
    min-height: var(--ds-control-height-md);
    padding: var(--ds-space-xs);
    border-radius: calc(var(--ds-radius-lg) - var(--ds-space-xxs));
    white-space: normal;
    text-align: center;
  }
  .sapp-features__stage { grid-template-columns: 1fr; gap: var(--ds-space-xl); }
  .sapp-features__display { order: 1; }
  .sapp-features__panels { padding-bottom: 0; }
  .sapp-features__picker.ds-line-tabs--stacked { column-gap: var(--ds-space-md); }
  .sapp-features__picker .sapp-features__option {
    padding-block: var(--ds-space-sm);
    font-size: var(--ds-text-nav-label-size);
    line-height: var(--ds-text-nav-label-line);
  }
  .sapp-features__copies { margin-top: var(--ds-space-lg); }

  .sapp-cta { grid-template-columns: 1fr; padding: var(--ds-space-xl) var(--ds-space-lg) 0; text-align: center; }
  .sapp-cta__visual { order: 2; }
  .sapp-cta__visual img { max-width: 320px; }
  .sapp-cta__content { padding-bottom: 0; }
  .sapp-cta__actions { justify-content: center; }
  .sapp-cta__title {
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
}

@media (max-width: 639px) {
  .sapp-hero {
    min-height: 0;
    background-image:
      linear-gradient(to right,
        color-mix(in srgb, var(--ds-color-page) 88%, transparent) 0%,
        color-mix(in srgb, var(--ds-color-page) 55%, transparent) 65%,
        color-mix(in srgb, var(--ds-color-page) 15%, transparent) 100%),
      url("../assets/images/service-app/app-banner.webp");
  }
  .sapp-hero__content { max-width: none; }

  .sapp-pain__card { flex-direction: column; gap: var(--ds-space-md); }

  .sapp-cases__switcher { grid-template-columns: 1fr; gap: var(--ds-space-lg); }
  .sapp-cases__display { order: -1; }
  .sapp-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sapp-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}