/* ============================================================================
   ORRA 官網 v2.0 — 版面樣式
   一切顏色 / 圓角 / 陰影皆取自 Orra DS tokens（hsl(var(--token))）
   視覺語言：白卡、細邊框、淡紫強調、大圓角（遵守 system.md）
   ========================================================================== */

html { scroll-behavior: smooth; }
body.s2-body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground));
  font-family: var(--font-sans); overflow-x: hidden; }
.s2-body a { color: hsl(var(--foreground)); text-decoration: none; }
.s2-body a:hover { color: var(--s8-purple); text-decoration: none; }
.s2-body a:hover .s2-linkcta, .s2-linkcta, .s2-linkcta:hover { text-decoration: none; }

/* ── 導覽列 ─────────────────────────────────────────────── */
.s2-nav { position: sticky; top: 0; z-index: 40; background: hsl(var(--card) / .85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border)); }
.s2-nav-in { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 64px;
  display: flex; align-items: center; gap: 32px; }
.s2-nav-logo img { height: 24px; display: block; }
.s2-nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
.s2-nav-links a { font-size: .875rem; font-weight: 500; color: hsl(var(--muted-foreground));
  padding: 8px 14px; border-radius: 9999px; transition: all .15s ease; white-space: nowrap; }
.s2-nav-links a:hover { background: hsl(var(--brand-purple-light)); color: hsl(var(--brand-purple)); }
.s2-nav-links a.on { background: hsl(var(--brand-purple-light)); color: hsl(var(--brand-purple));
  font-weight: 600; }
.s2-nav-cta { display: flex; align-items: center; gap: 8px; }
.s2-kbd { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem;
  color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border));
  border-radius: .5rem; padding: 5px 9px; background: hsl(var(--card)); cursor: pointer;
  transition: all .15s ease; font-family: inherit; white-space: nowrap; }
.s2-kbd:hover { border-color: hsl(var(--brand-purple) / .5); color: hsl(var(--brand-purple)); }
.s2-kbd kbd { font-family: inherit; font-size: .68rem; border: 1px solid hsl(var(--border));
  border-radius: .3rem; padding: 1px 5px; background: hsl(var(--muted)); }

/* ── 版心與區段 ─────────────────────────────────────────── */
.s2-wide { max-width: 1280px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.s2-std { max-width: 896px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.s2-section { padding: 96px 0; }
.s2-section.tight { padding: 64px 0; }
.s2-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; color: hsl(var(--brand-purple)); margin: 0 0 14px; }
.s2-h1 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1.15; font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 20px; text-wrap: balance; }
.s2-h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.25; font-weight: 700;
  letter-spacing: -.015em; margin: 0 0 12px; text-wrap: balance; }
.s2-lede { font-size: 1rem; line-height: 1.8; color: hsl(var(--muted-foreground));
  margin: 0 0 44px; max-width: 38em; text-wrap: pretty; }
.s2-accent { color: hsl(var(--brand-purple)); }

/* ── 進場動畫（fade-in 延伸，支援 stagger）────────────────── */
.s2-reveal { opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.s2-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .s2-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Hero：招募工作台 ───────────────────────────────────── */
.s2-hero { padding: 72px 0 88px; position: relative; }
.s2-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 56px; align-items: start; }
.s2-hero-copy { padding-top: 28px; }
.s2-hero-sub { font-size: 1.05rem; line-height: 1.85; color: hsl(var(--muted-foreground));
  margin: 0 0 32px; max-width: 30em; text-wrap: pretty; }
.s2-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.s2-hero-meta { display: flex; align-items: center; gap: 12px; }
.s2-face-row { display: flex; }
.s2-face-row img { width: 34px; height: 34px; border-radius: 9999px; object-fit: cover;
  border: 2px solid hsl(var(--card)); background: hsl(var(--brand-purple-light)); }
.s2-face-row img + img { margin-left: -9px; }
.s2-hero-meta span { font-size: .8rem; color: hsl(var(--muted-foreground)); }

/* 招募工作台卡 */
.s2-bench { display: flex; flex-direction: column; gap: 14px; }
.s2-bench-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s2-brief { padding: 20px 22px; }
.s2-brief-label { display: flex; align-items: center; gap: 8px; font-size: 11px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  color: hsl(var(--muted-foreground)); margin-bottom: 10px; }
.s2-brief-text { font-size: .92rem; line-height: 1.8; min-height: 116px; margin: 0;
  color: hsl(var(--foreground)); text-wrap: pretty; }
