/* =========================================================================
   ASUKA — Components（第二批：解決方案分類、產品、流程、FAQ）
   ========================================================================= */

/* ---- 待填佔位標記：上線前請搜尋 "todo" 全部清除 ---- */
.todo {
  background: rgba(238, 118, 35, .14);
  border-bottom: 1px dashed var(--brand);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: var(--fw-semi);
  color: var(--brand-strong);
}
.section--dark .todo, .section--ink .todo { color: var(--brand-soft); }

/* ================= 錨點列 ================= */
.anchornav {
  background: var(--surface-1);
  border-bottom: 1px solid var(--line-light);
  padding-block: var(--sp-5);
  position: sticky;
  top: var(--header-h);
  z-index: 40;
}
.anchornav .container { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* v1.60 分組版：每組前面一個小標籤，組與組之間用細線隔開；手機上標籤在上、按鈕在下 */
.anchornav--grouped .container { align-items: center; gap: var(--sp-4) var(--sp-6); }
.anchornav__group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.anchornav__group + .anchornav__group { padding-left: var(--sp-6); border-left: 1px solid var(--line-light); }
.anchornav__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* v1.60 組名改用品牌橘、字級放大（與各區塊眉標同一種樣式），原本的淺灰容易被忽略 */
.anchornav__label {
  font-size: .82rem; font-weight: var(--fw-bold);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-strong);
}
html[lang^="zh"] .anchornav__label { font-size: .95rem; letter-spacing: .04em; }
@media (max-width: 760px) {
  .anchornav--grouped .container { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .anchornav__group { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .anchornav__group + .anchornav__group { padding-left: 0; border-left: 0; padding-top: var(--sp-3); border-top: 1px solid var(--line-light); }
}

/* ================= 五大方案：編號分類卡 ================= */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-5);
}
/* v1.18：六個方案，每列三張（原本五張時是 3＋2，後兩張較寬） */
.cat-grid > * { grid-column: span 2; }

.cat {
  display: flex; flex-direction: column;
  background: var(--surface-0);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.section--soft .cat { background: var(--surface-0); }
.cat:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--brand); }
.cat__media { position: relative; aspect-ratio: 16 / 9; background: var(--ink-700); overflow: hidden; }
.cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.cat:hover .cat__media img { transform: scale(1.05); }
.cat__n {
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  font-size: .78rem; font-weight: var(--fw-bold); letter-spacing: .12em;
  color: #fff; background: var(--brand);
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.cat__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cat__title { font-size: 1.22rem; font-weight: var(--fw-bold); line-height: 1.3; }
.cat__desc { font-size: .93rem; color: var(--text-on-light-2); }
.cat__more { margin-top: auto; padding-top: var(--sp-3); }

@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid > * { grid-column: span 1; }
}
@media (max-width: 640px) {
  .cat-grid { grid-template-columns: 1fr; }
}

/* ================= 產品列表（規格就地展開） ================= */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
.prod {
  display: grid;
  grid-template-columns: 172px 1fr;
  background: var(--surface-0);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* v1.29.3：從選單連到某一張卡（#錨點）時，用品牌橘框標出是哪一張 */
.prod:target, .prod.is-target { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 10px 28px rgba(238, 118, 35, .14); }
.section--soft .prod { background: var(--surface-0); }
.prod:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.prod__media { background: var(--ink-700); }
.prod__media img { width: 100%; height: 100%; object-fit: cover; }
.prod__media--contain { background: var(--surface-0); }
.prod__media--contain img { object-fit: contain; padding: var(--sp-3); }
.prod__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: 10px; }
.prod__title { font-size: 1.05rem; font-weight: var(--fw-semi); line-height: 1.35; }
.prod__desc { font-size: .9rem; color: var(--text-on-light-2); }

.prod__specs { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line-light); }
.prod__specs summary {
  cursor: pointer; list-style: none;
  font-size: .82rem; font-weight: var(--fw-semi);
  color: var(--brand);
  display: flex; align-items: center; gap: 6px;
}
.prod__specs summary::-webkit-details-marker { display: none; }
.prod__specs summary::after { content: "+"; font-size: 1rem; line-height: 1; }
.prod__specs[open] summary::after { content: "−"; }
.prod__specs dl {
  margin: var(--sp-3) 0 0;
  display: grid; grid-template-columns: auto 1fr; gap: 6px var(--sp-4);
  font-size: .85rem;
}
.prod__specs dt { color: var(--text-on-light-3); }
.prod__specs dd { margin: 0; color: var(--text-on-light); }

@media (max-width: 860px) { .prod-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .prod { grid-template-columns: 1fr; }
  .prod__media { aspect-ratio: 16 / 9; }
}

/* 2026-10-19 重點產品卡（productList 的 layout: "feature"）：只放一個產品時用（例：Smart Home & IoT 的 SWAN-210）。
   卡片撐滿整排，左圖右文；圖片依原比例完整顯示、不裁切，滑鼠移入也不放大（放大會裁掉邊緣）。
   文字比圖高時，圖片上下置中；860px 以下改成上圖下文。 */
.prod-grid--feature { grid-template-columns: 1fr; }
.prod-grid--feature .prod { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
.prod-grid--feature .prod__media { background: none; align-self: center; }
/* 圖片最高 440px：直式或正方形照片（例：AIS 系列 1:1）不會把卡片撐得太高；超過時整張縮小置中、不裁切 */
.prod-grid--feature .prod__media img { height: auto; max-height: 440px; object-fit: contain; display: block; }
.prod-grid--feature .prod--linked:hover .prod__media img { transform: none; }
.prod-grid--feature .prod__body { padding: var(--sp-6) var(--sp-7); }
.prod-grid--feature .prod__title { font-size: var(--fs-h3); line-height: 1.2; }
.prod-grid--feature .prod__desc { font-size: 1rem; }
@media (max-width: 860px) {
  .prod-grid--feature .prod { grid-template-columns: 1fr; }
  .prod-grid--feature .prod__media { aspect-ratio: auto; }
  .prod-grid--feature .prod__body { padding: var(--sp-5); }
}

/* ================= 車型對應 ================= */
.model-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.modelgroup {
  border-top: 2px solid var(--brand);
  padding-top: var(--sp-4);
}
.modelgroup__brand {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; font-weight: var(--fw-bold);
  color: var(--text-on-light-3);
  margin-bottom: var(--sp-3);
}
.modelgroup__list li {
  font-size: 1rem; font-weight: var(--fw-medium);
  padding: 7px 0;
  border-bottom: 1px solid var(--line-light);
}
@media (max-width: 860px) { .model-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .model-grid { grid-template-columns: 1fr; } }

/* ================= 痛點網格 ================= */
.pain {
  padding: var(--sp-5);
  background: var(--surface-0);
  border: 1px solid var(--line-light);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
}
.section--soft .pain { background: var(--surface-0); }
.pain__title { font-size: 1.02rem; font-weight: var(--fw-semi); margin-bottom: 8px; }
.pain__desc { font-size: .9rem; color: var(--text-on-light-2); }
/* 2026-10-20 有圖示的痛點卡：淡橘底圓角方塊放圖示，取代左側橘線；滑鼠移入時圖示底色加深 */
.pain--icon { border-left-width: 1px; border-left-color: var(--line-light); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.pain__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: var(--sp-4);
  border-radius: 12px;
  background: rgba(238, 118, 35, .1);
  color: var(--brand);
  transition: background .25s var(--ease), color .25s var(--ease);
}
@media (hover: hover) {
  .pain--icon:hover { border-color: rgba(238, 118, 35, .45); box-shadow: 0 8px 24px rgba(16, 25, 34, .06); }
  .pain--icon:hover .pain__icon { background: var(--brand); color: #fff; }
}

/* ================= 工程能力網格 ================= */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
}
.cap { background: var(--surface-0); padding: var(--sp-5); }
.section--soft .cap { background: var(--surface-0); }
.cap__title {
  font-size: .98rem; font-weight: var(--fw-semi);
  margin-bottom: 8px;
  padding-left: 14px; position: relative;
}
.cap__title::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; background: var(--brand);
  border-radius: 1px; transform: rotate(45deg);
}
.cap__desc { font-size: .87rem; color: var(--text-on-light-2); padding-left: 14px; }

.cap-grid--2 { grid-template-columns: repeat(2, 1fr); }   /* v1.27 capabilities 的 cols: 2 */
@media (max-width: 1024px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cap-grid { grid-template-columns: 1fr; } }

