/* 帧工坊落地页样式 */
.lp-header{background:#fff;border-bottom:1px solid #e8ecf3;position:sticky;top:0;z-index:50}
/* 头部比正文（.lp-wrap 960px）宽一档：11 项导航塞进 960 会被挤到换行
 * （曾出现「视频转序列/帧」这种字内折行）。正文保持 960 不动，头部放宽是常见做法。 */
.lp-header-inner{max-width:1200px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:12px}
.lp-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.lp-mark{width:32px;height:32px;border-radius:9px;object-fit:cover;display:block;flex-shrink:0}
.lp-brand-name{font-weight:700;font-size:15.5px}
/* ⚠️ white-space:nowrap 必须有：导航项被 flex 压缩时，浏览器会在字与字之间折行，
 *    看起来就是「视频转序列 / 帧」两行，比溢出还难看。宁可整体溢出，由下面的断点收窄。 */
.lp-nav{margin-left:auto;display:flex;gap:16px;font-size:13px;flex-wrap:nowrap}
.lp-nav a{color:#5b667a;text-decoration:none;white-space:nowrap}
.lp-nav a:hover{color:var(--primary)}
/* 当前所在的子工具：高亮且不可点，让用户一眼知道"我在哪个子页面、另外几个怎么切" */
.lp-nav .cur{color:var(--primary);font-weight:600;cursor:default;white-space:nowrap}
.lp-wrap{max-width:960px;margin:0 auto;padding:32px 20px 60px}
.lp-hero h1{font-size:30px;line-height:1.35;margin:0 0 14px}
.lp-hero .lead{font-size:15px;line-height:1.9;color:#4a5468;margin:0 0 20px}
.lp-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#7c5cff,#9b7bff);color:#fff;text-decoration:none;padding:12px 24px;border-radius:10px;font-size:15px;font-weight:600;box-shadow:0 4px 14px rgba(124,92,255,.28)}
.lp-cta:hover{opacity:.92}
.lp-note{font-size:12.5px;color:#8a94a6;margin-top:12px}
.lp-section{margin-top:40px}
.lp-section h2{font-size:20px;margin:0 0 14px}
.lp-section h3{font-size:15.5px;margin:20px 0 8px}
.lp-section p,.lp-section li{font-size:14.5px;line-height:1.9;color:#4a5468}
.lp-section ol,.lp-section ul{padding-left:22px;margin:8px 0}
.lp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}
.lp-card{background:#fff;border:1px solid #e8ecf3;border-radius:12px;padding:16px}
.lp-card h3{margin:0 0 6px;font-size:15px}
.lp-card p{margin:0;font-size:13.5px;color:#5b667a;line-height:1.75}
.faq-item{background:#fff;border:1px solid #e8ecf3;border-radius:12px;padding:16px 18px;margin-bottom:10px}
.faq-item h3{margin:0 0 8px;font-size:15px;color:#1f2937}
.faq-item p{margin:0;font-size:14px;color:#4a5468;line-height:1.85}
.lp-related{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.lp-related a{font-size:13.5px;color:var(--info-text);text-decoration:none;border:1px solid var(--info-line);background:var(--info-bg);border-radius:20px;padding:6px 14px}
.lp-related a:hover{background:var(--primary-soft)}
.lp-footer{border-top:1px solid #e8ecf3;padding:24px 20px 40px;text-align:center;font-size:12.5px;color:#8a94a6}
.lp-footer a{color:#8a94a6}
/* 页脚联系方式：颜色一律继承，深色下由下面那段统一切到 --text-3 */
.lp-footer .footer-contact{margin-top:8px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
.lp-footer .footer-contact b{color:#5b667a;font-weight:600;letter-spacing:.3px}
.lp-footer .footer-contact a{color:var(--primary);text-decoration:none}
.lp-footer .footer-contact a:hover{text-decoration:underline}

/* ============================================================
   落地页深色
   ------------------------------------------------------------
   落地页同时加载了 style.css，所以能直接复用那套令牌。
   这里只补 landing.css 自己那批硬编码色（白卡片、浅灰正文等）。
   主题由 theme-init.js 在 <head> 里同步设置，避免刷新时闪一下白。
   ============================================================ */
[data-theme="dark"] .lp-header{background:var(--bg-panel);border-bottom-color:var(--border)}
[data-theme="dark"] .lp-nav a{color:var(--text-2)}
[data-theme="dark"] .lp-nav a:hover{color:var(--accent)}
[data-theme="dark"] .lp-nav .cur{color:var(--accent)}
[data-theme="dark"] .lp-hero .lead,
[data-theme="dark"] .lp-section p,
[data-theme="dark"] .lp-section li{color:var(--text-2)}
[data-theme="dark"] .lp-card,
[data-theme="dark"] .faq-item{background:var(--bg-panel);border-color:var(--border)}
[data-theme="dark"] .faq-item h3{color:var(--text-1)}
[data-theme="dark"] .faq-item p,
[data-theme="dark"] .lp-card p{color:var(--text-2)}
[data-theme="dark"] .lp-note,
[data-theme="dark"] .lp-footer,
[data-theme="dark"] .lp-footer a,
[data-theme="dark"] .lp-footer .footer-contact b{color:var(--text-3)}
[data-theme="dark"] .lp-footer{border-top-color:var(--border)}
[data-theme="dark"] .lp-footer .footer-contact a{color:var(--accent)}
[data-theme="dark"] .lp-related a{background:var(--info-bg);border-color:var(--info-line);color:var(--info-text)}

/* ============================================================
   窄屏导航
   ------------------------------------------------------------
   5 项（4 个子工具 + 打开工具）在 390px 上会被挤成竖排一个字一列。
   窄屏只留「当前页」高亮 + 「打开工具」，其余横跳靠页面底部的
   .lp-related 区块（每个落地页都有，内链SEO不受影响）。
   ============================================================ */
/* 中等宽度：11 项开始放不下，先收窄间距和字号（此时仍能一行放下） */
@media (max-width:1060px){
  .lp-nav{gap:11px;font-size:12.5px}
}
/* 再窄就真的放不下了：只留「当前页」高亮 + 「打开工具」 */
@media (max-width:900px){
  .lp-header-inner{padding:10px 16px}
  .lp-brand-name{font-size:14.5px}
  .lp-nav{gap:12px;font-size:13px}
  .lp-nav a:not([href^="index.html"]){display:none}
}