/* assets/css/base.css — 重置、基础排版、容器工具、焦点样式、图标与状态原子。
   与 lingjiuw/frontend 同一套工程感：全站直角、细结构线、朱砂只做标记。 */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--serif); margin:0; line-height:1.3; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
/* max-width 只压宽度不改高度：带 height 属性的图片会被纵向拉长（页头 logo 印章
   在 40px 容器里渲染成 40×64，可见内容因此下坠 12px），height:auto 把高度交还给固有比例。 */
img{ height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }

/* ============ 容器与区块节奏 ============ */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.wrap-wide{ max-width:var(--wrap-wide); margin-inline:auto; padding-inline:24px; }
.band{ padding-block:var(--sp-9); }
/* 白底带与深底带：站内区块交替的两种底，放这里而不是各 section 文件，
   因为 8 个页面都在用（基准项目只有单页，把它放在了 sections/page.css）。 */
.band--surface{ background:var(--surface); border-block:1px solid var(--line); }
.band--deep{ background:var(--ink-deep); color:#E8EEF5; border:0; }

:focus-visible{ outline:2px solid var(--cinnabar); outline-offset:3px; }

/* ============ 跳转链接：键盘用户第一下 Tab 就能跳过导航直达正文 ============ */
.skip-link{
  position:absolute; left:12px; top:-64px; z-index:60;
  padding:10px 18px; background:var(--ink); color:#fff; font-size:14px; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{ top:12px; }

/* 内联图标库：整站一套单线图形，symbol 定义在每页 body 顶部 */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* 只给读屏用的文本：表格 caption、图标替代文字这类不该出现在版面上的说明。
   不用 display:none —— 那会连读屏一起藏掉。 */
.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;
}

/* ============ 图标：整站一套单线图形，图形定义见每页顶部的 symbol 库 ============ */
.ico{
  width:20px; height:20px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico--sm{ width:16px; height:16px; }
.ico--lg{ width:24px; height:24px; }
.ico--xl{ width:28px; height:28px; }

/* ============ 原子：状态点、朱砂标记、标签、衬线数字 ============ */
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; flex:none; }
.dot-ok{ background:var(--ok); }
.dot-live{ background:var(--ok-on-light); }
@media (prefers-reduced-motion: no-preference){
  .dot-pulse{ animation:dotPulse 2.4s ease-out infinite; }
  @keyframes dotPulse{
    0%{ box-shadow:0 0 0 0 rgba(55,163,114,.45); }
    70%{ box-shadow:0 0 0 7px rgba(55,163,114,0); }
    100%{ box-shadow:0 0 0 0 rgba(55,163,114,0); }
  }
}

/* 朱砂方块：全站唯一的纯装饰件，用在分类标题与流程节点前 */
.mark{ display:inline-block; width:9px; height:9px; background:var(--cinnabar); flex:none; }

/* 标签：浅色底上的短标记，用于套餐档位、能力包、行业 */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; background:var(--cinnabar-s); color:var(--cinnabar);
  font-size:13px; font-weight:500; line-height:1.6;
}
.tag--line{ background:transparent; border:1px solid var(--line-dark); color:var(--muted); }

/* 衬线数字：价格、指标、步骤号共用一套数字排版 */
.num{ font-family:var(--serif); font-weight:900; font-variant-numeric:lining-nums; }

/* 文本工具：只保留真正反复用到的两个 */
.muted{ color:var(--muted); }
.nowrap{ white-space:nowrap; }