/* ================= 工程流程時間軸 ================= */
.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--line-light);
  position: relative;
}
.step:last-child { border-bottom: 1px solid var(--line-light); }
.step__n {
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--brand);
  letter-spacing: var(--tracking-tight);
}
.step__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); margin-bottom: 10px; }
.step__desc { color: var(--text-on-light-2); max-width: 68ch; }
.section--dark .step__desc, .section--ink .step__desc { color: var(--text-on-dark-2); }
.section--dark .step, .section--ink .step { border-color: var(--line-dark); }

.step__meta {
  margin-top: var(--sp-4);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--sp-4);
  font-size: .86rem;
  padding: var(--sp-4);
  background: var(--surface-1);
  border-radius: var(--radius-sm);
  max-width: 640px;
}
.section--soft .step__meta { background: var(--surface-2); }
.section--dark .step__meta, .section--ink .step__meta { background: rgba(255,255,255,.05); }
.step__meta dt {
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-on-light-3);
}
.section--dark .step__meta dt, .section--ink .step__meta dt { color: var(--text-on-dark-3); }
.step__meta dd { margin: 0; font-weight: var(--fw-medium); }

.steps--compact .step { padding: var(--sp-5) 0; grid-template-columns: 64px 1fr; }
.steps--compact .step__title { font-size: var(--fs-h4); }

@media (max-width: 640px) {
  .step, .steps--compact .step { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ================= 適用 / 不適用 ================= */
.fit-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-5); }
.fit {
  padding: var(--sp-6);
  border-radius: var(--radius);
  border: 1px solid var(--line-light);
}
.fit--yes { border-top: 3px solid var(--brand); background: var(--surface-0); }
.fit--no  { border-top: 3px solid var(--surface-3); background: var(--surface-1); }
.fit__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); margin-bottom: var(--sp-4); }
.fit ul { display: grid; gap: var(--sp-3); }
.fit li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .95rem; color: var(--text-on-light-2);
}
.fit li::before {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 50%; font-size: .7rem; font-weight: var(--fw-bold);
}
.fit--yes li::before { content: "✓"; background: var(--brand); color: #fff; }
.fit--no  li::before { content: "→"; background: var(--surface-3); color: var(--text-on-light-2); }

@media (max-width: 860px) { .fit-grid { grid-template-columns: 1fr; } }

/* ================= FAQ ================= */
.faq-list { border-top: 1px solid var(--line-light); }
.section--dark .faq-list, .section--ink .faq-list { border-color: var(--line-dark); }
.faq { border-bottom: 1px solid var(--line-light); }
.section--dark .faq, .section--ink .faq { border-color: var(--line-dark); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--sp-5) 40px var(--sp-5) 0;
  font-size: 1.05rem; font-weight: var(--fw-semi);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem; font-weight: var(--fw-regular); color: var(--brand);
}
.faq[open] summary::after { content: "−"; }
.faq > div {
  padding: 0 40px var(--sp-5) 0;
  color: var(--text-on-light-2);
  max-width: 76ch;
}
.section--dark .faq > div, .section--ink .faq > div { color: var(--text-on-dark-2); }

/* ================= Mega menu：分類卡版本 ================= */
.mega__inner--cats { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: stretch; }
.mega__cats {
  display: grid;
  /* 四個方案排成 2×2。三欄的話第四張會單獨落在第二列左邊，
     右側又有推薦卡，整塊看起來是缺一角的。2×2 兩側等重。 */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.mega__cat {
  display: block;
  padding: var(--sp-4);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.mega__cat:hover { border-color: var(--brand); background: rgba(238,118,35,.08); transform: translateY(-2px); }
.mega__cat-title {
  display: block;
  font-size: .98rem; font-weight: var(--fw-semi);
  color: var(--text-on-dark);
  margin-bottom: 5px;
}
.mega__cat-desc { display: block; font-size: .82rem; color: var(--text-on-dark-3); line-height: 1.45; }
/* v1.18：補滿 2 欄的「所有解決方案」 */
.mega__cat--all { display: flex; align-items: center; border-style: dashed; }
.mega__cat--all .mega__cat-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--brand-soft); }

/* v1.18：待補頁的佔位區塊 */
.placeholder { max-width: 780px; padding: var(--sp-6); border: 1px dashed var(--brand); border-radius: var(--radius); }
.placeholder > * + * { margin-top: var(--sp-3); }


/* ================= 產業磁磚：只有名稱的版本 ================= */
.tile__title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.tile__arrow { flex: none; opacity: .45; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.tile:hover .tile__arrow { opacity: 1; transform: translateX(4px); }

.tile--plain { min-height: 264px; }
.tile--plain .tile__title { font-size: 1.24rem; line-height: 1.3; }
html[lang^="zh"] .tile--plain .tile__title { font-size: 1.3rem; }

/* =========================================================================
   新聞：卡片列表（/news/）與內文頁（/news/<slug>/）
   ========================================================================= */

/* ---------- 卡片列表 ---------- */
.ncard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.ncard {
  display: flex; flex-direction: column;
  background: var(--surface-0);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ncard:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--brand); }
.ncard__media { aspect-ratio: 16 / 9; background: var(--ink-700); overflow: hidden; }
.ncard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ncard:hover .ncard__media img { transform: scale(1.05); }
.ncard__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ncard__meta {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--text-on-light-3);
  font-variant-numeric: tabular-nums;
}
.ncard__tag {
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  font-weight: var(--fw-bold); color: var(--brand);
}
.ncard__title { font-size: 1.1rem; font-weight: var(--fw-semi); line-height: 1.35; }
.ncard__excerpt { font-size: .9rem; color: var(--text-on-light-2); }
.ncard__more { margin-top: auto; padding-top: var(--sp-3); }

@media (max-width: 1024px) { .ncard-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 新聞列表分頁（v1.38） ---------- */
.pager {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--sp-4); margin-top: var(--sp-8);
}
.pager__list { display: flex; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.pager__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--sp-2);
  border: 1px solid var(--line-light); border-radius: var(--radius-sm);
  color: var(--text-on-light); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a.pager__num:hover { border-color: var(--brand); color: var(--brand-strong); }
.pager__num.is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 40px; padding: 0 var(--sp-2);
  font-weight: var(--fw-semi); color: var(--text-on-light);
  transition: color var(--dur) var(--ease);
}
a.pager__btn:hover { color: var(--brand-strong); }
.pager__btn[aria-disabled="true"] { color: var(--text-on-light-3); }
.pager__btn--prev .btn__arrow { transform: rotate(180deg); }
@media (max-width: 640px)  { .ncard-grid { grid-template-columns: 1fr; } }

/* ---------- 內文頁：標題與封面 ---------- */
.article__meta {
  display: flex; align-items: center; gap: var(--sp-4);
  font-size: var(--fs-sm); color: var(--text-on-dark-3);
  font-variant-numeric: tabular-nums;
}
.article__tag {
  font-size: var(--fs-xs); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; font-weight: var(--fw-bold);
  color: var(--brand-soft);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
}
.article__cover { background: var(--ink-900); padding-bottom: var(--sp-7); }
.article__cover img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-lg);
}

/* ---------- 內文頁：內容區 ---------- */
.article__body { max-width: 74ch; }
.article__body > * + * { margin-top: var(--sp-5); }
.article__body p { color: var(--text-on-light-2); }
.article__body strong { color: var(--text-on-light); font-weight: var(--fw-semi); }
.article__body a:not(.btn) { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

.article__lede {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem);
  line-height: 1.5;
  font-weight: var(--fw-medium);
  color: var(--text-on-light) !important;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line-light);
}
.article__h {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin-top: var(--sp-8) !important;
  padding-top: var(--sp-2);
}
.article__h + p, .article__h + ul { margin-top: var(--sp-4); }
.article__h3 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  margin-top: var(--sp-6) !important;
  color: var(--text-on-light);
}
.article__h3 + p, .article__h3 + ul { margin-top: var(--sp-3); }

/* 用絕對定位的菱形當項目符號，內文才能正常換行（不要用 flex，
   否則 <strong> 會被當成獨立的 flex item 擠成一欄） */
.article__list { display: grid; gap: var(--sp-3); }
.article__list li {
  position: relative;
  padding-left: 22px;
  color: var(--text-on-light-2);
}
.article__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px;
  background: var(--brand); border-radius: 2px; transform: rotate(45deg);
}

/* 圖片區塊：可超出文字欄寬，視覺上更有呼吸感 */
.article__figure { margin: var(--sp-7) 0; }
.article__figure img { width: 100%; border-radius: var(--radius); }
.article__figure figcaption,
.article__gallery figcaption {
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--text-on-light-3);
  padding-left: 12px;
  border-left: 2px solid var(--brand);
}
.article__gallery {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: var(--sp-7) 0;
}
.article__gallery img { width: 100%; border-radius: var(--radius); }