.s2-caret { display: inline-block; width: 2px; height: 1.1em; vertical-align: -0.18em;
  background: hsl(var(--brand-purple)); margin-left: 2px; animation: s2-blink 1s step-end infinite; }
@keyframes s2-blink { 50% { opacity: 0; } }
.s2-brief-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; }
.s2-brief-hint { font-size: .75rem; color: hsl(var(--muted-foreground)); }

/* 生成的員工設定卡 */
.s2-profile { padding: 22px; position: relative; overflow: hidden; }
.s2-profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.s2-profile-head img { width: 52px; height: 52px; border-radius: 9999px; object-fit: cover;
  background: hsl(var(--brand-purple-light)); }
.s2-profile-head .nm { font-size: 1.05rem; font-weight: 700; }
.s2-profile-head .rl { font-size: .8rem; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.s2-profile-head .st { margin-left: auto; }
.s2-quads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s2-quads > .s2-quad:first-child { grid-column: 1 / -1; }
.s2-quad { border-radius: 1rem; padding: 14px 16px; opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.s2-quad.in { opacity: 1; transform: none; }
.s2-quad h5 { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700;
  margin: 0 0 6px; color: hsl(var(--brand-purple)); }
.s2-quad p { font-size: .8rem; line-height: 1.65; margin: 0; color: hsl(var(--foreground) / .8);
  text-wrap: pretty; }
.s2-profile-skeleton { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── 數字帶 ─────────────────────────────────────────────── */
.s2-band { border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card)); }
.s2-band-in { max-width: 1280px; margin: 0 auto; padding: 28px 32px; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 24px; }
.s2-band-item { display: flex; flex-direction: column; gap: 4px; }
.s2-band-item b { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.s2-band-item span { font-size: .78rem; color: hsl(var(--muted-foreground)); }

/* ── 候選人（履歷卡）───────────────────────────────────── */
.s2-cands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.s2-cand { padding: 0; overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; cursor: pointer; }
.s2-cand:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow-brand, 0 8px 30px hsl(258 100% 62% / .18)); }
.s2-cand .photo { background: linear-gradient(160deg, hsl(var(--brand-purple-light)), hsl(258 80% 90% / .55));
  display: grid; place-items: end center; height: 178px; overflow: hidden; }
.s2-cand .photo img { height: 158px; object-fit: contain; transition: transform .3s ease;
  filter: drop-shadow(0 10px 14px hsl(258 60% 30% / .18)); }
.s2-cand:hover .photo img { transform: scale(1.06); }
.s2-cand .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.s2-cand .who { display: flex; align-items: center; gap: 8px; }
.s2-cand .who b { font-size: 1rem; font-weight: 700; }
.s2-cand .who i { font-style: normal; font-size: .78rem; color: hsl(var(--brand-purple));
  font-weight: 600; }
.s2-cand p { font-size: .82rem; line-height: 1.65; color: hsl(var(--muted-foreground));
  margin: 0; flex: 1; text-wrap: pretty; }
.s2-cand .skills { display: flex; flex-wrap: wrap; gap: 6px; }
.s2-cand .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }

/* 狀態 pill（依 system.md：單行、shrink-0）*/
.s2-pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  flex-shrink: 0; border-radius: 9999px; font-size: .72rem; font-weight: 600;
  padding: 4px 10px; }
.s2-pill.ok { background: hsl(var(--success) / .12); color: hsl(142 71% 30%); }
.s2-pill.ok::before { content: ""; width: 6px; height: 6px; border-radius: 9999px;
  background: hsl(var(--success)); }
