/* ============================================================
   Purcell Softfilm — design system
   方向：明亮生活方式。暖白底 + 衬线大标题（Fraunces）+ 影像主导。
   与 purcellglass 的深色精密、purcellfinishing 的白底目录刻意拉开。
   本文件不与其他站共享任何一行。
   注：CSP 为 style-src 'self'，禁止任何内联 style。
   类型尺度（2026-10-09）：显示级 h1/h2/h3 归入 1.32 阶梯；正文级收敛为 4 档。
   ============================================================ */

@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/fraunces-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
}

:root{
  --bg:#fdfbf7;
  --bg2:#f2e6d6;
  --card:#ffffff;
  --line:#ded0bc;
  --line2:#c6b39c;
  --ink:#1a1917;
  --ink2:#4f4941;
  --ink3:#6f6659;
  --orange:#ff6a3d;
  --orange-ink:#b53a19;
  --orange-d:#e2532a;
  --teal:#0fb5a1;
  --r:18px;
  --r-lg:26px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --maxw:1180px;
  --gut:26px;
  --sh:0 12px 34px rgba(26,25,23,.08);
  /* 类型尺度令牌：显示级用整段 clamp，正文级用固定值。
     正文原为手写 9 档（17/16.5/15.5/15/14.5/13.5/13/12/11.5），其中 5 处相邻差 <6%。 */
  --fs-h1:clamp(32px,4.6vw,56px);
  --fs-h2:clamp(28px,3.4vw,42px);
  --fs-h3:clamp(23px,2.6vw,32px);
  --fs-lead:17px;
  --fs-sm:15.5px;
  --fs-xs:13.5px;
  --fs-micro:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:var(--fs-lead)/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* 待补数据占位 */
.ph{color:var(--ink3);border-bottom:1px dashed var(--line2)}

/* 只给读屏与搜索引擎看的文本（规格表 caption 用） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* 小标签（无药丸，保持编辑感） */
.tag{font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--orange-ink)}

/* ---------- 顶栏 ---------- */
.util{background:var(--bg2);font-size:var(--fs-xs);color:var(--ink2);border-bottom:1px solid var(--line)}
.util .wrap{display:flex;align-items:center;gap:20px;height:40px;flex-wrap:wrap}
.util .sp{margin-left:auto;display:flex;gap:20px}
.util a:hover{color:var(--ink)}

/* ---------- 注入的页头 ---------- */
.sf-header{position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--line2);box-shadow:0 10px 22px -18px rgba(26,25,23,.55)}
.sf-header .wrap{display:flex;align-items:center;gap:34px;height:74px}
.sf-logo{display:flex;align-items:baseline;gap:9px;font:600 21px/1 var(--serif);letter-spacing:-.01em}
.sf-logo .sub{font:600 9.5px/1 var(--sans);letter-spacing:.22em;color:var(--orange-ink)}
.sf-menu{display:flex;gap:30px;margin-left:12px}
.sf-menu a{font-size:var(--fs-sm);color:var(--ink2);padding:6px 0;transition:.15s}
.sf-menu a:hover{color:var(--orange-ink)}
.sf-cta{margin-left:auto;display:flex;gap:12px;align-items:center}
.sf-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line2);color:var(--ink);
  border-radius:100px;padding:9px 16px;font:600 var(--fs-micro)/1 var(--sans);cursor:pointer}

/* ---------- 按钮：全圆角，暖橙 ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:100px;
  font:600 var(--fs-sm)/1 var(--sans);border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap}
.btn-primary{background:var(--orange);color:var(--ink);box-shadow:0 8px 22px rgba(255,106,61,.32)}
.btn-primary:hover{background:var(--orange-d);color:var(--ink);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line2);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--ink);}
.btn-sm{padding:10px 18px;font-size:var(--fs-xs)}

/* ---------- Hero：大影像 + 衬线标题 ---------- */
.hero{position:relative;padding:0 0 0;background:var(--bg)}
.hero-media{position:relative;height:min(66vh,560px);overflow:hidden;
  border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,25,23,.05) 0%,rgba(26,25,23,.42) 100%)}
