/* ==========================================================================
   UV DTF Decor — UV DTF Source Factory
   Design System v2 — Industrial dark base / CMYK print accents / display type
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Ink (dark base) */
  --ink-950:#070A0E;
  --ink-900:#0B1016;
  --ink-850:#111823;
  --ink-800:#17202C;
  --ink-700:#222D3A;
  --ink-600:#33404F;
  --ink-500:#4A5766;

  /* Paper */
  --paper:#FFFFFF;
  --paper-50:#F7F9FA;
  --paper-100:#EDF0F3;
  --paper-200:#DCE1E6;
  --paper-300:#C4CCD4;

  /* Brand */
  --brand:#1650FF;
  --brand-dark:#0B37C4;
  --brand-light:#6E96FF;
  --brand-wash:#EBF0FF;

  /* CMYK — print process colours, used as accents only */
  --c-cyan:#00B8E6;
  --c-magenta:#FF2D8F;
  --c-yellow:#FFC400;
  --c-key:#101820;

  /* Semantic */
  --ok:#0E8A5F;
  --ok-wash:#E4F5EE;
  --warn:#B26A00;
  --warn-wash:#FFF3E0;
  --bad:#C0272D;
  --bad-wash:#FDECEC;

  /* Text */
  --text:#0B1016;
  --text-2:#55606D;
  --text-3:#8A95A1;
  --text-inv:#FFFFFF;
  --text-inv-2:#97A5B4;
  --text-inv-3:#6B7885;

  /* Type */
  --font-display:"Archivo","Helvetica Neue",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Rhythm */
  --gutter:32px;
  --container:1320px;
  --container-narrow:900px;
  --section-y:clamp(72px,9vw,132px);

  /* Geometry — square corners, industrial */
  --r:2px;
  --r-lg:3px;

  /* Hairlines */
  --line:#DCE1E6;
  --line-2:#EDF0F3;
  --line-dark:rgba(255,255,255,.12);
  --line-dark-2:rgba(255,255,255,.07);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:100px;}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; font-feature-settings:"kern" 1;
}
img,svg,video{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit;}
h1,h2,h3,h4,h5{margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.1;}
p{margin:0;}
ul,ol{margin:0; padding:0; list-style:none;}
table{border-collapse:collapse; width:100%;}
input,select,textarea{font:inherit; color:inherit;}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px;}

/* ---------- 3. Type scale ---------- */
.display-xl{font-family:var(--font-display); font-size:clamp(44px,7.4vw,96px); font-weight:800; line-height:.94; letter-spacing:-.045em;}
.display-l{font-family:var(--font-display); font-size:clamp(34px,4.8vw,62px); font-weight:700; line-height:1; letter-spacing:-.035em;}
.display-m{font-family:var(--font-display); font-size:clamp(26px,3.2vw,42px); font-weight:700; line-height:1.06; letter-spacing:-.025em;}
.kicker{
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand);
}
.kicker--inv{color:var(--brand-light);}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand); margin-bottom:20px;
}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--brand); flex:0 0 auto;}
.section--dark .eyebrow{color:var(--brand-light);}
.section--dark .eyebrow::before{background:var(--brand-light);}

/* ---------- 4. CMYK rule ---------- */
.cmyk-rule{display:flex; height:3px; width:100%;}
.cmyk-rule i{flex:1;}
.cmyk-rule i:nth-child(1){background:var(--c-cyan);}
.cmyk-rule i:nth-child(2){background:var(--c-magenta);}
.cmyk-rule i:nth-child(3){background:var(--c-yellow);}
.cmyk-rule i:nth-child(4){background:var(--c-key);}
.cmyk-rule--thin{height:2px;}

/* ---------- 5. Layout ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);}
.container-narrow{width:100%; max-width:var(--container-narrow); margin-inline:auto; padding-inline:var(--gutter);}
.section{padding-block:var(--section-y);}
.section--tight{padding-block:clamp(56px,6vw,88px);}
/* 底部 CTA 区块与页脚贴合（消除滚到页面底部时的「深色残条 + 空白带」断裂观感） */
.section--tight:has(> .container > .cta-band){padding-bottom:0;}
.section--alt{background:var(--paper-50);}
.section--dark{background:var(--ink-900); color:var(--text-inv);}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff;}
.section--dark p{color:var(--text-inv-2);}
.grid{display:grid; gap:var(--gutter);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:start;}
.split--wide-left{grid-template-columns:1.25fr .75fr;}
.split--center{align-items:center;}

/* Overflow guard — grid/flex items must be allowed to shrink below their
   content's min-content size, otherwise a wide table inside a split forces
   the whole page to overflow horizontally on small screens. */
.grid > *,
.split > *,
.hero-layout > *,
.cta-band > *,
.delta > *,
.terms-grid > *,
.contact-cards > *,
.tier-cards > *,
.visit-grid > *,
.resp > *,
.key-specs > *,
.footer-grid > *,
.form-grid > *,
.proc > *,
.stats > *,
.flow > *,
.kpi > *,
.hair-list > li{min-width:0;}
.table-wrap{max-width:100%;}

/* Section head */
.section-head{max-width:820px; margin-bottom:clamp(40px,5vw,64px);}
.section-head h2{font-size:clamp(30px,4.2vw,54px); letter-spacing:-.035em; line-height:1.02; margin-bottom:18px;}
.section-head p{color:var(--text-2); font-size:18px; max-width:680px;}
.section--dark .section-head p{color:var(--text-inv-2);}
.section-head--center{margin-inline:auto; text-align:center;}
.section-head--center p{margin-inline:auto;}

/* ---------- 6. Top bar ---------- */
.topbar{
  background:var(--ink-950); color:var(--text-inv-3);
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  padding-block:9px;
}
.topbar .container{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
.topbar strong{color:var(--brand-light); font-weight:700;}
.topbar-links{display:flex; gap:24px; align-items:center;}
.topbar-links a:hover{color:#fff;}

/* ---------- 7. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header .container{display:flex; align-items:center; gap:40px; height:76px;}
.logo{display:flex; align-items:center; gap:12px; flex:0 0 auto;}
.logo-mark{
  width:38px; height:38px; background:var(--ink-900); color:#fff;
  display:grid; place-items:center; font-family:var(--font-display);
  font-weight:800; font-size:14px; letter-spacing:-.03em;
}
.logo-text{display:flex; flex-direction:column; line-height:1.15;}
.logo-text b{font-family:var(--font-display); font-size:17px; font-weight:800; letter-spacing:-.03em;}
.logo-text span{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; color:var(--text-3); text-transform:uppercase;}

.nav{display:flex; align-items:center; gap:2px; margin-inline:auto;}
.nav > li > a{
  display:block; padding:9px 14px; font-size:14.5px; font-weight:500; color:var(--text-2);
  border-bottom:2px solid transparent; transition:color .15s;
}
.nav > li > a:hover{color:var(--text);}
.nav > li > a.is-active{color:var(--brand); border-bottom-color:var(--brand);}
/* WP 菜单：当前页高亮（wp_nav_menu 输出 current-menu-item 到 li） */
.nav > li.current-menu-item > a{color:var(--brand); border-bottom-color:var(--brand);}

.header-actions{display:flex; align-items:center; gap:16px; flex:0 0 auto;}
.lang-switch{
  display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:12px;
  font-weight:600; letter-spacing:.08em; color:var(--text-2); padding:6px 0;
}
.lang-switch:hover{color:var(--brand);}
.nav-toggle{
  display:none; width:40px; height:40px; border:1px solid var(--line);
  align-items:center; justify-content:center;
}
.nav-toggle span{display:block; width:16px; height:1.5px; background:var(--text); position:relative;}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--text);}
.nav-toggle span::before{top:-5px;} .nav-toggle span::after{top:5px;}

