/*
 * Ciot Matter final content page
 * - Bootstrap 4 is supplied by the existing CHANGING website.
 * - No inline CSS / inline JS / CDN resources.
 * - The layout intentionally follows the existing Matter page component language:
 *   icon feature cards, 3-column blocks, 4 service-mode cards, tables, numbered security blocks and CTA.
 */

:root {
  --matter-text: #181919;
  --matter-muted: #666666;
  --matter-line: #e6e6e6;
  --matter-soft: #e8f0f7;
  --matter-white: #ffffff;
  --matter-accent: #1585a8;
  --matter-accent-dark: #0f6782;
}

body {
  color: var(--matter-text);
  background: var(--matter-white);
  font-family: Arial, "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}

/* Designer requirement: standard body copy = 17px. */
.matter-page p,
.matter-page li,
.matter-page td,
.matter-page th,
.matter-page a {
  font-size: 17px;
  line-height: 1.8;
}

.matter-page h1,
.matter-page h2,
.matter-page h3 {
  color: var(--matter-text);
  font-weight: 600;
  line-height: 1.35;
}

.matter-page h1 {
  margin: 0 0 18px;
  font-size: 38px;
}

.matter-page h2 {
  margin: 0 0 18px;
  font-size: 40px;
}

.matter-page h3 {
  margin: 0 0 12px;
  font-size: 21px;
}

.matter-section {
  padding: 68px 0;
}

.matter-section-first {
  padding-top: 54px;
}

.matter-section-alt {
  background: var(--matter-soft);
}

.matter-section-head h2{
  font-size: 40px;
}


.matter-section-head {
  margin-bottom: 10px;
}

.matter-section-head p {
  max-width: 1100px;
  margin-right: auto;
  margin-left: auto;
  font-size:20px;
}

.matter-section-head.text-center p {
  max-width: 1000px;
}

.matter-key-message {
  margin-top: 18px;
  color: var(--matter-accent);
  font-size: 25px !important;
/*  background:#000000;*/
 padding:0.3% 3%;
font-style: italic;
font-weight: 300;
}

.matter-feature-row,
.matter-three-row,
.matter-mode-row,
.matter-number-row {
  margin-top: -12px;
  margin-bottom: -12px;
}

.matter-feature-row > [class*="col-"],
.matter-three-row > [class*="col-"],
.matter-mode-row > [class*="col-"],
.matter-number-row > [class*="col-"] {
  padding-top: 12px;
  padding-bottom: 12px;
}

.matter-feature-card,
.matter-simple-card,
.matter-mode-card,
.matter-number-card {
  background: var(--matter-white);
	  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              border-color 0.3s ease;
  will-change: transform, box-shadow;
}


/* 卡片基礎樣式：加入滑順過渡動畫與效能優化 */

/* Hover 觸發狀態 */
.matter-feature-card:hover,
.matter-simple-card:hover,
.matter-mode-card:hover,
.matter-number-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  border-color: #cbd5e1;
}


.matter-feature-card {
  padding: 24px 18px;
border: solid 1px #CFCCCC;
}


.matter-feature-icon {
  display: block;
  width: 55px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 22px;
}

.matter-feature-card p:last-child,
.matter-simple-card p:last-child,
.matter-mode-card p:last-child,
.matter-number-card p:last-child {
  margin-bottom: 0;
}

.matter-note,
.matter-page p.matter-note {
  margin-top: 24px;
  margin-bottom: 0;
  color: var(--matter-accent-dark);
  font-size: 14px;
  line-height: 1.7;
}

.matter-table-wrap {
  margin-top: 30px;
  border-top: 5px solid var(--matter-accent);
  background: var(--matter-white);
}

.matter-table {
  min-width: 760px;
  margin-bottom: 0;
}

.matter-table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--matter-line);
  background: #f2f4f5;
  vertical-align: middle;
  font-weight: 600;
}

.matter-table td {
  vertical-align: top;
}

.matter-three-row {
  margin-top: 28px;
}

.matter-simple-card {
  padding: 26px 24px;
  border-top: 3px solid var(--matter-accent);
}

.matter-simple-card ul,
.matter-mode-card ul {
  margin-bottom: 0;
  padding-left: 22px;
}

.matter-eyebrow {
  margin-bottom: 12px;
  color: var(--matter-accent-dark);
  font-weight: 600;
}

.matter-mode-card {
  position: relative;
  padding: 28px 24px;
  border: 1px solid var(--matter-line);
}

.matter-mode-card hr {
  margin: 18px 0;
  border: 0;
  border-top: 1px solid var(--matter-line);
}

