/* SynERP 產品站的版面層。
 *
 * ⚠️ 這裡**只放站台版面**。顏色、字、間距、元件一律來自 Ledger 設計系統
 * （`design/ledger/styles.css`，build 時直接複製成 dist/styles.css）。
 * 不要在這個檔裡寫死色碼或 px —— 要改長相請改設計系統那一支。
 */

/* ── 外殼 ─────────────────────────────────────────── */

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--space-8); }

.nav--site {
  position: sticky;
  top: 0;
  z-index: 10;
  /* 帳紙白不透明 —— 這套系統不用毛玻璃，紙就是紙 */
  background: var(--color-bg);
}
/* 這層一定要自己 flex —— 它是 <span>，不設的話四個連結只靠原始碼的換行空白
   隔開，桌機上會整排黏在一起。

   ⚠️ `min-width: 0` ＋ `overflow-x: auto` 是為了讓「擠不下」變成**這一排自己捲**，
   而不是把 CTA 推出畫面。實際發生過：英文版導覽從 4 項變 5 項之後，
   721–900px 之間 `.nav__cta`（"Talk to us"）溢出 12px。
   不用「把斷點從 720 改成 900」那種修法 —— 那是追著斷點跑，
   下次加第六項或換更長的標籤又會壞。讓可捲的那一排負責讓步，才不會再犯。 */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav__links::-webkit-scrollbar { display: none; }
/* CTA 與語言切換不參與壓縮：被壓扁的按鈕比要捲一下的導覽更糟。 */
.nav__cta { flex: none; }
/* ⚠️ height 與 width 兩個都要寫死：HTML 上的 width/height 屬性是 presentational
   hint，只設一邊另一邊就會被屬性值綁住。 */
.nav__mark { height: 26px; width: auto; display: block; flex: none; }
/* 有圖之後不能再用 baseline —— 圖沒有有意義的基線，會把整排文字拉歪。 */
/* min-width: 0 讓品牌區也能讓步 —— 否則它會撐住整排不給別人空間。 */
.nav__brand { display: flex; align-items: center; gap: var(--space-3); margin-right: auto; text-decoration: none; color: inherit; min-width: 0; }
.nav__brand .nav__sub { align-self: flex-end; padding-bottom: 2px; }
.nav__name { font-family: var(--font-heading); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.nav__sub { font-family: var(--font-figure); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-700); }

/* 語言切換。刻意做成等寬小標而不是按鈕 —— 它是標記不是行動，
   跟 CTA 搶同一種視覺重量會讓人誤按。 */
.nav__lang {
  font-family: var(--font-figure);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-neutral-700);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  flex: none;
}
.nav__lang:hover { color: var(--color-text); border-bottom-color: var(--color-accent-500); }

/* ── 頁首 ─────────────────────────────────────────── */

.hero { padding: var(--space-24) 0 var(--space-16); }
.hero__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-24); align-items: end; }
.hero h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; }
.hero__lede { font-size: 17px; }
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }

.tally { display: flex; gap: var(--space-12); }
.tally > div { display: grid; gap: var(--space-1); }
.tally .fig { text-align: left; }

/* 子頁的頁首：設計稿裡是區塊標題，拆頁之後升格成頁面標題 */
.pagehead { padding: var(--space-16) 0 var(--space-8); }
.pagehead h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; }
.pagehead__aside { margin-top: var(--space-4); color: var(--color-neutral-800); }

.sec { padding: var(--space-16) 0; }
/* 滿版底色的區塊 —— 所以 section 本身不帶版面寬度，寬度由裡面的 .wrap 給。
   （不要用 `margin-inline: calc(50% - 50vw)` 那招，50vw 含捲軸會產生橫向溢出。） */
.sec--tint { background: var(--color-surface); padding: var(--space-24) 0; }

/* ── §01 系統架構 ─────────────────────────────────── */

/* 三欄：進來 → SynERP → 出去。欄與欄之間是箭頭，不是框。 */
.arch { display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; gap: var(--space-6); align-items: stretch; margin-top: var(--space-12); }
.arch__col { display: grid; gap: var(--space-3); align-content: start; }
.arch__col h3 { font-family: var(--font-figure); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-700); margin: 0 0 var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-rule-strong); }
.arch__col li { list-style: none; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-rule); font-size: 14px; }
.arch__col ul { margin: 0; padding: 0; }
.arch__core h3 { color: var(--color-text); border-bottom-color: var(--color-text); }
.arch__core li { font-weight: 500; }
.arch__arrow { display: grid; place-items: center; font-family: var(--font-figure); color: var(--color-neutral-600); padding-top: var(--space-8); }

/* ── §02 適用對象 ─────────────────────────────────── */