.s2-pill.soon { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

/* ── 面試 Dialog 內的對話 ───────────────────────────────── */
.s2-interview { display: flex; flex-direction: column; gap: 10px; min-height: 300px;
  max-height: 340px; overflow-y: auto; padding: 4px 2px; justify-content: flex-end; }
.s2-interview .msg { max-width: 80%; padding: 10px 14px; font-size: .875rem; line-height: 1.65; }
.s2-interview .msg { animation: s2-pop .3s cubic-bezier(.2,.9,.3,1.15); }
@keyframes s2-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.s2-typing { display: inline-flex; gap: 4px; padding: 12px 14px; align-self: flex-start; }
.s2-typing i { width: 5px; height: 5px; border-radius: 9999px;
  background: hsl(var(--muted-foreground) / .55); animation: s2-dot 1s ease infinite; }
.s2-typing i:nth-child(2) { animation-delay: .15s; } .s2-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes s2-dot { 40% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .s2-interview .msg, .s2-typing i, .s2-caret { animation: none !important; }
}

/* ── 三步驟 ─────────────────────────────────────────────── */
.s2-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  counter-reset: step; }
.s2-step { padding: 26px; position: relative; }
.s2-step .no { font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  color: hsl(var(--brand-purple)); margin-bottom: 12px; }
.s2-step h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.s2-step p { font-size: .875rem; line-height: 1.75; color: hsl(var(--muted-foreground));
  margin: 0 0 18px; text-wrap: pretty; }
.s2-step .vig { border-radius: 1rem; border: 1px solid hsl(var(--border));
  background: hsl(var(--background)); padding: 14px; }
.s2-step .vig .row { display: flex; align-items: center; gap: 8px; font-size: .78rem;
  color: hsl(var(--foreground) / .85); }
.s2-step .vig .row + .row { margin-top: 8px; }
.s2-dot-ok { width: 7px; height: 7px; border-radius: 9999px; background: hsl(var(--success));
  flex-shrink: 0; }

/* ── 範本預覽（首頁）＋範本頁 ───────────────────────────── */
.s2-tpl-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.s2-tpl-mini { padding: 22px; display: flex; flex-direction: column; gap: 10px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.s2-tpl-mini:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.s2-tpl-mini h3 { font-size: .98rem; font-weight: 700; margin: 0; }
.s2-tpl-mini p { font-size: .82rem; line-height: 1.65; color: hsl(var(--muted-foreground));
  margin: 0; flex: 1; }
.s2-tpl-mini .go { font-size: .8rem; font-weight: 600; color: hsl(var(--brand-purple)); }

.s2-tpl-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px;
  align-items: start; }
.s2-tpl-nav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; }
.s2-tpl-detail { display: flex; flex-direction: column; gap: 18px; }
.s2-tpl-head { padding: 26px; }
.s2-tpl-head .top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.s2-tpl-head .top img { width: 56px; height: 56px; border-radius: 9999px; object-fit: cover;
  background: hsl(var(--brand-purple-light)); }
.s2-tpl-head h2 { font-size: 1.4rem; font-weight: 800; margin: 0; }
.s2-tpl-head .pos { font-size: .85rem; color: hsl(var(--muted-foreground)); margin-top: 3px; }
.s2-tpl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.s2-tpl-card { padding: 22px; }
.s2-tpl-card h4 { display: flex; align-items: center; gap: 8px; font-size: .85rem;
  font-weight: 700; margin: 0 0 12px; }
.s2-tpl-card ul { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 9px; }
.s2-tpl-card li { display: flex; gap: 9px; font-size: .84rem; line-height: 1.6;
  color: hsl(var(--foreground) / .82); }
.s2-tpl-card li svg { flex-shrink: 0; margin-top: 3px; }
.s2-prompt { padding: 22px; }
.s2-prompt .bar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; }
.s2-prompt .bar h4 { font-size: .85rem; font-weight: 700; margin: 0; }
.s2-prompt pre { white-space: pre-wrap; word-break: break-word; font-family: inherit;
  font-size: .84rem; line-height: 1.8; margin: 0; color: hsl(var(--foreground) / .85);
  border-radius: 1rem; background: hsl(var(--background));
  border: 1px solid hsl(var(--border)); padding: 16px 18px; max-height: 240px; overflow-y: auto; }

/* ── 消息頁 ─────────────────────────────────────────────── */
.s2-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.s2-news-card { overflow: hidden; padding: 0; display: flex; flex-direction: column;
  cursor: pointer; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.s2-news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-raised); }
.s2-news-card .cover { height: 168px; display: grid; place-items: end center; overflow: hidden;
  background: linear-gradient(150deg, hsl(var(--brand-purple-light)), hsl(258 80% 90% / .5)); }
