/* Speedy Nordic — 渠道介绍子页共用样式
   颜色与动效 token 全部来自 assets/tokens.css，本文件只写组件与布局。

   2026-10-13 第二轮（Mike 要 Shopify Editions 那种滚动叙事）之后，本文件分两半：
     上半  静态排版 —— 没 JS、开了「减弱动态」、900px 以下，看到的就是这一半，必须完整可读
     下半  滚动联动 —— 全部写在 .has-scrub 下面，并且只在 ≥900px 的屏幕上生效
   滚动进度 --p 由 assets/ui.js 写入（data-scrub），这里只用 calc(var(--p)) 消费。
   联动只动 opacity 和独立变换属性 translate / scale —— 不碰 transform，
   因为 data-reveal 的一次性进场用的是 transform 的过渡，两套写在同一个属性上会打架。 */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Inter","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.7;font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 26px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
header.sub{position:sticky;top:0;z-index:50;background:var(--scrim);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.subnav{display:flex;align-items:center;gap:16px;height:66px}
.subnav .brand img{height:28px;width:auto}
.subnav .back{margin-left:auto;font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.subnav .back:hover{color:var(--red)}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:12.5px;flex:0 0 auto}
.lang button{border:0;background:transparent;padding:5px 12px;cursor:pointer;color:var(--ink-3);
  font-family:inherit;font-size:12.5px;line-height:1.4;
  transition:background-color var(--d-quick) ease, color var(--d-quick) ease}
.lang button:hover{color:var(--ink)}

/* hero */
.hero{padding:clamp(52px,9vh,108px) 0 0;background:linear-gradient(180deg,var(--hero-a),var(--bg))}
/* 渠道 logo 衬板：logo-ch-nordic.png 是黑字透明底，暗色主题下看不见，
   所以衬板两种主题都固定是白的（这里写死 #FFF 是有意的，不能换成 var(--bg)） */
.ch-logo{display:flex;width:max-content;max-width:100%;height:clamp(62px,6vw,84px);padding:clamp(12px,1.2vw,17px) clamp(16px,1.6vw,24px);
  margin-bottom:26px;background:#FFF;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 22px 44px -26px rgba(0,0,0,.5)}
.ch-logo img{height:100%;width:auto}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--line);padding:6px 14px;border-radius:999px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--red)}
.hero h1{font-size:clamp(30px,5.6vw,76px);font-weight:600;line-height:1.04;letter-spacing:-.035em;margin-top:22px;
  max-width:15em;overflow-wrap:break-word}
