@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   首页 v4 · 2026-09-21 · 「不要做得跟小册子一样」

   委托人原话:
     「不要做得跟更小冊子一樣啊,這是一個官網,無需密密麻麻,
       要精準,生動,閱讀性強。首屏就只有一個CTA,不要亂加」

   小册子感是两件事叠出来的,两件都得治,只治一件等于没治:
     ① **字太多** —— 每个模块都在把下面那块要说的话先说一遍。
        这一半不在 CSS 里,在 preview.src.html:删了 12 处重复/填充/指路,
        首屏整条走马灯(8 条)、次按钮、下滚提示一并拿掉。**一个字没新编。**
     ② **气太少** —— 块与块之间、标题与正文之间靠得太近,
        读的人看不出哪里是一段的结束。这一份治的是这一半。

   承 v3 的纪律:**只加不改**,引入顺序 home-v2 → home-v3 → home-v4,
   靠靠后加载取胜,不去提高任何 v2/v3 选择器的优先级。
   **不定义任何新颜色**,全部取自 brand/tokens-*.css;
   间距只用既有的 --s-* 梯级,不写裸像素。

   小节:
     §1 首屏:一个 CTA,把它做成唯一的落点
     §2 版面呼吸:模块间距、标题与正文的距离
     §3 阅读性:导语与正文的字级差、行长
     §4 报价表标题(四条重复的表头说明收掉)
     §5 牌照「申请中」共享说明
   ══════════════════════════════════════════════════════════════════ */

/* ── §1 首屏:一个 CTA ──────────────────────────────────────────────
   v3 的首屏上有四个东西在抢:主按钮、次按钮「看成本怎么算」、
   「我们做什么 ↓」下滚提示、和一条八项走马灯。
   四个落点等于没有落点 —— 看的人每一个都要判断一次「要不要点」。

   标记里已经只剩一个 <a class="btn btn--primary">。这里做的是让它**看起来**
   也是唯一的那个:比正文按钮大一档,和上面那句副标之间留一整段空。
   不加新颜色、不加阴影 —— 它靠尺寸和留白单独站着就够了。 */

.hero__cta { margin-top: var(--s-8); }

.hero__cta .btn--primary {
  --btn-pad-y: var(--s-4);
  --btn-pad-x: var(--s-7);
  font-size: var(--fs-h4);
}

/* 首屏文案收窄一档。h1 两行、副标两行,是这一屏该有的全部。
   700px 的栏宽在 1440 上会把副标拉成三行半,读起来就回到「一段说明」了。 */
@media (min-width: 1024px) {
  .hero__copy { max-width: 620px; }
  .hero .sub { max-width: 30em; }
}

/* ── §2 版面呼吸 ────────────────────────────────────────────────────
   密密麻麻的根源不是字号,是**块与块之间没有停顿**。
   v3 桌面档 .section 上下各 96px,五个模块连着往下掉,
   加上 v3 新给的模块底色,看起来就是一本分栏小册子。

   2026-09-21 改:这一节当初的判断(首页需要更大的停顿)是对的,错的是做法——
   它把停顿写死在 `.section` 上,于是首页那个只有 23 字的收束节
   也拿到 128px 上下留白(实测 385px 的节,296px 是留白,占 77%)。
   而且这条规则被五页照抄了一遍,把全站六页压成同一个数。

   现在停顿按节的角色分四档,由 site.css :root 的 --sec-pad-* 带:
   首页的四个主体节仍然是桌面 96px,承重节(横滚轨)吃满 128px,
   收束节落到 80px。首页要的「块与块之间有停顿」保住了,
   代价从「所有节一起变大」缩到「该大的才大」。 */

/* 标题与它底下的内容:同样交给 --sec-head-gap,不在这里写死。
   原值 --s-9(64px)曾把站体 §E 反复论证过的 48px 压掉。 */

/* 编号牌到标题之间。序号牌是 v3 加的「这是第几块」信号,
   贴着 h2 会读成标题的一部分。 */
.section__no { margin-bottom: var(--s-4); }

/* 模块内部的横向分组之间(卡片组、报价表、滚动带各自是一组)。 */
.section .cards,
.section .usp,
.section .spreads__tabs,
.section .lic { margin-top: var(--s-7); }

.section__head + .cards,
.section__head + .usp { margin-top: 0; }

/* ── §3 阅读性:字级差与行长 ────────────────────────────────────────
   「生动」在正文页上不是加动效,是**让大的更大、小的更小**。
   v3 的导语 18px、正文 16px —— 两级只差 2px,扫一眼分不出主次,
   全页就成了一片同样粗细的灰字,这正是小册子的观感。

   导语提到 21px 并压紧行高(长行 + 松行高 = 一团),正文行高反而放松。
   两条都不新造 token:21px 走 --fs-sub,它本来就是副标那一档。 */
/* ⚠️ 这一条**不写 color**。site.css 里 .lead 本来就是 --c-text-2,写上去是重复;
   而重复的那一句会变成一个陷阱 —— 它是两个类(0,2,0),压得过 v3 的
   `.section--m5 p { color: var(--c-text) }`(0,1,1)。m5 是主色浅底,
   --c-text-2 落上去实测 4.28,不到 4.5。今天 m5 段里没有 .lead,所以看不出问题;
   哪天有人往收尾那节加一句导语,它会**悄悄不达标**,而版面上完全看不出来。 */