.matter-mode-label {
  margin-bottom: 8px;
  color: var(--matter-muted);
  font-weight: 600;
}

.matter-mode-card-recommended {
  border-top: 4px solid var(--matter-accent);
}

.matter-mode-badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 10px;
  background: var(--matter-accent);
  color: var(--matter-white);
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.matter-mode-fit {
  margin-top: 22px;
  margin-bottom: 0;
}

.matter-number-card {
  padding: 26px 24px;
  border-top: 1px solid var(--matter-line);
}

.matter-number {
  margin-bottom: 12px;
  color: var(--matter-accent);
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
}

.matter-process {
  margin-top: 34px;
  padding: 22px 18px;
  border-top: 1px solid var(--matter-line);
  border-bottom: 1px solid var(--matter-line);
  background: var(--matter-white);
}

.matter-process span,
.matter-process strong {
  display: inline-block;
  margin: 5px 10px;
  font-size: 20px;
  line-height: 1.5;
}

.matter-process span {
  color: var(--matter-accent-dark);
  font-weight: 600;
}

.matter-sdk-block {
  margin-top: 34px;
  padding-top: 28px;
/*  border-top: 1px solid var(--matter-line);*/
  text-align: center;
}

.matter-sdk-block h3 {
  margin-bottom: 24px;
}

.matter-sdk-title {
  margin-bottom: 4px;
  color: var(--matter-accent-dark);
  font-weight: 600;
}

.matter-feature-row-three {
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
}

.matter-cta-section {
  padding-top: 62px;
  padding-bottom: 68px;
  background: var(--matter-soft);
}

.matter-cta-section p {
  max-width: 950px;
  margin-right: auto;
  margin-left: auto;
}

.matter-cta-fields,
.matter-page p.matter-cta-fields {
  margin-top: 12px;
  margin-bottom: 24px;
  color: var(--matter-muted);
  font-size: 14px;
  line-height: 1.7;
}

.matter-cta-btn,
.matter-page a.matter-cta-btn {
  padding: 10px 28px;
  border: 1px solid var(--matter-accent);
  border-radius: 0;
  background: var(--matter-accent);
  color: var(--matter-white);
  font-weight: 600;
  text-decoration: none;
}

.matter-cta-btn:hover,
.matter-cta-btn:focus {
  background: var(--matter-accent-dark);
  border-color: var(--matter-accent-dark);
  color: var(--matter-white);
  text-decoration: none;
}


.vertical-line{
border-right: 1px solid #8e8d8d;
}


/* 讓卡片為相對定位，以供 Badge 定位 */
.matter-mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 11px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  /* 給上方留些空間，避免 Floating Badge 超出容器時被裁切 */
  margin-top: 12px; 
}

/* 推薦卡片的強調外框 */
.matter-mode-card-recommended {
  border: 2px solid #1585a8;
}

/* 獨立出來的標籤（定位在卡片右上角或頂端） */
.matter-mode-badge {
  position: absolute;
  top: -14px; /* 向上浮動卡片外 */
  right: 80px;
  background-color: #1585a8;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

/* 卡片內部區域彈性伸縮 */
.card-body-content {
  flex: 1 1 auto;
}

/* 底部「適合：...」一律推到底部對齊 */
.card-footer-content {
  margin-top: auto;
}



/* Bootstrap 4 responsive breakpoints. */
@media (max-width: 991.98px) {
  .matter-section {
    padding-top: 58px;
    padding-bottom: 58px;
  }
}

@media (max-width: 767.98px) {
  .matter-page h1 {
    font-size: 31px;
  }

  .matter-page h2 {
    font-size: 26px;
  }

  .matter-page h3 {
    font-size: 20px;
  }

  .matter-section,
  .matter-section-first {
    padding-top: 46px;
    padding-bottom: 46px;
  }

  .matter-section-head {
    margin-bottom: 24px;
  }

  .matter-feature-icon {
    width: 66px;
  }

  .matter-process span,
  .matter-process strong {
    margin-right: 5px;
    margin-left: 5px;
    font-size: 17px;
  }
}

@media (max-width: 575.98px) {
  .matter-page h1 {
    font-size: 28px;
  }

  .matter-page h2 {
    font-size: 24px;
  }

  .matter-feature-card,
  .matter-simple-card,
  .matter-mode-card,
  .matter-number-card {
    padding-right: 18px;
    padding-left: 18px;
  }

  .matter-process span,
  .matter-process strong {
    display: block;
  }

  .matter-process strong {
    transform: rotate(90deg);
  }
}