/* ---------- 8. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--r); font-family:var(--font-body);
  font-size:15px; font-weight:600; letter-spacing:-.005em;
  border:1px solid transparent; transition:background .16s, color .16s, border-color .16s;
  white-space:nowrap;
}
.btn--primary{background:var(--brand); color:#fff;}
.btn--primary:hover{background:var(--brand-dark);}
.btn--accent{background:var(--c-key); color:#fff;}
.btn--accent:hover{background:#000;}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--paper-300);}
.btn--ghost:hover{border-color:var(--text); background:var(--text); color:#fff;}
.btn--on-dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.28);}
.btn--on-dark:hover{background:#fff; color:var(--ink-900); border-color:#fff;}
.btn--sm{padding:10px 18px; font-size:14px;}
.btn--lg{padding:17px 34px; font-size:16px;}
.btn--block{width:100%;}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}

.text-link{
  display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600;
  color:var(--brand); border-bottom:1px solid transparent; transition:border-color .15s;
}
.text-link:hover{border-bottom-color:var(--brand);}
.text-link::after{content:"→"; font-size:15px;}

/* ---------- 9. Tags ---------- */
.tag{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; border-radius:var(--r);
  background:var(--paper-100); color:var(--text-2);
}
.tag--blue{background:var(--brand-wash); color:var(--brand-dark);}
.tag--green{background:var(--ok-wash); color:var(--ok);}
.tag--amber{background:var(--warn-wash); color:var(--warn);}
.tag--accent{background:#FFE9F4; color:#B01B65;}
.tag--outline{background:transparent; border:1px solid var(--line); color:var(--text-2);}
.section--dark .tag{background:rgba(255,255,255,.1); color:#fff;}

/* ---------- 10. Hero shell (layout lives in 10b) ---------- */
.hero{
  position:relative; background:var(--ink-950); color:#fff;
  padding-block:clamp(64px,8vw,110px) clamp(48px,6vw,80px); overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.13) 1px, transparent 0);
  background-size:22px 22px;
  mask-image:linear-gradient(120deg, transparent 40%, #000 100%);
  -webkit-mask-image:linear-gradient(120deg, transparent 40%, #000 100%);
}
.hero > .container{position:relative; z-index:2;}
.check{
  flex:0 0 auto; width:16px; height:16px; margin-top:3px;
  border:1px solid var(--brand-light); display:grid; place-items:center;
}
.check svg{width:9px; height:9px; stroke:var(--brand-light); stroke-width:3; fill:none;}

/* ---------- 10b. Hero v3 — editorial head / media stage / spec strip ----------
   Composition is deliberately not "text left, picture right":
     row 1  →  kicker + oversized headline spanning the full container,
               with a giant outlined slide number sitting behind the right edge
     row 2  →  copy (lead / buttons / facts) on the left, media stage on the right
     row 3  →  full-width hairline spec strip
   Every row that changes per slide keeps its variants stacked on one grid cell,
   so switching slides never reflows the page.                                  */

.hero{padding-block:0;}
.hero-layout{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  column-gap:clamp(30px,4.2vw,68px);
  row-gap:clamp(22px,2.8vw,36px);
  align-items:start;
  padding-block:clamp(32px,4.2vw,56px) clamp(26px,3.4vw,44px);
}
/* vertical CMYK rail, flush to the container's left edge */
.hero-rail{
  position:absolute; left:0; top:0; bottom:0; width:6px;
  display:flex; flex-direction:column; pointer-events:none;
}
.hero-rail i{flex:1;}
.hero-rail i:nth-child(1){background:var(--c-cyan);}
.hero-rail i:nth-child(2){background:var(--c-magenta);}
.hero-rail i:nth-child(3){background:var(--c-yellow);}
.hero-rail i:nth-child(4){background:var(--c-key);}

/* ---- row 1 · headline ---- */
.hero-head{position:relative; grid-column:1/-1; grid-row:1; display:grid;}
.hero-head .hero-copy{grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .45s ease;}
.hero-head .hero-copy.is-active{opacity:1; visibility:visible;}
.hero-head .kicker{display:block; margin-bottom:20px;}
.hero-head h1{
  font-family:var(--font-display);
  font-size:clamp(38px,5.6vw,72px);
  font-weight:800; line-height:.96; letter-spacing:-.045em;
  margin-bottom:26px;
  max-width:min(100%,940px);
}
.hero-head h1 em{font-style:normal; color:var(--brand-light);}
/* giant outlined slide number, sits behind the right edge of the headline row */
.hero-num{
  position:absolute; right:0; top:-16px; z-index:0;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(64px,8.4vw,120px); line-height:.78; letter-spacing:-.05em;
  color:rgba(255,255,255,.055);
  -webkit-text-stroke:1px rgba(255,255,255,.2);
  pointer-events:none; user-select:none;
}

/* ---- row 2 · copy ---- */
.hero-body{
  grid-column:1; grid-row:2; min-width:0;
  align-self:stretch; display:grid; grid-template-rows:1fr auto;
}
.hero-body .hero-sub{grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .45s ease;}
.hero-body .hero-sub.is-active{opacity:1; visibility:visible;}
.hero-lead{
  font-size:17.5px; line-height:1.62; color:var(--text-inv-2);
  max-width:560px; margin-bottom:30px;
}

/* ---- row 2 · media stage ---- */
.hero-stage{grid-column:2; grid-row:2; position:relative; min-width:0; display:flex; flex-direction:column;}
.stage-frame{
  position:relative; width:100%; flex:0 1 auto;
  aspect-ratio:16/9; max-height:min(50vh,400px); min-height:clamp(220px,22vw,280px);
}
.stage-frame .ph{
  position:absolute; inset:0; height:auto; aspect-ratio:auto;
  padding-bottom:86px;                    /* keep the caption clear of the control bar */
  opacity:0; visibility:hidden; transition:opacity .45s ease;
}
.stage-frame .ph.is-active{opacity:1; visibility:visible;}
.stage-frame .ph .ph-note{max-width:330px;}
.stage-frame .ph::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 45%, rgba(7,10,14,.72) 100%);
}
/* printing crop marks */
.stage-marks{position:absolute; inset:-10px; pointer-events:none; z-index:3;}
.stage-marks i{position:absolute; width:18px; height:18px;}
.stage-marks i::before,.stage-marks i::after{content:""; position:absolute; background:rgba(255,255,255,.42);}
.stage-marks i::before{width:100%; height:1px;}
.stage-marks i::after{width:1px; height:100%;}
.stage-marks i:nth-child(1){top:0; left:0;}
.stage-marks i:nth-child(1)::before,.stage-marks i:nth-child(1)::after{top:0; left:0;}
.stage-marks i:nth-child(2){top:0; right:0;}
.stage-marks i:nth-child(2)::before,.stage-marks i:nth-child(2)::after{top:0; right:0;}
.stage-marks i:nth-child(3){bottom:0; left:0;}
.stage-marks i:nth-child(3)::before,.stage-marks i:nth-child(3)::after{bottom:0; left:0;}
.stage-marks i:nth-child(4){bottom:0; right:0;}
.stage-marks i:nth-child(4)::before,.stage-marks i:nth-child(4)::after{bottom:0; right:0;}

/* media control bar — slide index + progress + arrows, overlaid on the media */
.stage-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:stretch;
  background:rgba(7,10,14,.86); border-top:1px solid var(--line-dark);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.stage-tab{
  flex:1; min-width:0; text-align:left; padding:13px 14px 12px;
  border-right:1px solid var(--line-dark); transition:background .18s;
}
.stage-tab:hover{background:rgba(255,255,255,.05);}
.stage-tab .n{
  display:block; font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.16em; color:var(--text-inv-3); margin-bottom:5px; transition:color .18s;
}
.stage-tab .lbl{
  display:block; font-size:12.5px; color:var(--text-inv-3); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; transition:color .18s;
}
.stage-tab .prog{display:block; height:2px; margin-top:11px; background:rgba(255,255,255,.14); position:relative; overflow:hidden;}
.stage-tab .prog::after{
  content:""; position:absolute; inset:0; background:var(--brand-light);
  transform:scaleX(0); transform-origin:left center;
}
.stage-tab.is-active .n{color:var(--brand-light);}
.stage-tab.is-active .lbl{color:#fff;}
.stage-tab.is-active .prog::after{animation:stageProg var(--carousel-dur,6500ms) linear forwards;}
@keyframes stageProg{from{transform:scaleX(0);} to{transform:scaleX(1);}}
.stage-nav{display:flex; flex:0 0 auto;}
.stage-nav button{
  width:48px; display:grid; place-items:center; color:#fff;
  border-left:1px solid var(--line-dark); transition:background .18s;
}
.stage-nav button:first-child{border-left:none;}
.stage-nav button:hover{background:rgba(255,255,255,.1);}
.stage-nav svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8;}