/* width 用 calc 兜住 721–800px 这段：卡片 max-width 是 760，视口正好 768 时
   margin:auto 只留 4px，视觉上等于贴边。留白交给 --gut 统一算，任何视口都不例外。 */
.hero-card{position:relative;margin:-120px auto 0;max-width:760px;
  width:calc(100% - 2 * var(--gut));background:var(--card);
  border-radius:var(--r-lg);box-shadow:var(--sh);padding:44px 48px;text-align:center;z-index:3}
.hero-card h1{font:600 var(--fs-h1)/1.06 var(--serif);letter-spacing:-.02em;margin:0 0 18px}
.hero-card h1 em{font-style:italic;color:var(--orange-ink)}
.hero-card p{color:var(--ink2);font-size:var(--fs-lead);margin:0 auto 26px;max-width:52ch}
.hero-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- 段落 ---------- */
.section{padding:88px 0}
.section.tight{padding:62px 0}
.section.alt{background:var(--bg2);border-radius:var(--r-lg);margin:0 20px}
.head{text-align:center;max-width:640px;margin:0 auto 52px}
.head h1,.head h2{font:600 var(--fs-h2)/1.1 var(--serif);letter-spacing:-.02em;margin:14px 0 14px}
.head p{color:var(--ink2);margin:0;font-size:var(--fs-lead)}

/* ---------- 机型：左右交替大图 ---------- */
.showcase{display:grid;grid-template-columns:1.25fr 1fr;gap:0;align-items:center;
  background:var(--card);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.showcase+.showcase{margin-top:30px}
.showcase.flip{grid-template-columns:1fr 1.25fr}
.showcase .shot{position:relative;min-height:360px;background:var(--bg2)}
.showcase .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.showcase .txt{padding:48px 52px}
.showcase .model{font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.showcase h3{font:600 var(--fs-h3)/1.14 var(--serif);letter-spacing:-.02em;margin:14px 0 16px}
.showcase .txt>p{color:var(--ink2);margin:0 0 24px}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{font:500 var(--fs-xs)/1 var(--sans);color:var(--ink2);background:var(--bg2);
  border-radius:100px;padding:9px 15px}

/* ---------- 材料横滑卡 ---------- */
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mat{background:var(--card);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);transition:.25s}
.mat:hover{transform:translateY(-4px)}
.mat img{width:100%;aspect-ratio:16/11;object-fit:cover}
.mat .body{padding:24px 26px 28px}
.mat h3{font:600 20px/1.2 var(--serif);margin:0 0 8px}
.mat p{color:var(--ink2);margin:0;font-size:var(--fs-sm)}

/* ---------- 影像带 ---------- */
.feature-band{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feature-band img{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh)}
.feature-band h2{font:600 var(--fs-h2)/1.1 var(--serif);letter-spacing:-.02em;text-wrap:balance;margin:14px 0 16px}
.feature-band p{color:var(--ink2);margin:0 0 22px}
.checks{margin:0;padding:0;list-style:none}
.checks li{position:relative;padding:9px 0 9px 30px;color:var(--ink2);font-size:var(--fs-sm)}
.checks li::before{content:"";position:absolute;left:0;top:15px;width:16px;height:9px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}

/* ---------- 步骤：横向时间线 ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:s}
.step{background:var(--card);border-radius:var(--r);padding:28px 26px;box-shadow:var(--sh)}
.step::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--orange);color:var(--ink);
  font:600 14px/1 var(--sans);margin-bottom:16px}
.step b{display:block;font:600 17px/1.3 var(--serif);margin-bottom:8px}
.step span{font-size:var(--fs-sm);color:var(--ink2)}

/* ---------- 询盘 ---------- */
.inquiry{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);
  padding:56px;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.inquiry h2{font:600 var(--fs-h2)/1.1 var(--serif);letter-spacing:-.02em;text-wrap:balance;margin:14px 0 14px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
label{font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.04em;color:var(--ink2)}
input,textarea,select{background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);padding:14px 15px;font:var(--fs-sm)/1.5 var(--sans);width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--orange-ink);background:#fff}
textarea{resize:vertical;min-height:92px}
.form .btn{grid-column:1/-1;justify-content:center;margin-top:4px}
.form-note{grid-column:1/-1;font-size:var(--fs-xs);color:var(--ink3);margin:0}
.note{margin-top:22px;font-size:var(--fs-sm);color:var(--ink3)}

/* ---------- 页脚 ---------- */
.sf-footer{background:var(--bg2);border-top:1px solid var(--line);padding:66px 0 28px;font-size:var(--fs-sm)}
.sf-fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.sf-fcol h4{font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 16px}
.sf-fcol a,.sf-fcol p{display:block;color:var(--ink2);margin:0 0 10px}
.sf-fcol a:hover{color:var(--orange-ink)}
/* 页脚询价按钮：同上，`.sf-fcol a` 会把裸链接压平，这里用更高特异性抢回按钮形态。 */
.sf-fcol .btn{display:inline-flex;margin:2px 0 18px}
.sf-fcol .btn-primary,.sf-fcol .btn-primary:hover{color:var(--ink)}
.sf-fbase{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink3);font-size:var(--fs-xs)}