/* 桌機：圖片略寬於文字欄，視覺上有呼吸感（不使用負邊距，避免溢出容器） */
@media (min-width: 1100px) {
  .article__figure, .article__gallery { width: 124%; max-width: 900px; }
}

/* v1.39：影片區塊（YouTube）。一般影片 16:9 滿版；Shorts 直式 9:16、置中、限寬 */
.article__video { margin: var(--sp-7) 0; }
.article__video-frame {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--ink-800); border-radius: var(--radius); overflow: hidden;
}
.article__video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article__video--vertical { max-width: 360px; margin-left: auto; margin-right: auto; }
.article__video--vertical .article__video-frame { aspect-ratio: 9 / 16; }
.article__video figcaption {
  margin-top: 10px; font-size: var(--fs-xs); color: var(--text-on-light-3);
  padding-left: 12px; border-left: 2px solid var(--brand);
}

/* 資訊方塊（展期、攤位…） */
.article__info {
  background: var(--surface-1);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: var(--sp-5);
}
.article__info-title {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; font-weight: var(--fw-bold);
  color: var(--brand-strong);
  margin-bottom: var(--sp-3);
}
.article__info dl {
  margin: 0; display: grid;
  grid-template-columns: auto 1fr; gap: 8px var(--sp-5);
  font-size: .93rem;
}
.article__info dt { color: var(--text-on-light-3); }
.article__info dd { margin: 0; font-weight: var(--fw-medium); }

/* 內文結尾的行動呼籲 */
.article__cta {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-light);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-4);
}
.article__cta p { margin: 0; max-width: 46ch; }

/* ---------- 內文頁：上下篇導覽 ---------- */
.artnav-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.artnav {
  display: block; padding: var(--sp-5);
  background: var(--surface-0);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.artnav:hover { border-color: var(--brand); transform: translateY(-2px); }
.artnav--next { text-align: right; }
.artnav__label {
  display: block; font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  font-weight: var(--fw-bold); color: var(--brand);
  margin-bottom: 6px;
}
.artnav__title { display: block; font-weight: var(--fw-semi); line-height: 1.35; }
@media (max-width: 640px) {
  .artnav-row { grid-template-columns: 1fr; }
  .artnav--next { text-align: left; }
}

/* 新聞內文頁整頁收窄：標題、封面、內文對齊同一個 1040px 欄位 */
body[data-page="article"] .page-hero .container,
body[data-page="article"] .article__cover .container,
body[data-page="article"] .article .container { max-width: 1040px; }

/* =========================================================================
   方案卡的標語與主要產品標籤 / 信任證明帶 / 橫向流程
   ========================================================================= */

/* ---------- 方案卡：標語 + 主要產品標籤 ---------- */
.cat__tagline {
  font-size: .95rem;
  font-weight: var(--fw-semi);
  color: var(--brand-strong);
  line-height: 1.4;
  margin-top: -2px;
}
.cat__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--sp-2);
}
.cat__chips li {
  font-size: .74rem;
  letter-spacing: .02em;
  color: var(--text-on-light-2);
  background: var(--surface-1);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  white-space: nowrap;
}
.cat:hover .cat__chips li { border-color: var(--brand-soft); }

/* ---------- 信任證明帶 ---------- */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.proof__item { background: var(--ink-800); padding: var(--sp-5); }
.proof__k {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--brand-soft);
  margin-bottom: 10px;
}
.proof__v {
  font-size: 1.06rem;
  font-weight: var(--fw-semi);
  line-height: 1.35;
  color: var(--text-on-dark);
}
.proof__d {
  margin-top: 8px;
  font-size: .85rem;
  color: var(--text-on-dark-2);
}
.proof__note { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-on-dark-3); }

/* ---- 翻牌版（content.js 的 proof 區塊設 flip: true 才會套用）----
   正面：k + v，右下角一行提示。背面：k + d。
   兩面疊在同一個 grid 格子裡，所以卡片高度會自動等於「比較高的那一面」，
   不需要寫死高度，中英文字數不同也不會爆版。 */
