/* ============================================================
   维图传媒 · 设计系统层 ds.css(t52)
   在 site.css 之后加载,是全站排版 / 间距 / 组件的唯一收口层。
   原则:深色 + 克制金(只用于主行动与结论)+ 青玉(数据);
   8 点间距节奏;中文正文 16px/1.75;减少金框与无目的动效。
   不改 t49/t50 的主表 sticky 规则(只调字号与列宽)。
   ============================================================ */

/* 1 · Tokens ------------------------------------------------ */
:root{
  --wrap:1240px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --sec-y:var(--s8); --block-mt:var(--s5); --block-gap:var(--s4);
  --card-pad:var(--s5); --panel-pad:var(--s4) var(--s5);
  --radius:12px; --radius-sm:8px;
  --line:rgba(140,160,190,.18); --line-hi:rgba(140,160,190,.32);
  --gold-line:rgba(217,180,90,.38);
  --focus:0 0 0 2px var(--bg),0 0 0 4px var(--accent-ink);
  --sans:"PingFang SC","Noto Sans SC","Microsoft YaHei",Inter,system-ui,-apple-system,sans-serif;
  --t1:clamp(2rem,1.35rem + 2.2vw,3rem);
  --t2:clamp(1.5rem,1.2rem + 1vw,2rem);
  --t3:1.25rem; --t4:1.0625rem;
  --body:1rem; --small:.875rem; --micro:.8125rem;
  --measure:46rem;
}
body[data-page="pricing"]{--wrap:1320px}
@media(max-width:900px){:root{--sec-y:var(--s7);--card-pad:var(--s4)}}

/* 2 · Base typography -------------------------------------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--sans);font-size:var(--body);line-height:1.75;letter-spacing:0;color:var(--text)}
p{margin:0 0 var(--s3)}
h1,h2,h3,h4{letter-spacing:0;font-weight:700;text-wrap:balance}
.wrap{padding-left:var(--s5);padding-right:var(--s5)}
@media(max-width:720px){.wrap{padding-left:var(--s4);padding-right:var(--s4)}}
.sec{padding:var(--sec-y) 0}
.eyebrow{font-size:var(--micro);letter-spacing:.14em;color:var(--accent2);margin-bottom:var(--s2)}
.sec-t{font-size:var(--t2);line-height:1.3;margin:0 0 var(--s3)}
.sec-d{font-size:var(--t4);line-height:1.75;color:var(--text-2);max-width:var(--measure);margin-bottom:var(--s5)}
.sec-d.center{margin-left:auto;margin-right:auto}
.page-hero h1,.mod-hero h1,.hero h1{font-size:var(--t1);line-height:1.2;margin:var(--s3) 0 var(--s4)}
.page-hero .lead,.mod-hero .pain{font-size:1.125rem;line-height:1.8;max-width:52rem;color:var(--text-2)}
.page-hero{padding:var(--s8) 0 var(--s7)}
.crumb{font-size:var(--small);color:var(--text-3)}
.crumb a{color:var(--text-2)}
.crumb a:hover{color:var(--text)}
.fine,.chart-note,.hud-foot{font-size:var(--small);line-height:1.7;color:var(--text-3)}
b,strong{font-weight:650}
/* 页面里的强调色只给结论,不给整段 */
.sec-d b[style*="color:var(--text)"]{font-weight:650}

/* 3 · Navigation ------------------------------------------- */
.nav{background:rgba(7,9,14,.92);border-bottom:1px solid var(--line)}
.nav-links a{font-size:.9375rem;padding:var(--s2) var(--s3);min-height:40px;display:inline-flex;align-items:center}
.nav-links a.active,.nav-links a[aria-current="page"]{color:var(--text);font-weight:600}
.nav-links a.active::after{left:var(--s3);right:var(--s3);bottom:4px;height:2px;background:var(--accent-ink)}
.hamb{background:none;border:0;color:inherit;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.hamb span{display:block;width:20px;height:2px;background:var(--text-2)}

/* 4 · Buttons ---------------------------------------------- */
.btn{min-height:44px;padding:0 var(--s5);font-size:.9375rem;font-weight:650;border-radius:var(--radius-sm);color:#1a1408;letter-spacing:.01em;box-shadow:none}
.btn:hover{transform:none;box-shadow:none;background:#C9A55A}
.btn.alt{color:var(--text);background:transparent;border:1px solid var(--line-hi)}
.btn.alt:hover{background:rgba(255,255,255,.04);border-color:var(--text-3)}
.btn.sm{min-height:36px;padding:0 var(--s4);font-size:var(--small)}
.btn:focus-visible,.chip:focus-visible,.pbtn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--radius-sm)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3)}
.pbtn{min-height:44px;font-size:.9375rem;border-radius:var(--radius-sm)}