/* 联系方式与社媒账号：沿用 purcellcutting.com 的对外口径（同一家公司、同一个销售台）。
   放在品牌列内、不新开第 5 列 —— 页脚栅格列数一变，三个断点都要重排。
   按钮形态服从本站性格：圆形药丸 + 白底软阴影（本站是圆角/留白/软阴影那一档）。 */
.sf-contact{list-style:none;margin:16px 0 0;padding:0}
.sf-contact li{color:var(--ink3);margin:0 0 7px;line-height:1.5}
.sf-contact a{display:inline;color:var(--ink2);margin:0}
.sf-contact a:hover{color:var(--orange-ink)}
.sf-social{display:flex;gap:10px;margin-top:18px}
.sf-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  background:var(--card);border-radius:999px;box-shadow:var(--sh);color:var(--ink2);
  transition:color .18s ease,transform .18s ease}
.sf-social a:hover{color:var(--orange-ink);transform:translateY(-2px)}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .showcase,.showcase.flip,.feature-band,.inquiry{grid-template-columns:1fr}
  .showcase .txt{padding:36px 32px}
  .rail{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .inquiry{padding:40px 32px}
}
@media (max-width:820px){
  /* 导航折叠独立成断点：原跟在下方的 720px 移动端排版块里，但导航约需 787px
     才放得下，730~787px 区间因此横向溢出（768px 时右侧 CTA 被裁）。 */
  .sf-menu,.sf-cta .btn{display:none}
  .sf-toggle{display:block}
}
@media (max-width:720px){
  :root{--gut:18px}
  .hero-card{margin:-80px auto 0;padding:32px 24px}
  .section{padding:60px 0}
  .section.alt{margin:0 12px}
  .rail,.steps,.form{grid-template-columns:1fr}
  .sf-fcols{grid-template-columns:1fr 1fr}
  .util .sp{display:none}
}
@media (max-width:460px){.sf-fcols{grid-template-columns:1fr}}
.sf-header.open .sf-menu{display:flex;flex-direction:column;gap:0;position:absolute;
  top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 26px 16px;
  box-shadow:var(--sh)}
.sf-header.open .sf-menu a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}

/* ============================================================
   产品页（2026-10-19）：4 个机器系列 + 机器总览
   只新增「产品头 / 规格表 / 机型卡」三块，字号与颜色全部取现有 :root 令牌，
   不引入新尺寸台阶。白底图与 --card 同为纯白，contain 之后图与卡片无缝。
   链接一律相对、页链无后缀（本站页面全部扁平）。
   ============================================================ */