.proof__item--flip {
  display: grid;
  padding: 0;                      /* 內距移到兩個面上 */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  perspective: 1200px;
}
.proof__flip {
  display: grid;
  transform-style: preserve-3d;
  transition: transform var(--flip-dur) var(--flip-ease);   /* v1.28 時間與曲線統一在 tokens.css */
}
.proof__face {
  grid-area: 1 / 1;               /* 兩面重疊 */
  padding: var(--sp-5);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* 正面：編號與箭頭用絕對定位釘在左上與右下，
   副標因此是在「整張卡」的垂直正中間，而不是在剩餘空間的中間。 */
.proof__face--front {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.proof__face--front .proof__k {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  right: var(--sp-5);
}
/* 翻牌卡右下角的提示箭頭：Why ASUKA 與 Technology 共用 */
.flip-arrow {
  position: absolute;
  right: var(--sp-5);
  bottom: var(--sp-5);
  color: var(--text-on-dark-3);
  transition: color .25s ease, transform .25s ease;
}
.proof__face--back { transform: rotateY(180deg); }
/* v1.29.2 iOS Safari 防穿透：正面也明確放進 3D（rotateY(0)），兩面所有子元素一樣隱藏背面 */
.proof__face--front { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
.proof__face *, .proof__face::before, .proof__face::after {
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.proof__item--flip .proof__k,
.proof__item--flip .proof__v,
.proof__item--flip .proof__d { display: block; }
.proof__item--flip .proof__k { margin-bottom: 0; }
.proof__item--flip .proof__d { margin-top: 0; }
/* 正面副標：翻牌版只有這一行文字，字級比一般 proof 大一階 */
.proof__item--flip .proof__face--front .proof__v {
  font-size: clamp(1.18rem, .92rem + .62vw, 1.5rem);
  line-height: 1.34;
  letter-spacing: var(--tracking-tight);
}
/* text-wrap: balance 會把中文在任意位置切開（例如「量／產」），
   所以只給英文用；中文交給瀏覽器的標準斷行規則。 */
html[lang^="en"] .proof__item--flip .proof__face--front .proof__v { text-wrap: balance; }
/* 中文同樣字數佔的寬度比英文大得多，字級沿用英文的話句尾會掉單字，
   例如「…不隔一／層」。略縮一階讓每句都排得進一行。 */
html[lang^="zh"] .proof__item--flip .proof__face--front .proof__v {
  font-size: clamp(1.05rem, .86rem + .45vw, 1.26rem);
  line-break: strict;
  letter-spacing: 0;
}

/* 有滑鼠的裝置：移入就翻。觸控裝置靠 ui.js 加 .is-flipped。 */
@media (hover: hover) {
  .proof__item--flip:hover .proof__flip { transform: rotateY(180deg); }
  .proof__item--flip:hover .flip-arrow,
  .card--flip:hover .flip-arrow { color: var(--brand-soft); transform: translateX(3px); }
}
.proof__item--flip:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: -2px; }
.proof__item--flip:focus-visible .proof__flip,
.proof__item--flip.is-flipped .proof__flip { transform: rotateY(180deg); }

/* 使用者在系統設定關掉動態效果時，改成淡入淡出，不做 3D 旋轉。 */
@media (prefers-reduced-motion: reduce) {
  .proof__flip { transition: none; transform: none !important; }
  .proof__face { backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity .2s ease; }
  .proof__face--back { transform: none; opacity: 0; }
  .proof__item--flip:hover .proof__face--back,
  .proof__item--flip:focus-visible .proof__face--back,
  .proof__item--flip.is-flipped .proof__face--back { opacity: 1; }
  .proof__item--flip:hover .proof__face--front,
  .proof__item--flip:focus-visible .proof__face--front,
  .proof__item--flip.is-flipped .proof__face--front { opacity: 0; }
}

/* ---------- Technology 卡片翻牌 ----------
   和 Why ASUKA 不同：圖片留在原地，只有 .card__body 翻面。
   兩面一樣疊在同一個 grid 格子，文字區高度自動取較高的一面（通常是背面的說明）。*/
.card--flip { cursor: pointer; }
.card--flip:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; }
.card--flip .card__body {
  display: grid;
  padding: 0;                       /* 內距移到兩個面上 */
  perspective: 1000px;
}
.card__flip {
  display: grid;
  transform-style: preserve-3d;
  transition: transform var(--flip-dur) var(--flip-ease);   /* v1.28 時間與曲線統一在 tokens.css */
}
.card__face {
  grid-area: 1 / 1;                 /* 兩面重疊 */
  position: relative;               /* 給右下角箭頭定位 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--sp-5);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card__face--back { transform: rotateY(180deg); }
/* v1.29.2 同上：iOS Safari 防止正面內容穿透到背面 */
.card__face--front { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
.card__face *, .card__face::before, .card__face::after {
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

/* 正面的字級與位置比照 Why ASUKA：
   分類標籤絕對定位釘在上緣，標題因此垂直置中於整個文字區。 */
.card--flip .card__face--front {
  justify-content: center;
  gap: 0;
}
.card--flip .card__face--front .card__tag {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  right: var(--sp-5);
}
.card--flip .card__face--front .card__title {
  font-size: clamp(1.18rem, .92rem + .62vw, 1.5rem);
  line-height: 1.34;
  letter-spacing: var(--tracking-tight);
}
/* 同 Why ASUKA：balance 會把中文從中間切開，只給英文用；中文另外收一階字級 */
html[lang^="en"] .card--flip .card__face--front .card__title { text-wrap: balance; }
html[lang^="zh"] .card--flip .card__face--front .card__title {
  font-size: clamp(1.05rem, .86rem + .45vw, 1.26rem);
  line-break: strict;
  letter-spacing: 0;
}

@media (hover: hover) {
  .card--flip:hover .card__flip { transform: rotateY(180deg); }
}
.card--flip:focus-visible .card__flip,
.card--flip.is-flipped .card__flip { transform: rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
  .card__flip { transition: none; transform: none !important; }
  .card__face { backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity .2s ease; }
  .card__face--back { transform: none; opacity: 0; }
  .card--flip:hover .card__face--back,
  .card--flip:focus-visible .card__face--back,
  .card--flip.is-flipped .card__face--back { opacity: 1; }
  .card--flip:hover .card__face--front,
  .card--flip:focus-visible .card__face--front,
  .card--flip.is-flipped .card__face--front { opacity: 0; }
}

/* v1.28 兩欄翻牌（proof 區塊 cols: 2）：說明文字較長，卡片寬、字級放大，讀起來不吃力 */
.proof-grid--2 { grid-template-columns: repeat(2, 1fr); }
.proof-grid--2 .proof__face { padding: var(--sp-6); }
.proof-grid--2 .proof__face--front { min-height: 220px; }
.proof-grid--2 .proof__face--front .proof__k { top: var(--sp-6); left: var(--sp-6); right: var(--sp-6); }
.proof-grid--2 .flip-arrow { right: var(--sp-6); bottom: var(--sp-6); }
.proof-grid--2 .proof__item--flip .proof__face--front .proof__v { font-size: clamp(1.4rem, 1.05rem + .9vw, 2rem); }
html[lang^="zh"] .proof-grid--2 .proof__item--flip .proof__face--front .proof__v { font-size: clamp(1.3rem, 1rem + .8vw, 1.8rem); }
.proof-grid--2 .proof__item--flip .proof__k { margin-bottom: var(--sp-3); }
.proof-grid--2 .proof__d { font-size: clamp(1rem, .94rem + .2vw, 1.1rem); line-height: 1.7; }
/* v1.28 兩欄翻牌的背面：卡片高度常由正面圖片決定，說明文字垂直置中，不要全擠在上面 */
.proof-grid--2 .proof__face--back { display: flex; flex-direction: column; justify-content: center; }
/* v1.28 正面放圖（proof 項目的 img）：圖片鋪滿正面，標題壓在下方深色漸層上 */
.proof-grid--2 .proof__face--media { min-height: clamp(240px, 26vw, 360px); }   /* 不用 aspect-ratio：grid 疊層時會讓正面高度對不齊背面 */
.proof__face--media { overflow: hidden; justify-content: flex-end !important; color: #fff; }
.proof__face--media .proof__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -1;   /* 圖片墊在最底層（卡片面本身是 stacking context），漸層 ::before 與標題依序疊在上面 */
  transition: transform 1.2s var(--flip-ease);
}
/* v1.29.2：漸層改用 ::before、標題與箭頭不用 z-index，靠 DOM 順序疊在圖片上。
   iOS Safari 翻面時，背面 backface-visibility: hidden 的面裡若有子元素自己開了圖層（z-index、transform），
   那些子元素會「穿透」到背面、左右顛倒地蓋在說明文字上（實際在 iPhone 上發生）。 */
.proof__face--media::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,16,24,0) 40%, rgba(10,16,24,.78) 100%);
}
.proof__face--media .proof__v,
.proof--light .proof__face--media .proof__v { position: relative; color: #fff; padding-right: 40px; }
.proof__face--media .flip-arrow,
.proof--light .proof__face--media .flip-arrow { color: rgba(255,255,255,.85); }
@media (hover: hover) {
  .proof__item--flip:hover .proof__face--media .proof__img { transform: scale(1.04); }
  .proof--light .proof__item--flip:hover .proof__face--media .flip-arrow { color: #fff; }
}
@media (max-width: 1024px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .proof-grid, .proof-grid--2 { grid-template-columns: 1fr; } }

/* ---------- 橫向流程 ---------- */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4) var(--sp-5);
  counter-reset: flow;
}
.flow__step {
  position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-top: 2px solid var(--brand);
  display: flex; flex-direction: column; gap: 6px;
}
/* 箭頭：同一列的項目之間 */
.flow__step::after {
  content: "";
  position: absolute; right: 10px; top: -6px;
  width: 9px; height: 9px;
  border-top: 2px solid var(--brand);
  border-right: 2px solid var(--brand);
  transform: rotate(45deg);
  opacity: .55;
}
.flow__step:last-child::after { display: none; }
/* 每一列最後一格不畫箭頭（否則會指向空白處） */
@media (min-width: 901px) { .flow__step:nth-child(4n)::after { display: none; } }
@media (max-width: 900px) and (min-width: 521px) { .flow__step:nth-child(2n)::after { display: none; } }
.flow__n {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.flow__title { font-size: 1rem; font-weight: var(--fw-semi); line-height: 1.35; }
.flow__desc { font-size: .85rem; color: var(--text-on-light-2); }
.section--dark .flow__desc, .section--ink .flow__desc { color: var(--text-on-dark-2); }

@media (max-width: 900px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .flow { grid-template-columns: 1fr; } .flow__step::after { display: none; } }

/* ---------- 只有標題的能力方塊（特殊應用案例） ---------- */
.cap--plain { display: flex; align-items: center; min-height: 92px; }
.cap--plain .cap__title { margin-bottom: 0; }

/* =====================================================================
   v1.0 改版（第一次主管 review 之後）
   ===================================================================== */

/* ---- 只給螢幕閱讀器與搜尋引擎看的文字 ----------------------------------
   用來在「畫面上不放任何文字」的 hero 裡保留 H1。
   不能用 display:none 或 visibility:hidden —— 那等於這段文字不存在。 */
/* 不讓連字號斷行（例如 Real-World 被拆成 Real- / World）*/
.u-nowrap { white-space: nowrap; }

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* ---- Hero：背景影片 ---- */
.hero--media-only {
  min-height: min(88vh, 760px);
  display: grid;
  place-items: end center;
  /* 建立自己的堆疊層：影片（z-index:-2）與遮罩（-1）才會畫在 hero 底色之上，
     少了這行影片會被 section 的深色背景蓋住，看起來像沒播放 */
  isolation: isolate;
}
.hero__media--video { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* 影片上方壓一層由下而上的漸層，讓 header 的白色 logo 與選單在任何畫面上都讀得到 */
.hero--media-only::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(5,9,15,.55), rgba(5,9,15,0) 26%),
    linear-gradient(to top, rgba(5,9,15,.45), rgba(5,9,15,0) 30%);
}
.hero__scroll--bare span { display: none; }

/* ---- Hero：影片上的「Built for ___」字幕（參考 Aptiv 置中兩行）----
   影片本身不含文字，字由這裡疊上去；切換時間由 ui.js 跟影片同步。
   位置：垂直約 40%，落在安全區（18–85%）的中上段，主體在下半段。 */
.hero--media-only .hero__media::after { content: none; }  /* 關掉左重右輕的舊漸層，置中構圖用不到 */
.hero__tag {
  position: absolute; left: 0; right: 0; top: 40%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  padding-inline: var(--gutter);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  /* v1.12：產業詞改成較長的方案名稱（最長 37 字元），字級調小，桌機一律單行 */
  font-size: clamp(1.75rem, .9rem + 2.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
  text-align: center;
  text-shadow: 0 2px 28px rgba(5, 9, 15, .55);
  pointer-events: none;
}
.hero__tag-word { display: block; max-width: 100%; text-wrap: balance; will-change: opacity, filter, transform; }
/* 窄螢幕上長的方案名稱會折成兩行：預留兩行高度，換詞時「Built for」才不會上下跳 */
@media (max-width: 900px) {
  .hero__tag-word { min-height: calc(2em * 1.08); }
}

/* ---- 首頁 Industries：左標題面板 + 右大圖輪播（參考 Aptiv）---- */
.indsplit {
  display: grid;
  grid-template-columns: minmax(300px, 33%) minmax(0, 1fr);
  background: var(--surface-1);
  color: var(--text-on-light);
}
.indsplit__panel {
  background: var(--ink-900);
  color: var(--text-on-dark);
  padding: var(--section-y) clamp(24px, 3vw, 56px);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--sp-4);
}
.indsplit__panel .eyebrow { color: var(--brand-soft); }
.indsplit__title { color: var(--text-on-dark); }
.indsplit__lead {
  color: var(--text-on-dark-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 40ch;
}
/* 左欄三組產業清單（v1.9）：每組一行標題 + 以斜線分隔的名稱，保持面板精簡 */
.indsplit__groups {
  display: flex; flex-direction: column; gap: var(--sp-4);
  margin-top: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.12);
  max-width: 44ch;
}
.indsplit__gtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--brand-soft);
  margin: 0 0 6px;
}
.indsplit__glist {
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-on-dark-2);
}
.indsplit__glist li { display: inline; white-space: nowrap; }
/* 斜線接在前一項尾端，換行時才不會出現在行首 */
.indsplit__glist li:not(:last-child)::after { content: "\00a0/"; color: var(--text-on-dark-3); }
.indsplit__glist a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
.indsplit__glist a:hover, .indsplit__glist a:focus-visible { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 3px; }