/* trust row — pinned to the bottom of the copy column, hairline separated */
.hero-facts{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px 24px;
  margin-top:30px; padding-top:22px;
  border-top:1px solid var(--line-dark);
}
.hero-facts li{
  display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text-inv-2);
  font-family:var(--font-mono); letter-spacing:.04em; text-transform:uppercase;
}
.hero-facts .check{width:14px; height:14px; margin-top:0;}
.hero-facts .check svg{width:8px; height:8px;}

/* ---- row 3 · bottom spec strip ---- */
.hero-specs{
  position:relative; z-index:2; border-top:1px solid var(--line-dark);
}
.hero-specs .container{
  display:grid; grid-template-columns:repeat(6,1fr);
}
.hero-specs .spec-cell{
  padding:18px 20px 20px; border-right:1px solid var(--line-dark-2); min-width:0;
}
.hero-specs .spec-cell:first-child{padding-left:0;}
.hero-specs .spec-cell:last-child{border-right:none;}
.hero-specs .k{
  display:block; font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--text-inv-3); margin-bottom:7px;
}
.hero-specs .v{
  display:block; font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:-.015em;
  color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- 11. Placeholder media ---------- */
/* 默认浅色（用于白底页面）；深色区块内自动反色 */
.ph{
  position:relative; width:100%; background:var(--paper-100);
  border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:24px; color:var(--text-3); overflow:hidden;
}
.ph::before{
  content:""; position:absolute; inset:0; opacity:1; pointer-events:none;
  background-image:linear-gradient(rgba(11,16,22,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(11,16,22,.045) 1px, transparent 1px);
  background-size:40px 40px;
}
.ph > *{position:relative; z-index:1;}
.ph--16-9{aspect-ratio:16/9;}
.ph--4-3{aspect-ratio:4/3;}
.ph--3-2{aspect-ratio:3/2;}
.ph--1-1{aspect-ratio:1/1;}
.ph--21-9{aspect-ratio:21/9;}
.ph--tall{aspect-ratio:3/4;}
.ph-icon{width:28px; height:28px; opacity:.45;}
.ph-type{
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand);
}
.ph-size{font-family:var(--font-mono); font-size:11.5px; color:var(--text-3);}
.ph-note{font-size:12.5px; color:var(--text-3); max-width:340px; line-height:1.55;}
.ph-play{
  width:54px; height:54px; border:1px solid var(--paper-300);
  display:grid; place-items:center; margin-bottom:6px;
}
.ph-play::after{
  content:""; width:0; height:0; border-left:13px solid var(--text-2);
  border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:4px;
}
.ph--logo{aspect-ratio:3/1; border-color:var(--line); background:var(--paper-50);}
.ph-badge{
  position:absolute; top:0; left:0; z-index:2;
  background:var(--brand); color:#fff;
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:6px 11px;
}
.ph-badge--br{left:auto; right:0; top:auto; bottom:0;}

/* 深色区域内自动反色 */
.hero .ph,
.page-hero .ph,
.section--dark .ph,
.cta-band .ph{
  background:var(--ink-850); border-color:var(--line-dark); color:var(--text-inv-3);
}
.hero .ph::before,
.page-hero .ph::before,
.section--dark .ph::before,
.cta-band .ph::before{
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}
.hero .ph .ph-type,
.page-hero .ph .ph-type,
.section--dark .ph .ph-type,
.cta-band .ph .ph-type{color:var(--brand-light);}
.hero .ph .ph-size,
.page-hero .ph .ph-size,
.section--dark .ph .ph-size,
.cta-band .ph .ph-size,
.hero .ph .ph-note,
.page-hero .ph .ph-note,
.section--dark .ph .ph-note,
.cta-band .ph .ph-note{color:var(--text-inv-3);}
.hero .ph .ph-play,
.page-hero .ph .ph-play,
.section--dark .ph .ph-play,
.cta-band .ph .ph-play{border-color:rgba(255,255,255,.3);}
.hero .ph .ph-play::after,
.page-hero .ph .ph-play::after,
.section--dark .ph .ph-play::after,
.cta-band .ph .ph-play::after{border-left-color:#fff;}
/* 深色区块内的卡片里嵌占位块时，再浅一档 */
.section--dark .card .ph{background:rgba(255,255,255,.04); border-color:var(--line-dark);}

/* ---------- 11b. Filled media (real photography / inline diagrams) ---------- */
/* 照片态：内层绝对定位铺满，外层比例盒不变，因此填入图片不会引起任何回流 */
.ph--photo{padding:0; background:var(--ink-900); border-color:var(--line-dark);}
.ph--photo::before{display:none;}
.ph--photo > img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
}
.ph--photo > .ph-badge{z-index:4;}
.ph--photo > .ph-play{position:relative; z-index:3;}
/* 视频位压暗一档，播放键才看得清 */
.ph--photo.ph--video > img{filter:brightness(.62) saturate(.92);}
.ph--photo.ph--video::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, rgba(6,9,13,.12), rgba(6,9,13,.44));
}
/* 图表态：内联 SVG 铺满。用 .ph.ph--svg 提高特异度，
   否则深色区块的 `.section--dark .ph` 会把它压成深底、图形就看不见了 */
.ph.ph--svg{padding:0; background:var(--paper-2); border-color:var(--line);}
.ph--svg::before{display:none;}
.ph--svg > svg{position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block;}
/* 证书/单据小标记位：卡片里已有文字，标记本身不要框和底 */
.ph--logo.ph--svg{background:transparent; border:none;}

