/* ============================================================
   ANNOSYNC 产品页共用样式（products / pdfword / chart）
   设计语言与主站一致：暖纸白底、墨字、朱砂强调。
   —— 只放产品矩阵与产品展示页用得到的骨架，不复制首页整屏逻辑。
   ============================================================ */
:root{
  --ink-950: #f5f1ec;
  --ink-900: #ede7e1;
  --ink-850: #e4dcd6;
  --ink-800: #dbd2cc;
  --ink-700: #c5bcb6;
  --line:    #c9c2be;
  --line-soft: #dcd6d2;
  --paper:   #17100e;
  --paper-dim: #3a302f;
  --paper-mute: #6a615f;
  --vermillion: #cb2b2d;
  --vermillion-bright: #ea3c3c;
  --vermillion-deep: #b32325;
  --brass: #dcb77f;
  --ff-serif: 'Noto Serif SC', 'Songti SC', serif;
  --ff-sans: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --ff-display: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  --ff-mono: 'Space Mono', 'SFMono-Regular', ui-monospace, monospace;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 1420px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; font-size:clamp(15px, 14.1px + 0.22vw, 16.8px); scrollbar-gutter:stable; }
body{
  background:var(--ink-950); color:var(--paper);
  font-family:var(--ff-sans); font-weight:300; line-height:1.7; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
p{ text-wrap:pretty; } h1,h2,h3{ text-wrap:balance; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--vermillion); color:var(--ink-950); }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- NAV（与主站同构；多一个「产品」下拉） ---------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(245,241,236,0.85); backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:baseline; gap:12px; }
.brand .cn{ font-family:var(--ff-serif); font-weight:900; font-size:21px; letter-spacing:.04em; }
.brand .en{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.22em; color:var(--paper-mute); }
.brand .seal{ width:9px; height:9px; border-radius:2px; background:var(--vermillion); box-shadow:0 0 0 3px rgba(205,68,61,0.22); align-self:center; }
nav.links{ display:flex; gap:30px; align-items:center; }
nav.links a{ font-size:14px; color:var(--paper-dim); letter-spacing:.02em; position:relative; padding:4px 0; transition:color .25s; }
nav.links a:hover{ color:var(--paper); }
nav.links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--vermillion); transition:width .3s var(--ease-out-quart); }
nav.links a:hover::after{ width:100%; }
nav.links a.active{ color:var(--paper); }
nav.links a.active::after{ width:100%; }
a.lang-switch{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;color:var(--paper-mute);border:1px solid var(--line);border-radius:3px;padding:3px 10px;transition:color .25s,border-color .25s;}
a.lang-switch:hover{color:var(--vermillion-bright);border-color:var(--vermillion);}
.acct-ic{
  width:30px; height:30px; border:1px solid var(--line); border-radius:4px;
  display:inline-grid; place-items:center; color:var(--paper-dim); align-self:center;
  transition:color .25s, border-color .25s;
}
.acct-ic:hover{ border-color:var(--vermillion); color:var(--vermillion-bright); }
/* ---------- 按钮 ---------- */
.btn{
  font-family:var(--ff-sans); font-weight:600; font-size:14px; letter-spacing:.02em;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; border:none;
  padding:13px 24px; border-radius:2px; transition:transform .3s var(--ease-out-quart), background .3s, color .3s, box-shadow .3s;
}
.btn-primary{ background:var(--vermillion); color:var(--ink-950); font-weight:700; }
.btn-primary:hover{ background:var(--vermillion-bright); transform:translateY(-2px); box-shadow:0 10px 30px rgba(203,43,45,0.35); }
.btn-ghost{ background:transparent; color:var(--paper); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--vermillion); color:var(--vermillion-bright); }
.btn-sm{ padding:10px 18px; font-size:13px; }

