/* 字体交换造成的布局抖动，用度量对齐的兜底字体消掉。
   实测：/links-to-orders/ 的 CLS 是 0.1498，唯一的抖动源是首屏那条 figcaption ——
   webfont 换上来的瞬间行高变了，把下面整节顶下去。
   size-adjust 由浏览器实测得出（_src/_fontmetrics.mjs，同一串文本 100px 下比宽度）：
   Public Sans / Arial = 104.35%，Outfit / Arial = 98.40%。 */
@font-face{font-family:'Public Sans Fallback';src:local('Arial');size-adjust:104.35%;
  ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Outfit Fallback';src:local('Arial');size-adjust:98.40%;
  ascent-override:100%;descent-override:25%;line-gap-override:0%}
:root{
  --ink:#10233A; --muted:#4A5A6E;
  --brand:#00BEBF; --brand-strong:#0B7C7D; --mint:#3FFFDC;
  --sky-deep:#23486A; --sand:#F3EBD6;
  --warn:#FC3937; --warn-ink:#A81C18;
  --paper:#FFFFFF; --paper-2:#F5F7F9; --line:#DDE3E9;
  --wrap:1180px; --r:14px;
  --shadow:0 1px 2px rgba(16,35,58,.06), 0 8px 24px rgba(16,35,58,.06);
  --f-head:'Outfit','Outfit Fallback',system-ui,sans-serif;
  --f-body:'Public Sans','Public Sans Fallback',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--f-body);
     overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-strong)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--brand-strong);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.18;margin:0 0 .5em;letter-spacing:-.012em}
h1{font-size:clamp(2rem,1.35rem + 2.4vw,3.05rem);font-weight:700}
h2{font-size:clamp(1.5rem,1.15rem + 1.35vw,2.15rem);font-weight:600}
h3{font-size:clamp(1.13rem,1.02rem + .45vw,1.35rem);font-weight:600}
p{margin:0 0 1.05em}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--mint);color:var(--ink);
  padding:10px 16px;border-radius:8px;display:inline-flex;align-items:center;min-height:44px}

/* 触点：独立成段的链接是按钮，不是句子里的词，按 44px 给（硬门 16）。
   句子内部的行内链接不套这条 —— WCAG 2.2 target size 对行内链接本来就有豁免，
   强行撑高会把正文行距撑坏。
   ⚠️ 不能用 `p > a:only-child`：:only-child 只看元素兄弟、不看文本节点，
   于是「句子里只有一个链接」的普通段落也会中招，实测把页脚披露那段的行距撑花了。
   现在由 build.py 在产出时精确标 class="act"（整段内容就是一个链接才标）。 */
p.act > a{display:inline-flex;align-items:center;min-height:44px}
ul.acts{list-style:none;padding:0;margin:0;display:grid;gap:2px}
ul.acts a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.hdr .bar{display:flex;align-items:center;gap:18px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:700;
  font-size:1.02rem;color:var(--ink);text-decoration:none;white-space:nowrap;flex:0 0 auto;
  min-height:44px}