/* ---------- 12. Cards → hairline blocks ---------- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:28px; transition:border-color .18s, background .18s;
}
.card--hover:hover{border-color:var(--ink-600);}
.card--flush{padding:0; overflow:hidden;}
.card--flat{background:var(--paper-50); border-color:var(--line-2);}
.card h3{font-size:19px; margin-bottom:10px; letter-spacing:-.02em;}
.card p{color:var(--text-2); font-size:15px;}
.card-body{padding:24px;}
.section--dark .card{background:rgba(255,255,255,.04); border-color:var(--line-dark);}
.section--dark .card p{color:var(--text-inv-2);}

.card-icon{
  width:44px; height:44px; border:1px solid var(--line); background:var(--paper-50);
  display:grid; place-items:center; margin-bottom:20px;
}
.card-icon svg{width:20px; height:20px; stroke:var(--brand); fill:none; stroke-width:1.6;}

/* Numbered block — replaces boxed cards on dark sections */
.num-block{border-top:1px solid var(--line-dark); padding-top:22px;}
.num-block .n{
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.12em;
  color:var(--brand-light); display:block; margin-bottom:14px;
}
.num-block h3{font-size:19px; margin-bottom:10px; color:#fff;}
.num-block p{font-size:14.5px; color:var(--text-inv-2);}
/* Light variant — hairline-separated numbered blocks on white/paper */
.num-block--light{border-top-color:var(--line);}
.num-block--light .n{color:var(--brand);}
.num-block--light h3{color:var(--text);}
.num-block--light p{color:var(--text-2);}
/* Hairline row list — replaces boxed cards entirely */
.hair-list{display:grid; gap:0; border-top:1px solid var(--line);}
.hair-list > li{
  display:grid; grid-template-columns:64px 1fr 1.4fr; gap:clamp(16px,3vw,40px);
  padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.hair-list .n{
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--brand);
}
.hair-list h4{font-family:var(--font-display); font-size:18px; letter-spacing:-.02em;}
.hair-list p{font-size:14.5px; color:var(--text-2);}
.section--dark .hair-list{border-top-color:var(--line-dark);}
.section--dark .hair-list > li{border-bottom-color:var(--line-dark);}
.section--dark .hair-list .n{color:var(--brand-light);}
.section--dark .hair-list h4{color:#fff;}
.section--dark .hair-list p{color:var(--text-inv-2);}

/* Product card */
.product-card{display:flex; flex-direction:column; height:100%;}
.product-card .ph{border:none; border-bottom:1px solid var(--line-dark);}
.product-card .card-body{display:flex; flex-direction:column; flex:1; padding:22px 24px 26px;}
.product-card h3{font-size:17.5px; margin-bottom:8px;}
.product-card .spec-list{margin-top:auto; padding-top:18px; display:grid; gap:0;}
.product-card .spec-list li{
  display:flex; justify-content:space-between; gap:14px; font-size:13.5px;
  color:var(--text-2); padding:8px 0; border-top:1px solid var(--line-2);
}
.product-card .spec-list b{color:var(--text); font-weight:600; font-family:var(--font-mono); font-size:12.5px;}
.prod-code{font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.1em; color:var(--brand); display:block; margin-bottom:10px;}
.prod-card{display:flex; flex-direction:column; height:100%;}
.prod-card .card-body{display:flex; flex-direction:column; flex:1;}

/* ---------- 13. Stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat{padding:32px 22px 30px; border-right:1px solid var(--line); position:relative;}
.stat:last-child{border-right:none;}
.stat-value{
  font-family:var(--font-display); font-size:clamp(30px,3.4vw,44px); font-weight:800;
  letter-spacing:-.045em; line-height:1; color:var(--text);
}
.stat-value small{font-size:.5em; font-weight:700; margin-left:3px; letter-spacing:0;}
.stat-label{font-size:13.5px; color:var(--text-2); margin-top:10px; font-weight:500;}
.stat-note{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-top:5px;}
.section--dark .stats{border-color:var(--line-dark);}
.section--dark .stat{border-right-color:var(--line-dark);}
.section--dark .stat-value{color:#fff;}
.section--dark .stat-label{color:var(--text-inv-2);}
.section--dark .stat-note{color:var(--text-inv-3);}

.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-left:1px solid var(--line);}
.stat-strip .stat{border-right:1px solid var(--line); border-top:none; border-bottom:none; padding:6px 24px;}
.stat-strip .stat-value{font-size:clamp(26px,2.8vw,36px);}

/* ---------- 14. Process flow ---------- */
.flow{display:grid; gap:0; border-top:1px solid var(--line);}
.flow--8{grid-template-columns:repeat(8,1fr);}
.flow--7{grid-template-columns:repeat(7,1fr);}
.flow--4{grid-template-columns:repeat(4,1fr);}
.flow-step{padding:26px 20px 26px 0; border-right:1px solid var(--line); padding-right:20px;}
.flow-step:last-child{border-right:none;}
.flow-step .n{
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em;
  color:var(--brand); margin-bottom:14px; display:block;
}
.flow-step h4{font-family:var(--font-display); font-size:15px; margin-bottom:7px; letter-spacing:-.015em;}
.flow-step p{font-size:12.5px; color:var(--text-3); line-height:1.5;}
.section--dark .flow,.section--dark .flow-step{border-color:var(--line-dark);}
.section--dark .flow-step .n{color:var(--brand-light);}
.section--dark .flow-step h4{color:#fff;}
.section--dark .flow-step p{color:var(--text-inv-3);}

/* ---------- 15. Tables ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); background:var(--paper);}
table.data{font-size:14.5px; min-width:600px;}
table.data th{
  text-align:left; font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
  background:var(--paper-50); padding:14px 18px; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.data td{padding:16px 18px; border-bottom:1px solid var(--line-2); color:var(--text-2); vertical-align:top;}
table.data tr:last-child td{border-bottom:none;}
table.data td strong{color:var(--text); font-weight:600;}
table.data td.num{font-family:var(--font-mono); font-size:13px; color:var(--text);}
table.data tbody tr:hover{background:var(--paper-50);}
table.data .row-highlight{background:var(--brand-wash);}
table.data .row-highlight:hover{background:#E2EAFF;}
.table-note{font-size:13px; color:var(--text-3); margin-top:14px; line-height:1.6;}
.section--dark .table-wrap{border-color:var(--line-dark); background:transparent;}
.section--dark table.data th{background:rgba(255,255,255,.04); color:var(--text-inv-3); border-color:var(--line-dark);}
.section--dark table.data td{border-color:var(--line-dark-2); color:var(--text-inv-2);}
.section--dark table.data td strong{color:#fff;}

table.spec th{
  width:40%; background:transparent; font-family:var(--font-body); font-size:14.5px;
  font-weight:400; letter-spacing:0; text-transform:none; color:var(--text-2);
  border-bottom:1px solid var(--line-2); white-space:normal; padding:13px 18px 13px 0;
}
table.spec td{font-weight:600; color:var(--text); border-bottom:1px solid var(--line-2); padding:13px 0;}

/* Key-value list */
.spec-inline{display:grid; gap:0; margin-top:16px;}
.spec-inline li{
  display:flex; justify-content:space-between; gap:20px; font-size:14.5px; color:var(--text-2);
  padding:11px 0; border-bottom:1px solid var(--line-2);
}
.spec-inline li:last-child{border-bottom:none;}
.spec-inline b{color:var(--text); font-weight:600; text-align:right; font-family:var(--font-mono); font-size:13px;}
.section--dark .spec-inline li{border-color:var(--line-dark-2); color:var(--text-inv-2);}
.section--dark .spec-inline b{color:#fff;}

/* ---------- 16. Matrix ---------- */
.matrix{font-size:13.5px; min-width:760px;}
.matrix th{position:sticky; top:0; z-index:2;}
.matrix td{text-align:center; padding:13px 10px; font-family:var(--font-mono); font-size:12.5px;}
.matrix td:first-child{text-align:left; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--text); white-space:nowrap;}
.matrix .yes{color:var(--ok); font-weight:700;}
.matrix .no{color:var(--paper-300);}
.matrix .cond{color:var(--warn); font-weight:600; font-size:11.5px;}

/* ---------- 17. Forms ---------- */
.form-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,40px);
}
.section--dark .form-card{background:var(--ink-850); border-color:var(--line-dark);}
.section--dark .form-card h3{color:#fff;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field--full{grid-column:1/-1;}
.field label{
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-2);
}
.field label .req{color:var(--bad); margin-left:2px;}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper); font-size:15px; transition:border-color .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand);
}
.field textarea{min-height:120px; resize:vertical;}
.field .hint{font-size:12.5px; color:var(--text-3);}
.field .err{font-size:12.5px; color:var(--bad); display:none;}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--bad);}
.field.has-error .err{display:block;}
.section--dark .field label{color:var(--text-inv-2);}
.section--dark .field input,.section--dark .field select,.section--dark .field textarea{
  background:rgba(255,255,255,.05); border-color:var(--line-dark); color:#fff;
}

.file-drop{
  border:1px dashed var(--paper-300); padding:28px; text-align:center;
  background:var(--paper-50); cursor:pointer; transition:.15s;
}
.file-drop:hover{border-color:var(--brand); background:var(--brand-wash);}
.file-drop strong{display:block; font-size:15px; margin-bottom:5px; font-weight:600;}
.file-drop span{font-family:var(--font-mono); font-size:11.5px; color:var(--text-3);}