/* ---------- 产品页骨架 ---------- */
.prod-main{ padding-top:118px; }
.prod-hero{
  max-width:var(--maxw); margin:0 auto; padding:26px 28px 10px;
  display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center;
}
.prod-eyebrow{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.16em; color:var(--vermillion); text-transform:uppercase; }
.prod-hero h1{ font-family:var(--ff-serif); font-weight:900; line-height:1.14; letter-spacing:.01em; font-size:clamp(2.15rem, 4vw, 3.35rem); margin:12px 0 16px; }
.prod-hero h1 .accent{ color:var(--vermillion-bright); }
.prod-lede .accent{ color:var(--vermillion); font-weight:700; }
.prod-lede{ color:var(--paper-dim); font-size:clamp(1rem, 1.2vw, 1.1rem); max-width:48ch; margin-bottom:22px; }
.prod-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.prod-meta{ margin-top:20px; display:flex; gap:16px; flex-wrap:wrap; font-family:var(--ff-mono); font-size:11.5px; color:var(--paper-mute); letter-spacing:.05em; }
.prod-meta span{ display:inline-flex; align-items:center; gap:7px; }
.prod-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--vermillion); }

.prod-section{ max-width:var(--maxw); margin:0 auto; padding:56px 28px 0; }
.prod-section.tight{ padding-top:38px; }
.prod-h2{ font-family:var(--ff-serif); font-weight:900; font-size:clamp(1.45rem,2.2vw,2rem); line-height:1.25; margin-bottom:10px; }
.prod-sub{ color:var(--paper-dim); max-width:62ch; margin-bottom:24px; font-size:.98rem; }
/* 六件工具那句要占一行。62ch≈510px 装不下整句 903px 的墨宽（15.38px 字号现量），
   而 .prod-section 的内容宽 = min(--maxw 1420, 视口) − 56 ⇒ 视口 ≥960px 时 903 放得下。
   版心交回容器，窄屏按自然折行——那一档本来就没有 903px 的横向空间。
   刻意不限 62ch：ch 数的是拉丁数字形的宽，中文正文一字符 = 1em，用它给中文定行宽会把整句压成两行。 */