.section__head .lead {
  font-size: var(--fs-sub);
  line-height: 1.6;
  max-width: 26em;
}

/* 中文行长。--measure 是 68ch,拉丁文下合适,中文下一行能排到 34 个字,
   眼睛回到行首要找一下。模块正文收到 30em(约 30 字),
   **只在模块正文里收**,页脚法定文本不动 —— 那几节是合规文本,
   排版由 site.css 管,这里不碰。 */
.section .card__body,
.section .usp__body { max-width: 30em; line-height: 1.75; }

/* ── §4 报价表标题 ──────────────────────────────────────────────────
   四个页签下四张表,每张表顶上一句
   「<品类> · 报价与点差随流动性变动,实时数值在交易终端逐笔更新。」
   —— 同一句话在同一块版面里印了四遍,而且一次只看得见一遍,
   所以它连「强调」都算不上,纯粹是占位。

   那句话本身没丢:紧挨着页签上方的 .usp「低点差 · 逐笔显示」卡里
   逐字还在。这里把 caption 缩成表格的可及名称(「外汇报价」),
   **对读屏器保留**、对眼睛隐藏。
   删掉 caption 会让四张表变成四张无名表格,读屏器只能念「表格」。 */
.qtable > caption {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── §5 牌照「申请中」共享说明 ──────────────────────────────────────
   四张申请中的盾卡原本各自带两句一模一样的话
   (「交易牌照申请已递交,获批前不在该法域展业。」「获批之前不列牌照号。」)
   = 八行重复文本,横向滚动时一张一张地再读一遍。
   收成滚动带底下一条,四张卡共用。

   这一条**不能省** —— 少了它,申请中的盾就只剩国名和一个灰标,
   看的人会当成已经拿到的牌照。页脚监管信息节那句
   「申请中的牌照不作为展业依据」是法定文本的位置,不替代这里。 */
.lic__note {
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-2);
  max-width: 34em;
}
.lic__note b { font-weight: 600; color: var(--c-text); }

/* ── §6 「申请中」的卡不再撑满 ──────────────────────────────────────
   §5 把八行重复文本收掉之后,四张申请中的卡比已持牌卡少一段说明文字。
   轨道若按最高的那张拉平,申请中卡的下半截就是一片空白,像内容没加载完。

   让申请中的卡按自己的内容收高(上沿仍与已持牌卡齐平)。
   顺带把「哪张是真拿到了」这件事又多了一层信号:**短的那张就是还没拿到。**

   2026-09-23:.crest 改用 `gap + align-content:start` 之后不再有那个 1fr,
   但这一条仍然要留 —— 撑满与否现在由轨道的 align-items 决定,就是这里。 */
.rail__track { align-items: start; }

/* ── §7 UX 评审修复(2026-09-21,依据 UX评审-v5-20260921.md)──────────
   三条都只用既有 token / 既有机制,不新造颜色、不新造间距档。 */

/* P0-1 —— 桌面端点 Start Trading 整页卡死。
   #portal-note 复用了 class="drawer",而 site.css 在 ≥1024 用
   `.drawer { display: none !important }` 把移动端抽屉整个关掉了 ——
   连带把这个说明弹层一起关了。于是脚本照常置 data-open=1、照常给 body
   上滚动锁,**但屏幕上什么都不出现**:点了没反应,然后页面滚不动了。
   实测 1280:面板高 0 / body.overflow=hidden / 滚轮 scrollY 停在 0 /
   点遮罩不关(data-open 仍是 1),只有 Esc 能救 —— 而没人会去按 Esc。
   1023 及以下正常(面板高 900、点遮罩能关)。
   这是止血。根治要给它一个独立类名(它本来就不是抽屉),
   那要动标记和 v2/v3 的多处 CSS,不在「只加不改」的范围里。 */
@media (min-width: 1024px) {
  #portal-note[data-open="1"] { display: block !important; }
}

/* P1-2 —— 第一个模块的「底色区分」是空操作。
   v3 把「每个模块底色做区分」列为要实现的条目,m2–m5 都做了,
   唯独 .section--m1 取的是 --c-canvas,**和页面底、和 hero 一模一样**。
   后果:1280 下从页顶到 #edge 有 1359px 是一整片不分段的同色区,
   里面塞着 hero + 一个 h2 + 四张卡。委托人要的那条区分,
   偏偏在她最先看到的那个模块上没生效。
   改成 surface 之后五个模块是 surface / subtle / surface / subtle / primary-50
   的交替节奏,hero 保持 canvas,三者都分得开。 */
.section--m1 { --sec-bg: var(--c-surface); }

/* P1-5 —— 两向都到头时,两个翻页键仍占着位置、双双置灰。
   1280 下筛到「已持牌」只剩两张卡,正好铺满轨道,脚本很规矩地把
   prev/next 都 disabled 了(这是对的),但**坏掉的控件和禁用的控件长得一样**,
   用户第一反应是功能故障,不是「这里没有更多内容」。两向都到头 = 整组收起。 */
.rail__nav:has([data-rail-prev][disabled]):has([data-rail-next][disabled]) { display: none; }