.indsplit__rail {
  min-width: 0;
  padding-block: var(--section-y);
  padding-left: clamp(24px, 3vw, 56px);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.indsplit__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-right: clamp(24px, 3vw, 56px);
}
.indsplit__top .eyebrow { color: var(--text-on-light-3); }

.rail--lg {
  /* 用 clamp 而不是 minmax：在捲動容器裡 minmax 會塌到最小值，圖片放不大 */
  grid-auto-columns: clamp(280px, 27vw, 440px);
  padding-right: clamp(24px, 3vw, 56px);
}
.tile--lg {
  min-height: 0;
  aspect-ratio: 4 / 5;
  padding: clamp(20px, 2vw, 32px);
  border-radius: var(--radius-sm);
}
.tile--lg .tile__title {
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.95rem);
  line-height: var(--lh-snug);
  gap: var(--sp-4);
}

/* 進度條式的頁籤 —— 大圖一次只看得到一兩張，需要有東西說明還有多少 */
.rail-dots { display: flex; gap: 6px; padding-right: clamp(24px, 3vw, 56px); }
.rail-dot {
  flex: 0 0 auto;
  width: 30px; height: 3px;
  padding: 0; border: 0; border-radius: 2px;
  background: var(--surface-3);
  cursor: pointer;
  transition: background .25s var(--ease);
}
.rail-dot.is-on { background: var(--brand); }
.rail-dot:hover { background: var(--brand-soft); }

@media (max-width: 900px) {
  .indsplit { grid-template-columns: 1fr; }
  .indsplit__panel { padding-block: var(--section-y) var(--sp-6); }
  .indsplit__rail { padding-block: var(--sp-6) var(--section-y); padding-left: var(--gutter); }
  .indsplit__top, .rail--lg, .rail-dots { padding-right: var(--gutter); }
  .tile--lg { aspect-ratio: 3 / 4; }
}

/* ---- 首頁 Popular Products（v1.19.1）：上方深色標題帶 + 下方一整排磁磚 ---- */
/* v1.19.3：整段同一個深色底，標題與圖片之間不再切成兩塊 */
.prodband { background: var(--ink-900); color: var(--text-on-dark); }
.prodband__head { color: var(--text-on-dark); }
.prodband__headin {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-block: clamp(36px, 3.5vw, 56px) 0;
}
.prodband__heading { display: flex; flex-direction: column; gap: var(--sp-2); }
.prodband__heading .eyebrow { color: var(--brand-soft); }
.prodband__title { color: var(--text-on-dark); margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); }
.prodband .rail-btn { border-color: var(--line-dark); color: var(--text-on-dark); }
.prodband__body { padding-block: clamp(20px, 2vw, 28px) clamp(44px, 4.5vw, 72px); }
.prodband .rail-dot { background: rgba(255,255,255,.18); }
.prodband .rail-dot.is-on { background: var(--brand); }
.prodband .rail-dots { padding-right: 0; margin-top: var(--sp-2); }

/* 窄螢幕：輪播，每張固定寬，露出下一張的一部分 */
.rail--band { grid-auto-columns: clamp(220px, 34vw, 300px); gap: var(--sp-5); padding-bottom: 0; }
.tile--band {
  min-height: 0;
  aspect-ratio: 2 / 3;   /* v1.19.3：寬度回到主容器，改用加高讓圖變大 */
  padding: clamp(16px, 1.4vw, 22px);
  border-radius: var(--radius-sm);
}
.tile--band .tile__title {
  font-size: clamp(1.02rem, .9rem + .35vw, 1.2rem);
  line-height: var(--lh-snug);
  gap: var(--sp-3);
}

/* v1.20：去背產品照（fit: "contain"）—— 整張車機完整顯示在深色底上，放在標題上方的空間 */
.tile--contain { background: radial-gradient(120% 80% at 50% 35%, var(--ink-700), var(--ink-900)); }
.tile--contain .tile__bg img {
  object-fit: contain;
  padding: 14% 9% 42%;
}
.tile--contain:hover .tile__bg img { transform: scale(1.04); }
/* v1.36：白底產品照（bg: "white"）—— 黑色產品放在深色底上看不清楚，改用白底；
   下方標題區仍由 .tile::after 的深色漸層承接 */
.tile--white { background: #fff; }
.tile--white .tile__bg img { padding: 6% 0 36%; }   /* 白底照片本身四周已有留白，內距縮小讓產品大一點 */

/* v1.20：寬螢幕改回輪播 —— 一次看四張、間距加大，搭配左右箭頭與進度條。
   六張擠在一排時每張太窄、各張圖的裁切比例不一，看起來雜亂。 */
@media (min-width: 1280px) {
  .rail--band {
    grid-auto-columns: calc((100% - 3 * var(--sp-6)) / 4);
    gap: var(--sp-6);
  }
  .tile--band { aspect-ratio: 3 / 4; }
  .tile--band .tile__title { font-size: clamp(1.1rem, .7rem + .5vw, 1.35rem); line-height: 1.3; }
}

/* ---- 主選單 Products（v1.19.3）：四欄，每欄疊好幾組 ---- */
.mega__inner--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega__inner--products .mega__col > * + * { margin-top: 0; }
.mega__group + .mega__group { margin-top: var(--sp-5); }
.mega__inner--products .mega__title { display: block; margin-bottom: var(--sp-2); }
.mega__title--link { transition: color .18s var(--ease); }
.mega__title--link:hover { color: var(--brand); }
.mega__title--blank { border-bottom-color: transparent !important; }
.mega__sub {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-on-dark-3);
  margin: var(--sp-2) 0 2px;
}
.mega__inner--products .mega__link { font-size: .92rem; padding: 4px 0; }

/* ---- Why ASUKA 淺色版（v1.19.3）：proof 區塊 variant: "soft" ---- */
.proof--light .proof-grid { background: var(--line-light); border-color: var(--line-light); }
.proof--light .proof__item,
.proof--light .proof__face { background: var(--surface-0); }
.proof--light .proof__k { color: var(--brand); }
.proof--light .proof__v { color: var(--text-on-light); }
.proof--light .proof__d { color: var(--text-on-light-2); }
.proof--light .proof__note { color: var(--text-on-light-3); }
.proof--light .flip-arrow { color: var(--text-on-light-3); }
@media (hover: hover) {
  .proof--light .proof__item--flip:hover .flip-arrow { color: var(--brand); }
}
.proof--light .proof__item--flip:focus-visible { outline-color: var(--brand); }

/* ---- mega menu：Custom 不再與四個方案並列，右側卡片要讀得出是「另一條路」---- */
.mega__feature--solution {
  border-left: 2px solid var(--brand);
  background: linear-gradient(135deg, rgba(238,118,35,.10), rgba(238,118,35,0) 60%);
}

/* ---- 手機抽屜：對應桌機右側卡片的那一項，用分隔線隔開 ---- */
.drawer__alt {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-dark);
  color: var(--brand-soft) !important;
}