.checkbox-row{display:flex; align-items:flex-start; gap:11px; font-size:14px; color:var(--text-2);}
.checkbox-row input{margin-top:4px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--brand);}

.form-steps{display:flex; gap:0; margin-bottom:28px; border-top:1px solid var(--line); flex-wrap:wrap;}
.form-steps li{
  display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11.5px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3);
  padding:12px 20px 12px 0; border-top:2px solid transparent; margin-top:-1px;
}
.form-steps li.is-active{color:var(--brand); border-top-color:var(--brand);}
.form-steps li.is-done{color:var(--ok);}
.form-steps .n{font-weight:700;}

.form-note{font-size:12.5px; color:var(--text-3); margin-top:16px; line-height:1.65;}
.form-success{
  display:none; background:var(--ok-wash); border-left:3px solid var(--ok); color:var(--ok);
  padding:18px 20px; font-size:14.5px; font-weight:500;
}
.form-success.is-visible{display:block;}

/* ---------- 18. Accordion ---------- */
.accordion{border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-q{
  width:100%; text-align:left; padding:22px 0; display:flex; justify-content:space-between;
  gap:20px; align-items:center; font-family:var(--font-display); font-size:17px;
  font-weight:600; letter-spacing:-.015em; color:var(--text); transition:color .15s;
}
.acc-q:hover{color:var(--brand);}
.acc-q .ico{width:18px; height:18px; flex:0 0 auto; position:relative;}
.acc-q .ico::before,.acc-q .ico::after{content:""; position:absolute; background:currentColor;}
.acc-q .ico::before{left:0; top:8.5px; width:18px; height:1px;}
.acc-q .ico::after{left:8.5px; top:0; width:1px; height:18px; transition:transform .2s, opacity .2s;}
.acc-item.is-open .acc-q .ico::after{transform:rotate(90deg); opacity:0;}
.acc-a{display:none; padding:0 0 24px; color:var(--text-2); font-size:15.5px; max-width:820px;}
.acc-item.is-open .acc-a{display:block;}
.section--dark .accordion,.section--dark .acc-item{border-color:var(--line-dark);}
.section--dark .acc-q{color:#fff;}
.section--dark .acc-a{color:var(--text-inv-2);}

/* ---------- 19. Tabs ---------- */
.tabs{display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:clamp(32px,4vw,48px); flex-wrap:wrap;}
.tab{
  padding:15px 24px; font-family:var(--font-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s;
}
.tab:hover{color:var(--text);}
.tab.is-active{color:var(--brand); border-bottom-color:var(--brand);}
.tab-panel{display:none;}
.tab-panel.is-active{display:block;}

/* ---------- 20. Breadcrumb ---------- */
.breadcrumb{padding-block:22px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; color:var(--text-3); text-transform:uppercase;}
.breadcrumb ol{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.breadcrumb li::after{content:"/"; margin-left:10px; color:var(--paper-300);}
.breadcrumb li:last-child::after{display:none;}
.breadcrumb a:hover{color:var(--brand);}
.breadcrumb [aria-current]{color:var(--text); font-weight:700;}

/* ---------- 21. Sticky CTA ---------- */
/* Hidden on the first screen so it never covers the hero's spec strip; the
   script adds .is-shown once the visitor has scrolled past the hero. */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--ink-900);
  border-top:1px solid var(--line-dark); padding-block:14px;
  transform:translateY(100%); opacity:0; visibility:hidden;
  transition:transform .32s ease, opacity .32s ease, visibility .32s;
}
.sticky-cta.is-shown{transform:none; opacity:1; visibility:visible;}
@media (prefers-reduced-motion:reduce){ .sticky-cta{transition:none;} }
.sticky-cta .container{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.sticky-cta .txt{font-size:14.5px; color:var(--text-inv-2);}
.sticky-cta .txt strong{color:#fff; font-weight:600;}

/* ---------- 22. WhatsApp float ---------- */
.wa-float{
  position:fixed; right:24px; bottom:92px; z-index:70;
  width:52px; height:52px; background:#25D366; display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.22); transition:transform .16s;
}
.wa-float:hover{transform:translateY(-3px);}
.wa-float svg{width:25px; height:25px; fill:#fff;}

/* ---------- 23. CTA band ---------- */
.cta-band{
  background:var(--ink-900); color:#fff; padding:clamp(36px,5vw,64px);
  display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(28px,4vw,56px); align-items:center;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--c-cyan) 0 25%,var(--c-magenta) 25% 50%,var(--c-yellow) 50% 75%,var(--c-key) 75% 100%);
}
.cta-band h2{font-size:clamp(24px,3vw,38px); letter-spacing:-.03em; margin-bottom:14px;}
.cta-band p{color:var(--text-inv-2); font-size:16.5px;}
.cta-band .actions{display:flex; flex-direction:column; gap:12px;}

/* ---------- 24. Page hero (inner pages) ---------- */
.page-hero{
  background:var(--ink-950); color:#fff; padding-block:clamp(56px,7vw,96px);
  position:relative; overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 0);
  background-size:22px 22px;
  mask-image:linear-gradient(120deg, transparent 35%, #000 100%);
  -webkit-mask-image:linear-gradient(120deg, transparent 35%, #000 100%);
}
.page-hero > .container{position:relative; z-index:2;}
.page-hero h1{font-family:var(--font-display); font-size:clamp(34px,4.8vw,62px); font-weight:800; letter-spacing:-.04em; line-height:1.02; margin-bottom:22px;}
.page-hero p{color:var(--text-inv-2); font-size:18px; max-width:760px; line-height:1.6;}
.page-hero .eyebrow{color:var(--brand-light);}
.page-hero .eyebrow::before{background:var(--brand-light);}

/* ---------- 25. Sub nav ---------- */
.subnav{
  position:sticky; top:76px; z-index:55; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.subnav ul{display:flex; gap:0; overflow-x:auto; scrollbar-width:none;}
.subnav ul::-webkit-scrollbar{display:none;}
.subnav a{
  display:block; padding:17px 18px; font-family:var(--font-mono); font-size:11.5px;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
  white-space:nowrap; border-bottom:2px solid transparent; transition:color .15s;
}
.subnav a:hover{color:var(--brand); border-bottom-color:var(--brand);}

/* ---------- 26. Filter bar ---------- */
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding-block:22px; border-bottom:1px solid var(--line); margin-bottom:clamp(32px,4vw,48px);}
.filter-bar .label{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-right:6px;}
.filter-btn{
  background:transparent; border:1px solid var(--line); padding:9px 16px;
  font-size:13.5px; font-weight:500; color:var(--text-2); transition:.15s;
}
.filter-btn:hover{border-color:var(--text); color:var(--text);}
.filter-btn.is-active{background:var(--ink-900); border-color:var(--ink-900); color:#fff;}
.filter-row{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:26px;}
.filter-row label{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);}
.filter-row select{padding:10px 14px; border:1px solid var(--line); background:var(--paper); font-size:14px;}

/* ---------- 27. Misc components ---------- */
.qc-card{border-top:3px solid var(--brand); background:var(--paper-50); padding:26px; border-left:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.qc-card h3{font-size:18px; margin-bottom:8px;}
.qc-card .stage-tag{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--brand);}

.terms-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);}
.terms-grid--2{grid-template-columns:repeat(2,1fr);}
.term-card{padding:26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.term-card h4{font-family:var(--font-display); font-size:16px; margin-bottom:9px; letter-spacing:-.015em;}
.term-card p{font-size:14px; color:var(--text-2);}

.tier-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line);}
.tier{padding:28px 24px; border-right:1px solid var(--line); position:relative;}
.tier:last-child{border-right:none;}
.tier.is-featured{background:var(--ink-900); color:#fff;}
.tier.is-featured .qty,.tier.is-featured .disc{color:#fff;}
.tier.is-featured li{color:var(--text-inv-2);}
.tier .badge{
  position:absolute; top:0; left:0; background:var(--c-yellow); color:var(--c-key);
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:5px 10px;
}
.tier .qty{font-family:var(--font-display); font-size:26px; font-weight:800; letter-spacing:-.04em;}
.tier .qty small{font-size:12px; font-weight:500; letter-spacing:0; color:var(--text-3); font-family:var(--font-body);}
.tier .disc{font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); margin-top:8px;}
.tier ul{margin-top:18px; display:grid; gap:9px;}
.tier li{font-size:13.5px; color:var(--text-2); padding-left:16px; position:relative;}
.tier li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--brand);}