.brand .mark{width:28px;height:28px;border-radius:8px;flex:0 0 auto}
.brand b{color:var(--brand-strong);font-weight:700}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
.nav a{font-size:.93rem;color:var(--ink);text-decoration:none;padding:9px 10px;border-radius:8px;
  white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{background:var(--paper-2);color:var(--brand-strong)}
.nav a[aria-current=page]{color:var(--brand-strong);box-shadow:inset 0 -2px 0 var(--brand-strong)}
.navtoggle{display:none;margin-left:auto;min-height:44px;min-width:44px;border:1px solid var(--line);
  background:var(--paper);border-radius:10px;font:600 .9rem var(--f-body);color:var(--ink);cursor:pointer}
@media (max-width:1085px){
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 16px;display:none;margin-left:0}
  .nav.open{display:flex}
  .nav a{padding:12px 8px}
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;gap:7px}
}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;color:#fff;background:var(--sky-deep)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(11,32,51,.10) 0%,rgba(11,32,51,.34) 46%,rgba(11,32,51,.80) 100%)}
.hero img.bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:52% 42%}
.hero .wrap{padding:74px 0 62px;max-width:960px}
.hero h1{color:#fff;max-width:19ch;text-shadow:0 2px 18px rgba(8,24,40,.42)}
.hero .lede{font-size:1.14rem;max-width:60ch;color:#EAF2F8;margin-bottom:26px}
.hero .subline{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mint);margin:0 0 16px}
.hero .trio{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero .trio span{display:inline-flex;align-items:center;gap:8px;background:rgba(9,28,46,.62);
  border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:8px 15px;font-size:.9rem;color:#EAF2F8}
.hero .trio i{width:9px;height:9px;border-radius:50%;background:var(--brand);display:inline-block}

/* paste bar: a real control, not a picture of one */
.pastebar{display:flex;gap:10px;background:#fff;border-radius:999px;padding:7px 7px 7px 8px;
  box-shadow:0 10px 30px rgba(8,24,40,.28);max-width:640px;align-items:center}
.pastebar input{flex:1;min-width:0;border:0;background:transparent;font:400 1rem var(--f-body);
  color:var(--ink);padding:12px 12px;min-height:44px}
.pastebar input::placeholder{color:#7A8798}
.pastebar button{border:0;border-radius:999px;background:var(--mint);color:var(--ink);
  font:700 .95rem var(--f-head);padding:0 24px;min-height:46px;cursor:pointer;white-space:nowrap}
.pastebar button:hover{background:#25F2CC}
@media (max-width:520px){
  .pastebar{padding:6px}
  .pastebar input{padding:12px 8px;font-size:.95rem}
  .pastebar button{padding:0 16px;font-size:.9rem}
}
.hero .hint{font-size:.86rem;color:#D6E3EE;margin:12px 0 0}

/* ---------- sections ---------- */
main section{padding:62px 0;border-top:1px solid var(--line)}
main section:first-of-type{border-top:0}
section.tint{background:var(--paper-2)}
section.deep{background:var(--sky-deep);color:#EAF2F8;border-top:0}
section.deep h2{color:#fff}
section.deep a{color:var(--mint)}
.eyebrow{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-strong);margin:0 0 10px}
section.deep .eyebrow{color:var(--mint)}
.lead{font-size:1.09rem;color:var(--muted);max-width:66ch}
section.deep .lead{color:#CFE0EE}
.sechead{max-width:70ch;margin-bottom:30px}

/* split: image beside text, alternating */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center}
.split.flip>.fig{order:2}
.split .fig{margin:0}
.split .fig img{border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);
  width:100%;height:auto}
section.deep .split .fig img{border-color:rgba(255,255,255,.18)}
.split figcaption{font-size:.83rem;color:var(--muted);margin-top:10px;line-height:1.5}
section.deep .split figcaption{color:#B7CADA}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:26px}.split.flip>.fig{order:0}}

.band{display:grid;grid-template-columns:1fr;gap:0}
.band img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
.band figcaption{font-size:.83rem;color:var(--muted);margin-top:10px}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.cards>*{grid-column:span 3}
.cards.five>*:nth-child(3n+3),.cards.five>*:nth-child(3n+4),.cards.five>*:nth-child(3n+5){grid-column:span 2}
@media (max-width:900px){.cards>*{grid-column:span 6 !important}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--shadow)}
section.tint .card{background:#fff}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.card .num{font-family:var(--f-mono);font-size:.78rem;color:var(--brand-strong);letter-spacing:.08em}

/* category wall
   6 列栅格 + 每 6 张一个 3/3 · 4/2 · 2/4 的节奏。刻意避开「三个等宽卡横排」（硬门 17），
   也避开整墙一个模具。grid-auto-flow:dense 负责把余数行填实，
   不然 15 张卡的最后一行会留一个空洞（第一版就是这样，截图一看就发现了）。 */
.catwall{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;grid-auto-flow:dense}
.catcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.catcard:nth-child(6n+1),.catcard:nth-child(6n+2){grid-column:span 3}
.catcard:nth-child(6n+3),.catcard:nth-child(6n+6){grid-column:span 4}
.catcard:nth-child(6n+4),.catcard:nth-child(6n+5){grid-column:span 2}
.catcard img{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--paper-2)}
.catcard .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.catcard h3{margin:0;font-size:1.06rem}
.catcard p{margin:0;font-size:.93rem;color:var(--muted)}
.catcard .go{margin-top:auto;padding-top:12px;font-size:.9rem;font-weight:600;display:inline-flex;
  align-items:center;gap:8px;min-height:44px}
.catcard .go::after{content:"";width:16px;height:1.5px;background:currentColor;transition:width .18s ease}
.catcard:hover .go::after{width:26px}
@media (max-width:1000px){.catwall>.catcard{grid-column:span 3 !important}}
@media (max-width:660px){.catwall>.catcard{grid-column:span 6 !important}}

/* outbound card contract */
.out{display:block;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r);
  padding:20px 22px;background:#fff;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.out:hover{border-left-color:var(--brand-strong)}
.out .dest{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;color:var(--muted)}
.out strong{display:block;font-family:var(--f-head);font-size:1.08rem;margin:6px 0 6px;color:var(--brand-strong)}
.out .dest,.out .disc{display:block}
.out .disc{font-size:.82rem;color:var(--muted);margin:10px 0 0}

/* attribute chip */
.attr{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:.82rem;
  border:1px solid var(--line);border-radius:8px;padding:5px 10px;background:var(--paper-2);color:var(--ink)}
.attr b{font-weight:500;color:var(--brand-strong)}
.attrs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}

/* link card (one link = one card, never a table row) */
.linkcard{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;background:#fff;
  display:grid;gap:10px}
.linkcard .who{font-family:var(--f-mono);font-size:.78rem;color:var(--muted)}
.linkstack{display:grid;gap:14px}

/* callouts */
.note{border-left:4px solid var(--brand);background:var(--paper-2);border-radius:0 var(--r) var(--r) 0;
  padding:18px 22px;margin:24px 0}
.note.warn{border-left-color:var(--warn);background:#FFF5F4}
.note.warn strong{color:var(--warn-ink)}
.note.sand{border-left-color:#C9A94E;background:var(--sand)}
.note p:last-child{margin-bottom:0}
.note h3{font-size:1.05rem}

/* steps */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:22px}
.steps>li{counter-increment:s;display:grid;grid-template-columns:46px 1fr;gap:18px;align-items:start}
.steps>li::before{content:counter(s);font-family:var(--f-mono);font-size:.95rem;color:var(--ink);
  background:var(--mint);border-radius:10px;width:46px;height:46px;display:grid;place-items:center;font-weight:500}
.steps h3{margin:2px 0 6px}
.steps p:last-child{margin-bottom:0}

/* faq */
details.faq{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin:0 0 12px}
details.faq summary{cursor:pointer;padding:16px 20px;font-family:var(--f-head);font-weight:600;
  font-size:1.03rem;min-height:44px;display:flex;align-items:center;gap:12px;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+";font-family:var(--f-mono);color:var(--brand-strong);flex:0 0 auto}
details.faq[open] summary::before{content:"\2212"}
details.faq .a{padding:0 20px 18px 44px}
details.faq .a p:last-child{margin-bottom:0}

/* tool */
.tool{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:24px;box-shadow:var(--shadow)}
.tool label{display:block;font-weight:600;margin:0 0 8px}
.tool textarea{width:100%;min-height:132px;border:1px solid var(--line);border-radius:10px;padding:13px;
  font:400 .95rem/1.55 var(--f-mono);color:var(--ink);resize:vertical}
.tool .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}
.tool button{border:0;border-radius:999px;background:var(--mint);color:var(--ink);font:700 .95rem var(--f-head);
  padding:0 26px;min-height:46px;cursor:pointer}
.tool button.ghost{background:transparent;border:1px solid var(--line);font-weight:600}
.tool .out-area{margin-top:24px;display:grid;gap:16px}
.tool .empty{color:var(--muted);font-size:.95rem}

/* misc */
.meta{font-size:.85rem;color:var(--muted)}
.divider{height:1px;background:var(--line);margin:34px 0}
/* 收尾块：原来是独立 section，但内容只是「下一步去哪」。
   独立成节既撑不起一屏，也逼着硬凑配图，折进上一节反而更实。 */
.closer{margin-top:42px;padding-top:30px;border-top:1px solid var(--line)}
section.deep .closer{border-top-color:rgba(255,255,255,.2)}
.closer h3{font-size:1.1rem}
.flow{display:block;width:100%;height:auto;margin:8px 0 0}
.tocgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;padding:0;margin:0;list-style:none}
.tocgrid>li{grid-column:span 2}
.tocgrid>li:nth-child(5n+1){grid-column:span 3}
.tocgrid>li:nth-child(5n+2){grid-column:span 3}
.tocgrid a{display:flex;min-height:44px;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:12px 15px;text-decoration:none;color:var(--ink);font-size:.95rem}
.tocgrid a:hover{border-color:var(--brand-strong);color:var(--brand-strong)}
@media (max-width:760px){.tocgrid>li,.tocgrid>li:nth-child(5n+1),.tocgrid>li:nth-child(5n+2){grid-column:span 6}}

/* footer */
.ftr{background:var(--sky-deep);color:#CFE0EE;margin-top:0;padding:52px 0 34px}
.ftr a{color:var(--mint)}
.ftr .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}
.ftr h4{font-family:var(--f-head);color:#fff;font-size:1rem;margin:0 0 12px}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.ftr ul a{display:inline-flex;align-items:center;min-height:44px}
/* 深底上不能沿用 --muted（#4A5A6E 压 #23486A 只有 1.5:1，实测截图里那段披露几乎看不见）。
   披露文字尤其不能弱化：它是信任声明，不是脚注。 */
.ftr .meta,.ftr .fine{color:#CFE0EE}
.ftr .fine{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-size:.85rem}
@media (max-width:800px){.ftr .cols{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}