/* ================= Technology：圖片為主，文字壓在圖上（v1.6.4） ================= */
.techtiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.techtile {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 5;
  padding: clamp(20px, 2vw, 32px);
  border-radius: var(--radius-sm);
  overflow: hidden;
  isolation: isolate;
  color: var(--text-on-dark);
  background: var(--ink-700);
}
.techtile__bg { position: absolute; inset: 0; z-index: -2; }
.techtile__bg img { width: 100%; height: 100%; object-fit: cover; }
.techtile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(17,24,35,.95) 0%, rgba(17,24,35,.85) 40%,
    rgba(17,24,35,.25) 72%, rgba(17,24,35,0) 100%);
}
.techtile__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.techtile__item + .techtile__item { padding-top: var(--sp-4); border-top: 1px solid var(--line-dark); }
.techtile__name {
  display: flex; align-items: center; gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-on-dark);
}
.techtile__name::before { content: ""; flex: none; width: 18px; height: 2px; background: var(--brand); }
/* v1.58：標題換成兩行時，橘線對齊第一行（原本置中會落在兩行之間） */
.techtile__name { align-items: flex-start; }
.techtile__name::before { margin-top: calc(var(--lh-snug) * .5em - 1px); }
.techtile__desc { margin: 6px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-on-dark-2); }
@media (max-width: 900px) {
  .techtiles { grid-template-columns: 1fr; }
  .techtile { aspect-ratio: auto; min-height: 440px; }
}

/* =========================================================================
   產品頁（第 4 層，v1.7）— /solutions/<category>/<product>/
   版型參考舊站 Hilux 車機頁：標題＋圖庫 → 導言賣點 → 使用情境 → 產品特色 → 規格 → CTA
   ========================================================================= */

/* ---- 分類頁產品卡：有產品頁時的連結 ---- */
.prod__title a { color: inherit; }
.prod__title a:hover { color: var(--brand); }
.prod--linked .prod__media { display: block; overflow: hidden; }
.prod--linked .prod__media img { transition: transform .5s var(--ease); }
.prod--linked:hover .prod__media img { transform: scale(1.04); }
.prod__more .link-arrow { font-size: .85rem; }

/* ---- 標題區 ---- */
.phero {
  position: relative;
  background: var(--ink-900);
  color: var(--text-on-dark);
  padding: calc(var(--header-h) + var(--sp-7)) 0 var(--sp-8);
  overflow: hidden;
}
.phero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(to right, var(--brand), transparent 60%);
}
.phero .crumbs { flex-wrap: wrap; margin-bottom: var(--sp-6); }
.phero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.phero__body > * + * { margin-top: var(--sp-5); }
.phero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.3rem);
  line-height: 1.12;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
html[lang^="zh"] .phero__title { line-height: 1.32; letter-spacing: .01em; }
html[lang^="en"] .phero__title { text-wrap: balance; }
.phero__points li { color: var(--text-on-dark-2); font-size: 1rem; }
.phero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-2); }

.phero__grid--noimg { grid-template-columns: minmax(0, 1fr); }

/* 圖庫：張數不限、至少一張。只有一張時不出現箭頭、張數與縮圖列 */
.phero__stage { position: relative; }
.phero__main {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-700);
}
/* contain：產品照比例不一（舊站有 3:2、16:9、4:3），不裁切產品本身 */
.phero__main img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.phero__main img.is-swapping { opacity: .35; }
/* v1.23.1 白底：去背／白底產品照（gallery 的 bg: "white"）。底色畫在 img 上，contain 留白處一起變白 */
.phero__main img.is-white, .phero__thumb img.is-white { background: #fff; }
/* 滑鼠停在主圖上放大（舊站的效果）；放大中心跟著游標走，由 ui.js 設定 transform-origin */
.phero__main.is-zoomable { cursor: zoom-in; }
.phero__main.is-zoomed img { transform: scale(2); transition: opacity .2s var(--ease); }

.phero__nav {
  position: absolute; top: 50%; z-index: 2;
  width: 44px; height: 44px; margin-top: -22px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(17,24,35,.55);
  color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: .8;
  transition: opacity .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.phero__nav--prev { left: var(--sp-4); }
.phero__nav--next { right: var(--sp-4); }
.phero__stage:hover .phero__nav { opacity: 1; }
.phero__nav:hover { background: var(--brand); border-color: var(--brand); }
.phero__nav:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; opacity: 1; }

.phero__count {
  position: absolute; right: var(--sp-4); bottom: var(--sp-4); z-index: 2;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(17,24,35,.6);
  color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* 縮圖列：張數少時置中；張數多到放不下時改成左右捲動
   （第一與最後一張的 auto 外距在放得下時負責置中，放不下時自動歸零，不會被切掉） */
.phero__thumbs {
  display: flex; gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: 2px;                       /* 留給選取框，避免被 overflow 切掉 */
  overflow-x: auto;
  scrollbar-width: thin;
}
.phero__thumb:first-child { margin-left: auto; }
.phero__thumb:last-child  { margin-right: auto; }
.phero__thumb {
  flex: 0 0 auto;
  width: clamp(64px, 17%, 112px);
  aspect-ratio: 3 / 2;
  padding: 0; border: 2px solid transparent;
  border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  background: var(--ink-700);
  opacity: .55;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.phero__thumb img { width: 100%; height: 100%; object-fit: cover; }
.phero__thumb:hover { opacity: 1; }
.phero__thumb[aria-pressed="true"] { opacity: 1; border-color: var(--brand); }
.phero__thumb:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; }
@media (max-width: 560px) {
  .phero__nav { width: 38px; height: 38px; margin-top: -19px; }
  .phero__nav--prev { left: var(--sp-3); }
  .phero__nav--next { right: var(--sp-3); }
}

/* ---- 導言賣點 ---- */
.pbenefits {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}
.pbenefit {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5) var(--sp-6) 0;
}
.pbenefit + .pbenefit { padding-left: var(--sp-5); border-left: 1px solid var(--line-light); }
.pbenefit__icon { color: var(--brand); }
.pbenefit__label {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}

/* ---- 使用情境 ---- */
.pfeat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.pfeat--noimg { grid-template-columns: 1fr; }
.pfeat__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-700);
}
.pfeat__media img { width: 100%; height: 100%; object-fit: cover; }
.pfeat__body > * + * { margin-top: var(--sp-4); }
.pfeat__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6) var(--sp-5);
  padding-top: var(--sp-6);
  margin-top: var(--sp-6);
  border-top: 1px solid var(--line-light);
}
.pfeat__title {
  font-size: 1.08rem; font-weight: var(--fw-semi); line-height: 1.35;
  display: flex; align-items: center; gap: 10px;
}
.pfeat__title::before { content: ""; flex: none; width: 14px; height: 2px; background: var(--brand); }
.pfeat__desc { margin-top: 8px; font-size: .93rem; color: var(--text-on-light-2); }

/* ---- 產品特色（深色） ---- */
.phl {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.phl--noimg { grid-template-columns: 1fr; }
.phl__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-700);
}
.phl__media img { width: 100%; height: 100%; object-fit: cover; }
.phl__list { list-style: none; margin: 0; padding: 0; }
.phl__item {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line-dark);
}
.phl__item:last-child { border-bottom: 1px solid var(--line-dark); }
.phl__n {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: var(--fw-bold);
  color: var(--brand-soft);
  padding-top: 2px;
}
.phl__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4); font-weight: var(--fw-semi); line-height: var(--lh-snug);
}
.phl__desc { margin-top: 6px; font-size: .95rem; color: var(--text-on-dark-2); }
/* v1.22 影片版：依影片原比例（不裁切），重點旁的元件小圖 */
.phl__media--video { aspect-ratio: auto; }
.phl__media--contain img { object-fit: contain; }
.phl__media--white { background: #fff; }   /* v1.23.1 highlights 的 imgBg: "white" */   /* v1.23.1 產品照暫代：整張顯示，底色同產品頁大圖 */
.phl__video { display: block; width: 100%; height: auto; }
.phl__item--img { grid-template-columns: 52px 1fr 112px; align-items: center; }
.phl__item--img .phl__n { align-self: start; }
.phl__thumb {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--surface-1);
}
.phl__thumb img { width: 100%; height: 100%; object-fit: contain; }
.phl__thumb.is-todo {
  border: 2px dashed var(--brand);
  background: repeating-linear-gradient(135deg, rgba(238,118,35,.10) 0 10px, transparent 10px 20px), var(--ink-800);
  color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-align: center; line-height: 1.3;
}
@media (max-width: 560px) {
  .phl__item--img { grid-template-columns: 40px 1fr 84px; gap: var(--sp-3); }
}

