/* ═══════════════════════════════════════════════════════════
   You Say Landing — 實作層樣式
   Token 值同步自 docs/brand/tokens.css v2.1（顯影）；命名沿用 --ms-*。
   規格：docs/marketing/landing-spec.md V3.4（§四視覺設計規格）
   ═══════════════════════════════════════════════════════════ */
:root {
  --ms-silk-100: #F3F3ED;  --ms-silk-200: #EAEAE1;
  --ms-paper-0: #FBFBF7;   --ms-hairline: #E0DFD3;
  --ms-noir-900: #101814;  --ms-jade-800: #1C382F;
  --ms-ink: #1B2420;       --ms-ink-2: #5F6A62;
  --ms-gold-700: #8A7040;  --ms-gold-400: #C6AC72;  --ms-gold-100: #EFE9DA;
  --ms-on-dark: #F0EFE7;   --ms-on-dark-2: #A9B3A7;
  --ms-hairline-dark: rgba(240, 239, 231, .18);
  --ms-vermilion-400: #D14E36;
  --ms-seal-text: #F6F1E7;
  --ms-font-display: "Noto Serif TC", "Songti TC", serif;
  --ms-font-latin: "Didot", "Cormorant Garamond", Georgia, serif;
  --ms-font-body: "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --ms-font-script: "Nothing You Could Do", cursive;
  --ms-r-ctrl: 3px;  --ms-r-card: 4px;
  --ms-dur-base: 300ms;
  --ms-ease: cubic-bezier(.16, 1, .3, 1);
  --section-pad: clamp(64px, 4rem + 3vw, 104px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ms-silk-100); color: var(--ms-ink);
       font-family: var(--ms-font-body); font-size: 15px; line-height: 1.85; }
