@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   首页 v2 · 新增组件样式 · 2026-09-21

   ── 合站时并到哪 ──────────────────────────────────────────────
   §1 .usp / §2 .spreads + .qtable / §3 .licence
       → 并入 site.css 第 15 节「清单 / 流程 / 对比 / 定义列表」之后
         (即 site.css:778 与第 16 节「表单」的分隔线之间)。
   §4 页脚 5 栏 + .footer__strip
       → ⚠️ 这一节**不能**跟着 §1–§3 并到第 15 节之后。
         `.footer__cols{grid-template-columns:repeat(4,1fr)}` 在 site.css:996,
         同选择器同权重,后到者胜;并到 778 就排在 996 之前,4 栏赢,
         第 5 栏掉到第二行。必须排在 996 之后 ——
         落位取第 20 节那个 `@media (min-width:1024px)` 块收尾的 `}`(997)之后。
         预览页看不出这个坑:那里 home-v2.css 是整份排在 site.css 之后的。
   §5 首屏中文主标题的断行
       → 并入 site.css 第 10 节「首屏」,紧跟 `.hero h1 .seg{display:block}`。
   §6 .nobreak
       → 跟 §1–§3 一起走(它不跟任何既有规则争权重)。

   ── 色值 ──────────────────────────────────────────────────────
   本文件不定义任何新颜色,全部取自 brand/tokens-*.css。
   涨跌两档用 --c-success-700 / --c-danger-700(700 档是为正文对比度定的档位,
   不是图形档),并且**不靠颜色单独承载信息** —— 每一格都带 ▲ / ▼ 记号与数值。
   ══════════════════════════════════════════════════════════════════ */

/* ── §1 三项优势:并排的特性条 ──────────────────────────────────── */
.usp {
  display: grid;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}
.usp__item {
  display: grid;
  gap: var(--s-2) var(--s-5);
  grid-template-columns: 1fr;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-border);
  border-block-start: 2px solid var(--c-primary-600);
  background: var(--c-surface);
}
/* 副标题恒定另起一行:靠 flex 换行的话,中文长句会折、英文短句不折,
   同一排三张卡就长出两种版式。这里钉死成两行,中英文一致。 */
.usp__head {
  display: grid;
  gap: var(--s-1);
}
.usp__name {
  font-weight: 600;
  color: var(--c-text);
  font-size: var(--fs-h4);
}
.usp__note {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}
.usp__body {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  margin: 0;
}
@media (min-width: 900px) {
  .usp { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; }
  /* 三张卡共用同一组行轨:副标题折不折行,正文都从同一条基线开始。
     .ovp-imp 是绝对定位,不占行,所以卡内在流的只有 head 与 body 两行。 */
  .usp__item { grid-row: span 2; grid-template-rows: subgrid; }
}

/* ── §2 品类页签 + 报价表 ──────────────────────────────────────── */
.spreads__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-7);
  border-block-end: 1px solid var(--c-border-strong);
  padding-block-end: var(--s-3);
}
.spreads__tab {
  appearance: none;
  cursor: pointer;
  padding: var(--s-2) var(--s-4);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-2);
  background: none;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-0);
  transition: color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}
.spreads__tab:hover { color: var(--c-text); }
/* 选中态对比度按 --c-on-primary on --c-primary-600 计,两套主题都要进校验清单 ——
   上一轮的遗漏点:新增了这一对,却没把它补进 check-contrast.py 的被测项。 */
.spreads__tab[aria-selected="true"] {
  color: var(--c-on-primary);
  background: var(--c-primary-600);
  border-color: var(--c-primary-600);
}
.spreads__panel[hidden] { display: none; }

.qtable {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block-start: var(--s-5);
}
.qtable caption {
  caption-side: top;
  text-align: start;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  padding-block-end: var(--s-3);
}
.qtable th,
.qtable td {
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--c-divider);
  text-align: end;
}
.qtable th:first-child,
.qtable td:first-child { text-align: start; }
.qtable thead th {
  border-block-end: 1px solid var(--c-border-strong);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.qtable tbody tr:last-child td { border-block-end: 0; }
.qtable__sym {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-text);
  font-weight: 600;
}
.qtable__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.qtable__spread {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
}
/* 涨跌:记号 + 数值 + 颜色三重编码。去掉颜色这一格仍然读得出方向。 */
.qtable__trend {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.qtable__trend--up { color: var(--c-success-700); }
.qtable__trend--down { color: var(--c-danger-700); }
.qtable__trend::before {
  content: attr(data-dir) " ";
}

@media (max-width: 720px) {
  .qtable thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .qtable tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-1) var(--s-4);
    padding-block: var(--s-3);
    border-block-end: 1px solid var(--c-divider);
  }
  .qtable td { border: 0; padding: 0; text-align: start; }
  .qtable td::after {
    content: attr(data-label);
    display: block;
    order: -1;
    color: var(--c-text-3);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
  }
  .qtable td { display: flex; flex-direction: column; }
  .qtable td:first-child { grid-column: 1 / -1; }
  .qtable td:first-child::after { content: none; }
}

/* ── §3 牌照:按状态分组的清单 ────────────────────────────────────
   申请中那组**不用虚线**。这套视觉语言里虚线专指「待确认 / 被拒 / 间接」,
   而 site.css:1045 已经把虚线卡定义成「这里将来会变成一张卡」。
   一份已经递交的申请不是一张未来的卡,它是一件此刻成立的事实,
   只是结果未定 —— 所以边框实线,靠底色与状态标记分档,不靠虚线。 */