/* ---- 規格表 ---- */
.pspecs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.pspecs__head > * + * { margin-top: var(--sp-4); }
.pspecs__head { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
table.spec { width: 100%; border-collapse: collapse; font-size: .97rem; }
table.spec th, table.spec td {
  padding: 16px 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-light);
}
table.spec tr:first-child th, table.spec tr:first-child td { border-top: 2px solid var(--text-on-light); }
table.spec th {
  width: 38%; padding-right: var(--sp-5);
  font-weight: var(--fw-semi); color: var(--text-on-light-3);
  font-size: .9rem;
}
table.spec td { color: var(--text-on-light); }

/* ---- 響應式 ---- */
@media (max-width: 960px) {
  .phero__grid, .pfeat, .phl, .pspecs { grid-template-columns: 1fr; }
  .pfeat__media { aspect-ratio: 16 / 10; }
  .pspecs__head { position: static; }
  .pbenefits { grid-template-columns: repeat(2, 1fr); }
  .pbenefit:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pbenefit:nth-child(n+3) { border-top: 1px solid var(--line-light); }
}
@media (max-width: 560px) {
  .pfeat__grid { grid-template-columns: 1fr; }
  table.spec th { width: 42%; }
}

/* ---- 升級前後比較（v1.7） ----
   左欄至少兩張圖，由上而下排；第一張標「升級前」（灰），其餘標「升級後」（橘） */
.pcmp { display: grid; gap: var(--sp-4); }
.pcmp__fig {
  position: relative; margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-700);
}
.pcmp__fig img { width: 100%; height: 100%; object-fit: cover; }
.pcmp__tag {
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  background: rgba(17,24,35,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pcmp__fig--after .pcmp__tag { background: var(--brand); }
html[lang^="zh"] .pcmp__tag { letter-spacing: .06em; }
/* 三張以上：第一張（升級前）滿寬，其餘兩兩並排 */
.pcmp:has(> :nth-child(3)) { grid-template-columns: 1fr 1fr; }
.pcmp:has(> :nth-child(3)) > :first-child { grid-column: 1 / -1; }
@media (max-width: 960px) and (min-width: 561px) {
  .pcmp { grid-template-columns: 1fr 1fr; }
}
.phero__summary { max-width: 60ch; }

/* ---- 產品頁待補模式（v1.7.1）：SITE.showTodo = true 時 ----
   有佔位圖的地方：右上角蓋「To be done」標籤；完全沒有圖的地方：虛線框＋置中標籤。
   上線前把 content.js 的 showTodo 改成 false，這些都會消失。 */
.phl__media { position: relative; }
.phero__stage.is-todo::after,
.pcmp__fig.is-todo::after,
.phl__media.is-todo::after {
  content: attr(data-todo-label);
  position: absolute; z-index: 3;
  right: var(--sp-4); top: var(--sp-4);
  padding: 5px 12px;
  border: 1px dashed #fff;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: .06em;
  pointer-events: none;
}
.pcmp__fig.is-todo:not(:has(img)),
.phl__media.is-todo:not(:has(img)) {
  border: 2px dashed var(--brand);
  background: repeating-linear-gradient(135deg, rgba(238,118,35,.06) 0 14px, transparent 14px 28px), var(--surface-2);
}
.phl__media.is-todo:not(:has(img)) {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, rgba(238,118,35,.10) 0 14px, transparent 14px 28px), var(--ink-800);
}
/* 2026-10-20 splitList 沒有照片的項目（imgTodo）：與產品頁「升級後」的待補框同一種樣式 */
.split__media.is-todo::after {
  content: attr(data-todo-label);
  position: absolute; z-index: 3;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  padding: 8px 18px;
  border: 1px dashed #fff; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .06em;
  pointer-events: none;
}
.split__media.is-todo {
  border: 2px dashed var(--brand);
  background: repeating-linear-gradient(135deg, rgba(238,118,35,.10) 0 14px, transparent 14px 28px), var(--ink-800);
}
.split--text { grid-template-columns: minmax(0, 760px); }
.pcmp__fig.is-todo:not(:has(img))::after,
.phl__media.is-todo:not(:has(img))::after {
  right: auto; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--fs-sm); padding: 8px 18px;
}
.phero__thumb[data-gallery-todo] { border-style: dashed; border-color: var(--brand-soft); }
.phero__thumb[data-gallery-todo][aria-pressed="true"] { border-color: var(--brand); }
.pbenefit--todo .pbenefit__icon { opacity: .35; }

/* =========================================================================
   v1.8 車用總覽頁：沿用舊站三段內容
   ========================================================================= */

/* ---- story：品牌論述（單欄由上往下讀：標題 → 副標 → 導言 → 編號論點） ---- */
.story { max-width: 860px; }
.story__head > * + * { margin-top: var(--sp-4); }
.story__lead {
  padding-left: var(--sp-5);
  border-left: 3px solid var(--brand);
  color: var(--text-on-light-2);
}
.story__stat {
  display: flex; align-items: baseline; gap: var(--sp-4);
  margin-top: var(--sp-6) !important;
}
.story__num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 3vw, 4.4rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--brand);
}
.story__statlabel { font-weight: var(--fw-semi); color: var(--text-on-light-2); }
.story__body { margin-top: var(--sp-7); }
.story__intro { font-size: 1.08rem; line-height: 1.8; }
.story__intro strong, .story__pbody strong { color: var(--brand-strong); font-weight: var(--fw-semi); }
.story__pillars { list-style: none; margin: var(--sp-7) 0 0; padding: 0; }
.story__pillar {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-4);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--line-light);
}
.story__pillar:last-child { border-bottom: 1px solid var(--line-light); }
.story__n {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: var(--fw-bold);
  color: var(--brand);
  padding-top: 4px;
}
.story__ptitle {
  font-family: var(--font-display);
  font-size: var(--fs-h4); font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}
.story__pbody { margin-top: var(--sp-3); color: var(--text-on-light-2); line-height: 1.75; }
/* v1.11.1 intro 當作清單第一列：不編號、不留標題上方間距 */
.story__pillar--intro .story__pbody { margin-top: 0; }

/* ---- upgradeWhy：左文字＋效益磚，右升級前／升級後 ---- */
.uwhy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.uwhy__body > * + * { margin-top: var(--sp-4); }
.ubenefits {
  list-style: none; padding: 0;
  margin-top: var(--sp-6) !important;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3);
}
.ubenefit {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface-0);
  border-radius: var(--radius);
  border-left: 3px solid var(--brand);
  box-shadow: var(--shadow-sm);
}
.ubenefit .pbenefit__icon { flex: none; color: var(--brand); }
.ubenefit__label {
  font-family: var(--font-display);
  font-size: 1.08rem; font-weight: var(--fw-semi); line-height: 1.3;
}
.uwhy__media .pcmp__fig { aspect-ratio: 808 / 470; box-shadow: var(--shadow); }
.uwhy__cap { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-on-light-2); }
.uwhy__cap strong { color: var(--text-on-light); }