.crumb{font-size:var(--fs-xs);color:var(--ink3);margin:0 0 30px;display:flex;gap:9px;flex-wrap:wrap}
.crumb a{color:var(--ink2)}
.crumb a:hover{color:var(--orange-ink)}
.prod{padding:52px 0 0}
.prod-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:60px;align-items:center}
.prod h1{font:600 var(--fs-h1)/1.02 var(--serif);letter-spacing:-.025em;margin:14px 0 18px}
.prod-lead{color:var(--ink2);font-size:var(--fs-lead);margin:0 0 28px;max-width:44ch}
.prod-facts{display:grid;gap:0;margin:0 0 30px;border-top:1px solid var(--line)}
.prod-facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.prod-facts dt{font:600 var(--fs-micro)/1.4 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);margin:0}
.prod-facts dd{margin:0;font:600 18px/1.3 var(--serif);font-variant-numeric:tabular-nums}
.prod-shot{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);
  aspect-ratio:4/3;overflow:hidden;margin:0}
.prod-shot img{width:100%;height:100%;object-fit:contain;padding:16px}

/* 产品主图轮播：5 张交叉淡入，无缩略图，左右按钮 + 自动播放（逻辑在 site.js） */
.gal{position:relative}
.gal .gal-track{position:absolute;inset:0;display:block}
/* 5 张必须叠在同一位置：绝对定位 + inset:0。
   若用普通流，height:100% 会让每张各占一个舞台高度、纵向排成 5 屏，
   overflow:hidden 只露第一张 —— 切到第 2 张起就是空白。 */
.gal .gal-track img{position:absolute;inset:0;width:100%;height:100%;
  padding:0;object-fit:contain;opacity:0;z-index:0;
  transition:opacity .55s ease}
.gal .gal-track img.on{opacity:1;z-index:1}
.gal-btn{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;z-index:3;
  display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);
  opacity:.86;transition:opacity .18s,background .18s,border-color .18s}