.licence {
  display: grid;
  gap: var(--s-7);
  margin-block-start: var(--s-6);
}
.licence__group { display: grid; gap: var(--s-4); }
.licence__grouptitle {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--c-text);
  margin: 0;
  padding-block-end: var(--s-2);
  border-block-end: 1px solid var(--c-border-strong);
}
/* 列数跟着条数走:已持牌 2 张铺满一行,申请中 4 张铺成 2×2,都不掉孤儿卡。
   三列在这两个条数下都会掉队(2 → 空一格,4 → 第 4 张独占一行)。 */
.licence__grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 640px) {
  .licence__grid { grid-template-columns: repeat(2, 1fr); }
}
.licence__item {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.licence__item--held { border-block-start: 2px solid var(--c-primary-600); }
.licence__item--pending {
  background: none;
  border-color: var(--c-border-strong);
}
/* .tag 是 inline-flex,但作为 grid 直接子项会被 stretch 拉满宽,渲出来是横杠不是胶囊。 */
.licence__item .tag { justify-self: start; }
.licence__place {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--c-text);
}
.licence__body {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  margin: 0;
}
.licence__no {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-text-2);
  margin: 0;
}
.licence__no b {
  font-weight: 600;
  color: var(--c-text);
}

/* ── §4 页脚:4 栏 → 5 栏,外加两条横栏 ───────────────────────────
   ⚠️ 必须排在 site.css:996 那条 4 栏规则之后。 */
@media (min-width: 1024px) {
  .footer__cols { grid-template-columns: repeat(5, 1fr); }
}
.footer__strip {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-block-start: 1px solid var(--c-divider);
}
.footer__striptitle {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-2);
  letter-spacing: .04em;
  margin: 0;
}
.footer__stripbody {
  margin: 0;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  max-width: 68em;
}

/* ── §4b 页脚法定文本 ─────────────────────────────────────────────
   四段落在栏目区之下、版权行之上。
   ⚠️ 风险警示那一节**不是小字**:--fs-risk 必须 = --fs-body 且字重 700,
   依据 10-设计系统-tokens.md §2.4(塞舌尔 S.I. 118/2024 附表 7(7)(a)(b):
   字号至少等于主导字号、须粗体)。该节明令禁用 --fs-sm。
   其余三节是披露不是警示,用 --fs-sm。
   ⚠️ 前景色刻意复用 --c-text / --c-text-2 / --c-text-3,不另调更浅的灰:
   这几对已经在对比度清单里,新调一个色就等于新增一对未被测过的组合。 */
.footer__legals {
  padding-block: var(--s-6);
  border-block-start: 1px solid var(--c-border);
  border-block-end: 1px solid var(--c-border);
}
.footer__legals-lead {
  margin: 0 0 var(--s-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-2);
  max-width: 62em;
}
.footer__legalgrid {
  display: grid;
  gap: var(--s-5) var(--s-7);
}
/* 通栏的风险警示 + 三节披露 ⇒ 三栏。两栏会让第三节独占一行、右半边空着。
   列数是跟着内容条数定的,节数一改就要回头看这条。 */
@media (min-width: 900px) {
  .footer__legalgrid { grid-template-columns: repeat(3, 1fr); }
}
.footer__legalsec { display: grid; gap: var(--s-2); }
.footer__legaltitle {
  margin: 0;
  font-size: var(--fs-eyebrow);
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--c-text-2);
}
.footer__legalsec p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-3);
}

/* 风险警示:合规绑定档,不得降到 --fs-sm。见本节头部注释。 */
.footer__legalsec--risk { grid-column: 1 / -1; }
.footer__legalsec--risk .footer__legaltitle { color: var(--c-text); }
.footer__legalsec--risk p {
  font-size: var(--fs-risk);
  font-weight: 700;
  line-height: 1.65;
  color: var(--c-text);
  max-width: var(--measure);
}

/* ── §5 首屏中文主标题 ────────────────────────────────────────────
   中文没有词间空格,浏览器可在任意两字之间换行。整句切成不可断的语段,
   换行只发生在语段之间。`.hero h1 .seg{display:block}` 已在 site.css 第 10 节。
   这里只补一条:主标题换成中文后字重与字距按中文重排,英文的 letter-spacing
   放在中文上会把字撑散。 */
.hero h1:lang(zh-Hans) { letter-spacing: 0; }


/* ── §6 不许断在这里 ──────────────────────────────────────────────
   中文可在任意两字之间换行,短句的末尾常被切下一两个字单独占一行 ——
   深色桌面下「此条无一例外。」的最后两字就掉了下去,读起来像上一句没写完。
   给需要整体落行的短语加这个类,由它自己决定往下走还是留在原行。
   ⚠️ 只包真正会掉字的那半句。.pledge__line 是 --fs-h3,375 下整句 14 字
   包起来约 322px,而 .pledge 内可用宽只有 ~295px —— nowrap 不会缩字,
   它会直接顶出卡片。防孤字的代价不该是横向溢出。
   全站只这一条工具类,不要拿它去调版式。 */
.nobreak { white-space: nowrap; }