/* ---- upgradeMap：車體示意圖＋熱點，右側選項清單 ---- */
.umap { display: grid; gap: var(--sp-5); }      /* 圖滿版，三個選項在圖下方並排 */
.umap__fig {
  position: relative; margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #F4F6F8;
  box-shadow: 0 0 0 1px var(--line-light);
}
.umap__fig img { display: block; width: 100%; height: auto; }
.umap__pin {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  transform: translate(0, -50%);          /* pin: [x, y] 是膠囊「左緣中點」的位置 */
  padding: 5px 14px 5px 5px;
  border-radius: 22px;
  background: var(--surface-0);
  color: var(--text-on-light);
  box-shadow: 0 4px 14px rgba(17,24,35,.16);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.umap__chip { max-width: 11.5em; white-space: normal; line-height: 1.2; }   /* 較長的名稱折成兩行，避免蓋到圖 */
.umap__dot {
  position: relative;
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: .8rem; font-weight: var(--fw-bold);
}
.umap__dot::after {          /* 呼吸光圈：提示這裡可以點 */
  content: ""; position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  opacity: 0;
  animation: umap-pulse 2.4s var(--ease) infinite;
}
@keyframes umap-pulse {
  0%   { transform: scale(.7); opacity: .7; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .umap__dot::after { animation: none; } }
.umap__pin--left { flex-direction: row-reverse; padding: 5px 5px 5px 14px; }
                                          /* x 大於 60% 的熱點改以「右緣中點」定位，膠囊往左長，不會超出圖外 */
.umap__pin:hover, .umap__pin:focus-visible, .umap__pin.is-active { background: var(--ink-900); color: #fff; }
.umap__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
.umap__opt {
  display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-4);
  align-content: start;                     /* 三張卡等高時，內容貼齊上方 */
  padding: var(--sp-5);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  transition: background var(--dur) var(--ease);
  scroll-margin-top: calc(var(--header-h) + var(--sp-5));
}
.umap__opt.is-active, .umap__opt:target { background: var(--surface-1); border-color: var(--brand); }
.umap__n {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--brand);
  color: var(--brand);
  font-size: .85rem; font-weight: var(--fw-bold);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.umap__opt.is-active .umap__n { background: var(--brand); color: #fff; }
.umap__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4); font-weight: var(--fw-semi); line-height: var(--lh-snug);
}
.umap__desc { margin: 6px 0 var(--sp-3); font-size: .95rem; color: var(--text-on-light-2); }
.umap__opt .link-arrow { font-size: .88rem; }

/* ---- 響應式 ---- */
@media (max-width: 1100px) {
  .umap__opt { grid-template-columns: 1fr; gap: var(--sp-3); }
}
@media (max-width: 960px) {
  .uwhy { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .umap__list { grid-template-columns: 1fr; }
  .umap__opt { grid-template-columns: 40px 1fr; gap: var(--sp-4); }
  .umap__chip { display: none; }                 /* 手機：圖上只留編號，名稱看下方清單 */
  .umap__pin { padding: 3px; }
  .umap__dot { width: 24px; height: 24px; }
}
@media (max-width: 560px) {
  .ubenefits { grid-template-columns: 1fr; }
  .story__pillar { grid-template-columns: 1fr; gap: var(--sp-2); }
  .story__pillar--intro .story__n { display: none; }
}

/* ---- 首頁公司介紹（v1.10）：單欄，寬度與間距比照其他區塊標題（.section-head）---- */
.intro__inner { max-width: 780px; }
.intro__inner > * + * { margin-top: var(--sp-3); }
.intro__lead { color: var(--text-on-light-2); }
.intro__more { margin-top: var(--sp-5); }


/* ================= 產品頁：應用領域（2026-10-16） =================
   三欄條列，每項上方一條細線、左側品牌橘菱形。項目不足一排時留白即可（不像格狀底色會露出空格）。 */
.papps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--sp-6);
  margin: 0; padding: 0; list-style: none;
}
.papps__item {
  position: relative;
  padding: var(--sp-4) 0 var(--sp-4) 22px;
  border-top: 1px solid var(--line-light);
}
.papps__item::before {
  content: ""; position: absolute; left: 2px; top: calc(var(--sp-4) + .55em);
  width: 7px; height: 7px; background: var(--brand);
  border-radius: 2px; transform: rotate(45deg);
}
/* 有圖示的項目：圖示取代菱形，放在左側 */
.papps__item--icon { padding-left: 38px; }
.papps__item--icon::before { display: none; }
.papps__icon { position: absolute; left: 0; top: calc(var(--sp-4) - 1px); color: var(--brand); }
.papps__title { display: block; font-weight: var(--fw-semi); color: var(--text-on-light); line-height: 1.45; }
.papps__desc { display: block; margin-top: 4px; font-size: .9rem; color: var(--text-on-light-2); }
@media (max-width: 1024px) { .papps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .papps { grid-template-columns: 1fr; } }


/* ================= 首頁 Why ASUKA（type: "pillars"，v1.57 清理後） =================
   眉標 → 大標題（定位宣言）→ 三個特點（三欄條列）→ 導言 → 收尾口號
   v1.45 的五張卡片、v1.47 的深色方框、v1.48 的引導句樣式都已移除 */
.pillars__head { margin-bottom: var(--sp-7); }
.pillars__head > * + * { margin-top: var(--sp-4); }

/* 大標題：一句定位宣言，每句一行 */
.pillars__headline {
  margin-top: var(--sp-3) !important;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem);
  line-height: 1.14;
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-light);
}
.pillars__hline { display: block; }
html[lang^="zh"] .pillars__headline { line-height: 1.35; letter-spacing: 0; }
html[lang^="en"] .pillars__headline { text-wrap: balance; }

/* 三個特點：無底色，上緣細灰線＋左端一段橘線，字級比大標題小兩階 */
.pillars__factors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--sp-6);
  margin-top: var(--sp-6) !important;
}
.factor {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-light);
}
.factor::before {
  content: ""; position: absolute; left: 0; top: -2px;
  width: 40px; height: 3px; background: var(--brand);
}
.factor__n {
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  color: var(--brand);
}
.factor__t {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem);
  font-weight: var(--fw-semi);
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--text-on-light);
}
html[lang^="en"] .factor__t { text-wrap: balance; }
html[lang^="zh"] .factor__t { line-height: 1.6; letter-spacing: 0; }
/* 進場：三欄依序出現 */
.factor[data-reveal].is-in { animation: factor-in .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); transition: none; }
@keyframes factor-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .pillars__factors { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .factor { padding-top: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) {
  .factor[data-reveal] { animation: none !important; }
}

/* 導言與收尾口號 */
.pillars__intro { max-width: 780px; margin-top: var(--sp-7) !important; }
.pillars__p {
  font-size: clamp(1.02rem, .97rem + .3vw, 1.15rem);
  line-height: 1.7;
  color: var(--text-on-light-2);
}
.pillars__p + .pillars__p { margin-top: var(--sp-3); }
html[lang^="zh"] .pillars__p { line-height: 1.9; }
html[lang^="en"] .pillars__p { text-wrap: pretty; }
.pillars__tagline {
  display: inline-block;
  margin-top: var(--sp-5);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--brand);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
  color: var(--text-on-light);
}

/* ================= 產品頁「導言」區塊附說明圖（intro.img，2026-10-20） =================
   桌機左文右圖；圖最寬 720px（SWAN-210 架構圖原檔 753px，避免放大糊掉）；1024px 以下上文下圖 */
.pintro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-7); align-items: center; margin-bottom: var(--sp-7);
}
.pintro .section-head { margin-bottom: 0; }
.pintro__media { margin: 0; justify-self: center; width: 100%; max-width: 720px; }
.pintro__media img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }
@media (max-width: 1024px) {
  .pintro { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ================= 圖片標示型號（gallery[].model／label、highlights.imgModel／imgLabel，2026-10-20） =================
   一頁介紹多個型號時，讀者要知道每張圖是哪一款：主圖左上角「型號＋說明」，縮圖下方顯示型號。
   深色半透明底＋細白框，白底照與黑底照上都看得清楚 */
.phero__tag {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 2;
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  max-width: calc(100% - 2 * var(--sp-4));
  padding: 6px 12px;
  border-radius: var(--radius);
  background: rgba(17,24,35,.82);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: var(--fs-xs); line-height: 1.35;
  pointer-events: none;
}
.phero__tag b { font-weight: var(--fw-bold); letter-spacing: .02em; }
.phero__tag span { color: rgba(255,255,255,.78); }
.phero__tag[hidden] { display: none; }
.phl__media { position: relative; }
.phl__tag { left: var(--sp-4); top: var(--sp-4); }

.phero__thumb--labeled {
  aspect-ratio: auto; border: 0; overflow: visible; background: none;
  display: flex; flex-direction: column; gap: 6px;
}
.phero__thumb--labeled .phero__thumb-img {
  display: block; aspect-ratio: 3 / 2;
  border: 2px solid transparent; border-radius: var(--radius);
  overflow: hidden; background: var(--ink-700);
  transition: border-color .2s var(--ease);
}
.phero__thumb--labeled[aria-pressed="true"] { border-color: transparent; }
/* 只讓圖片變淡，型號文字維持清楚可讀 */
.phero__thumb--labeled { opacity: 1; }
.phero__thumb--labeled .phero__thumb-img { opacity: .55; }
.phero__thumb--labeled:hover .phero__thumb-img,
.phero__thumb--labeled[aria-pressed="true"] .phero__thumb-img { opacity: 1; }
@media (max-width: 560px) {
  .phero__tag { left: var(--sp-3); top: var(--sp-3); padding: 4px 10px; font-size: .7rem; }
}
.phero__thumb--labeled[aria-pressed="true"] .phero__thumb-img { border-color: var(--brand); }
.phero__thumb-label {
  font-size: .72rem; font-weight: var(--fw-semi); line-height: 1.2;
  color: var(--text-on-dark-2); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phero__thumb--labeled[aria-pressed="true"] .phero__thumb-label { color: #fff; }

/* ================= 步驟標示負責產品（process steps[].by，2026-10-20） ================= */
.step__by { margin-top: 10px; font-size: .85rem; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.step__by span { color: var(--text-on-light-3); }
.step__by a { color: var(--brand); font-weight: var(--fw-semi); text-decoration: none; }
.step__by a::after { content: " ↓"; }
.step__by a:hover { text-decoration: underline; }