.s2-news-card .cover img { height: 142px; object-fit: contain;
  filter: drop-shadow(0 10px 14px hsl(258 60% 30% / .16)); }
.s2-news-card .cover .duo { display: flex; align-items: flex-end; height: 100%; padding-top: 22px; }
.s2-news-card .cover .duo img { height: 126px; }
.s2-news-card .cover .duo img + img { margin-left: -22px; }
.s2-news-card .body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.s2-news-card .meta { display: flex; align-items: center; gap: 10px; font-size: .72rem;
  color: hsl(var(--muted-foreground)); }
.s2-news-card h3 { font-size: 1rem; font-weight: 700; margin: 0; line-height: 1.5; }
.s2-news-card p { font-size: .82rem; line-height: 1.65; color: hsl(var(--muted-foreground)); margin: 0; }
.s2-featured { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  overflow: hidden; padding: 0; cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.s2-featured:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.s2-featured .cover { min-height: 280px; display: grid; place-items: end center;
  background: linear-gradient(150deg, hsl(var(--brand-purple-light)), hsl(258 80% 88% / .6)); }
.s2-featured .cover img { height: 240px; object-fit: contain;
  filter: drop-shadow(0 14px 18px hsl(258 60% 30% / .18)); }
.s2-featured .body { padding: 34px 36px; display: flex; flex-direction: column;
  justify-content: center; gap: 12px; }
.s2-featured h3 { font-size: 1.5rem; font-weight: 800; margin: 0; line-height: 1.4; }
.s2-featured p { font-size: .92rem; line-height: 1.75; color: hsl(var(--muted-foreground)); margin: 0; }

.s2-article { padding: 40px 44px; }
.s2-article .meta { display: flex; align-items: center; gap: 12px; font-size: .78rem;
  color: hsl(var(--muted-foreground)); margin-bottom: 14px; }
.s2-article h1 { font-size: 1.9rem; font-weight: 800; line-height: 1.35; margin: 0 0 20px;
  letter-spacing: -.015em; text-wrap: balance; }
.s2-article .art-cover { border-radius: 1rem; overflow: hidden; margin-bottom: 28px;
  background: linear-gradient(150deg, hsl(var(--brand-purple-light)), hsl(258 80% 90% / .5));
  display: grid; place-items: end center; height: 260px; }
.s2-article .art-cover img { height: 225px; object-fit: contain;
  filter: drop-shadow(0 12px 16px hsl(258 60% 30% / .16)); }
.s2-article .art-cover .duo { display: flex; align-items: flex-end; height: 100%; padding-top: 20px; }
.s2-article .art-cover .duo img { height: 200px; }
.s2-article .art-cover .duo img + img { margin-left: -24px; }
.s2-article p { font-size: .95rem; line-height: 1.95; color: hsl(var(--foreground) / .85);
  margin: 0 0 18px; text-wrap: pretty; }
.s2-article h2 { font-size: 1.15rem; font-weight: 700; margin: 30px 0 12px; }

/* ── CTA 帶（lavender，遵守不鋪滿紫規則）────────────────── */
.s2-cta { padding: 56px 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px; align-items: center; position: relative; overflow: hidden; }
.s2-cta .mark { position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  width: 300px; opacity: .1; pointer-events: none; }
.s2-cta h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; margin: 0 0 8px;
  letter-spacing: -.015em; }
.s2-cta p { font-size: .95rem; line-height: 1.75; color: hsl(var(--muted-foreground)); margin: 0; }
.s2-cta .actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }

/* ── 頁尾 ───────────────────────────────────────────────── */
.s2-footer { border-top: 1px solid hsl(var(--border)); background: hsl(var(--card));
  margin-top: 96px; }
.s2-footer-in { max-width: 1280px; margin: 0 auto; padding: 52px 32px 36px;
  display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.s2-footer-brand img { height: 22px; margin-bottom: 12px; }
.s2-footer-brand p { font-size: .82rem; line-height: 1.7; color: hsl(var(--muted-foreground));
  margin: 0; max-width: 24em; }
.s2-footer-cols { display: flex; gap: 64px; }
.s2-footer-cols h4 { font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: hsl(var(--muted-foreground)); margin: 0 0 14px; }
.s2-footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 10px; }
.s2-footer-cols a { font-size: .85rem; color: hsl(var(--foreground) / .78); }
.s2-copy { max-width: 1280px; margin: 0 auto; padding: 20px 32px 34px;
  border-top: 1px solid hsl(var(--border)); font-size: .75rem;
  color: hsl(var(--muted-foreground)); display: flex; justify-content: space-between; gap: 16px; }

