/* DyeMatch 客户故事页样式
   注意：本站 CSP 为 style-src 'self'，禁止内联样式，
   本文件必须在 server.js 的 publicFiles 白名单中登记才能被访问。 */

/* 案例页不加载 app.js，固定页头没有 .scrolled 过渡，直接用实底保证文字可读 */
.site-header { background: #102733; border-bottom-color: rgba(255, 255, 255, .12); }

body { background: #ffffff; }

/* ---------- Hero ---------- */
.story-hero { padding: 140px clamp(24px, 8vw, 150px) 72px; background: #102733; color: white; }
.story-hero .eyebrow { color: #5dc4c2; }
.story-hero h1 { font-size: clamp(34px, 4.5vw, 58px); line-height: 1.25; margin: 0 0 22px; max-width: 820px; }
.story-intro { color: #c0cdd3; font-size: 17px; line-height: 1.9; max-width: 640px; margin: 0; }
.story-meta { margin-top: 34px; display: flex; gap: 24px; color: #9eb1ba; font-size: 13px; }

/* ---------- 正文 ---------- */
.story-body { max-width: 760px; margin: 0 auto; padding: 72px clamp(24px, 6vw, 40px) 40px; }
.story-body h2 { font-size: 26px; line-height: 1.4; margin: 64px 0 18px; color: var(--ink); }
.story-body h2:first-child { margin-top: 0; }
.story-body p { font-size: 16.5px; line-height: 2.05; margin: 0 0 20px; color: #2c3d47; }
.story-body strong { color: var(--ink); }
.story-quote { margin: 36px 0; padding: 22px 26px; border-left: 4px solid var(--teal); background: #f2f8f8; color: #1d4a52; font-size: 16px; line-height: 1.9; }
.story-points { list-style: none; padding: 0; margin: 30px 0; }
.story-points li { position: relative; padding: 14px 0 14px 30px; border-bottom: 1px solid #e3eaee; font-size: 16px; line-height: 1.85; color: #2c3d47; }
.story-points li::before { content: ""; position: absolute; left: 2px; top: 26px; width: 9px; height: 9px; background: var(--teal); }
.story-note { margin: 48px 0 0; padding: 24px 28px; background: #f7fafb; border: 1px solid #dbe5ea; font-size: 14px; line-height: 1.9; color: var(--muted); }
.story-note strong { color: var(--ink); }

/* ---------- 底部行动区 ---------- */
.story-cta { margin-top: 80px; padding: 54px clamp(24px, 8vw, 150px); background: #f2f8f8; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.story-cta h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 10px; }
.story-cta p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.story-cta-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.story-cta .text-link { color: var(--teal); }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  /* styles.css 在 ≤1100px 隐藏导航和头部按钮（首页由汉堡菜单接替）；
     案例页没有汉堡菜单，改为只留品牌 + 申请试用 */
  .site-header nav { display: none; }
  .site-header .desktop-header-actions { display: flex; margin-left: auto; }
}

@media (max-width: 720px) {
  .story-hero { padding: 116px 24px 52px; }
  .story-meta { flex-direction: column; gap: 8px; }
  .story-body { padding-top: 52px; }
  .story-cta { padding: 44px 24px; }
  .story-cta-actions { width: 100%; }
}