:lang(zh-CN) .hero h1{line-height:1.2;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p.lead{margin-top:clamp(18px,2.4vh,26px);font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--ink-2);max-width:38em}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,6vh,68px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:26px 20px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .k{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
/* tabular-nums：数字滚动时每位等宽，不会左右抖 */
.stat .v{font-size:clamp(24px,2.3vw,32px);font-weight:600;margin-top:9px;letter-spacing:-.6px;line-height:1.2;font-variant-numeric:tabular-nums}
.stat .s{font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.5}

/* sections */
section{padding:clamp(56px,9vh,104px) 0}
section+section{border-top:1px solid var(--line)}
h2{font-size:25px;font-weight:600;letter-spacing:-.3px;line-height:1.35}
h3{font-size:16.5px;font-weight:600;margin-top:26px}
h4{font-size:15px;font-weight:600;margin-top:18px}
p{margin-top:12px;color:var(--ink-2)}
.eyebrow{font-size:12px;color:var(--red);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.sec-head{max-width:46em}
.sec-head h2{margin-top:12px;font-size:clamp(24px,2.7vw,38px);line-height:1.14;letter-spacing:-.025em;overflow-wrap:break-word}
:lang(zh-CN) .sec-head h2{line-height:1.3;letter-spacing:-.005em}
ul,ol{margin:12px 0 0 20px;color:var(--ink-2)}
li{padding:4px 0}

/* 深色全宽章节：让页面有明暗节奏。面板在两种主题下都是深色（和 .cta 同一套底），
   所以在这个作用域里把文字、线条的 token 改成反相面上的值，里面的表格 / 提示 / 卡片照常用变量即可。 */
.sec-dark{
  --ink:#F3F2EF;--ink-2:#B9B6B0;--ink-3:#8D8A84;
  --line:rgba(255,255,255,.15);--hair:rgba(255,255,255,.08);
  --bg-2:rgba(255,255,255,.06);--card:rgba(255,255,255,.045);
  --red:#FF5A4A;--spot:rgba(255,255,255,.07);
  background:var(--panel-glow),var(--dark);color:var(--ink);
}
.sec-dark,.sec-dark + section,.usp,.usp + section,.stage,.stage + section{border-top-color:transparent}

/* table —— 编辑式：不要外框和表头底色，只留一条压顶的实线和行间细线 */
.tbl{width:100%;border-collapse:separate;border-spacing:0;margin-top:26px;font-size:15px;border-top:1px solid var(--ink)}
.tbl th{text-align:left;padding:13px 18px 13px 0;font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;border-bottom:1px solid var(--line)}
.tbl td{padding:19px 18px 19px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.tbl :is(th,td):last-child{padding-right:0}
.tbl td:first-child{color:var(--ink);font-weight:600;font-size:16.5px;line-height:1.45}
/* 数字表：数字放大、等宽对齐 */
.tbl--num td:not(:first-child){color:var(--ink);font-size:clamp(16px,1.5vw,19px);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 步骤表：第一列是序号，第二列才是标题 */
.tbl--steps td:first-child{color:var(--red);font-variant-numeric:tabular-nums}
.tbl--steps td:nth-child(2){color:var(--ink);font-weight:600;font-size:16.5px;line-height:1.45}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;counter-reset:card}
.card{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 24px 28px;background:var(--card);counter-increment:card}
.card h4{margin-top:0;font-size:17px;line-height:1.35;letter-spacing:-.01em;overflow-wrap:break-word}
.card p{font-size:14px;margin-top:9px}
/* 原来的红色小横条改成「编号 + 细线」，编号由计数器生成，不是文案 */
.card .bar{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.card .bar::before{content:counter(card,decimal-leading-zero);font-size:12.5px;font-weight:600;letter-spacing:.1em;color:var(--red);font-variant-numeric:tabular-nums}
.card .bar::after{content:"";flex:1;height:1px;background:var(--line)}

/* chart */
.chart-box{border:1px solid var(--line);border-radius:14px;padding:28px;margin-top:22px;background:var(--card)}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.chart-head h3{margin:0;font-size:16px}
.chart-head span{font-size:12.5px;color:var(--ink-3)}
.chart-area{margin-top:22px;position:relative;height:230px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.chart-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-size:13px;color:var(--ink-3);text-align:center;padding:0 20px}
.gridlines{position:absolute;inset:0;pointer-events:none}
.gridlines i{position:absolute;left:0;right:0;height:1px;background:var(--hair)}

/* 页面截图：一排带机身的手机。
   高度由截图自己决定（不再固定 9:19.5 再裁切 —— 现有截图是 780×1328，按旧比例左右各被裁掉两成）。
   没图的框带 hidden，不占位；少一个框时其余的照样居中。 */
.stage{background:var(--bg-2)}
.stage .sec-head{margin-inline:auto;text-align:center}
.stage .sec-head h2{font-size:clamp(26px,3.4vw,46px)}
.shots{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(14px,3vw,44px);margin-top:clamp(28px,5vh,56px)}
.phone{--bezel:clamp(5px,.8vw,9px);--corner:clamp(20px,3vw,38px);
  flex:0 0 calc(50% - clamp(14px,3vw,44px) / 2);max-width:290px;min-width:0;position:relative;padding:var(--bezel);border-radius:var(--corner);
  background:#17171A;   /* 机身颜色，两种主题都是深色 */
  /* 投影只留一层、模糊半径不超过 48px：三四部手机同时进场，大半径的模糊在没有 GPU 的设备上画得慢 */
  box-shadow:0 30px 48px -26px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.16)}
.phone img{width:100%;height:auto;border-radius:calc(var(--corner) - var(--bezel))}
/* 占位文字只有脚本没跑起来时才看得到（脚本会把没图的框藏掉）：给它一块屏幕形状的浅底，别让机身塌成一条 */
.phone span{display:flex;align-items:center;justify-content:center;aspect-ratio:9/16;border-radius:calc(var(--corner) - var(--bezel));
  background:var(--bg-2);font-size:12px;color:var(--ink-3);text-align:center;padding:0 14px;line-height:1.6}

/* note */
.note{border-left:3px solid var(--red);background:var(--bg-2);border-radius:8px;padding:16px 20px;margin-top:22px;font-size:14px;color:var(--ink-2)}
.note b{color:var(--ink)}

/* cta */
.cta{position:relative;isolation:isolate;overflow:hidden;
  background:var(--panel-glow),var(--dark);color:#fff;border-radius:clamp(18px,2.4vw,30px);padding:clamp(34px,5vw,72px) clamp(24px,4.4vw,64px);
  box-shadow:0 34px 70px -40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.09)}
.cta h2{color:#fff;font-size:clamp(24px,3.4vw,46px);line-height:1.12;letter-spacing:-.025em;max-width:17em;overflow-wrap:break-word}
:lang(zh-CN) .cta h2{line-height:1.28}
.cta p{color:rgba(255,255,255,.72);max-width:40em;font-size:clamp(15px,1.3vw,17.5px)}
.cta-btns{display:flex;gap:12px;margin-top:clamp(24px,3.4vh,36px);flex-wrap:wrap}
/* 跟着指针走的一团柔光（坐标由 ui.js 经 data-glow 写进 --mx / --my）。只在真指针设备上有 */
@media (hover:hover) and (pointer:fine){
  .cta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(540px circle at var(--mx,72%) var(--my,28%), rgba(255,255,255,.11), transparent 64%);
    opacity:0;transition:opacity 420ms ease}
  .cta:hover::before{opacity:1}
}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;border-radius:999px;
  font-size:14.5px;font-weight:500;border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:background-color var(--d-quick) ease, border-color var(--d-quick) ease,
             color var(--d-quick) ease, transform var(--d-press) var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-d)}