#tools-buy .prod-sub{ max-width:none; }
.prod-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.prod-grid.two{ grid-template-columns:repeat(2, 1fr); }
.prod-card{
  background:#fdfbf9; border:1px solid var(--line-soft); border-radius:10px;
  padding:22px 22px 20px; box-shadow:0 10px 26px rgba(28,20,18,.05);
}
.prod-card .k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; color:var(--vermillion); }
.prod-card h3{ font-size:1.02rem; margin:7px 0 8px; font-weight:700; }
.prod-card p{ color:var(--paper-dim); font-size:.92rem; line-height:1.65; }
.prod-card .tagline{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.tag{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.06em; color:var(--paper-mute); border:1px solid var(--line); border-radius:999px; padding:3px 9px; }

.prod-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.prod-step{ padding:18px 18px 16px; border-left:2px solid var(--vermillion); background:rgba(203,43,45,.035); border-radius:0 8px 8px 0; }
.prod-step .n{ font-family:var(--ff-mono); font-size:11px; color:var(--vermillion); letter-spacing:.12em; }
.prod-step h3{ font-size:.98rem; margin:5px 0 6px; }
.prod-step p{ color:var(--paper-dim); font-size:.88rem; line-height:1.6; }

.prod-boundary{ background:var(--ink-900); border:1px solid var(--line-soft); border-radius:10px; padding:22px 24px; }
.prod-boundary h3{ font-size:.98rem; margin-bottom:8px; }
.prod-boundary ul{ list-style:none; display:grid; gap:7px; }
.prod-boundary li{ color:var(--paper-dim); font-size:.9rem; padding-left:18px; position:relative; }
.prod-boundary li::before{ content:"—"; position:absolute; left:0; color:var(--vermillion); }

.prod-faq{ display:grid; gap:10px; }
.prod-faq details{ background:#fdfbf9; border:1px solid var(--line-soft); border-radius:8px; padding:14px 18px; }
.prod-faq summary{ cursor:pointer; font-weight:600; font-size:.95rem; }
.prod-faq p{ color:var(--paper-dim); font-size:.9rem; margin-top:8px; }
.prod-final{ max-width:var(--maxw); margin:0 auto; padding:64px 28px 0; }
.prod-final-box{
  background:#fdfbf9; border:1px solid var(--line); border-radius:12px; padding:34px 36px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.prod-final-box h2{ font-family:var(--ff-serif); font-weight:900; font-size:clamp(1.3rem,2vw,1.7rem); }
.prod-final-box p{ color:var(--paper-dim); font-size:.94rem; margin-top:6px; }
.prod-price{ font-family:var(--ff-mono); font-size:1.35rem; font-weight:700; color:var(--vermillion); margin-top:8px; }
.prod-price small{ font-size:.72rem; color:var(--paper-mute); font-weight:400; margin-left:4px; }

/* ---------- 视觉示意（纯 CSS，不依赖截图资源） ---------- */
.prod-visual{ position:relative; }
.mock{
  background:#fdfbf9; border:1px solid var(--line-soft); border-radius:12px;
  box-shadow:0 26px 54px rgba(28,20,18,.16), 0 6px 16px rgba(28,20,18,.06);
  padding:16px; position:relative; overflow:hidden;
}
.mock-head{ display:flex; align-items:center; gap:6px; padding-bottom:10px; border-bottom:1px solid var(--line-soft); margin-bottom:12px; }
.mock-head i{ width:8px; height:8px; border-radius:50%; background:var(--line); display:block; }
.mock-head i:first-child{ background:var(--vermillion); }
.mock-head b{ font-family:var(--ff-mono); font-size:10.5px; color:var(--paper-mute); letter-spacing:.08em; margin-left:6px; font-weight:400; }
.mock-sheet{ background:#fff; border:1px solid var(--line-soft); border-radius:6px; padding:14px 14px 12px; }
.mock-line{ height:6px; border-radius:3px; background:var(--ink-850); margin:6px 0; }
.mock-line.w80{ width:80%; } .mock-line.w60{ width:60%; } .mock-line.w92{ width:92%; } .mock-line.w40{ width:40%; }
.mock-foot{ margin-top:12px; padding-top:8px; border-top:1px dashed var(--line); font-family:var(--ff-mono); font-size:10px; color:var(--paper-mute); display:flex; gap:6px; }
.mock-foot b{ color:var(--vermillion); }
.mock-arrow{ font-family:var(--ff-mono); color:var(--vermillion); font-size:22px; text-align:center; margin:8px 0; }
.mock-table{ width:100%; border-collapse:collapse; }
.mock-table td{ border:1px solid var(--line-soft); padding:5px 7px; font-family:var(--ff-mono); font-size:9.5px; color:var(--paper-dim); }
.mock-table td:first-child{ color:var(--paper-mute); background:var(--ink-950); }
.mock-note{ font-size:10px; color:var(--paper-mute); font-family:var(--ff-mono); margin-top:10px; }
.mock-bars{ display:flex; align-items:flex-end; gap:10px; height:150px; padding:14px 8px 0; border-left:1px solid var(--line); border-bottom:1px solid var(--line); }
.mock-bars i{ display:block; width:22px; border-radius:4px 4px 0 0; background:var(--vermillion); opacity:.86; }
.mock-bars i:nth-child(2n){ background:#2f6f6a; }
.mock-bars i:nth-child(3n){ background:var(--brass); }
.mock-legend{ display:flex; gap:14px; margin-top:10px; font-family:var(--ff-mono); font-size:10px; color:var(--paper-mute); }
.mock-legend span{ display:inline-flex; align-items:center; gap:5px; }
.mock-legend em{ width:8px; height:8px; border-radius:2px; display:inline-block; }

/* 产品矩阵的「左选右买」：左边是 tab，右边选中的那件的最亮点 + 购买卡。
   没跑 JS 时两个面板都摊开（.js-tabs 才收），所以这里不许把 display:none 写成默认态。 */
.buy-wrap{ display:grid; grid-template-columns:216px 1fr; gap:22px; align-items:start; }
.buy-tabs{ display:flex; flex-direction:column; gap:10px; position:sticky; top:104px; }
.buy-tab{ display:grid; grid-template-columns:34px 1fr; column-gap:11px; row-gap:2px; align-items:center; text-align:left; cursor:pointer;
  background:var(--ink-900); border:1px solid var(--line-soft); border-radius:12px;
  padding:14px 16px; font-family:var(--ff-sans); color:var(--paper); transition:background .16s,border-color .16s; }
/* 产品图标（2026-10-23）：和页头、产品页用的是同一份资产（shared/nav.json 的 brand.products）；
   没有真图的那件仍是朱砂方印 + 标记字（`.mark` 来自 mnav.css，这里只改尺寸）。
   🔴 `.buy-tab.on span` 会把这一枚方印的字染成朱砂底同色，所以下面那条 color:#fff 不能省。 */
.buy-tab .buy-ic{ grid-row:1 / span 2; width:34px; height:34px; border-radius:8px; align-self:center; }
.buy-tab .mark.buy-ic{ color:#fff; font-size:17px; }
.buy-tab b{ font-family:var(--ff-serif); font-size:1.06rem; font-weight:900; }
.buy-tab span{ font-family:var(--ff-mono); font-size:.74rem; color:var(--paper-mute); }
.buy-tab:hover{ border-color:var(--vermillion); }
.buy-tab.on{ background:#fdfbf9; border-color:var(--vermillion); box-shadow:0 10px 26px rgba(28,20,18,.07); }
.buy-tab.on span{ color:var(--vermillion); }
.buy-panes{ display:flex; flex-direction:column; gap:22px; }
.buy-pane{ display:grid; grid-template-columns:1fr 250px; gap:22px; align-items:start;
  background:#fdfbf9; border:1px solid var(--line-soft); border-radius:12px; padding:22px 24px;
  box-shadow:0 14px 34px rgba(28,20,18,.06); }
.buy-body h3{ font-family:var(--ff-serif); font-size:1.34rem; font-weight:900; margin-bottom:12px; }
.buy-body h3 .accent{ color:var(--vermillion); }
.buy-hl{ list-style:none; display:grid; gap:9px; }
.buy-hl li{ position:relative; padding-left:18px; color:var(--paper-dim); font-size:.95rem; }
.buy-hl li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  border-radius:2px; background:var(--brass); }
.buy-card{ display:flex; flex-direction:column; gap:12px; align-self:stretch;
  background:var(--ink-900); border:1px solid var(--line-soft); border-radius:12px; padding:18px 18px 16px; }
.buy-price{ font-family:var(--ff-mono); font-size:1.5rem; color:var(--vermillion); font-weight:700; }
.buy-price small{ font-size:.68rem; color:var(--paper-mute); font-weight:400; }
.buy-meta{ display:flex; flex-wrap:wrap; gap:6px; }
.buy-meta span{ font-family:var(--ff-mono); font-size:.7rem; color:var(--paper-mute);
  background:var(--ink-950); border:1px solid var(--line-soft); border-radius:6px; padding:3px 8px; }
.buy-card .btn{ margin-top:auto; }
.buy-more{ align-self:center; font-size:.82rem; color:var(--paper-mute); }
.buy-more:hover{ color:var(--vermillion); }
/* JS 在场才收起没选中的面板：点 tab 只切这一位的显隐 */
.js-tabs .buy-pane{ display:none; }
.js-tabs .buy-pane.on{ display:grid; }
/* 页头是 fixed 的（.nav-inner 72 + 1px 边框 = 实测 73px），锚点落点要按它算：
   旧值 112 加上 .prod-section 的 56 上内边距 ⇒ 标题落在 168px，页头下面空出一截
   看上去像"卡在上一节尾巴"。44 + 56 = 100（≤620px 那档上内边距是 40 ⇒ 84），
   两种屏宽下「六件 ID 工具」标题都在页头之下、且紧贴页头。 */
#tools-buy{ scroll-margin-top:44px; }
.coming{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.coming div{ background:var(--ink-900); border:1px solid var(--line-soft); border-radius:8px; padding:14px 16px; font-size:.9rem; color:var(--paper-dim); }
.coming small{ display:block; font-family:var(--ff-mono); font-size:10px; color:var(--paper-mute); margin-top:3px; letter-spacing:.06em; }

/* ---------- 真实界面截图与速览徽标（2026-10-23） ---------- */
.prod-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 18px; }
.prod-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--ff-mono);
  font-size:11px; letter-spacing:.04em; color:var(--paper-dim);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; background:rgba(203,43,45,.045); }
.prod-badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--vermillion); }
.prod-figure{ margin:0; }
.prod-shot{ display:block; width:100%; height:auto; background:#fff;
  border:1px solid var(--line-soft); border-radius:10px; box-shadow:0 22px 48px rgba(28,20,18,.14); }
.prod-figure figcaption{ margin-top:10px; color:var(--paper-mute); font-size:.82rem; line-height:1.65; }
.prod-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.prod-gallery .prod-figure figcaption{ margin-top:6px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.06em; color:var(--paper-mute); }
.prod-reports{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.prod-answer{ background:#fdfbf9; border:1px solid var(--line-soft); border-radius:10px; padding:18px 22px; margin-bottom:12px; }
.prod-answer h3{ font-size:.98rem; margin-bottom:6px; }
.prod-answer p{ color:var(--paper-dim); font-size:.92rem; line-height:1.7; }

/* ---------- 页脚（与主站一致） ---------- */
.foot{ border-top:1px solid var(--line-soft); padding:34px 0 20px; margin-top:70px; }
.foot-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; max-width:1880px; }
.foot-inner .f-support{ color:var(--paper-dim); }
.foot-inner .small{ font-family:var(--ff-mono); font-size:11px; color:var(--paper-mute); letter-spacing:.08em; }

@media (max-width:1080px){
  .prod-hero{ grid-template-columns:1fr; gap:30px; }
  .prod-visual{ max-width:560px; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .prod-flow{ grid-template-columns:repeat(2,1fr); }
  .coming{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  /* 窄屏：tab 变横排、面板内部竖着堆，别留一个 216px 的左栏把正文挤成一条 */
  .buy-wrap{ grid-template-columns:1fr; gap:14px; }
  .buy-tabs{ position:static; flex-direction:row; flex-wrap:wrap; }
  /* 2026-10-24：在售第四件（拓音）加进来之后，一行四格在 ~500px 宽会把名字挤成竖排；
     两列换行比缩小字号更稳（字号是产品页的品牌语汇，不跟着件数变）。 */
  .buy-tab{ flex:1 1 calc(50% - 5px); min-width:0; }
  .buy-pane{ grid-template-columns:1fr; }
  .prod-reports{ grid-template-columns:1fr; }
  .prod-gallery{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  /* nav.links 的收起与汉堡按钮由 mnav.css 在 ≤700px 统一管；
     这里再写一遍会留出一个「链接已经没了、汉堡还没来」的死档 */
  .prod-main{ padding-top:96px; }
  .prod-hero{ padding:18px 20px 6px; }
  .prod-section{ padding:40px 20px 0; }
  .prod-grid,.prod-grid.two,.prod-flow{ grid-template-columns:1fr; }
  .prod-gallery{ grid-template-columns:1fr; }
  .prod-final{ padding:44px 20px 0; }
  .prod-final-box{ padding:26px 22px; }
  .coming{ grid-template-columns:1fr 1fr; }
  .foot-inner{ padding:0 20px; }
}

/* ---------- 2026-10-25 产品总览页重设计：产品星座 + 六件卡片 ---------- */
.matrix-board{
  background:#fdfbf9; border:1px solid var(--line-soft); border-radius:14px;
  padding:18px; box-shadow:0 26px 54px rgba(28,20,18,.16), 0 6px 16px rgba(28,20,18,.06);
}
.matrix-main{
  display:flex; align-items:center; gap:12px; padding:14px;
  border:1px solid var(--line-soft); border-radius:10px; background:var(--ink-950);
}
.matrix-main .mark{
  width:38px; height:38px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--vermillion); color:#fff; font-family:var(--ff-serif); font-size:18px; font-weight:900;
}
.matrix-main b{ display:block; font-family:var(--ff-serif); font-size:1.08rem; line-height:1.3; }
.matrix-main small{ display:block; margin-top:2px; font-family:var(--ff-mono); font-size:10.5px; color:var(--paper-mute); letter-spacing:.04em; }
.matrix-tag{ margin-left:auto; font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; color:var(--vermillion); border:1px solid rgba(203,43,45,.35); border-radius:999px; padding:3px 8px; }
.matrix-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.matrix-tile{ display:flex; align-items:center; gap:7px; padding:9px 10px; border:1px solid var(--line-soft); border-radius:8px; background:#fff; font-size:.8rem; color:var(--paper-dim); }
.matrix-tile img,.matrix-tile .mark{ width:22px; height:22px; border-radius:5px; flex:none; display:grid; place-items:center; }
.matrix-tile .mark{ background:var(--vermillion); color:#fff; font-family:var(--ff-serif); font-size:12px; font-weight:900; }
.matrix-foot{ margin-top:10px; font-family:var(--ff-mono); font-size:10.5px; color:var(--paper-mute); letter-spacing:.04em; }
.matrix-foot b{ color:var(--vermillion); }

.main-product{
  display:grid; grid-template-columns:1.35fr .65fr; gap:24px; align-items:center;
  background:#fdfbf9; border:1px solid var(--line-soft); border-radius:12px; padding:26px 28px;
  box-shadow:0 14px 34px rgba(28,20,18,.06);
}
.prod-card-k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; color:var(--vermillion); }
.main-product h3{ font-family:var(--ff-serif); font-size:1.45rem; line-height:1.3; margin:8px 0 10px; }
.main-product p{ color:var(--paper-dim); font-size:.95rem; max-width:62ch; }
.main-product .tagline{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.main-product-side{ display:flex; flex-direction:column; gap:10px; align-self:center; }

.tool-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tool-card{
  display:flex; flex-direction:column; background:#fdfbf9; border:1px solid var(--line-soft);
  border-radius:12px; padding:20px; box-shadow:0 10px 26px rgba(28,20,18,.05);
  transition:border-color .2s, transform .2s var(--ease-out-quart);
}
.tool-card:hover{ border-color:var(--vermillion); transform:translateY(-2px); }
.tool-head{ display:flex; align-items:flex-start; gap:12px; }
.tool-ic{ width:40px; height:40px; border-radius:9px; flex:none; display:block; }
.tool-ic.mark{ background:var(--vermillion); color:#fff; font-family:var(--ff-serif); font-size:17px; font-weight:900; display:grid; place-items:center; }
.tool-head h3{ font-family:var(--ff-serif); font-size:1.08rem; line-height:1.3; font-weight:900; }
.tool-note{ font-size:.8rem; color:var(--paper-mute); margin-top:3px; }
.tool-price{ margin-left:auto; font-family:var(--ff-mono); font-size:1.05rem; font-weight:700; color:var(--vermillion); white-space:nowrap; }
.tool-hl{ list-style:none; display:grid; gap:8px; margin:16px 0 18px; }
.tool-hl li{ position:relative; padding-left:16px; color:var(--paper-dim); font-size:.88rem; line-height:1.6; }
.tool-hl li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:2px; background:var(--brass); }
.tool-foot{ margin-top:auto; display:flex; align-items:center; gap:14px; }
.tool-more{ font-size:.8rem; color:var(--paper-mute); }
.tool-more:hover{ color:var(--vermillion); }

.support-box{
  display:grid; grid-template-columns:1.25fr .75fr; gap:28px; align-items:start;
  background:var(--ink-900); border:1px solid var(--line-soft); border-radius:12px; padding:28px 30px;
}
.support-box .prod-sub{ margin-bottom:0; max-width:58ch; }
.support-contact{ display:grid; gap:10px; align-content:start; }
.support-qq{ display:flex; justify-content:space-between; align-items:center; gap:12px; background:#fdfbf9; border:1px solid var(--line-soft); border-radius:8px; padding:10px 14px; font-size:.85rem; color:var(--paper-dim); }
.support-qq b{ font-family:var(--ff-mono); color:var(--vermillion); font-size:.92rem; white-space:nowrap; }

@media (max-width:1080px){
  .tool-grid{ grid-template-columns:repeat(2,1fr); }
  .main-product{ grid-template-columns:1fr; }
  .support-box{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .matrix-tiles{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .tool-grid{ grid-template-columns:1fr; }
  .matrix-tiles{ grid-template-columns:repeat(2,1fr); }
  .main-product{ padding:22px 20px; }
  .support-box{ padding:24px 20px; }
  .tool-head{ gap:10px; }
  .tool-price{ font-size:1rem; }
}

.tool-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.tool-tags span{ font-family:var(--ff-mono); font-size:.68rem; color:var(--paper-mute);
  background:var(--ink-950); border:1px solid var(--line-soft); border-radius:5px; padding:3px 7px; }