/* ALIGN 家族頁（家族首頁、ALIGNCAM、ALIGNVIEW）專用補充樣式。
   疊在 style.css 之上，不改 ALIGNED 頁本身的樣式。 */

/* 家族記號：wordmark 前的 ][ */
.fam-mark{display:inline-flex;align-items:center;gap:9px}
.fam-mark svg{width:20px;height:20px;color:var(--accent);flex:none}
.fam-mark small{font-weight:600;letter-spacing:.04em;font-size:12.5px;color:var(--ink-faint)}
nav.main a.on{color:var(--ink)}

/* 雙語同頁（家族首頁）：html[data-lang] 決定顯示哪一語 */
html[data-lang="en"] [data-zh]{display:none!important}
html:not([data-lang="en"]) [data-en]{display:none!important}

/* 家族首頁 hero：置中、單欄、短 */
.fam-hero{padding:96px 0 8px;text-align:center}
.fam-hero .lede{margin:0 auto}
.fam-hero h1{margin-bottom:16px}

/* App 卡：icon、名稱、一句話、狀態 */
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.app-card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:26px 24px 24px;display:flex;flex-direction:column;
  transition:transform .15s,border-color .15s;
}
.app-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.app-card .app-icon{width:72px;height:72px;border-radius:17px;border:1px solid var(--line);margin-bottom:20px}
.app-card h3{font-size:19px;font-weight:800;letter-spacing:.04em;margin:0 0 6px}
.app-card .what{font-size:14px;color:var(--ink-dim);margin:0 0 6px;line-height:1.65}
.app-card .plat{font-size:12.5px;color:var(--ink-faint);margin:0 0 22px}
.app-card .acts{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.app-card .acts .btn{padding:9px 16px;font-size:13.5px}
.app-card.soon{border-style:dashed;background:transparent}
.app-card.soon:hover{border-color:var(--ink-faint)}
.status{
  display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--ink-dim);
}
.status.live{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.fam-note{margin:56px auto 0;max-width:620px;text-align:center;font-size:13.5px;color:var(--ink-faint)}

/* App 頁 hero 的 icon＋名稱列 */
.app-id{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.app-id img{width:56px;height:56px;border-radius:13px;border:1px solid var(--line)}
.app-id span{font-weight:800;letter-spacing:.06em;font-size:15px}
.app-id .status{margin-left:2px}

/* 沒有錄影的 App 頁（ALIGNVIEW）：hero 右側放大 icon */
.hero-icon{display:flex;justify-content:center}
.hero-icon img{width:min(280px,60vw);height:auto;border-radius:22%;border:1px solid var(--line)}

/* 文字型功能清單（沒錄影就不做影片卡，只列文字） */
.spec-grid.two{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* 隱私頁 */
.doc{max-width:720px;margin:0 auto;padding:64px 0 0}
.doc h1{font-size:clamp(28px,4vw,40px)}
.doc h2{font-size:18px;margin:38px 0 10px}
.doc p,.doc li{color:var(--ink-dim);font-size:15px}
.doc ul{padding-left:20px;margin:0 0 12px}
.doc .date{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint);margin:0 0 8px}
.doc hr{border:0;border-top:1px solid var(--line);margin:56px 0}
.doc table{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:14px}
.doc td{border-top:1px solid var(--line);padding:10px 8px 10px 0;vertical-align:top;color:var(--ink-dim)}
.doc td:first-child{color:var(--ink);font-weight:600;white-space:nowrap;width:9.5em}
.doc a{color:var(--accent)}

@media (max-width:900px){
  .app-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .fam-hero{padding-top:64px}
}
@media (max-width:560px){
  .fam-mark small{display:none}
  .doc td:first-child{white-space:normal;width:7em}
}

/* ALIGNVIEW 頁（2026-10-19 改版）：置中 hero＋展示片、16:9 功能卡 */
.view-hero{padding:88px 0 8px;text-align:center}
.view-hero .app-id{justify-content:center}
.view-hero .lede{margin-left:auto;margin-right:auto}
.view-hero .cta-row{justify-content:center}
.film{max-width:1080px;margin:44px auto 0}
.film video{display:block;width:100%;aspect-ratio:16/9;border-radius:18px;border:1px solid var(--line);background:#000}
.card .wide{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;margin-bottom:16px}
.card .wide video{display:block;width:100%;height:100%;object-fit:cover}