.btn-line{border-color:rgba(255,255,255,.32);color:#fff;background:transparent}
.btn-line:hover{border-color:#fff}

/* footer */
footer{background:var(--dark);color:rgba(255,255,255,.6);padding:36px 0;font-size:13px;margin-top:0}
footer a{color:rgba(255,255,255,.82)}
footer .row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer .row+ .row{margin-top:12px}

/* 卡片悬停反馈（聚光 + 边框高光）在 tokens.css 的 6b 节 */

/* --------------------------------------------------------------------------
   核心竞争力分镜（.usp）—— 紧跟首屏。一句主张 + 三个支撑点，三个专页三种版式：
     .usp--deck   小程序          深色，主张在上，三张卡片横排
     .usp--rail   speedynordic.fi 浅色，左主张、右时间线
     .usp--route  speedymarket.fi 深色，居中，一排国家代码
   这里是静态版式；钉住和进场在文件末尾的滚动联动部分。
   -------------------------------------------------------------------------- */
.usp{padding:clamp(56px,10vh,96px) 0}
.usp-claim{max-width:17em;font-size:clamp(28px,6.6vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.032em;overflow-wrap:break-word}
:lang(zh-CN) .usp-claim{line-height:1.24;letter-spacing:-.01em}
/* 中文没有词边界，浏览器会在任意两个字之间换行（「顺 / 丰」「软 / 件」）。
   主张、板块标题和支撑点只许在标点 / 空格处换行（七个国家名那一行就不会断成「荷 / 兰」）；
   一段放不下时由 overflow-wrap 兜底照常断。
   结尾面板的标题没有句中标点，改用行长均衡，免得最后一行只剩一个字。 */
:lang(zh-CN) :is(.usp-claim,.sec-head h2,.usp-points b,.usp-points span){word-break:keep-all}
:lang(zh-CN) .cta h2{text-wrap:balance}
/* 列宽写成 minmax(0,1fr)：不许被里面放不下的长串（中文整句、芬兰语长词）撑宽，放不下就在串内断行 */
.usp-points{list-style:none;margin:36px 0 0;color:inherit;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.usp-points li{padding:0}
.usp-points b{display:block;font-size:clamp(18px,1.7vw,22px);font-weight:600;line-height:1.25;letter-spacing:-.012em;color:var(--ink);overflow-wrap:break-word}
.usp-points span{display:block;margin-top:8px;font-size:15px;line-height:1.6;color:var(--ink-2);overflow-wrap:break-word}

.usp--deck .usp-points{counter-reset:usp}
.usp--deck .usp-points li{counter-increment:usp;padding:24px 24px 28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.usp--deck .usp-points li::before{content:counter(usp,decimal-leading-zero);display:block;margin-bottom:clamp(18px,4vh,44px);
  font-size:12.5px;font-weight:600;letter-spacing:.1em;color:var(--red);font-variant-numeric:tabular-nums}

.usp--rail{background:var(--bg-2)}
.usp--rail .usp-points{position:relative;gap:0;padding-left:34px}
/* 竖线两层：::before 是浅色底轨，::after 是红色实线（滚动时从上往下画） */
.usp--rail .usp-points::before,
.usp--rail .usp-points::after{content:"";position:absolute;left:5px;top:30px;bottom:30px;width:2px;border-radius:2px;background:var(--line)}
.usp--rail .usp-points::after{background:var(--red);transform-origin:50% 0}
.usp--rail .usp-points li{position:relative;padding:18px 0}
.usp--rail .usp-points li::before{content:"";position:absolute;z-index:1;left:-34px;top:calc(18px + .35em);width:12px;height:12px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 5px var(--bg-2)}

.usp--route .usp-points li{padding-top:18px;border-top:1px solid var(--line)}
/* 国家代码：纯装饰（aria-hidden），完整国家名在下面第一个支撑点里。
   亮起来的红底是 ::before 那一层，滚动时只改它的 opacity。 */
.usp-codes{position:relative;isolation:isolate;display:flex;gap:6px;margin-top:30px}
/* 窄屏七个等分排成一行（按内容宽度排的话 360px 放不下，最后一个会单独掉到第二行） */
.usp-codes i{flex:1 1 0;max-width:72px;text-align:center;
  position:relative;isolation:isolate;font-style:normal;font-size:13px;font-weight:600;letter-spacing:.14em;line-height:1;
  padding:10px 0 10px .14em;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#FFF;background:var(--dark)}
.usp-codes i::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:#E1251B}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */
@media(min-width:900px){
  .usp--deck .usp-points,
  .usp--route .usp-points{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px);margin-top:clamp(32px,6vh,64px)}
  .usp--route .usp-points{gap:clamp(22px,3vw,48px)}
  .usp-claim{font-size:clamp(34px,min(5vw,8.6vh),76px)}

  .usp--rail .usp-in{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);column-gap:clamp(44px,7vw,112px);align-items:center}
  .usp--deck .usp-points li{padding:28px 28px 32px}
  .usp--deck .usp-points b{font-size:clamp(20px,2vw,27px)}
  .usp--deck .usp-points span{font-size:16px}
  .usp--rail .usp-points{margin-top:0}
  .usp--rail .usp-points b{font-size:clamp(22px,2.2vw,30px)}
  .usp--rail .usp-points li{padding:clamp(16px,3vh,30px) 0}
  .usp--rail .usp-points li::before{top:calc(clamp(16px,3vh,30px) + .4em)}

  .usp--route .usp-in{text-align:center}
  .usp--route .usp-claim{margin-inline:auto}
  .usp--route .usp-points{text-align:left}
  .usp--route .usp-codes{justify-content:center;gap:clamp(10px,2.2vw,34px);margin-top:clamp(28px,5vh,56px)}
  .usp--route .usp-codes i{flex:0 0 auto;max-width:none;font-size:15px;padding:14px 18px 14px 20px}
  /* 穿过各个代码的连线：浅色底轨 + 红色实线（滚动时从左往右画） */
  .usp--route .usp-codes::before,
  .usp--route .usp-codes::after{content:"";position:absolute;z-index:-1;left:12%;right:12%;top:50%;height:1px;background:var(--line)}
  .usp--route .usp-codes::after{background:#E1251B;transform-origin:0 50%}

  /* 截图错落摆放 */
  .shots .phone:nth-child(even){margin-top:clamp(28px,6vh,64px)}
}
@media(min-width:600px){
  .shots{flex-wrap:nowrap}
  .shots .phone{flex:1 1 0}
}

/* 两栏分镜：左栏标题钉住，右栏的表格 / 卡片滚过去。
   标题跨 12 行是为了不必给右栏再包一层容器（右栏最多三四个块，多出来的隐式行高度是 0）。 */
@media(min-width:1080px){
  .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,9fr);column-gap:clamp(48px,6vw,84px);align-items:start}
  .split > .sec-head{grid-column:1;grid-row:1 / span 12;max-width:none}
  .split > :not(.sec-head){grid-column:2}
  .split > :nth-child(2){margin-top:0}
  .split .cards{grid-template-columns:1fr 1fr}
  /* 中文标题一个字占一个字宽，左栏按西文的字号排会剩一个字掉到下一行。
     左栏放宽、字号收小，保证 15 个字以内、不带标点的标题一行放得下（现有文案最长正好 15 个字）。 */
  :lang(zh-CN) .split{grid-template-columns:minmax(0,6fr) minmax(0,9fr)}
  :lang(zh-CN) .split > .sec-head h2{font-size:clamp(22px,2.3vw,28px)}
}
/* 窗口太矮时不钉：标题块比可视区还高的话，钉住期间下半截会一直露不出来 */
@media(min-width:1080px) and (min-height:560px){
  .split > .sec-head{position:sticky;top:112px}
}

@media(max-width:900px){
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
  .cards{grid-template-columns:1fr}
  h2{font-size:22px}
  .subnav .back{display:none}
}
@media(max-width:560px){
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:0}
  .wrap{padding:0 18px}
  /* 芬兰语 / 瑞典语的长复合词会把表格列撑出屏幕（360px 下最多横向多出 143px）。
     允许词内断行，列才能收得回来；有断字词典的浏览器会优先在音节处加连字符。 */
  .tbl{font-size:14.5px}
  .tbl th,.tbl td{overflow-wrap:anywhere;hyphens:auto;padding-right:12px}
  .tbl td:first-child,.tbl--steps td:nth-child(2){font-size:15px}
  .tbl--num td:not(:first-child){white-space:normal;font-size:inherit}
}

/* --------------------------------------------------------------------------
   一次性进场的加强（data-reveal 由 ui.js 加，过渡本身在 tokens.css）。
   这里只改「还没进场时」的起始姿态和阶梯延迟，不重写 transition。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  /* logo 衬板不在 ui.js 的进场名单里，用一次性的 CSS 动画；没 JS 也会播完并停在可见状态 */
  .ch-logo{animation:sub-logo-in 720ms var(--ease-out) both}
  /* 四格统计交错进场。最晚一格 450ms 延迟 + 640ms 过渡，
     仍然小于 _tools/theme-test.js 等的 950ms + 加载耗时 */
  .hero .stat[data-reveal]:not([data-visible]){transform:translateY(28px)}
  .hero .stat:nth-child(1){transition-delay:240ms}
  .hero .stat:nth-child(2){transition-delay:310ms}
  .hero .stat:nth-child(3){transition-delay:380ms}
  .hero .stat:nth-child(4){transition-delay:450ms}
  /* 能力卡片：进场时从更低、更小的位置长出来 */
  .cards .card[data-reveal]:not([data-visible]){transform:translateY(44px) scale(.94)}
}
@keyframes sub-logo-in{from{opacity:0;transform:translateY(14px) scale(.92)}}

/* ==========================================================================
   滚动联动（只在 ≥900px 的屏幕、并且 ui.js 的引擎在跑时生效）
   --------------------------------------------------------------------------
   <html> 没有 .has-scrub（没 JS / 减弱动态）时下面一条都不生效，页面就是上面的静态排版。
   万一某个元素身上取不到 --p，用到它的声明整条失效，回落成 opacity:1 / 不位移 ——
   也就是「已经播完」的样子，不会有内容藏着出不来。
   ========================================================================== */
@media screen and (min-width:900px){
  /* 带大阴影的两样（手机机身、结尾面板）各占一个合成层：滚动时只挪动 / 缩放这张现成的图，
     不必每帧把阴影重画一遍。无头浏览器里量过：不加这一条，滚动出帧耗时是改版前的两倍多，加了持平。
     首屏文字、卡片、表格的格子重画很便宜，不占层（文字占层还会让 Windows 上的字体渲染变虚）。 */
  .has-scrub :is(.shots[data-scrub] > .phone, .cta[data-scrub]){will-change:transform}

  /* 首屏退场：文字块下沉、缩小、淡出，logo 比文字走得快。
     opacity 加在外层的 .hero-copy 上而不是标题上：标题带 data-reveal，
     它自己的 opacity 归一次性进场管（theme-test 也会查它滚到底后是否可见）。 */
  .has-scrub .hero-copy{transform-origin:0 50%;
    opacity:calc(1 - var(--p) * 1.7);scale:calc(1 - var(--p) * .06);translate:0 calc(var(--p) * 64px)}
  .has-scrub .hero .ch-logo{translate:0 calc(var(--p) * -44px)}

  /* 表格逐行点亮：--p 是整张表的路过进度，每行比上一行晚 .05 开始。
     失败方向是安全的：表格太高或视口太矮时，靠后的行只是进视口前就已经亮了。 */
  .has-scrub .tbl tbody tr:nth-child(2){--k:1}
  .has-scrub .tbl tbody tr:nth-child(3){--k:2}
  .has-scrub .tbl tbody tr:nth-child(4){--k:3}
  .has-scrub .tbl tbody tr:nth-child(5){--k:4}
  .has-scrub .tbl tbody tr:nth-child(6){--k:5}
  .has-scrub .tbl[data-scrub] tbody td{
    --t:clamp(0, calc((var(--p) - .05 - var(--k,0) * .05) * 12), 1);
    opacity:calc(.2 + var(--t) * .8);translate:0 calc((1 - var(--t)) * 12px)}

  /* 卡片列错位：有 --shift 的那一列滚得比旁边快，卡片组走到视口中间时对齐 */
  .has-scrub .cards[data-scrub] > .card{translate:0 calc((.5 - var(--p)) * var(--shift,0px))}

  /* 截图视差：单数位和双数位的手机反向错开 */
  .has-scrub .shots[data-scrub] > .phone{translate:0 calc((.5 - var(--p)) * var(--par,0px))}
  .has-scrub .shots > .phone:nth-child(odd){--par:120px}
  .has-scrub .shots > .phone:nth-child(even){--par:-70px}

  /* 结尾面板：从 86% 放大到满幅，--p 到 .2 就已经到位（页面滚到底时一定够得着） */
  .has-scrub .cta[data-scrub]{scale:clamp(.86, calc(.86 + var(--p) * .7), 1)}
}
@media screen and (min-width:900px) and (max-width:1079.98px){
  .has-scrub .cards > .card:nth-child(3n+2){--shift:64px}
}
@media screen and (min-width:1080px){
  .has-scrub .split .cards > .card:nth-child(even){--shift:72px}
}

/* 核心竞争力分镜的钉住版。视口太矮（<660px）时放不下一屏，不钉。
   结构：<section.usp data-scrub="pin"> 比一屏高（210vh），里面的 .usp-pin 是 sticky 的一屏。
     · 主张自己带 data-scrub（路过型）：它跟着页面升上来的那一屏里逐词点亮，钉住前亮完
     · section 的钉住进度（110vh 的行程）用来让三个支撑点依次进场
   主张身上的 --p 会盖掉 section 传下来的 --p，所以在 section 上另存一份 --pp 传给它，
   万一主张到位时还没亮完，钉住一开始就把剩下的词补亮。 */
@media screen and (min-width:900px) and (min-height:660px){
  .has-scrub .usp{height:210vh;padding:0;--pp:var(--p)}
  .has-scrub .usp-pin{position:sticky;top:0;height:100vh;padding-top:66px;overflow:hidden;
    display:flex;align-items:center;background:inherit}
  .has-scrub .usp-pin > .wrap{width:100%}

  .has-scrub .usp-claim .w{
    opacity:clamp(.2, max(calc((var(--p) - .1) * 2.9 * (var(--n) + 3) - var(--i)),
                          calc(var(--pp,0) * 7 * (var(--n) + 3) - var(--i))), 1)}

  /* 三个支撑点各自的进度 --t（0 → 1），起点 --s 一个比一个晚 */
  .usp-points > :nth-child(1){--s:.08}
  .usp-points > :nth-child(2){--s:.30}
  .usp-points > :nth-child(3){--s:.52}
  .has-scrub .usp-points > *{--t:clamp(0, calc((var(--p) - var(--s)) * 5), 1);opacity:var(--t)}

  /* 小程序：三张卡片从右边依次滑进来 */
  .has-scrub .usp--deck .usp-points > *{translate:calc((1 - var(--t)) * 38vw) 0}

  /* speedynordic.fi：红线往下画，条目依次浮上来 */
  .has-scrub .usp--rail .usp-points > *{translate:0 calc((1 - var(--t)) * 44px)}
  .has-scrub .usp--rail .usp-points::after{scale:1 clamp(0, calc((var(--p) - .1) * 1.9), 1)}

  /* speedymarket.fi：连线从左往右画，七个国家代码逐个点亮，然后支撑点浮上来 */
  .usp--route .usp-points > :nth-child(1){--s:.36}
  .usp--route .usp-points > :nth-child(2){--s:.50}
  .usp--route .usp-points > :nth-child(3){--s:.64}
  .has-scrub .usp--route .usp-points > *{translate:0 calc((1 - var(--t)) * 36px)}
  .usp-codes i:nth-child(1){--s:.05}
  .usp-codes i:nth-child(2){--s:.09}
  .usp-codes i:nth-child(3){--s:.13}
  .usp-codes i:nth-child(4){--s:.17}
  .usp-codes i:nth-child(5){--s:.21}
  .usp-codes i:nth-child(6){--s:.25}
  .usp-codes i:nth-child(7){--s:.29}
  .has-scrub .usp-codes i{--t:clamp(0, calc((var(--p) - var(--s)) * 16), 1);
    opacity:calc(.5 + var(--t) * .5);scale:calc(.9 + var(--t) * .1)}
  .has-scrub .usp-codes i::before{opacity:var(--t)}
  .has-scrub .usp--route .usp-codes::after{scale:clamp(0, calc((var(--p) - .04) * 3.4), 1) 1}
}

@media print{
  header.sub{display:none}
  section{page-break-inside:avoid}
  .cta{background:#fff;color:#000;border:1px solid #000}
  .cta h2,.cta p{color:#000}
  /* 深色章节打印成白底黑字：浏览器默认不印背景，不改回来就是白底上的浅色字 */
  .sec-dark{--ink:#000;--ink-2:#333;--ink-3:#555;--line:#BBB;--hair:#DDD;--bg-2:#FFF;--card:#FFF;--red:#E1251B;background:none;color:#000}
  .usp-codes i{color:#000;background:none;border-color:#BBB}
  .usp-codes i::before{display:none}
  .phone{box-shadow:none}
}