/* ── 頁首 hero（子頁）───────────────────────────────────── */
.s2-page-hero { padding: 64px 0 48px; }
.s2-crumb { display: flex; align-items: center; gap: 8px; font-size: .8rem;
  color: hsl(var(--muted-foreground)); margin-bottom: 18px; }

/* ============================================================================
   v1.0 新增：方案定價頁 / 企業方案頁 / 首頁定價摘要
   沿用既有 token 與卡片語彙（glass-card / lavender-card / badge-purple / s2-pill），
   不引入新的顏色、圓角或陰影來源。
   ========================================================================== */

/* ── 收尾句（區段結論，置中）────────────────────────────── */
.s2-closing { margin: 32px auto 0; max-width: 44em; text-align: center;
  font-size: .95rem; line-height: 1.8; color: hsl(var(--muted-foreground)); text-wrap: pretty; }

/* ── 方案卡（定價頁四欄）────────────────────────────────── */
.s2-price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  align-items: stretch; }
.s2-price-card { position: relative; box-sizing: border-box; height: 100%;
  padding: 26px 24px; display: flex; flex-direction: column; }
.s2-price-card.is-featured { border-color: hsl(var(--brand-purple) / .45);
  box-shadow: var(--shadow-glow-brand, 0 8px 30px hsl(258 100% 62% / .18)); }
.s2-price-badge { position: absolute; top: 16px; right: 16px; }
.s2-price-name { font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: hsl(var(--brand-purple)); margin-bottom: 14px; }
.s2-price-amt { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
  color: hsl(var(--foreground)); }
.s2-price-unit { font-size: .9rem; font-weight: 600; color: hsl(var(--muted-foreground));
  margin-left: 2px; }
/* 固定高度：讓四張卡的規格列橫向對齊（無附註的方案填  ）*/
.s2-price-note { font-size: .78rem; line-height: 1.5; height: 1.5em;
  color: hsl(var(--muted-foreground)); margin-top: 6px; }
.s2-price-specs { list-style: none; margin: 18px 0 0; padding: 0; }
.s2-price-specs li { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: .84rem; padding: 9px 0; border-top: 1px solid hsl(var(--border)); }
.s2-price-specs li span { color: hsl(var(--muted-foreground)); }
.s2-price-specs li b { font-weight: 700; color: hsl(var(--foreground)); }
.s2-price-feats { list-style: none; margin: 12px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 8px; }
.s2-price-feats li { display: flex; gap: 8px; font-size: .82rem; line-height: 1.6;
  color: hsl(var(--foreground) / .82); }
.s2-price-feats li svg { flex-shrink: 0; margin-top: 3px; }
.s2-price-cta { margin-top: auto; padding-top: 22px; }
.s2-price-cta button { width: 100%; }

/* 附註列 */
.s2-price-notes { margin-top: 18px; border-radius: 1rem; padding: 16px 22px; display: flex;
  flex-wrap: wrap; gap: 8px 28px; justify-content: center; }
.s2-price-notes span { display: flex; align-items: center; gap: 10px; font-size: .82rem;
  color: hsl(var(--foreground) / .8); }
.s2-price-notes span + span::before { content: ""; width: 4px; height: 4px; border-radius: 9999px;
  background: hsl(var(--brand-purple) / .5); flex-shrink: 0; }

/* ── 首頁定價摘要（三卡精簡）────────────────────────────── */
.s2-teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.s2-price-card.mini { padding: 24px 22px; color: hsl(var(--foreground));
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.s2-price-card.mini:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised);
  color: hsl(var(--foreground)); }
.s2-price-go { margin-top: auto; padding-top: 18px; font-size: .8rem; font-weight: 600;
  color: hsl(var(--brand-purple)); }