.aud { margin-top: var(--space-12); }
.aud__tags { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.aud__note { margin-top: var(--space-8); font-size: 14px; color: var(--color-neutral-700); max-width: 70ch; }

/* ── §03 功能模組 ─────────────────────────────────── */

/* 右欄的備註在寬螢幕靠右，窄螢幕回到左邊 —— 右對齊的長句子讀起來很累 */
.mod__note { text-align: right; font-size: 13px; color: var(--color-neutral-700); max-width: 24ch; }

/* ── §04 實機畫面 ─────────────────────────────────── */

.shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12) var(--space-8); margin-top: var(--space-12); }
.shots figure { margin: 0; }

/* ── §07 導入流程 ─────────────────────────────────── */

.steps { margin: var(--space-12) 0 0; padding: 0; counter-reset: step; }
.steps li { list-style: none; }
.steps__note { margin-top: var(--space-2); font-size: 13px; color: var(--color-accent-2-700); }

/* ── §08 常見問題 ─────────────────────────────────── */

.faq { margin-top: var(--space-12); border-top: 1px solid var(--color-rule-strong); }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq summary {
  display: grid;
  grid-template-columns: var(--col-code) minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--color-accent-100); }
.faq summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.faq__q { font-family: var(--font-figure); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--color-accent-700); }
.faq__plus { font-family: var(--font-figure); font-weight: 400; transition: transform 160ms; }
.faq details[open] .faq__plus { transform: rotate(45deg); }
.faq details > p { margin: 0 0 var(--space-6); padding-left: calc(var(--col-code) + var(--space-4)); color: var(--color-neutral-800); font-size: 14px; }

/* ── §09 開始評估 ─────────────────────────────────── */

/* ⚠️ 這個元素同時帶 .wrap，所以只能設 padding-block —— 用 padding 簡寫會把
   .wrap 的左右內距歸零，手機上文字會貼到螢幕邊緣。 */
.close { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-24); padding-block: var(--space-24); border-top: 1px solid var(--color-rule-strong); }
.close h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; }
.close__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }
.close ol { margin: 0; padding: 0; }
.close ol li { list-style: none; }

/* ── 上一頁／下一頁 ───────────────────────────────── */

.pager { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-8) 0; border-top: 1px solid var(--color-rule); }
.pager a { display: grid; gap: 2px; text-decoration: none; color: var(--color-text); }
.pager a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.pager span { font-family: var(--font-figure); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); }
.pager__next { text-align: right; }

/* ── 頁尾 ─────────────────────────────────────────── */

.foot { display: flex; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; padding: var(--space-8) 0 var(--space-16); border-top: 1px solid var(--color-rule-strong); font-size: 13px; color: var(--color-neutral-700); }
.foot a { color: inherit; }

/* ── 捲動浮現 ─────────────────────────────────────── */

/* opacity 由 app.js 加，不寫在 CSS —— 這樣關掉 JS 頁面仍然完整可讀。
   代價：fullPage 截圖要先捲到底、而且要等夠久（0.6s 過場 ＋ 最多 0.2s 延遲）。 */
[data-reveal] { transition: opacity 600ms ease, transform 600ms ease; }
.is-hidden { opacity: 0; transform: translateY(12px); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; }
  .is-hidden { opacity: 1; transform: none; }
}

/* ── 手機 ─────────────────────────────────────────── */

/* 品牌副標是裝飾性的，窄螢幕先收起來 —— 它是整排最長的單一元素，
   收掉之後導覽在平板通常就不必捲了。品牌名本身留著，識別不受影響。 */
@media (max-width: 1024px) {
  .nav__sub { display: none; }
}

@media (max-width: 900px) {
  .hero__in, .close { grid-template-columns: 1fr; gap: var(--space-8); }
  .shots { grid-template-columns: 1fr; gap: var(--space-8); }
  .arch { grid-template-columns: 1fr; gap: var(--space-8); }
  .arch__arrow { padding: 0; transform: rotate(90deg); }
  .tally { gap: var(--space-8); }
  .mod__note { text-align: left; max-width: none; margin-top: var(--space-2); }
}

@media (max-width: 720px) {
  .wrap { padding: 0 var(--space-4); }
  .hero { padding: var(--space-12) 0 var(--space-8); }
  .sec, .sec--tint { padding-block: var(--space-12); }
  .close { padding-block: var(--space-12); }
  /* 分頁之後導覽是唯一能走的路，不能整排藏掉 —— 改成可橫向捲的第二列 */
  .nav--site { flex-wrap: wrap; row-gap: var(--space-2); }
  .nav__links { order: 3; width: 100%; display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-1); }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav--site .nav__cta { margin-left: auto; }
  .faq summary { grid-template-columns: var(--col-code) minmax(0, 1fr) auto; font-size: 15px; }
  .faq details > p { padding-left: 0; }
}