*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#101418;
  --paper:#FAFAF8;
  --panel:#FFFFFF;
  --shade:#EFEFEC;
  --orange:#E0521B;
  --steel:#1F3A5F;
  --mute:#6C727B;
  --line:#D8D9DC;
  --line-strong:#101418;
  --max:1240px;
  --pad:clamp(20px,5vw,60px);
  /* Latin + numerals only. CJK never renders in a mono face, so it is scoped
     to country codes, figures and the small Latin labels. */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* All system fonts. No webfont request — Google Fonts is unreachable from
     mainland China and a blocked font request costs seconds of render delay. */
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
         "Microsoft YaHei","微软雅黑","Source Han Sans SC","Noto Sans CJK SC",
         "WenQuanYi Micro Hei","Helvetica Neue",Arial,sans-serif;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.85;
}
img{max-width:100%;display:block}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* Chinese eyebrows stay in the sans face — uppercase/tracking is a Latin
   device and mangles CJK. Latin eyebrows opt into mono with .lat. */
.eyebrow{font-size:12px;letter-spacing:.14em;color:var(--mute)}
.eyebrow.lat{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.orange{color:var(--orange)}

/* ---------------- nav ---------------- */
.nav{border-bottom:1px solid var(--line-strong);background:var(--paper);position:sticky;top:0;z-index:20}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0}
.brand{font-weight:700;font-size:18px;text-decoration:none;color:var(--ink);white-space:nowrap;letter-spacing:-.01em}
.brand sup{font-size:9px;vertical-align:super;font-weight:500}
.brand .cn{font-size:14px;font-weight:500;letter-spacing:.04em;margin-left:8px;color:var(--mute)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);list-style:none}
.nav-links a{
  font-size:15px;text-decoration:none;color:var(--ink);white-space:nowrap;
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.nav-links a:hover{border-color:var(--orange)}
.nav-links a.on{border-color:var(--ink)}
.nav-cta{
  font-size:14px;text-decoration:none;color:var(--paper);background:var(--ink);
  padding:10px 18px;white-space:nowrap;
}
.nav-cta:hover{background:var(--orange)}

/* ---------------- type ---------------- */
/* CJK carries no negative tracking and needs looser leading than Latin —
   1.06 on Helvetica reads tight and confident, on 苹方 it reads broken. */
h1{
  font-size:clamp(30px,5.4vw,56px);line-height:1.28;
  font-weight:700;letter-spacing:0;max-width:20em;
}
h2{
  font-size:clamp(23px,3.4vw,36px);line-height:1.38;
  font-weight:700;letter-spacing:0;max-width:20em;
}
h3{font-size:19px;font-weight:700;line-height:1.6;letter-spacing:0}
.lead{font-size:clamp(16px,2vw,19px);line-height:1.9;color:#333A43;max-width:34em}
p.body{max-width:34em;margin-top:16px;color:#333A43}

.sec{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,104px)}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(34px,5vw,60px)}

/* ---------------- buttons ---------------- */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{
  display:inline-block;padding:15px 30px;font-size:15px;font-weight:500;
  text-decoration:none;border:1px solid var(--ink);transition:background .15s,color .15s;
}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--orange);border-color:var(--orange)}
.btn-ghost{color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* ---------------- hero ---------------- */
.hero{padding-top:clamp(48px,8vw,96px);padding-bottom:clamp(40px,6vw,72px)}
.hero .lead{margin-top:28px}

/* ---------------- manifest ---------------- */
.manifest{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);background:var(--panel)}
.manifest-cap{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.mtable{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.mtable th{
  text-align:left;font-weight:500;font-size:12px;letter-spacing:.08em;
  color:var(--mute);padding:14px 12px 14px 0;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.mtable td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.mtable tr:last-child td{border-bottom:0}
.mtable .cc{font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.04em;width:1%;white-space:nowrap}
.mtable .cn{color:var(--mute);white-space:nowrap}
.tag{
  display:inline-block;padding:3px 9px;font-size:12.5px;
  background:var(--shade);color:#3A4049;white-space:nowrap;margin:2px 5px 2px 0;
}
.mfoot{padding:14px 0;font-size:13px;color:var(--mute);line-height:1.8}

/* ---------------- stages ---------------- */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-strong)}
.stages-3{grid-template-columns:repeat(3,1fr)}
.stages-3 .stage-n{font-family:var(--sans);font-size:12px;letter-spacing:.1em}
.stage{padding:28px 24px 34px 0;border-right:1px solid var(--line)}
.stage:last-child{border-right:0;padding-right:0}
.stage-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--orange);font-weight:700}
.stage h3{margin-top:12px}
.stage p{margin-top:10px;font-size:14.5px;color:#454C56;line-height:1.85}

/* ---------------- split ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}

/* ---------------- rows ---------------- */
.rows{border-top:1px solid var(--line-strong)}
.row{
  display:grid;grid-template-columns:5.5em 1fr;gap:clamp(16px,4vw,48px);
  padding:30px 0;border-bottom:1px solid var(--line);align-items:start;
}
.row-k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--orange);padding-top:8px;font-weight:700}
.row-b p{margin-top:10px;color:#454C56;max-width:36em}

/* ---------------- dark band ---------------- */
.band{background:var(--ink);color:var(--paper)}
.band h2,.band h3{color:var(--paper)}
.band .eyebrow{color:#8A9099}
.band p{color:#B4BAC3}
.band .btn-ghost{color:var(--paper);border-color:var(--paper)}
.band .btn-ghost:hover{background:var(--paper);color:var(--ink)}
.band .btn-solid{background:var(--orange);border-color:var(--orange);color:#fff}
.band .btn-solid:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------------- figures ---------------- */
.figs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.figs-4{grid-template-columns:repeat(4,1fr)}
.fig{padding:30px 24px 30px 0;border-right:1px solid var(--line)}
.fig:last-child{border-right:0}
.fig-n{font-family:var(--mono);font-size:clamp(26px,4vw,40px);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.fig-n .u{font-family:var(--sans);font-size:.5em;letter-spacing:0;margin-left:2px}
.fig-l{margin-top:10px;font-size:14px;color:var(--mute);line-height:1.7}

/* ---------------- contact ---------------- */
.dl{border-top:1px solid var(--line-strong);margin-top:34px}
.dl-row{display:grid;grid-template-columns:8em 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
.dl-row dt{font-size:13px;letter-spacing:.08em;color:var(--mute);padding-top:2px}
.dl-row a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.dl-row a:hover{color:var(--orange);border-color:var(--orange)}
.dl-row .val{font-family:var(--mono);letter-spacing:.02em}

/* ---------------- wechat qr ---------------- */
/* The source image is the raw WeChat card, which ends in an English caption.
   The aspect-ratio crops that off rather than the file being cut — a mis-cut
   PNG would silently produce an unscannable code. Do not replace this with a
   pre-cropped image without checking the QR still scans. */
.qr{max-width:280px;border:1px solid var(--line);background:#fff;overflow:hidden;margin-top:18px}
.qr img{width:100%;aspect-ratio:432/465;object-fit:cover;object-position:top center}
.qr-cap{margin-top:10px;font-size:13.5px;color:var(--mute);max-width:280px;line-height:1.7}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--line-strong);padding-top:38px;padding-bottom:48px;margin-top:0}
.foot-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
.foot h4{font-size:12px;letter-spacing:.12em;color:var(--mute);font-weight:500;margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot a{color:var(--ink);text-decoration:none;font-size:14.5px}
.foot a:hover{color:var(--orange)}
.foot-note{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--mute)}
.foot-note .mono{letter-spacing:.04em}
.foot-note a{color:var(--mute);text-decoration:none;font-size:13px}
.foot-note a:hover{color:var(--orange)}

a:focus-visible,.btn:focus-visible,.nav-cta:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

@media (max-width:900px){
  .stages{grid-template-columns:repeat(2,1fr)}
  .stage{border-right:0;padding-right:20px}
  .stage:nth-child(odd){border-right:1px solid var(--line)}
  .split{grid-template-columns:1fr}
  .figs-4{grid-template-columns:repeat(2,1fr)}
  .figs-4 .fig:nth-child(2){border-right:0}
  .figs-4 .fig:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .foot-in{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .brand .cn{display:none}
}
@media (max-width:620px){
  .stages{grid-template-columns:1fr}
  .stage{border-right:0!important;padding-right:0;border-bottom:1px solid var(--line)}
  .stage:last-child{border-bottom:0}
  .figs{grid-template-columns:1fr}
  .fig{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .fig:last-child{border-bottom:0}
  .row{grid-template-columns:1fr;gap:8px}
  .row-k{padding-top:0}
  .dl-row{grid-template-columns:1fr;gap:4px}
  .btns .btn{flex:1 1 100%;text-align:center}
  /* Keep the Chinese market name on small screens — it carries more for this
     reader than the ISO code does. Let the requirements column wrap instead. */
  .mtable{font-size:13px}
  .mtable td{padding-right:0}
  .tag{font-size:12px;padding:3px 7px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}