/* 5 · Chips / tags ---------------------------------------- */
.chip{font-size:var(--micro);padding:var(--s1) var(--s3);min-height:32px;display:inline-flex;align-items:center;border-color:var(--line);background:transparent}
.chip.on{border-color:var(--gold-line);background:rgba(217,180,90,.08);color:var(--text)}
button.chip{cursor:pointer}
.chips{gap:var(--s2)}

/* 6 · Cards / panels --------------------------------------- */
.card,.plan,.hud-panel,.acc-item,.acc-d,.callout,.bench{border-radius:var(--radius)}
.card,.plan{border:1px solid var(--line);box-shadow:none;background:var(--surface)}
.card:hover,.plan:hover{transform:none;box-shadow:none;border-color:var(--line-hi)}
.card h3,.plan h3{font-size:var(--t3);line-height:1.4}
.card p{font-size:.9375rem;line-height:1.7}
.hud-panel{border:1px solid var(--line);background:rgba(18,25,32,.72);box-shadow:none}
.callout{border:1px solid var(--line);border-left:3px solid var(--accent2);background:rgba(78,182,194,.04);padding:var(--s4) var(--s5);color:var(--text-2);line-height:1.75}
.callout b:first-child{color:var(--text)}
.bench{border:1px solid var(--line);background:rgba(255,255,255,.02);padding:var(--s4) var(--s5);line-height:1.75}
.plan.feat{border-color:var(--gold-line);box-shadow:none}
.g2,.g3,.g4,.g5,.grid2{gap:var(--s4)}