/* ── FAQ 手風琴 ─────────────────────────────────────────── */
.s2-faq { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.s2-faq-item { padding: 0; overflow: hidden; }
.s2-faq-q { width: 100%; box-sizing: border-box; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 18px 22px; background: none; border: 0;
  cursor: pointer; font: inherit; font-size: .98rem; font-weight: 600; text-align: left;
  color: hsl(var(--foreground)); }
.s2-faq-q .ic { display: inline-flex; flex-shrink: 0; color: hsl(var(--muted-foreground));
  transition: transform .25s ease; }
.s2-faq-item.is-open .s2-faq-q { color: hsl(var(--brand-purple)); }
.s2-faq-item.is-open .s2-faq-q .ic { transform: rotate(180deg); color: hsl(var(--brand-purple)); }
.s2-faq-a { padding: 0 22px 20px; animation: s2-faq-in .25s ease; }
.s2-faq-a p { margin: 0; font-size: .9rem; line-height: 1.85;
  color: hsl(var(--muted-foreground)); text-wrap: pretty; }
@keyframes s2-faq-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .s2-faq-a { animation: none; }
  .s2-faq-q .ic { transition: none; }
}

/* ── 團隊工作情境（企業方案）────────────────────────────── */
.s2-relay { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.s2-relay-card { position: relative; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.s2-relay-card .no { font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  color: hsl(var(--brand-purple)); }
.s2-relay-card .who { display: flex; align-items: center; gap: 12px; }
.s2-relay-card .who img { width: 44px; height: 44px; border-radius: 9999px; object-fit: cover;
  background: hsl(var(--brand-purple-light)); flex-shrink: 0; }
.s2-relay-card .who b { display: block; font-size: 1rem; font-weight: 700; }
.s2-relay-card .who i { font-style: normal; font-size: .78rem; font-weight: 600;
  color: hsl(var(--brand-purple)); }
.s2-relay-card p { font-size: .85rem; line-height: 1.65; color: hsl(var(--muted-foreground));
  margin: 0; flex: 1; text-wrap: pretty; }
.s2-relay-card > .badge-purple { align-self: flex-start; }
.s2-relay-card:not(:last-child)::after { content: "→"; position: absolute; right: -16px;
  top: 50%; transform: translateY(-50%); font-size: .9rem;
  color: hsl(var(--brand-purple) / .55); pointer-events: none; }

/* ── 部署光譜：雲端 → 混合雲 → 地端 ────────────────────── */
.s2-spectrum { padding-top: 8px; }
.s2-spectrum .bar { height: 8px; border-radius: 9999px;
  background: linear-gradient(90deg, hsl(var(--brand-purple) / .2), hsl(var(--brand-purple))); }
.s2-spectrum .nodes { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.s2-spectrum .node { display: flex; align-items: center; gap: 8px; }
.s2-spectrum .node:nth-child(2) { justify-content: center; }
.s2-spectrum .node:nth-child(3) { justify-content: flex-end; }
.s2-spectrum .node .dot { width: 10px; height: 10px; border-radius: 9999px;
  background: hsl(var(--brand-purple)); flex-shrink: 0; }
.s2-spectrum .node b { font-size: .95rem; font-weight: 700; }

/* ── 三卡（安全合規）───────────────────────────────────── */
.s2-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.s2-tri-card { padding: 24px; }
.s2-tri-card h3 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem;
  font-weight: 700; margin: 0 0 8px; }
.s2-tri-card p { font-size: .875rem; line-height: 1.75; color: hsl(var(--muted-foreground));
  margin: 0; text-wrap: pretty; }

/* ── 導入時程軸 ─────────────────────────────────────────── */
.s2-timeline { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.s2-tl-item { position: relative; padding: 26px 18px 0 0;
  border-top: 2px solid hsl(var(--border)); }
.s2-tl-item .dot { position: absolute; top: -7px; left: 0; width: 12px; height: 12px;
  border-radius: 9999px; background: hsl(var(--brand-purple));
  box-shadow: 0 0 0 4px hsl(var(--brand-purple-light)); }
.s2-tl-item .when { font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  color: hsl(var(--brand-purple)); margin-bottom: 6px; }
.s2-tl-item .what { font-size: .95rem; font-weight: 600; }

/* ── RWD ───────────────────────────────────────────────── */
/* 導覽列六項：1081–1200px 收緊間距並隱藏 ⌘K 按鈕（快捷鍵仍可用） */
@media (max-width: 1200px) and (min-width: 1081px) {
  .s2-nav-in { gap: 20px; padding: 0 20px; }
  .s2-nav-links a { padding: 8px 10px; }
  .s2-kbd { display: none; }
}
@media (max-width: 1080px) {
  .s2-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .s2-cands { grid-template-columns: repeat(2, 1fr); }
  .s2-steps { grid-template-columns: 1fr; }
  .s2-tpl-strip { grid-template-columns: 1fr; }
  .s2-tpl-layout { grid-template-columns: 1fr; }
  .s2-tpl-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .s2-news-grid { grid-template-columns: 1fr; }
  .s2-featured { grid-template-columns: 1fr; }
  .s2-band-in { grid-template-columns: repeat(2, 1fr); }
  .s2-nav-links { display: none; }
  /* 導覽連結隱藏後失去 flex 撐開，右側動作區補 auto 邊界維持右對齊 */
  .s2-nav-cta { margin-left: auto; }
  .s2-tpl-cols { grid-template-columns: 1fr; }
  .s2-cta { grid-template-columns: 1fr; padding: 40px 32px; }
  .s2-price-grid { grid-template-columns: repeat(2, 1fr); }
  .s2-teaser-grid { grid-template-columns: 1fr; }
  .s2-relay { grid-template-columns: repeat(2, 1fr); }
  .s2-relay-card:not(:last-child)::after { display: none; }
  .s2-tri { grid-template-columns: 1fr; }
  .s2-timeline { grid-template-columns: repeat(2, 1fr); }
  .s2-tl-item { padding-bottom: 24px; }
}
@media (max-width: 640px) {
  /* 既有問題修正：≤640px 時導覽右側三顆擠爆版心（登入／免費開始被切掉、文字折成三行）。
     隱藏「快速導覽」按鈕（⌘K 快捷鍵仍可用）並收齊左右留白。 */
  .s2-nav-in { padding: 0 20px; gap: 16px; }
  .s2-kbd { display: none; }
  .s2-cands { grid-template-columns: 1fr; }
  .s2-quads { grid-template-columns: 1fr; }
  .s2-section { padding: 64px 0; }
  .s2-wide, .s2-std { padding: 0 20px; }
  .s2-article { padding: 28px 22px; }
  .s2-price-grid { grid-template-columns: 1fr; }
  .s2-relay { grid-template-columns: 1fr; }
  .s2-spectrum .nodes { grid-template-columns: 1fr; gap: 10px; }
  .s2-spectrum .node,
  .s2-spectrum .node:nth-child(2),
  .s2-spectrum .node:nth-child(3) { justify-content: flex-start; }
  .s2-timeline { grid-template-columns: 1fr; }
  .s2-tl-item { border-top: none; border-left: 2px solid hsl(var(--border));
    padding: 0 0 22px 22px; }
  .s2-tl-item:last-child { padding-bottom: 0; }
  .s2-tl-item .dot { top: 2px; left: -7px; }
}


/* ============================================================================
   SUPER 8 Studio Design System v1.1 — 對齊層
   兩套 DS 衝突時一律以 S8S 為準：用色、字體、圓角、陰影、動態、CTA、員工圖示。
   做法：把 Orra DS 的語意 token 重新指向 S8S 品牌值，全站沿用既有 class 自動生效。
   ========================================================================== */

/* ── 用色：品牌紫 = --s8-purple #5E00FF；淡色底 = Mist #F4F5FF ────────── */
:root {
  --brand-purple: 262 100% 50%;        /* #5E00FF PANTONE 2368C */
  --brand-purple-light: 235 100% 98%;  /* Mist #F4F5FF — 系統唯一的著色底 */
  --brand-purple-medium: 256 100% 88%; /* purple-200 #D2C2FF */
  --ring: 262 100% 50%;
  --shadow-glow-brand: var(--shadow-md);
  --shadow-raised: var(--shadow-lg);
}

/* ── 字體：Roboto（拉丁）／Noto Sans TC（中文）；顯示級字距收緊 ──────── */
.s2-h1 { letter-spacing: var(--tracking-tightest); line-height: 1.08; }
.s2-h2 { letter-spacing: var(--tracking-tight); }
.s2-eyebrow { letter-spacing: var(--tracking-widest); font-weight: 500;
  color: var(--s8-purple); }
.s2-lede, .s2-hero-sub { line-height: var(--leading-relaxed); }
.s2-accent { color: var(--s8-purple); }

/* ── 卡片：20px 圓角、1px 細線、預設無陰影；hover 才 2px 抬升 ────────── */
.glass-card, .glass-card-glow, .lavender-card, .s2-faq-item, .s2-price-card,
.s2-tpl-card, .s2-tri-card, .s2-relay-card, .s2-news-card, .s2-featured,
.s2-article, .s2-cand, .s2-step, .s2-tpl-mini, .s2-cta, .s2-price-notes {
  border-radius: var(--radius-xl); box-shadow: none;
}
.s2-cand:hover, .s2-tpl-mini:hover, .s2-news-card:hover, .s2-featured:hover,
.s2-price-card.mini:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-lg);
}
.s2-price-card.is-featured { border-color: var(--s8-purple); box-shadow: none; }
.s2-quad, .s2-step .vig, .s2-prompt pre { border-radius: var(--radius-lg); }

/* ── 動作＝藥丸；輸入＝8px（S8S：欄位絕不長得像按鈕）────────────────── */
.suggestion-chip, .s2-pill, .badge-purple, .s2-kbd kbd { border-radius: var(--radius-pill); }
.s2-kbd { border-radius: var(--radius-md); }
.sidebar-nav-item { border-radius: var(--radius-pill); }

/* ── CTA：全站唯一入口 —— S8S Button（shell.jsx 的 <CTA>）─────────────
   文字型 CTA 用 .s2-linkcta，Lucide arrow-right，不使用 → 字符。 */
.s2-linkcta { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem;
  font-weight: 500; color: var(--s8-purple); letter-spacing: var(--tracking-tight);
  white-space: nowrap; }
.s2-linkcta svg { transition: transform var(--duration-fast) var(--ease-standard); }
.s2-body a:hover .s2-linkcta, .s2-linkcta:hover { color: var(--purple-600); }
.s2-body a:hover .s2-linkcta svg, .s2-linkcta:hover svg { transform: translateX(3px); }
.s2-cta .actions, .s2-hero-ctas { gap: 12px; }
.s2-cta-center { display: flex; justify-content: center; margin-top: 32px; }
.s2-price-cta > * { width: 100%; }

/* ── 焦點：3px 紫色光暈，不用系統 outline ──────────────────────────── */
.s2-body button:focus-visible, .s2-body a:focus-visible,
.s2-body [role="button"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── ORRA AI 員工圖示：只落在白底或 Mist，永不落在品牌紫；不加投影 ──── */
.s2-cand .photo { background: var(--s8-mist); place-items: center; height: 172px; }
.s2-cand .photo img { height: 132px; filter: none; }
.s2-cand:hover .photo img { transform: scale(1.04); }
.s2-news-card .cover, .s2-featured .cover, .s2-article .art-cover {
  background: var(--s8-mist); place-items: center; }
.s2-news-card .cover img, .s2-featured .cover img, .s2-article .art-cover img { filter: none; }
.s2-news-card .cover .duo, .s2-article .art-cover .duo { align-items: center; padding-top: 0; }
.s2-face-row img, .s2-profile-head img, .s2-tpl-head .top img, .s2-relay-card .who img,
.s2-cand .photo, .s2-agent-av { background: var(--s8-mist); }
.s2-face-row img { border-color: var(--s8-white); }

/* ── Logo：ORRA 主標最小 120px 寬；標誌不加陰影 ─────────────────────── */
.s2-nav-logo img { height: 28px; }
.s2-footer-brand img.orra { height: 26px; margin-bottom: 14px; }
.s2-poweredby { display: flex; align-items: center; gap: 10px; margin-top: 20px;
  font-size: 11px; font-weight: 500; letter-spacing: var(--tracking-widest);
  text-transform: uppercase; color: var(--text-muted); }
.s2-poweredby img { height: 20px; display: block; }
.s2-copy .s8 { color: var(--text-muted); }

/* ── 純紫 CTA 帶：Mist 底 + 紫色細線（禁止整片鋪滿品牌紫）───────────── */
.s2-cta .mark { opacity: .08; }

.s2-tpl-blank { width: 56px; height: 56px; border-radius: var(--radius-circle);
  background: var(--s8-mist); border: 1px solid var(--border-subtle);
  display: inline-grid; place-items: center; flex-shrink: 0; }