.proc{display:grid; grid-template-columns:repeat(7,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);}
.proc-step{padding:22px 18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.proc-step .n{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--brand); margin-bottom:12px; display:block;}
.proc-step h4{font-family:var(--font-display); font-size:14.5px; margin-bottom:6px; letter-spacing:-.015em;}
.proc-step p{font-size:12px; color:var(--text-3); line-height:1.5;}
.proc-step .dur{font-family:var(--font-mono); font-size:11px; color:var(--brand); font-weight:700; margin-top:9px;}

.visit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line);}
.visit-opt{padding:26px; border-right:1px solid var(--line);}
.visit-opt:last-child{border-right:none;}
.visit-opt h4{font-family:var(--font-display); font-size:16px; margin-bottom:8px;}
.visit-opt p{font-size:14px; color:var(--text-2);}
.visit-opt .text-xs{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--text-3); text-transform:uppercase;}

.timeline{position:relative; padding-left:26px; border-left:1px solid var(--line);}
.tl-item{position:relative; padding-bottom:26px;}
.tl-item::before{content:""; position:absolute; left:-31px; top:5px; width:9px; height:9px; background:var(--brand);}
.tl-item:last-child{padding-bottom:0;}
.tl-item b{display:block; font-family:var(--font-display); font-size:15.5px; margin-bottom:5px; letter-spacing:-.015em;}
.tl-item span{font-size:14px; color:var(--text-2);}

.doc-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line-2);}
.doc-row:last-child{border-bottom:none;}
.doc-row .name{font-size:15px; font-weight:600;}
.doc-row .meta{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--text-3); text-transform:uppercase;}

.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line);}
.contact-card{padding:30px; border-right:1px solid var(--line);}
.contact-card:last-child{border-right:none;}
.contact-card h4{font-family:var(--font-display); font-size:17px; margin-bottom:9px; letter-spacing:-.015em;}
.contact-card p{font-size:14px; color:var(--text-2); margin-bottom:16px;}
.contact-card a.line{display:block; font-size:15px; font-weight:600; color:var(--brand); margin-bottom:7px;}
.contact-card a.line:hover{text-decoration:underline;}

.resp{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);}
.resp > div{padding:24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.resp b{display:block; font-family:var(--font-display); font-size:15.5px; margin-bottom:6px; letter-spacing:-.015em;}
.resp span{font-size:14px; color:var(--text-2);}

.gallery{display:grid; gap:12px;}
.gallery-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.gallery-thumbs .ph{cursor:pointer;}
.gallery-thumbs .ph:hover{border-color:var(--brand-light);}
.key-specs{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-top:1px solid var(--line); border-left:1px solid var(--line); margin-block:28px;
}
.key-specs div{padding:18px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.key-specs dt{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px;}
.key-specs dd{margin:0; font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-.02em;}
.buy-box{position:sticky; top:110px;}
.step-list{counter-reset:s; display:grid; gap:0; border-top:1px solid var(--line);}
.step-list li{counter-increment:s; display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line-2);}
.step-list li::before{
  content:counter(s,decimal-leading-zero); flex:0 0 auto; font-family:var(--font-mono);
  font-size:11.5px; font-weight:700; letter-spacing:.08em; color:var(--brand); padding-top:3px;
}
.step-list b{font-family:var(--font-display); font-size:16px; display:block; margin-bottom:5px; letter-spacing:-.015em;}

.legend{display:flex; gap:26px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); margin-bottom:20px;}
.legend span{display:flex; align-items:center; gap:8px;}
.dot{width:9px; height:9px; display:inline-block;}
.dot--yes{background:var(--ok);}
.dot--cond{background:var(--warn);}
.dot--no{background:var(--paper-300);}

.disclaimer{background:var(--warn-wash); border-left:3px solid var(--warn); padding:18px 22px; font-size:14px; color:var(--warn); line-height:1.65;}
.callout{border-left:3px solid var(--brand); background:var(--paper-50); padding:18px 22px; font-size:15px; color:var(--text-2); line-height:1.65;}
.callout strong{color:var(--text);}

/* Delta / comparison */
.delta{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); margin-bottom:24px;}
.delta > div{padding:24px; border-right:1px solid var(--line);}
.delta > div:last-child{border-right:none;}
.delta .h{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:12px;}
.delta ul{display:grid; gap:8px;}
.delta li{font-size:14px; color:var(--text-2); padding-left:16px; position:relative;}
.delta li::before{content:""; position:absolute; left:0; top:8px; width:5px; height:5px; background:var(--text-3);}