img { max-width: 100%; display: block; }
.shell { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ── 共用元件 ── */
/* 標題與導語換行配平：避免行動版孤字行（「⋯這七/站」）；不支援的瀏覽器自動忽略 */
.h2, .hero h1, .h3-sub, .lede, .quality-line,
.manifesto .big, .manifesto .small, .works-origin, .film .subline { text-wrap: balance; }
.nb { display: inline-block; } /* 詞組不可拆：斷行只落在標點後 */
.kicker { font-family: var(--ms-font-latin); font-size: 12px; letter-spacing: .3em;
          color: var(--ms-gold-700); text-transform: uppercase; text-align: center; }
.h2 { font-family: var(--ms-font-display); font-weight: 600;
      font-size: clamp(26px, 1.2rem + 1.5vw, 34px);
      letter-spacing: .1em; text-align: center; margin-top: 16px; line-height: 1.6; }
.lede { text-align: center; margin-top: 16px; color: var(--ms-ink-2);
        letter-spacing: .06em; }
section { padding: var(--section-pad) 0; }
.paper-band { background: var(--ms-paper-0);
              border-top: 1px solid var(--ms-hairline);
              border-bottom: 1px solid var(--ms-hairline); }
.noir-surface { background: var(--ms-noir-900); color: var(--ms-on-dark); position: relative; }
.noir-surface::after { content: ""; position: absolute; inset: 20px;
                       border: 1px solid var(--ms-hairline-dark); pointer-events: none; }
.noir-surface .shell { position: relative; z-index: 1; }

.btn-primary { display: inline-block; background: var(--ms-noir-900); color: var(--ms-on-dark);
               padding: 16px 48px; font-size: 14px; letter-spacing: .14em;
               border-radius: var(--ms-r-ctrl); text-decoration: none;
               transition: background 150ms ease, transform 150ms ease; }
.btn-primary:hover { background: var(--ms-jade-800); }
.btn-primary:active { transform: translateY(1px); }
.btn-gold { display: inline-block; padding: 12px 26px; border: 1px solid var(--ms-gold-700);
            color: var(--ms-gold-700); font-size: 13px; letter-spacing: .14em;
            border-radius: var(--ms-r-ctrl); text-decoration: none;
            transition: background 150ms ease; }
.btn-gold:hover { background: var(--ms-gold-100); }
.btn-gold.big { padding: 14px 36px; }
.btn-gold-dark { display: inline-block; padding: 10px 22px; border: 1px solid var(--ms-gold-400);
                 color: var(--ms-gold-400); font-size: 12.5px; letter-spacing: .14em;
                 border-radius: var(--ms-r-ctrl); text-decoration: none;
                 transition: background 150ms ease; }
.btn-gold-dark:hover { background: rgba(198, 172, 114, .12); }
.btn-gold-dark.big { padding: 14px 34px; font-size: 13.5px; }
.textlink { color: var(--ms-ink); text-decoration: underline; text-underline-offset: 6px;
            text-decoration-color: var(--ms-gold-700); }
.textlink-dark { color: var(--ms-on-dark-2); font-size: 13.5px; letter-spacing: .1em;
                 text-decoration: underline; text-underline-offset: 6px;
                 text-decoration-color: var(--ms-gold-400); }
:focus-visible { outline: 2px solid var(--ms-gold-700); outline-offset: 2px; }

/* ── 導覽列（I4） ── */
.topnav { background: var(--ms-noir-900); border-bottom: 1px solid var(--ms-hairline-dark);
          position: sticky; top: 0; z-index: 10; }
.topnav nav { height: 68px; display: flex; align-items: center; justify-content: space-between; }
.nav-lockup { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.nav-wm { font-family: var(--ms-font-script); font-size: 25px; color: var(--ms-on-dark); }
.frame-back { stroke: var(--ms-gold-400); }
.frame-front { stroke: var(--ms-on-dark); }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-plain { color: var(--ms-on-dark-2); font-size: 13.5px; letter-spacing: .14em;
             text-decoration: none; transition: color 150ms ease; }
.nav-plain:hover { color: var(--ms-gold-400); }

/* ── Hero ── */
.hero { padding: 84px 0 96px; }
.hero .shell { text-align: center; }
.film { width: min(860px, 100%); aspect-ratio: 16/9; margin: 0 auto; position: relative;
        background: linear-gradient(160deg, #18231D 0%, #101814 55%, #16201B 100%);
        outline: 1px solid var(--ms-hairline-dark); display: grid; place-items: center; }
.film .ph-label { position: absolute; top: 16px; left: 18px; font-size: 11px;
                  letter-spacing: .2em; color: var(--ms-on-dark-2); }
.film .play { width: 80px; height: 80px; border-radius: 50%; color: var(--ms-gold-400);
              border: 1px solid var(--ms-gold-400); display: grid; place-items: center; }
.film .play svg { margin-left: 5px; }
.film .subline { position: absolute; bottom: 20px; left: 12px; right: 12px; text-align: center;
                 font-family: var(--ms-font-display); font-weight: 600;
                 font-size: clamp(15px, .8rem + .6vw, 19px);
                 letter-spacing: .12em; opacity: .92; }
.hero h1 { font-family: var(--ms-font-display); font-weight: 600;
           font-size: clamp(27px, 1.2rem + 2.2vw, 46px);
           letter-spacing: .06em; line-height: 1.6; margin-top: 52px; }
.hero-sub { margin-top: 18px; font-size: clamp(14px, .8rem + .3vw, 17px);
            letter-spacing: .08em; color: var(--ms-on-dark-2); }
.cta-row { margin-top: 38px; display: flex; gap: 26px; justify-content: center;
           align-items: center; flex-wrap: wrap; }

/* ── 故事方向靈感（非互動標籤） ── */
.idea-tags { margin: 44px auto 0; max-width: 860px; list-style: none;
             display: flex; flex-wrap: wrap; gap: 14px 16px; justify-content: center; }
.idea-tags li { padding: 10px 24px; border: 1px solid var(--ms-hairline);
                border-radius: var(--ms-r-ctrl); background: var(--ms-paper-0);
                font-size: 13.5px; letter-spacing: .1em; color: var(--ms-ink-2); }
.idea-tags li:nth-child(3n) { border-color: var(--ms-gold-400); color: var(--ms-gold-700); }

/* ── 方案 A｜B｜C ── */
.plan-wrap { margin-top: 60px; display: grid; grid-template-columns: 300px 1fr 300px;
             gap: 26px; align-items: start; }
.plan-side, .plan-b { background: var(--ms-paper-0); border: 1px solid var(--ms-hairline);
                      border-radius: var(--ms-r-card); }
.plan-side { padding: 34px 32px; position: relative; }
.plan-b { padding: 48px 52px; position: relative; }
.plan-b::after { content: ""; position: absolute; inset: 14px;
                 border: 1px solid var(--ms-gold-700); opacity: .45; pointer-events: none; }
.tag { display: inline-block; font-size: 11px; letter-spacing: .18em; padding: 5px 12px;
       border: 1px solid; border-radius: 2px; }
.tag-gold { color: var(--ms-gold-700); border-color: var(--ms-gold-700); background: var(--ms-gold-100); }
.tag-quiet { color: var(--ms-ink-2); border-color: var(--ms-hairline); }
.plan-b .name { margin-top: 16px; font-family: var(--ms-font-display); font-weight: 600;
                font-size: 28px; letter-spacing: .1em; }
.plan-side .name { margin-top: 14px; font-family: var(--ms-font-display); font-weight: 600;
                   font-size: 21px; letter-spacing: .1em; }
.oneline { margin-top: 11px; color: var(--ms-ink-2); line-height: 1.9; }
.plan-side .oneline { font-size: 13.5px; }
.mini { margin-top: 16px; font-size: 13px; line-height: 2; color: var(--ms-ink-2); }
.spec-list { margin-top: 28px; border-top: 1px solid var(--ms-hairline); }
.spec-list .row { display: flex; justify-content: space-between; gap: 16px;
                  padding: 12px 2px; border-bottom: 1px solid var(--ms-hairline); font-size: 14px; }
.spec-list dt { color: var(--ms-ink-2); letter-spacing: .06em; white-space: nowrap; }
.spec-list dd { font-weight: 500; text-align: right; }
.price-row { margin-top: 28px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.price { font-family: var(--ms-font-latin); font-size: 42px; letter-spacing: .04em;
         color: var(--ms-gold-700); font-variant-numeric: tabular-nums; }
.price.small { font-size: 24px; margin-top: 16px; }
.price .qi { font-size: 16px; }
.price-was, .was-line { color: var(--ms-ink-2); font-size: 14px; }
.was-line { margin-top: 4px; font-size: 12.5px; }
.offer-label { margin-top: 20px; font-size: 11.5px; letter-spacing: .22em;
               color: var(--ms-gold-700); }
.offer-label + .price, .offer-label + .price-row { margin-top: 6px; }
.offer-label + .price.small { margin-top: 6px; }
.works-origin { margin: 44px auto 0; max-width: 720px; text-align: center;
                font-size: 15px; line-height: 2.2; letter-spacing: .08em;
                color: var(--ms-ink-2); }
.works-origin em { font-style: normal; color: var(--ms-ink);
                   font-family: var(--ms-font-display); font-weight: 600; }
.deposit { margin-top: 22px; font-size: 14px; }
.deposit b { color: var(--ms-gold-700); font-weight: 600; }
.plan-b .btn-gold { margin-top: 26px; }
.plan-side .btn-gold { margin-top: 20px; }
.quality-line { margin-top: 44px; text-align: center; font-family: var(--ms-font-display);
                font-weight: 600; font-size: clamp(15px, .8rem + .5vw, 19px);
                letter-spacing: .1em; }

/* ── Work 01 ── */
.works { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 52px; }
.work .imgbox { display: block; aspect-ratio: 4/5; position: relative; overflow: hidden;
                outline: 1px solid var(--ms-hairline); background: #E9E7DC; }
.work img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work .fr { position: absolute; inset: 12px; border: 1px solid rgba(251, 251, 247, .5); }
.work figcaption { margin-top: 14px; text-align: center; font-size: 13px;
                   letter-spacing: .1em; line-height: 1.9; }
.work figcaption i { font-style: normal; color: var(--ms-ink-2); font-size: 12px; }
/* ── 製作旅程（七站，含三個 Lock；原四步流程併入） ── */
.journey-head { margin-top: 84px; scroll-margin-top: 84px; }
.h3-sub { margin-top: 14px; text-align: center; font-family: var(--ms-font-display);
          font-weight: 600; font-size: clamp(21px, 1rem + 1vw, 26px);
          letter-spacing: .1em; line-height: 1.7; }
.journey { margin: 48px auto 0; max-width: 780px; list-style: none;
           border-top: 1px solid var(--ms-hairline); }
.journey li { display: flex; gap: 30px; padding: 28px 6px;
              border-bottom: 1px solid var(--ms-hairline); }
.journey .no { font-family: var(--ms-font-latin); font-size: 15px; letter-spacing: .2em;
               color: var(--ms-gold-700); padding-top: 4px; }
.journey .t { font-family: var(--ms-font-display); font-weight: 600;
              font-size: 17.5px; letter-spacing: .08em; line-height: 1.6; }
.journey .d { margin-top: 8px; font-size: 13.5px; line-height: 1.95; color: var(--ms-ink-2); }
.journey .lock { margin-top: 12px; display: inline-block; font-size: 11px; letter-spacing: .14em;
                 color: var(--ms-gold-700); border: 1px solid var(--ms-gold-700);
                 border-radius: 2px; padding: 4px 9px; background: var(--ms-gold-100); }

/* ── 品質宣言 ── */
.manifesto { padding: clamp(80px, 5rem + 2vw, 120px) 0; }
.manifesto .big { text-align: center; font-family: var(--ms-font-display); font-weight: 600;
                  font-size: clamp(24px, 1.1rem + 1.8vw, 36px);
                  letter-spacing: .1em; line-height: 1.8; }
.manifesto .small { margin-top: 28px; text-align: center; font-size: 15px; line-height: 2.1;
                    letter-spacing: .08em; color: var(--ms-on-dark-2);
                    max-width: 700px; margin-left: auto; margin-right: auto; }
.manifesto em { font-style: normal; color: var(--ms-gold-400); }

/* ── 常見問題 ── */
.faq-list { margin: 48px auto 0; max-width: 780px; border-top: 1px solid var(--ms-hairline); }
.faq { border-bottom: 1px solid var(--ms-hairline); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px;
               padding: 22px 8px; cursor: pointer; list-style: none;
               font-family: var(--ms-font-display); font-weight: 600;
               font-size: 16.5px; letter-spacing: .08em; line-height: 1.7;
               transition: color 150ms ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; color: var(--ms-gold-700); font-size: 17px;
                      flex-shrink: 0; transition: transform var(--ms-dur-base) var(--ms-ease); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--ms-gold-700); }
.faq p { padding: 0 8px 26px; max-width: 680px; font-size: 14px; line-height: 2;
         color: var(--ms-ink-2); }

/* ── CTA ── */
.cta-final { text-align: center; }
.cta-final .deposit { margin-top: 22px; color: var(--ms-ink-2); }
.cta-final .btn-primary { margin-top: 34px; }

/* ── 頁尾（I6 落款） ── */
footer { background: var(--ms-noir-900); color: var(--ms-on-dark-2); padding: 84px 0 60px; }
.foot-lockup { display: flex; align-items: center; gap: 26px; justify-content: center; }
.seal-bg { fill: var(--ms-vermilion-400); }
.seal-txt { font-family: "Songti TC", "Noto Serif TC", serif; font-weight: 600;
            font-size: 22px; fill: var(--ms-seal-text); }
.foot-latin { font-family: var(--ms-font-latin); font-size: 28px; letter-spacing: .34em;
              color: var(--ms-on-dark); }
.foot-sub { font-family: var(--ms-font-latin); font-size: 11.5px; letter-spacing: .32em;
            color: var(--ms-gold-400); margin-top: 8px; }
.foot-tag { text-align: center; margin-top: 32px; font-family: var(--ms-font-display);
            font-weight: 600; font-size: 15px; letter-spacing: .3em; }
.foot-links { margin-top: 38px; display: flex; gap: 34px; justify-content: center;
              flex-wrap: wrap; font-size: 12.5px; letter-spacing: .14em; }
.foot-links a { color: var(--ms-on-dark-2); text-decoration: none; transition: color 150ms ease; }
.foot-links a:hover { color: var(--ms-gold-400); }
.foot-fine { margin-top: 34px; text-align: center; font-size: 11.5px; letter-spacing: .1em;
             opacity: .7; line-height: 2; }

/* ── 進場動態（尊重 reduced-motion） ── */
@media (prefers-reduced-motion: no-preference) {
  .fade-in { opacity: 0; transform: translateY(14px);
             transition: opacity var(--ms-dur-base) var(--ms-ease),
                         transform var(--ms-dur-base) var(--ms-ease); }
  .fade-in.vis { opacity: 1; transform: none; }
}

/* ══ 響應式 ══ */
@media (max-width: 1024px) {
  .plan-wrap { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
  .plan-b { order: -1; }             /* 行動與窄幅：B 先出現 */
  .works { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .shell { padding: 0 20px; }
  .desk-br { display: none; }
  .nav-plain { display: none; }      /* 行動版導覽只留 wordmark＋CTA */
  .plan-b { padding: 36px 26px; }
  .spec-list .row { flex-direction: column; gap: 2px; }
  .spec-list dd { text-align: left; }
  .hero { padding: 56px 0 64px; }
  .noir-surface::after { inset: 12px; }
  .idea-tags li { padding: 9px 18px; font-size: 13px; }
  .journey li { gap: 20px; }
}
@media (max-width: 480px) {
  .works { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .film .play { width: 60px; height: 60px; }
}