.gal-btn:hover,.gal-btn:focus-visible{opacity:1;background:#fff;border-color:var(--ink3)}
.gal-btn svg{width:17px;height:17px}
.gal-prev{left:14px}
.gal-next{right:14px}
@media (max-width:720px){
  .gal-btn{width:40px;height:40px;margin-top:-20px}
  .gal-prev{left:8px}
  .gal-next{right:8px}
}
@media (prefers-reduced-motion:reduce){
  .gal .gal-track img{transition:none}
}

/* 产品视频：preload=none，点击才拉流；16:9 黑底，与规格表同款圆角与阴影。
   限宽 900px —— MINI8 的源片只有 640×368，铺满 1180px 会明显发虚。 */
.video-wrap{max-width:900px;margin:0 auto}
.video-wrap video{width:100%;height:auto;display:block;aspect-ratio:16/9;background:#000;
  border-radius:var(--r-lg);box-shadow:var(--sh);object-fit:contain}
.video-note{margin:14px 0 0;font-size:var(--fs-xs);color:var(--ink3);text-align:center}

/* 系列对比表：4 台横向比。窄屏横向滚动（刻意为之，不是溢出），
   首列固定住，滚动时仍知道在看哪一行。 */
.cmpt-wrap{margin-top:38px;background:var(--card);border-radius:var(--r-lg);
  box-shadow:var(--sh);overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmpt{width:100%;min-width:820px;border-collapse:collapse;font-size:var(--fs-sm)}
.cmpt th,.cmpt td{padding:13px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.cmpt tbody tr:last-child th,.cmpt tbody tr:last-child td{border-bottom:0}
.cmpt thead th{background:var(--bg2);padding:16px 14px;
  font:600 var(--fs-micro)/1.35 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.cmpt thead th a{display:block;font:600 16px/1.3 var(--serif);letter-spacing:-.01em;
  text-transform:none;color:var(--ink);margin-bottom:4px}
.cmpt thead th a:hover{color:var(--orange-ink)}
.cmpt thead th span{font-weight:400;letter-spacing:.04em}
.cmpt tbody th{position:sticky;left:0;z-index:1;background:var(--bg2);
  width:190px;font-weight:400;color:var(--ink2);white-space:nowrap}
.cmpt tbody td{font-variant-numeric:tabular-nums}
.spec-wrap{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
/* 规格书下载：分销商买前要转给客户或上级，得能直接拿到文件 */
.dl-row{margin:0 0 22px}
.dl{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;
  border:1px solid var(--line2);border-radius:999px;background:var(--card);
  font-size:var(--fs-sm);color:var(--ink);text-decoration:none;
  transition:border-color .18s,color .18s}
.dl:hover,.dl:focus-visible{border-color:var(--orange-ink);color:var(--orange-ink)}
.dl span{font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3)}
.spec{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.spec th,.spec td{text-align:left;padding:14px 22px;border-bottom:1px solid var(--line)}
.spec tbody tr:last-child th,.spec tbody tr:last-child td{border-bottom:0}
.spec th{width:44%;font-weight:400;color:var(--ink2);background:var(--bg2)}
.spec td{font-variant-numeric:tabular-nums}

.checks.wide{max-width:760px;margin:0 auto}
.mcards{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.more{text-align:center;margin:34px 0 0}
.mcard{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-lg);
  box-shadow:var(--sh);overflow:hidden;transition:.22s}
.mcard:hover{transform:translateY(-4px)}
.mcard .shot{position:relative;overflow:hidden;background:#fff;aspect-ratio:2/1;display:block}
.mcard .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mcard .bd{padding:20px 26px 26px}
.mcard .k{font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.mcard h3{font:600 21px/1.2 var(--serif);margin:10px 0 6px}
.mcard p{margin:0;font-size:var(--fs-sm);color:var(--ink2)}
.mspec{margin:14px 0 0;border-top:1px solid var(--line)}
.mspec>div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:6px 0;border-bottom:1px solid var(--line)}
.mspec dt{font-size:var(--fs-xs);color:var(--ink3)}
.mspec dd{margin:0;font-size:var(--fs-xs);font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* FAQ：原生 details/summary，零 JS（站点 CSP 禁内联脚本），键盘与读屏默认可用 */
.faq{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:last-child{border-bottom:none}
.faq-q{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:19px 26px;cursor:pointer;font:600 var(--fs-lead)/1.5 var(--sans);
  color:var(--ink);list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";flex:0 0 auto;font:400 22px/1 var(--sans);color:var(--ink3)}
.faq-item[open] .faq-q::after{content:"\2013"}
.faq-item[open] .faq-q{background:var(--bg2)}
.faq-item[open] .faq-q::after{color:var(--orange-ink)}
.faq-a{padding:2px 26px 22px;color:var(--ink2);font-size:var(--fs-sm);line-height:1.75}
.faq-a p{margin:0;max-width:74ch}
@media (max-width:720px){
  .faq-q{padding:16px 18px;gap:14px}
  .faq-a{padding:0 18px 18px}
}

@media (max-width:1080px){
  .prod-grid{grid-template-columns:1fr;gap:34px}
  .prod-shot{max-width:520px}
}
@media (max-width:720px){
  .mcards{grid-template-columns:1fr}
  .spec th,.spec td{padding:12px 16px}
  .prod{padding:34px 0 0}
}

/* ---------- About 页（2026-10-21 补） ----------
   本站原先没有 about，导航也没有 Company 项。版式只复用已有组件：
   .head / .feature-band / .checks，不新造一套图文语言。 */

/* 影像带左右交替。用 order 换位而不是改 grid-template-columns ——
   换列宽会让图文比例在 flip 时反过来，看上去像两个不同的组件。 */
.feature-band.flip > img{order:2}
/* 单列时「左右」不存在了，order 必须归零 —— 否则 flip 那段的图会被推到文字
   下面，与另外两段「先图后文」的顺序相反，同一页里出现两种阅读顺序。 */
@media (max-width:1080px){
  .feature-band.flip > img{order:0}
}

/* .checks 里允许「加粗结论 + 说明」的写法：结论必须能与说明分开读 */
.checks li strong{color:var(--ink);font-weight:600}

/* CTA 行：居中、可折行。CSP 禁内联 style，所以不能写在标签上 */
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:6px}

/* 影像带的说明尾巴：贴在上一条 checks 之后，字号降一档 */
.feature-band .note{margin-top:20px;font-size:var(--fs-sm);color:var(--ink3)}
.feature-band .note a{color:var(--orange-ink);text-decoration:none;border-bottom:1px solid currentColor}

/* 提交成功后就地换成一个状态块：小标 + 主文 + 左侧结构色竖线。
   只留一行灰字会被读成「表单怎么没了」。 */
.form-sent{padding-left:16px;border-left:3px solid var(--orange)}
.form-sent-k{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange-ink)}
.form-sent p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}

/* 谢谢页：确认句 + 兜底电话 + 回退按钮同在一段里，不再另起一段
   （两段之间会被 .section 的留白撑出 130px 空洞）。 */
.thanks .btn-row{margin:26px 0 0}
/* .head p 是 lead 字号，会把「电话兜底」那句顶成和正文一样重、两段粘成一段
   ⇒ 这句降一级、拉开 14px，读作「补充说明」而不是接着讲。 */
.thanks .head .note{margin-top:14px;font-size:var(--fs-sm);color:var(--ink3)}

/* ============================================================
   法务页（privacy / terms，2026-10-27）
   左栏：标签 + 标题 + 一句摘要 + 更新日期 + 条款目录；右栏：条文。
   ≤900 收成单栏并隐藏目录 —— 目录与正文是同一份内容，手机上它只会把正文推远。
   ============================================================ */
.legal-page{padding-bottom:clamp(56px,7vw,96px)}
.legal-grid{display:grid;grid-template-columns:minmax(0,268px) minmax(0,1fr);
  gap:clamp(28px,4.6vw,64px);align-items:start}
/* 左栏贴住：条文比它长得多，否则右侧读到一半左侧已空出一屏。
   96px = 粘性页头 76px + 20px 余量。 */
.legal-head{position:sticky;top:96px}
.legal-head h1{font:600 var(--fs-h2)/1.08 var(--serif);letter-spacing:-.02em;margin:14px 0 16px}
.legal-head p{margin:0;color:var(--ink2);font-size:var(--fs-lead);line-height:1.62}
.legal-head .stamp{margin-top:16px;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3)}
.legal-toc{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:10px}
.legal-toc a{font-size:var(--fs-xs);color:var(--ink2);display:flex;gap:10px;line-height:1.4}
.legal-toc a:hover{color:var(--orange-ink)}
.legal-toc .toc-k{font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:2px}
.legal-toc .n{color:var(--ink3);font-variant-numeric:tabular-nums}
.legal{max-width:74ch}
.legal .lg-sec{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line);
  scroll-margin-top:110px}
.legal .lg-sec:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.legal h2{display:flex;gap:11px;align-items:baseline;margin:0 0 11px;
  font:600 var(--fs-lead)/1.35 var(--serif);letter-spacing:-.005em;color:var(--ink)}
.legal h2 .n{font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.1em;
  color:var(--orange-ink);font-variant-numeric:tabular-nums}
.legal p,.legal li{font-size:var(--fs-sm);line-height:1.78;color:var(--ink2)}
.legal p{margin:0 0 12px}
.legal p:last-child{margin-bottom:0}
.legal ul{margin:0 0 12px;padding-left:1.1em}
.legal li{margin:0 0 6px}
.legal a,.form-note a{color:var(--orange-ink);text-decoration:underline;
  text-decoration-color:var(--line2);text-underline-offset:3px}
.legal a:hover,.form-note a:hover{text-decoration-color:var(--orange-ink)}
@media (max-width:900px){
  .legal-grid{grid-template-columns:1fr;gap:26px}
  .legal-head{position:static}
  .legal-toc{display:none}
  .legal-head h1{margin-bottom:12px}
}
.sf-fbase a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line2);
  text-underline-offset:3px}
.sf-fbase a:hover{color:var(--orange-ink);text-decoration-color:var(--orange-ink)}

/* ---------- 材料页：型号卡（F300） ----------
   图是工厂的印刷背卡，上面印着型号名与卖点图标 ⇒ 必须 contain，不能 cover：
   cover 会把 1:1 方图裁成 16:11，正好切掉卡上的型号字。底色用 --bg2 承住白底卡。
   h3 用 21px 与 .mcard h3 同级 —— 同一语义（卡片标题）不占两档字号。 */
.filmcards{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.filmcard{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
.filmcard .fin{margin:0;background:var(--bg2);aspect-ratio:4/3;overflow:hidden}
.filmcard .fin img{width:100%;height:100%;object-fit:contain;padding:14px}
.filmcard .bd{padding:20px 26px 26px}
.filmcard .k{font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.filmcard h3{font:600 21px/1.2 var(--serif);margin:10px 0 6px}
.filmcard p{margin:0;font-size:var(--fs-sm);color:var(--ink2)}
@media (max-width:760px){
  .filmcards{grid-template-columns:1fr}
}

/* ---------- 首屏型号按钮条（F300 系列页） ----------
   同一系列的多个型号必须在第一屏可见：买手到页面先问的是「这系列有哪几个 SKU」，
   而不是滚到第二屏才看到四个卡片。按钮条就是系列目录 —— 点一下跳到该型号卡，
   :target 给出描边高亮，不需要任何 JS。
   字号只用既有令牌（--fs-micro / --fs-sm），不新增台阶。 */
.model-pick{margin:0 0 26px}
.mp-k{display:block;font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.mp-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:560px}
/* 4 个 chip 在 1440 视口实测 564px，左列只有 ~540 ⇒ flex-wrap 会断成 3+1。
   固定两列后每格 265px：型号左、涂层右，两行齐平；窄屏再改上下叠。 */
.mp-chip{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:10px 15px;border:1px solid var(--line2);border-radius:100px;
  background:#fff;transition:.16s}
.mp-chip b{font:600 var(--fs-sm)/1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.mp-chip span{font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink3);transition:.16s}
.mp-chip:hover{border-color:var(--ink);box-shadow:0 6px 16px rgba(26,25,23,.07)}
.mp-chip:hover span{color:var(--orange-ink)}
/* 跳转落点要让开 sticky 页头（.legal .lg-sec 用 110px，同一量级） */
.filmcard{scroll-margin-top:110px}
.filmcard:target{box-shadow:0 0 0 2px var(--orange),var(--sh)}
/* 窄屏两列只剩 ~137px，横排会把 ANTI-BLUE 挤出去 ⇒ 改上下叠，仍保持两行 */
@media (max-width:600px){
  .mp-chip{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;
    padding:9px 12px;min-height:52px}
}

/* ---------- 404 页 ---------- */
.nf-links{list-style:none;margin:26px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:640px}
.nf-links li{display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  border:1px solid var(--line2);border-radius:var(--r-lg);padding:14px 16px}
.nf-links li span{font-size:13px;color:var(--ink3);line-height:1.5}
.nf-links .btn{justify-content:center;width:100%}
@media (max-width:600px){
  .nf-links{grid-template-columns:1fr}
}