/* KPI row */
.kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); margin-bottom:24px;}
.kpi > div{padding:24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.kpi .v{font-family:var(--font-display); font-size:32px; font-weight:800; letter-spacing:-.045em; line-height:1; color:var(--brand);}
.kpi .k{font-size:13px; color:var(--text-2); margin-top:8px;}

/* Tree (docs) */
.tree{
  font-family:var(--font-mono); font-size:12.5px; line-height:1.9; color:var(--text-2);
  background:var(--paper-50); border:1px solid var(--line); padding:22px 24px; overflow-x:auto;
}
.tree .c{color:var(--text-3);}
.tree .star{color:var(--brand); font-weight:700;}

/* ---------- 28. Footer ---------- */
.site-footer{background:var(--ink-950); color:var(--text-inv-3); padding-block:clamp(56px,7vw,88px) 32px; font-size:14px;}
.footer-grid{display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:clamp(28px,4vw,56px); margin-bottom:clamp(40px,5vw,64px);}
.site-footer h4{
  color:#fff; font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:20px;
}
.site-footer a:hover{color:#fff;}
.site-footer li{margin-bottom:11px; font-size:14px;}
.footer-brand p{margin-bottom:18px; line-height:1.65; font-size:14px;}
.footer-brand .logo-text b{color:#fff;}
.footer-brand .logo-text span{color:var(--text-inv-3);}
.footer-brand .logo-mark{background:#fff; color:var(--ink-950);}
.footer-bottom{
  border-top:1px solid var(--line-dark); padding-top:26px;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
}
.footer-bottom .legal{display:flex; gap:22px; flex-wrap:wrap;}

/* ---------- 29. Prototype markers (delete before launch) ---------- */
.proto-banner{background:var(--c-yellow); color:var(--c-key); font-size:13px; padding:11px 0;}
.proto-banner .container{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;}
.proto-banner b{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; flex:0 0 auto; padding-top:2px;}
.proto-banner span{color:#3A3000;}
.todo{border-bottom:1px dashed var(--c-magenta); cursor:help;}

/* ---------- 30. Utilities ---------- */
.mt-0{margin-top:0;} .mt-2{margin-top:8px;} .mt-3{margin-top:12px;}
.mt-4{margin-top:16px;} .mt-5{margin-top:24px;} .mt-6{margin-top:32px;}
.mt-7{margin-top:48px;} .mt-8{margin-top:64px;}
.mb-3{margin-bottom:12px;} .mb-4{margin-bottom:16px;} .mb-5{margin-bottom:24px;} .mb-6{margin-bottom:32px;}
.text-center{text-align:center;}
.text-muted{color:var(--text-2);}
.text-sm{font-size:14.5px;}
.text-xs{font-size:12.5px;}
.divider{height:1px; background:var(--line); margin-block:40px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------- 31. Responsive ---------- */
@media (max-width:1180px){
  .nav{display:none;}
  .nav-toggle{display:flex;}
  .split,.split--wide-left,.cta-band{grid-template-columns:1fr; gap:clamp(28px,5vw,48px);}
  .hero-layout{column-gap:clamp(26px,3.4vw,44px); row-gap:30px;}
  .hero-head h1{max-width:100%;}
  .hero-num{font-size:clamp(56px,7.6vw,92px); top:-10px;}
  .stage-frame{aspect-ratio:16/9; max-height:340px;}
  .hero-lead{font-size:16.5px;}
  .hero-specs .container{grid-template-columns:repeat(3,1fr);}
  .hero-specs .spec-cell:nth-child(3n){border-right:none;}
  .hero-specs .spec-cell:nth-child(3n+1){padding-left:0;}
  .hero-specs .spec-cell{padding-block:16px;}
  .stage-tab .lbl{font-size:11.5px;}
  .grid-4,.grid-5{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(3,1fr);}
  .stat:nth-child(3n){border-right:none;}
  .flow--8,.flow--7{grid-template-columns:repeat(4,1fr);}
  .flow-step:nth-child(4n){border-right:none;}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;}
  .stat-strip{grid-template-columns:repeat(2,1fr);}
  .proc{grid-template-columns:repeat(4,1fr);}
  .tier-cards{grid-template-columns:repeat(2,1fr);}
  .tier:nth-child(2n){border-right:none;}
  .terms-grid{grid-template-columns:repeat(2,1fr);}
  .subnav{top:0;}
  .buy-box{position:static;}
}
@media (max-width:900px){
  /* hero stacks: headline → media stage → copy. DOM order already matches,
     so only the column/row pins need resetting. */
  .hero-layout{grid-template-columns:1fr; row-gap:clamp(20px,3vw,30px);}
  .hero-head,.hero-body,.hero-stage{grid-column:1;}
  .hero-head{grid-row:1;}
  .hero-stage{grid-row:2;}
  .hero-body{grid-row:3;}
  .stage-frame{aspect-ratio:16/9; max-height:330px;}
  .hero-lead{max-width:660px;}
}
@media (max-width:820px){
  :root{--gutter:20px;}
  body{font-size:16px;}
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(2n){border-right:none;}
  .flow--8,.flow--7,.flow--4{grid-template-columns:repeat(2,1fr);}
  .flow-step:nth-child(2n){border-right:none;}
  .form-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .topbar-links{display:none;}
  .header-actions .btn{display:none;}
  .stat-strip{grid-template-columns:1fr; border-left:none;}
  .stat-strip .stat{border-right:none; padding-inline:0;}
  .sticky-cta .txt{display:none;}
  .sticky-cta .container{justify-content:center;}
  .hero-rail{width:4px;}
  .hero-layout{padding-block:44px 40px;}
  .hero-head h1{font-size:clamp(28px,7vw,42px);}
  .hero-num{font-size:52px; top:-6px;}
  .hero-lead{font-size:16px; max-width:620px;}
  .stage-frame{aspect-ratio:16/9; max-height:320px;}
  .stage-marks{inset:-7px;}
  .stage-marks i{width:12px; height:12px;}
  .stage-tab{padding:11px 10px 10px;}
  .stage-tab .prog{margin-top:8px;}
  .stage-nav button{width:42px;}
  .stage-frame .ph{padding-bottom:70px;}
  .proc,.visit-grid,.contact-cards,.resp,.terms-grid,.tier-cards{grid-template-columns:1fr;}
  .visit-opt,.contact-card,.tier,.delta > div,.resp > div{border-right:none;}
  .key-specs{grid-template-columns:1fr;}
  .gallery-thumbs{grid-template-columns:repeat(2,1fr);}
  .delta{grid-template-columns:1fr;}
  .doc-row{flex-direction:column; align-items:flex-start; gap:8px;}
  .hair-list > li{grid-template-columns:44px 1fr; gap:12px 18px;}
  .hair-list > li p{grid-column:1/-1;}
}
@media (max-width:560px){
  .hero-num{display:none;}
  .hero-head .kicker{font-size:10.5px; letter-spacing:.12em; margin-bottom:16px;}
  .hero-head h1{font-size:clamp(27px,7.4vw,40px);}
  .hero-layout{padding-block:30px 26px;}
  .hero-lead{font-size:15.5px; margin-bottom:24px;}
  .hero .btn-row .btn{flex:1 1 100%; justify-content:center;}
  .hero-facts{gap:8px 18px;}
  .hero-facts li{font-size:11.5px;}
  .stage-frame{min-height:238px; max-height:300px;}
  .stage-tab .lbl{display:none;}
  .stage-frame .ph{padding-bottom:56px;}
  .stage-frame .ph .ph-note{display:none;}
  .stage-marks{inset:-5px;}
  .stage-marks i{width:10px; height:10px;}
  .stage-nav button{width:38px;}
  /* spec strip drops from 3 columns to 2 */
  .hero-specs .container{grid-template-columns:repeat(2,1fr);}
  .hero-specs .spec-cell:nth-child(n){border-right:1px solid var(--line-dark-2); padding-left:20px;}
  .hero-specs .spec-cell:nth-child(2n){border-right:none;}
  .hero-specs .spec-cell:nth-child(2n+1){padding-left:0;}
  .hero-specs .spec-cell{padding-block:14px;}
  .hero-specs .v{font-size:14px;}
}

/* ==========================================================================
   图案库 / 色卡墙（第二十七轮）
   --------------------------------------------------------------------------
   ★ 为什么写在 main.css 而不是 skin-utf.css：
     只有 index.html 有 body.skin-utf 并加载 skin-utf.css，7 个内页只加载 main.css。
     第一版写在 skin-utf.css 里，结果 products.html 上的色卡完全没有样式 ——
     「看渲染，不看源码」这条又踩了一次。
   ★ 两套底都要成立：
     · 首页    = .u-band（深色带）
     · 图案库页 = .section--alt（纸色带）
     所以描边、说明文字、分类标题分别取色，不写死。
   ========================================================================== */
.u-designlib{
  margin-top:clamp(30px,3.2vw,52px);
  border-top:1px solid var(--line);
  padding-top:clamp(22px,2.4vw,34px);
}
.u-band .u-designlib{border-top-color:rgba(255,255,255,.085);}
.u-designlib-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(16px,2vw,32px); margin-bottom:clamp(14px,1.6vw,22px);
}
.u-designlib-t{
  margin:9px 0 0; font-size:14.5px; line-height:1.6;
  color:var(--text-2); max-width:64ch;
}
.u-band .u-designlib-t{color:var(--text-inv-2);}

.u-swatches{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.1vw,18px);
}
.u-swatches li{margin:0; position:relative;}
/* 对外编号徽标（P-001…）—— 客户在询盘里报编号下单（只对带 data-no 的色卡显示） */
.u-swatches li[data-no]::after{
  content:attr(data-no);
  position:absolute; right:7px; bottom:7px; z-index:1;
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.05em; line-height:1;
  padding:3px 5px; border-radius:2px;
  background:rgba(10,12,16,.62); color:#fff;
  pointer-events:none;
}

/* ---------- 选款（图案库 → 询盘 · 第二十九轮） ---------- */
.u-swatches li[data-no]{cursor:pointer;}
.u-swatches li.is-picked img{outline:3px solid #C2410C; outline-offset:-3px;}
.u-swatches li.is-picked::before{
  content:"✓";
  position:absolute; left:7px; top:7px; z-index:2;
  width:19px; height:19px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#C2410C; color:#fff; font-size:11px; font-weight:700;
  pointer-events:none;
}
.design-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:rgba(11,12,15,.95); color:#fff;
  border-top:1px solid rgba(255,255,255,.14);
  transform:translateY(105%); transition:transform .35s cubic-bezier(.2,.7,.3,1);
  padding:11px 0;
}
.design-bar.is-shown{transform:translateY(0);}
.design-bar .container{display:flex; align-items:center; gap:12px;}
.design-bar .db-txt{
  flex:1 1 auto; min-width:0; font-size:13.5px; letter-spacing:.01em;
  color:#E8ECF2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.has-picks .sticky-cta{display:none !important;}

/* ---------- 灯箱（图案大图预览 · 第二十九轮） ---------- */
.sw-zoom{
  position:absolute; right:7px; top:7px; z-index:2;
  width:26px; height:26px; border:0; border-radius:3px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,12,16,.55); color:#fff; cursor:pointer;
  opacity:0; transition:opacity .18s;
}
.u-swatches li:hover .sw-zoom, .sw-zoom:focus-visible{opacity:1;}
.lightbox{
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:130;
  background:rgba(8,9,11,.92);
  display:none; align-items:center; justify-content:center;
  padding:4vh 4vw;
}
.lightbox.is-open{display:flex;}
.lb-inner{max-width:min(1100px,92vw); width:100%;}
.lb-img{width:100%; max-height:76vh; object-fit:contain; display:block; border-radius:4px; background:#14161a;}
.lb-bar{display:flex; align-items:center; gap:14px; margin-top:12px;}
.lb-meta{flex:1; min-width:0; color:#E8ECF2; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lb-close{
  position:absolute; top:18px; right:22px;
  width:38px; height:38px; border:0; border-radius:50%; padding:0;
  background:rgba(255,255,255,.12); color:#fff; font-size:20px; line-height:1; cursor:pointer;
}
.lb-close:hover{background:rgba(255,255,255,.22);}

@media (max-width:640px){
  .design-bar .db-txt{font-size:12px;}
  .design-bar .btn{padding-left:10px; padding-right:10px;}
}
.u-swatches img{
  display:block; width:100%; aspect-ratio:3/2; object-fit:cover;
  border:1px solid var(--line); border-radius:var(--r);
  background:#F2F0EB; transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.u-band .u-swatches img{border-color:rgba(255,255,255,.10); background:#191B20;}
.u-swatches li:hover img{transform:scale(1.05);}

.u-swatch-group + .u-swatch-group{margin-top:clamp(30px,3.4vw,52px);}

/* Applied 展示条（图案库头部：实贴效果，无编号；与组列宽对齐） */
.u-swatches--applied{grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:clamp(20px,2.4vw,34px);}
.u-applied-cap{margin:12px 0 0; font-size:13px; line-height:1.6; color:var(--text-2);}
.u-swatch-group h3{
  margin:0 0 10px; font-family:var(--font-mono);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-2);
}
.u-band .u-swatch-group h3{color:var(--text-inv-2);}
/* 每组 6 张 → 3 列 × 2 行：大图优先（6 列时每张仅 ~215px，图案细节看不清） */
.u-swatch-group .u-swatches{grid-template-columns:repeat(3,minmax(0,1fr));}

/* 断点要让每组刚好整除：
   首页 12 张 → 6 / 4 / 3 列（2 / 3 / 4 行，都满）
   图案库每组 6 张 → 6 / 3 / 2 列（1 / 2 / 3 行，都满） */
@media (max-width:1180px){
  .u-swatches{grid-template-columns:repeat(3,minmax(0,1fr));}
  .u-swatch-group .u-swatches{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .u-swatches{grid-template-columns:repeat(2,minmax(0,1fr));}
  .u-swatch-group .u-swatches{grid-template-columns:repeat(2,minmax(0,1fr));}
  .u-designlib-head{flex-direction:column; align-items:flex-start;}
}

/* ---------- 平板断点：别让扩容后的产品卡排成长柱（第二十七轮） ----------
   产品卡 12 → 20、首页产品区 6 → 9 之后，本文件下面那条
   `@media (max-width:820px){ .grid-2,.grid-3{1fr} }` 会把 20 张卡
   排成一条 16000px 的长柱 —— 768px 是 iPad 竖屏，真设备。
   561–820 塞得下两列（卡宽约 340px），所以覆盖回 2 列。
   ★ 特异度说明：`#product-grid` 是 ID，天然赢过 .grid-3；
     `body .u-cards` 是 (0,1,1)，赢过 skin-utf.css 里的 `.u-cards` (0,1,0) ——
     两条都不依赖样式表的加载顺序。 */
@media (max-width:820px) and (min-width:561px){
  #product-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  body .u-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* 同类的单列塌陷：应用区 6 张（.u-tiles）撑 3281px、OEM 3 张（.u-oem）撑 2262px。
     561–820 塞得下两列，卡片约 340px 宽，比一条 17,000px 的长柱好读得多。
     .u-docs / .u-faq / .u-cta-grid 不动 —— 它们本来就矮（506 / 701 / 995px）。 */
  body .u-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
  body .u-oem{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ============================================================
   32. Page prose —— 通用页面 / 法律页正文排版（page.php + the_content）
   ============================================================ */
.page-prose{max-width:780px;}
.page-prose > p:first-of-type em{color:var(--text-3);}
.page-prose h2{
  font-size:clamp(21px,2.2vw,27px); margin:40px 0 12px; padding-top:30px;
  border-top:1px solid var(--line);
}
.page-prose h2:first-of-type{margin-top:0; padding-top:0; border-top:0;}
.page-prose h3{font-size:17px; margin:24px 0 8px;}
.page-prose p{margin:0 0 14px; color:var(--text-2); line-height:1.65;}
.page-prose ul{margin:0 0 16px; padding-left:20px; color:var(--text-2);}
.page-prose li{margin:0 0 7px; line-height:1.6;}
.page-prose a{color:var(--ink-900); text-decoration:underline; text-decoration-color:var(--brand); text-underline-offset:3px;}
.page-prose a:hover{color:var(--brand);}
.page-prose strong{color:var(--ink-900);}
.page-prose em{font-style:normal; font-size:15px;}
.page-prose table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:15px;}
.page-prose th,.page-prose td{border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top; color:var(--text-2);}
.page-prose th{color:var(--ink-900); font-weight:600; background:rgba(10,12,16,.035);}

/* ============================================================
   品牌标记 v2（Print Flow）—— SVG 模式：透明底、随容器缩放
   ============================================================ */
.logo-mark--svg{background:none !important;color:transparent;}
.logo-mark--svg svg{display:block;width:100%;height:100%;}

/* ============================================================
   33. News —— 列表卡片 / 分页 / 单篇（文章系统）
   ============================================================ */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.5vw,20px);}
.news-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 22px;}
.news-card .meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
.news-card h3{font-size:20px;line-height:1.32;letter-spacing:-.01em;margin:2px 0 0;}
.news-card h3 a{color:var(--ink-900);text-decoration:none;}
.news-card h3 a:hover{color:var(--brand);}
.news-card p{color:var(--text-2);font-size:14px;line-height:1.62;margin:0;flex:1;}
.news-more{font-size:13.5px;font-weight:600;color:var(--brand);text-decoration:none;margin-top:6px;}
.news-more:hover{text-decoration:underline;}
.news-pager{display:flex;gap:8px;justify-content:center;margin-top:38px;flex-wrap:wrap;}
.news-pager .page-numbers{font-family:var(--font-mono);font-size:13px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink-900);text-decoration:none;}
.news-pager .page-numbers:hover{border-color:var(--ink-900);}
.news-pager .page-numbers.current{background:var(--ink-900);color:#fff;border-color:var(--ink-900);}
@media (max-width:1024px){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.news-grid{grid-template-columns:1fr;}}

/* 单篇 */
.post-meta{display:block;margin-top:14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);}
.post-cta{margin-top:48px;background:#0B0C0F;border-radius:var(--r);padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;}
.post-cta .t{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.01em;color:#fff;}
.post-cta p{color:#C9CDD4;font-size:14px;margin:6px 0 0;}
.post-back{margin-top:26px;}
.post-back a{color:var(--text-2);font-size:14px;text-decoration:none;}
.post-back a:hover{color:var(--brand);}