/* 7 · Forms ------------------------------------------------ */
.field{gap:var(--s2)}
.field label{font-size:var(--small);color:var(--text-2);font-weight:600;font-family:var(--sans);letter-spacing:0}
.field input,.field select,.field textarea{min-height:44px;font-size:1rem;border-color:var(--line-hi);border-radius:var(--radius-sm);background:#0b1118}
.field textarea{min-height:96px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent-ink);box-shadow:0 0 0 3px rgba(217,180,90,.16)}
.field input[aria-invalid="true"]{border-color:#f87171}
.field .help,.field small{font-size:var(--micro);color:var(--text-3)}
.form-status{font-size:var(--small);line-height:1.6;border-radius:var(--radius-sm)}
.form-status.err{color:#fca5a5;border-color:rgba(248,113,113,.45);background:rgba(248,113,113,.08)}
.form-status.ok{color:#86efac;border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.07)}
.roi-in .field label{font-family:var(--sans);font-size:var(--small);color:var(--text-2)}

/* 8 · FAQ / accordions ------------------------------------- */
.acc-item{border-color:var(--line);margin-bottom:var(--s2);background:var(--surface)}
.acc-head{min-height:56px;padding:var(--s4) var(--s5);font-size:var(--t4);font-weight:650}
.acc-item.open .acc-body{max-height:none}
.acc-body p{font-size:.9375rem;line-height:1.8;color:var(--text-2);padding:0 var(--s5) var(--s4)}
.acc-d{border:1px solid var(--line);background:var(--surface)}
.acc-d>summary{min-height:48px;padding:var(--s3) var(--s4);cursor:pointer;list-style:none;display:flex;gap:var(--s3);align-items:center;justify-content:space-between}
.acc-d>summary::-webkit-details-marker{display:none}
.acc-d>summary::after{content:"+";color:var(--text-3);font-size:1.1rem;margin-left:auto}
.acc-d[open]>summary::after{content:"−"}
.acc-d>summary span{font-size:var(--micro);color:var(--text-3)}
.acc-d p{padding:0 var(--s4) var(--s4);font-size:.9375rem;line-height:1.8;color:var(--text-2)}

/* 9 · Data tables ------------------------------------------ */
table.matrix{font-size:.9375rem}
table.matrix th,table.matrix td{padding:var(--s3) var(--s4)}
table.matrix thead th{font-size:var(--small);font-weight:650;color:var(--text)}
.matrix-wrap{border-color:var(--line)}
/* 订阅主表:放大可读,sticky 规则沿用 t49/t50 */
table.matrix.svc6{min-width:1120px;font-size:.9375rem}
table.matrix.svc6 thead th{min-width:136px}
table.matrix.svc6 thead th b{font-size:.9375rem}
table.matrix.svc6 thead th span{font-size:.8125rem}
table.matrix.svc6 thead th .h-fee{font-size:1rem;color:var(--accent-ink)}
table.matrix.svc6 .h0,table.matrix.svc6 td.n6{min-width:300px;max-width:340px}
table.matrix.svc6 td.n6{font-size:.9375rem;line-height:1.55}
table.matrix.svc6 .u6{font-size:.8125rem;line-height:1.5;color:var(--text-3)}
table.matrix.svc6 .q6{font-size:.875rem;line-height:1.5}
table.matrix.svc6 .ck{font-size:1.25rem}
table.matrix.svc6 td{padding:var(--s3) var(--s3)}
table.matrix.svc6 .g6-t{font-size:.9375rem;padding:var(--s3) var(--s4)}
.svc6-bar{font-size:var(--small);gap:var(--s3)}
.svc6-legend{font-size:var(--micro)}
.svc6-q{min-height:36px;font-size:var(--small)}
.scroll-hint{display:none;font-size:var(--micro);color:var(--text-3);margin:0 0 var(--s2)}
@media(max-width:1100px){.scroll-hint{display:block}}
table.addon6,table.alloc6{font-size:.875rem}
table.addon6 td,table.alloc6 td,table.addon6 th,table.alloc6 th{padding:var(--s2) var(--s3);text-align:left}
.rules6{font-size:.9375rem;line-height:1.85;color:var(--text-2)}
.rules6 li{margin-bottom:var(--s2)}

/* 10 · Pricing specifics ----------------------------------- */
.pay6{gap:var(--s3)}
.pay6 .py{padding:var(--s3) var(--s4);border-radius:var(--radius);border-color:var(--line);font-size:var(--micro)}
.pay6 .py b{font-size:.9375rem}
.pay6 .py strong{font-size:1.0625rem;color:var(--accent-ink)}
.tiergrid-mini .plan{padding:var(--s5)}
.tiergrid-mini .plan .price b{font-size:1.75rem;color:var(--accent-ink)}
.tiergrid-mini .plan .price i{font-size:var(--small);color:var(--text-3);font-style:normal}
.tiergrid-mini .plan .fee,.tiergrid-mini .plan .fit{font-size:var(--small);line-height:1.6}
/* 历史版本:明确降级为参考 */
.legacy5-d{border:1px dashed var(--line-hi);background:rgba(255,255,255,.015);opacity:.92}
.legacy5-d>summary b::before{content:"历史 ";font-size:var(--micro);color:var(--text-3);border:1px solid var(--line-hi);border-radius:4px;padding:0 6px;margin-right:6px;font-weight:500}

/* 11 · Footer & CTA bar ----------------------------------- */
.foot{border-top:1px solid var(--line)}
.foot a{font-size:var(--small)}
.foot h4{font-size:var(--small);letter-spacing:.06em;color:var(--text-2)}
#book .sec-t,#book .sec-d{text-align:center}

/* 12 · Motion: 克制 --------------------------------------- */
[data-reveal]{transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}

/* 13 · Mobile ---------------------------------------------- */
@media(max-width:720px){
  .page-hero{padding:var(--s7) 0 var(--s6)}
  .sec-d{font-size:1rem}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .acc-head{padding:var(--s3) var(--s4)}
  table.matrix th,table.matrix td{padding:var(--s2) var(--s3)}
  table.matrix.svc6 .h0,table.matrix.svc6 td.n6{min-width:200px;max-width:220px}
  table.matrix.svc6 thead th{min-width:120px}
  .pay6 .py{padding:var(--s3)}
}

/* 14 · t52b 桌面容器与最小字号收口 -------------------------
   容器宽 = 内容宽 + 两侧 padding;≥1100px 两侧 40px,
   1280 视口内容约 1200px,1440 视口内容 1240px(价格页 1320px)。 */
.wrap{box-sizing:border-box;width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter,24px));padding-left:var(--gutter,24px);padding-right:var(--gutter,24px)}
@media(min-width:1100px){:root{--gutter:40px}}
@media(max-width:720px){:root{--gutter:16px}}
html{font-size:100%}
/* 表内最小字号:注释 13px、数量 14px、正文 15px,不随容器缩小 */
table.matrix.svc6 .u6,table.matrix.svc6 thead th span,.svc6-legend,.chart-note{font-size:max(.8125rem,13px)}
table.matrix.svc6 .q6{font-size:max(.875rem,14px)}
table.matrix.svc6 td.n6,table.matrix.svc6{font-size:max(.9375rem,15px)}