/* Xin Puente 信桥 | site.css  (2026-10-20 redesign: "WeChat-native B2B")
   Clean, bright, dense-but-calm like WeChat / Alipay and Chinese 出海 service sites. LIGHT ONLY (no dark mode: it made buttons unreadable).
   System font stack only, no web fonts, nothing is requested from Google. Weights 400 / 600 / 700 only. No italics.
   Every text / background pair is listed in tools/site-src/validate.py (PAIRS) and checked for WCAG AA there (>= 4.5:1, >= 3:1 for >= 24px or >= 18.66px bold).
   Rules this file keeps: no text with opacity < 1, no text over gradients or images, gold #C9A24B only as decoration (never as text on light),
   WeChat green only as #067D3E with white text, red never on navy, muted never on navy. Mobile first: 375 px is the design width. */

:root {
  --ink: #1F1B18; --muted: #5A544D;
  --paper: #F7F7F7; --surface: #FFFFFF; --white: #FFFFFF; --tint: #FBF4E6;
  --border: #E4DDD0; --border-strong: #8A8176;
  --red: #C41E1E; --red-press: #A01818; --red-tint: #FCEBE8;
  --navy: #12263F; --navy-2: #1E3A5F; --on-navy: #FFFFFF; --on-navy-2: #D5DCE6;
  --gold: #C9A24B; --gold-text: #E3C170; --gold-press: #D4AE58;
  --wechat: #067D3E; --wechat-press: #055F2F; --link: #576B95;
  --ok: #067D3E; --ok-bg: #E8F6EE; --warn: #8A4A00; --warn-bg: #FFF4E0; --warn-solid: #B45309;
  --danger: #B3261E; --danger-bg: #FBE9E7; --placeholder: #766E65;
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", Arial, sans-serif;
  --gut: 16px; --head: 56px; --mbar-h: 64px;
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.7 var(--font); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; overflow-x: clip; min-width: 320px; }
em, i, cite, address, dfn, var { font-style: normal; }
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-size: 28px; line-height: 1.3; }
h2 { font-size: 22px; line-height: 1.35; }
h3, .h3 { font-family: var(--font); font-size: 18px; line-height: 1.4; font-weight: 600; margin: 0; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
.annc :focus-visible, .site-footer :focus-visible, .band :focus-visible, .mei-head :focus-visible { outline-color: var(--white); }
::selection { background: var(--gold-text); color: var(--ink); }
.wrap { width: min(1120px, 100% - 2 * var(--gut)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--navy); color: var(--white); padding: 12px 18px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
@media (min-width: 960px) { h1 { font-size: 40px; line-height: 1.25; } h2 { font-size: 32px; line-height: 1.3; } :root { --gut: 24px; --head: 64px; } }

/* ---------- announcement bar + header ---------- */
.annc { background: var(--navy); color: var(--on-navy); }
.annc a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 6px 0; color: var(--on-navy); text-decoration: none; font-size: 14px; line-height: 1.4; text-align: center; }
.annc-go { color: var(--gold-text); font-size: 18px; font-weight: 700; }
.site-header { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--border); }
.bar { display: flex; align-items: center; gap: 8px; min-height: var(--head); }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); margin-right: auto; flex: 0 0 auto; }
.seal { width: 34px; height: 34px; flex: 0 0 auto; }
.seal rect:first-child { fill: var(--red); }
.seal .seal-in { fill: none; stroke: #F4C2C2; stroke-width: 1.2; }
.seal text { fill: var(--white); font: 700 15px var(--font); }
.brand-name { font: 700 17px var(--font); }
.brand-zh { font: 700 17px var(--font); }
.hdr-cta { flex: 0 0 auto; }
.hdr-cta .hs { display: none; }
@media (max-width: 419px) { .hdr-cta .hl { display: none; } .hdr-cta .hs { display: inline; } }
.burger { appearance: none; border: 1.5px solid var(--navy); background: var(--surface); width: 44px; height: 44px; border-radius: 8px; cursor: pointer; display: grid; place-content: center; gap: 5px; flex: 0 0 auto; }
.burger span { display: block; width: 20px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { background: var(--surface); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--border); padding: 4px var(--gut) 16px; box-shadow: 0 14px 24px -16px rgba(18, 38, 63, .4); max-height: calc(100vh - var(--head)); overflow-y: auto; }
.menu.open { display: block; }
.nav { display: grid; }
.nav a { display: flex; align-items: center; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none; font-size: 17px; }
.nav a[aria-current="page"] { font-weight: 700; color: var(--navy); }
.lang { display: flex; gap: 8px; padding-top: 14px; }
.lang a { flex: 1; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--navy); border-radius: 8px; background: var(--surface); color: var(--navy); font-size: 16px; font-weight: 600; text-decoration: none; }
.lang a[aria-current="true"] { background: var(--navy); color: var(--white); }
.lang .short { display: none; }
@media (min-width: 1100px) {   /* inline bar from 1100 px; 1024-1099 px keep the burger so 资讯 / Noticias / News stays reachable */
  .burger { display: none; }
  .menu { display: flex; position: static; align-items: center; justify-content: flex-end; gap: 14px; flex: 1 1 auto; padding: 0; border: 0; box-shadow: none; background: none; max-height: none; overflow: visible; }
  .nav { display: flex; gap: 2px; }
  .nav a { min-height: 40px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; font-size: 15px; white-space: nowrap; }
  .nav a[aria-current="page"] { border-bottom-color: var(--red); }
  .nav a:hover { color: var(--navy); border-bottom-color: var(--border-strong); }
  .lang { padding: 0; gap: 4px; }
  .lang a { flex: 0 0 auto; min-height: 36px; padding: 0 10px; font-size: 14px; }
  .lang .long { display: none; }
  .lang .short { display: inline; }
  .bar { gap: 14px; }
}

/* ---------- buttons (WeUI-derived: 48 high, 8 radius, 17/600) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 24px; border: 1.5px solid transparent; border-radius: 8px; font: 600 17px/1.25 var(--font); text-decoration: none; text-align: center; cursor: pointer; appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; }
.btn svg { width: 22px; height: 22px; flex: 0 0 auto; fill: currentColor; stroke: none; }
.btn-red, .btn-fill { background: var(--red); border-color: var(--red); color: var(--white); }
.btn-red:hover, .btn-red:active, .btn-fill:hover, .btn-fill:active { background: var(--red-press); border-color: var(--red-press); }
.btn-wx { background: var(--wechat); border-color: var(--wechat); color: var(--white); }
.btn-wx:hover, .btn-wx:active { background: var(--wechat-press); border-color: var(--wechat-press); }
.btn-line { background: var(--surface); border-color: var(--navy); color: var(--navy); }
.btn-line:hover, .btn-line:active { background: var(--paper); }
.btn-gold { background: var(--gold-text); border-color: var(--gold-text); color: var(--ink); }
.btn-gold:hover, .btn-gold:active { background: var(--gold-press); border-color: var(--gold-press); }
.btn[disabled] { background: var(--muted); border-color: var(--muted); color: var(--white); cursor: wait; }
.btn-hero { min-height: 52px; }
.btn-sm { min-height: 40px; padding: 6px 14px; font-size: 15px; }
.wf { fill: currentColor; }
.wd { fill: var(--wechat); }
.link-arrow { font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 1.5px solid currentColor; }
.link-arrow::after { content: " \2192"; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-stack { display: grid; gap: 12px; width: 100%; }
@media (min-width: 640px) { .cta-stack { display: flex; flex-wrap: wrap; width: auto; } .cta-stack .btn { min-width: 184px; } }

/* ---------- sections ---------- */
.xs { padding-block: 32px; }
.xs-white { background: var(--surface); border-block: 1px solid var(--border); }
.xh { display: grid; gap: 4px; margin-bottom: 16px; }
.xh h2 { display: flex; align-items: center; gap: 10px; }
.xh h2::before { content: ""; width: 4px; height: 1em; border-radius: 2px; background: var(--red); flex: 0 0 auto; }
.xsub { color: var(--muted); font-size: 14px; line-height: 1.6; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 8px; }
.panel-pad { padding: 16px; display: grid; gap: 14px; }
.note { font-size: 14px; line-height: 1.6; color: var(--muted); }
.xs .note { margin-top: 14px; max-width: 80ch; }
.fine { font-size: 14px; color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
@media (min-width: 960px) { .xs { padding-block: 64px; } .xh { margin-bottom: 24px; } }

/* ---------- hero ---------- */
.hero { background: var(--surface); border-bottom: 1px solid var(--border); padding: 20px 0 28px; }
.hero-grid { display: grid; gap: 20px; }
.hero-copy { display: grid; gap: 14px; justify-items: start; min-width: 0; align-content: start; }
.loc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--tint); color: var(--ink); font-size: 14px; font-weight: 600; }
.loc-chip svg { width: 18px; height: 18px; fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero h1 { max-width: 16em; }
.sub { color: var(--ink); max-width: 36em; }
.not-line { padding: 10px 14px; border-left: 4px solid var(--navy); background: var(--paper); color: var(--ink); font-weight: 600; max-width: 36em; }
.hero .cta-stack { margin-top: 2px; }
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.badges li { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 600; }
.badges li::before { content: "\2713"; color: var(--ok); font-weight: 700; margin-right: 6px; }
.hero-card { display: grid; gap: 12px; align-content: start; padding: 12px; background: var(--tint); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.lc { display: flex; align-items: center; gap: 12px; }
.lc-av { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--gold-text); font: 700 26px/1 var(--font); object-fit: cover; }
.lc-tx { display: grid; gap: 2px; min-width: 0; }
.lc-name { font: 700 18px/1.3 var(--font); color: var(--ink); }
.lc-role { font-size: 14px; color: var(--muted); }
.lc-reply { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
.lc-reply svg { width: 16px; height: 16px; fill: none; stroke: var(--wechat); stroke-width: 2; stroke-linecap: round; flex: 0 0 auto; }
/* About page people cards (2026-10-21: the names moved off the home page) */
.people { list-style: none; display: grid; gap: 12px; margin-top: 4px; }
.person { display: flex; align-items: center; gap: 14px; min-width: 0; }
.people .lc-name { font: 700 18px/1.3 var(--font); }
.people .lc-role, .people .lc-reply { font-size: 14px; line-height: 1.5; }
.people .lc-role { color: var(--muted); }
@media (min-width: 640px) { .people { grid-template-columns: 1fr 1fr; } }
.hc-free { display: grid; gap: 6px; }
.hc-h { font-weight: 700; color: var(--ink); }
.ticks { list-style: none; display: grid; gap: 6px; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 14px; height: 8px; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }
.bridge-line { width: 100%; max-width: 320px; height: auto; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; justify-self: center; }
@media (min-width: 960px) {
  .hero { padding: 48px 0 56px; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
  .hero-card { padding: 20px; gap: 16px; }
}

/* ---------- hero route map (2026-10-21, home_viz.py): China -> Mexico -> Latin America, the red seal as the bridge, four channel icons ---------- */
.rt { display: block; width: 100%; height: auto; }
.rt .pn { fill: var(--navy-2); }
.rt .pr { fill: var(--red); }
.rt .pl { fill: var(--link); }
.rt-arc { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 6 5; }
.rt-fan { fill: none; stroke: var(--wechat); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 4 4; }
.rt-spoke { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.rt-d { fill: var(--navy); stroke: var(--tint); stroke-width: 1.5; }
.rt-pin { stroke: var(--tint); stroke-width: 2; }
.rt-ring { fill: none; stroke-width: 1.6; }
.rt-ring-cn { stroke: var(--navy); }
.rt-ring-mx { stroke: var(--red); }
.rt-pin-cn { fill: var(--navy); }
.rt-pin-mx { fill: var(--red); }
.rt-ch circle { stroke: var(--white); stroke-width: 2.5; }
.rt-c1 circle, .chn-c1 .chn-ic { background: var(--navy); fill: var(--navy); }
.rt-c2 circle, .chn-c2 .chn-ic { background: var(--red); fill: var(--red); }
.rt-c3 circle, .chn-c3 .chn-ic { background: var(--wechat); fill: var(--wechat); }
.rt-c4 circle, .chn-c4 .chn-ic { background: var(--gold-text); fill: var(--gold-text); }
.rt-ch use, .chn-ic use { fill: none; stroke: var(--white); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rt-c4 use, .chn-c4 use { stroke: var(--ink); }
.rt-l { font: 700 15px var(--font); fill: var(--ink); stroke: var(--tint); stroke-width: 3.5px; stroke-linejoin: round; paint-order: stroke fill; }
@keyframes rt-flow { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: no-preference) { .rt-arc { animation: rt-flow 1.4s linear infinite; } .rt-fan { animation: rt-flow 2.2s linear infinite; } }

/* ---------- every-channel band (navy, white tiles with the brand-colour icon bubbles) ---------- */
.xs-navy { background: var(--navy); color: var(--on-navy); }
.xs-navy .xh h2 { color: var(--on-navy); }
.xs-navy .xh h2::before { background: var(--gold-text); }
.xs-navy .xsub, .xs-navy .note { color: var(--on-navy-2); }
.chn-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chn { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 14px; background: var(--surface); border-radius: 12px; }
.chn-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; }
.chn-ic svg { width: 28px; height: 28px; }
.chn-c5 .chn-ic { background: var(--navy-2); }
.chn-c6 .chn-ic { background: var(--red-tint); }
.chn-c6 use { stroke: var(--red); }
.chn-tx { display: grid; gap: 3px; min-width: 0; }
.chn h3 { font-size: 16px; line-height: 1.35; }
.chn p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.chn-note { margin-top: 16px; }
@media (min-width: 720px) {
  .chn-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .chn { grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 18px; }
  .chn h3 { font-size: 17px; }
}

/* ---------- 金刚区 service grid ---------- */
.gridnav { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 4px; }
.gtile { display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 4px 2px; border-radius: 8px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.gtile:active { background: var(--paper); }
.gic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); color: var(--navy); }
.gic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gl { font-size: 14px; line-height: 1.35; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.gtile-hl .gic { background: var(--red-tint); color: var(--red); }
@media (min-width: 640px) { .panel { padding: 20px 12px; } .gridnav { grid-template-columns: repeat(8, 1fr); } .gtile:hover { background: var(--paper); } }

/* ---------- audience picker ---------- */
.aud-grid { display: grid; gap: 12px; }
.aud { display: grid; gap: 6px; align-content: start; padding: 16px; border: 1px solid var(--border); border-left: 4px solid var(--navy); border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; }
.aud-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--tint); color: var(--navy); }
.aud-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aud:hover .aud-ic { background: var(--surface); }
.aud-t { font: 700 18px/1.4 var(--font); }
.aud-p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.aud-go { font-weight: 600; color: var(--red); }
.aud-go::after { content: " \2192"; }
.aud:hover { background: var(--tint); }
@media (min-width: 600px) { .aud-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .aud-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* ---------- steps (5) ---------- */
.steps5 { list-style: none; display: grid; gap: 12px; }
.step { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.step-n { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--white); font: 700 18px/1 var(--font); }
.step-b { display: grid; gap: 4px; min-width: 0; }
.step-b p { font-size: 15px; color: var(--ink); }
.step { position: relative; }
.step:not(:last-child)::after { content: ""; position: absolute; left: 33px; top: 100%; width: 2px; height: 12px; background: var(--navy-2); }
@media (min-width: 1200px) {
  .steps5 { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .step { flex-direction: column; gap: 12px; padding: 20px 16px; }
  .step:not(:last-child)::after { left: auto; right: -16px; top: 37px; width: 16px; height: 2px; }
}

/* ---------- plans ---------- */
.plans { display: grid; gap: 12px; }
.plan { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.plan-rec { border: 2px solid var(--red); background: var(--tint); }
.plan-badge { align-self: flex-start; padding: 4px 10px; border-radius: 4px; background: var(--red); color: var(--white); font-size: 14px; font-weight: 600; line-height: 1.3; }
.plan-price { color: var(--muted); font-size: 14px; line-height: 1.4; }
.plan-price b { display: block; font: 700 28px/1.2 var(--font); color: var(--ink); font-variant-numeric: lining-nums; }
.plan-per { display: block; margin-top: 2px; }
.plan-from { font-weight: 600; }
.plan-rmb { font-size: 14px; font-weight: 600; color: var(--navy); }
.plan-lbl { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.inc { list-style: none; display: grid; gap: 6px; font-size: 15px; }
.inc li { position: relative; padding-left: 24px; }
.inc li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }
.plan-in { flex: 1 1 auto; }
.plan-out { font-size: 14px; line-height: 1.6; color: var(--muted); }
.plan-out b { color: var(--ink); font-weight: 700; }
.plan .btn { margin-top: 4px; }
@media (min-width: 720px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .plans { grid-template-columns: repeat(4, 1fr); gap: 16px; } .plan { padding: 20px 16px; } }

/* ---------- partner standard ---------- */
.checks { list-style: none; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 30px; font-weight: 600; }
.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); }
.checks li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 8px; height: 4px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg); }
.pt-zh { padding: 10px 14px; border-left: 4px solid var(--navy); background: var(--paper); color: var(--ink); }
.recruit { display: grid; gap: 4px; }
.pt-links { margin-top: 2px; }
.fx { margin-top: 6px; }
.rec-h { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.rec-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.rec-chips li { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--tint); color: var(--ink); font-size: 14px; font-weight: 600; }
@media (min-width: 960px) { .checks { grid-template-columns: 1fr 1fr; gap: 12px 32px; } .panel-pad { padding: 28px; gap: 20px; } }

/* ---------- downloads ---------- */
.dl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--ink); text-decoration: none; }
.dl-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); color: var(--navy); flex: 0 0 auto; }
.dl-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dl-tx { display: grid; gap: 2px; flex: 1 1 180px; min-width: 0; }
.dl-tx b { font-weight: 700; font-size: 17px; }
.dl-tx span { font-size: 14px; color: var(--muted); }
.dl-btn { padding: 10px 20px; border-radius: 8px; background: var(--navy); color: var(--white); font-weight: 600; flex: 0 0 auto; }
.dl:hover .dl-btn { background: var(--navy-2); }
@media (min-width: 960px) { .dl { max-width: 720px; } }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 860px; }
.faq-list { display: grid; }
.faq-i { border-bottom: 1px solid var(--border); }
.faq-i:first-child { border-top: 1px solid var(--border); }
.faq-i summary { list-style: none; cursor: pointer; position: relative; min-height: 56px; padding: 14px 40px 14px 0; font: 600 17px/1.5 var(--font); color: var(--ink); }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); }
.faq-i[open] summary::after { margin-top: -3px; transform: rotate(-135deg); }
.faq-i p { padding: 0 0 18px; color: var(--ink); max-width: 70ch; }

/* ---------- more: WeChat-settings style cells ---------- */
.cells { display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cell { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 16px; border-top: 1px solid var(--border); color: var(--ink); text-decoration: none; font-size: 17px; }
.cell:first-child { border-top: 0; }
.cell:active, .cell:hover { background: var(--paper); }
.chev { color: var(--muted); font-size: 24px; line-height: 1; }
@media (min-width: 960px) { .cells { max-width: 560px; } }

/* ---------- final CTA band (navy) ---------- */
.band { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 28px 18px 24px; border-radius: 16px; background: var(--navy); color: var(--on-navy); }
.band h2 { color: var(--on-navy); max-width: 18em; }
.band-p { color: var(--on-navy-2); }
.band .bridge-line { max-width: 260px; }
.band .cta-stack { width: 100%; justify-content: center; }
.disc-inline { font-size: 13px; line-height: 1.6; color: var(--on-navy-2); max-width: 56ch; }
.cta-mail a { color: var(--gold-text); font-weight: 600; }
@media (min-width: 960px) { .band { padding: 48px 32px 40px; } }

/* ---------- footer (navy) ---------- */
.site-footer { background: var(--navy); color: var(--on-navy-2); }
.foot-grid { display: grid; gap: 32px; padding-block: 36px 24px; }
.brand-foot { color: var(--on-navy); }
.brand-foot .brand-name, .brand-foot .brand-zh { color: var(--on-navy); }
.foot-brand { display: grid; gap: 12px; align-content: start; justify-items: start; }
.foot-co { font: 700 17px/1.4 var(--font); color: var(--on-navy); }
.foot-tag { font-size: 14px; color: var(--on-navy-2); }
.foot-cta { display: grid; gap: 10px; width: 100%; max-width: 360px; }
.foot-qr { display: grid; gap: 6px; justify-items: start; font-size: 14px; color: var(--on-navy-2); }
.foot-qr img { background: var(--white); padding: 8px; border-radius: 8px; width: 160px; height: 160px; }
.foot-wid { color: var(--on-navy); }
.foot-h { font: 600 14px/1.4 var(--font); color: var(--gold-text); margin-bottom: 8px; }
.foot-h2 { margin-top: 18px; }
.foot-nav ul { list-style: none; display: grid; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--on-navy); text-decoration: none; font-size: 15px; }
.foot-nav a:hover { text-decoration: underline; }
.foot-disc { display: grid; gap: 12px; align-content: start; }
.foot-disc p { font-size: 13px; line-height: 1.7; color: var(--on-navy-2); }
.foot-disc .tag { display: inline-block; padding: 1px 7px; margin-right: 6px; border-radius: 4px; background: var(--gold-text); color: var(--ink); font: 700 12px/1.5 var(--font); vertical-align: 1px; }
.foot-copy { border-top: 1px solid var(--navy-2); padding-block: 16px; font-size: 13px; color: var(--on-navy-2); }
@media (min-width: 960px) { .foot-grid { grid-template-columns: 1fr .8fr 2fr; gap: 48px; padding-block: 56px 32px; } .foot-cta { grid-template-columns: 1fr 1fr; max-width: none; } }

/* ---------- right-edge bar (desktop) + bottom bar (phones) ---------- */
.fbar { display: none; }
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
.mbar .btn { min-height: 48px; padding: 6px 8px; font-size: 16px; line-height: 1.2; }
@media (max-width: 959px) { body { padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom)); } }
@media (min-width: 960px) {
  .mbar { display: none; }
  .fbar { display: grid; position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 50; width: 90px; border-radius: 12px 0 0 12px; overflow: hidden; box-shadow: 0 8px 24px -8px rgba(18, 38, 63, .45); }
  .fb { appearance: none; -webkit-appearance: none; border: 0; border-bottom: 1px solid var(--white); display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 76px; padding: 8px 2px; color: var(--white); font: 600 13px/1.25 var(--font); text-decoration: none; text-align: center; cursor: pointer; }
  .fb:last-child { border-bottom: 0; }
  .fb svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .fb .wf { fill: currentColor; stroke: none; }
  .fb-chat { background: var(--navy); } .fb-chat:hover { background: var(--navy-2); }
  .fb-wx { background: var(--wechat); } .fb-wx:hover { background: var(--wechat-press); }
  .fb-wx svg { stroke: none; }
  .fb-as { background: var(--red); } .fb-as:hover { background: var(--red-press); }
  .fb-top { background: var(--surface); color: var(--ink); } .fb-top:hover { background: var(--paper); }
}

/* 960-1279 px: the right-edge bar (90 px) would sit on top of the page content, so main and the footer keep clear of it on both sides */
@media (min-width: 960px) and (max-width: 1279px) { main .wrap:not(.guide-wrap), .site-footer .wrap { width: min(1120px, 100% - 2 * var(--gut) - 180px); } }

/* ---------- WeChat sheet ---------- */
.wx { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; display: grid; align-items: end; justify-items: center; }
.wx-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(18, 38, 63, .62); }
.wx-card { position: relative; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; display: grid; gap: 12px; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); border-radius: 16px 16px 0 0; }
.wx-card h2 { padding-right: 44px; }
.wx-card:focus { outline: none; }
.wx-x { position: absolute; right: 8px; top: 8px; appearance: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); cursor: pointer; display: grid; place-items: center; }
.wx-x svg { width: 16px; height: 16px; stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; }
.wx-qr { justify-self: center; padding: 16px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; }
.wx-qr img { display: block; width: 240px; height: 240px; max-width: 100%; }
.wx-hint { text-align: center; font-weight: 600; color: var(--ink); }
.wx-id { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.wx-id b { font-size: 18px; }
.wx-form { display: grid; gap: 12px; }
.wx-fh { font-weight: 700; color: var(--ink); }
.wx-alt { text-align: center; }
@media (min-width: 640px) { .wx { align-items: center; padding: 16px; } .wx-card { border-radius: 16px; } }

/* ---------- chat panel (placeholder Mei; opened from the right-edge bar) ---------- */
.mei { position: fixed; right: 16px; bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom) + 8px); left: 16px; z-index: 60; display: grid; justify-items: end; pointer-events: none; }
.mei-panel { pointer-events: auto; width: 100%; max-width: 380px; max-height: calc(100vh - 160px); display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 24px 48px -16px rgba(18, 38, 63, .5); overflow: hidden; }
@media (min-width: 960px) { .mei { left: auto; right: 100px; bottom: 24px; } .mei-panel { width: 380px; max-height: min(640px, calc(100vh - 48px)); } }
.mei-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--navy); color: var(--on-navy); }
.mei-av { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: var(--navy-2); color: var(--gold-text); font: 700 18px var(--font); }
.mei-who { display: grid; line-height: 1.3; flex: 1 1 auto; min-width: 0; }
.mei-who strong { font-weight: 700; }
.mei-who span { font-size: 14px; color: var(--on-navy-2); }
.mei-x { appearance: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--navy-2); cursor: pointer; display: grid; place-items: center; }
.mei-x svg { width: 16px; height: 16px; stroke: var(--white); stroke-width: 2; fill: none; stroke-linecap: round; }
.mei-scroll { overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; min-height: 0; }
.mei-banner { background: var(--warn-bg); color: var(--warn); font-size: 14px; padding: 8px 16px; line-height: 1.5; }
.mei-log { padding: 14px 16px 6px; display: grid; gap: 8px; align-content: start; }
.bub { max-width: 90%; padding: 10px 13px; border-radius: 12px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.bub-mei { background: var(--paper); color: var(--ink); justify-self: start; border-bottom-left-radius: 4px; }
.bub-me { background: var(--navy); color: var(--white); justify-self: end; border-bottom-right-radius: 4px; }
.bub-sys { background: var(--tint); color: var(--ink); font-size: 14px; display: grid; gap: 6px; }
.bub-sys a { font-weight: 700; color: var(--navy); }
.mei-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 12px; }
.mei-chip { appearance: none; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--navy); border-radius: 999px; background: var(--surface); color: var(--navy); font: 600 14px var(--font); cursor: pointer; text-align: left; }
.mei-chip:hover { background: var(--paper); }
.mei-fm { display: grid; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--border); }
.mei-fh { font-weight: 700; }
.mei-alt { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.mei-alt a { min-height: 40px; display: inline-flex; align-items: center; }

/* ---------- language suggestion (slim bar under the header; shown after ~4 s, remembered) ---------- */
.lang-bar { background: var(--tint); border-bottom: 1px solid var(--border); color: var(--ink); }
.lang-bar .wrap { display: flex; align-items: center; gap: 8px; min-height: 48px; padding-block: 2px; }
.lang-bar p { flex: 1 1 auto; font-size: 14px; line-height: 1.5; padding-block: 6px; }
.lang-bar a { font-weight: 700; color: var(--navy); white-space: nowrap; }
.lang-bar button { appearance: none; flex: 0 0 auto; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--ink); font: 600 22px/1 var(--font); cursor: pointer; border-radius: 8px; }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: 16px; color: var(--ink); padding: 0; }
.star { color: var(--red); }
input, select, textarea { font: 400 16px/1.4 var(--font); color: var(--ink); background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: 8px; min-height: 48px; padding: 0 14px; width: 100%; appearance: none; -webkit-appearance: none; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%231F1B18' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
input::placeholder { color: var(--placeholder); opacity: 1; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-color: var(--navy); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }
.err { color: var(--danger); font-size: 14px; font-weight: 600; }
.err::before { content: "! "; font-weight: 700; }
.hint, .req-note { font-size: 14px; color: var(--muted); }
.form-note { padding: 12px 14px; border: 1px solid var(--ok); border-left-width: 4px; border-radius: 8px; background: var(--ok-bg); color: var(--ok); font-size: 15px; font-weight: 600; line-height: 1.5; }
.form-note.is-err { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.form-grid { display: grid; gap: 20px; align-items: start; }
.form { display: grid; gap: 18px; padding: 16px; }
.aside { display: grid; gap: 12px; }
.aside .card { display: grid; gap: 10px; }
.steps-mini { list-style: none; counter-reset: s; display: grid; gap: 12px; }
.steps-mini li { counter-increment: s; position: relative; padding-left: 40px; min-height: 28px; }
.steps-mini li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; font: 700 15px var(--font); }
.group { gap: 10px; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 15px; }
.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--white); font-weight: 600; }
.chip input:checked + span::before { content: "\2713"; margin-right: 8px; font-weight: 700; }
.chip input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
fieldset.group[aria-invalid="true"] .chip span { border-color: var(--danger); }
@media (min-width: 960px) { .form-grid { grid-template-columns: 1.4fr .8fr; gap: 32px; } .form { padding: 28px; gap: 20px; } .aside { position: sticky; top: calc(var(--head) + 24px); } }

/* ---------- inner pages: clean page head ---------- */
.page-head { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 0 24px; }
.page-head .wrap { display: grid; gap: 12px; justify-items: start; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--link); }
.lede { font-size: 17px; line-height: 1.7; color: var(--ink); max-width: 46em; }
.seealso { margin-top: 0; max-width: 46em; }
.section { padding-block: 24px 40px; }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }
@media (min-width: 960px) { .page-head { padding: 24px 0 36px; } .section { padding-block: 40px 72px; } }

/* ---------- calculator ---------- */
.calc { display: grid; gap: 24px; padding: 16px; }
.calc-in { display: grid; gap: 16px; align-content: start; }
.calc-out { display: grid; gap: 12px; align-content: start; }
.calc-k { font-size: 14px; font-weight: 600; color: var(--muted); }
.calc-total { font: 700 36px/1.1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; word-break: break-all; }
.calc-over { font-size: 15px; font-weight: 600; color: var(--warn); min-height: 1.5em; }
.stack { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--border); }
.seg { display: block; height: 100%; width: 0; }
.sw-goods { background: var(--navy); } .sw-freight { background: var(--warn-solid); } .sw-tariff { background: var(--red); }
.sw-dta { background: var(--muted); } .sw-iva { background: var(--wechat); }
.sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.legend { list-style: none; display: grid; font-size: 16px; }
.legend li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.lg-l { flex: 1 1 auto; color: var(--ink); }
.lg-v { font-variant-numeric: tabular-nums; font-weight: 700; }
.calc-unit { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 14px 16px; border-radius: 8px; background: var(--tint); }
.calc-unit span { font-weight: 600; } .calc-unit b { font: 700 26px/1.2 var(--font); color: var(--navy); font-variant-numeric: tabular-nums; }
.calc-note { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 14px; }
.calc-cta { justify-self: start; grid-column: 1 / -1; }
@media (min-width: 900px) { .calc { grid-template-columns: 1fr 1.1fr; gap: 40px; padding: 32px; } .calc-total { font-size: 48px; } }

/* ---------- directory ---------- */
.dir-tools { display: grid; gap: 14px; margin-bottom: 8px; }
.dir-search { max-width: 520px; }
.search-wrap { position: relative; }
.search-wrap input { padding-right: 52px; }
.search-x { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.search-x svg { width: 16px; height: 16px; stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { appearance: none; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 400 15px var(--font); cursor: pointer; }
.fchip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); font-weight: 600; }
.dir-count { font-size: 14px; color: var(--muted); margin: 8px 0 14px; min-height: 1.6em; }
.dgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.dcard { display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.dcard-top { display: grid; gap: 8px; justify-items: start; }
.status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 14px; font-weight: 600; }
.status-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warn-solid); }
.dcard-count { font-weight: 700; color: var(--ink); }
.dcard-empty { font-size: 15px; color: var(--muted); }
.dlist { list-style: none; display: grid; gap: 8px; }
.dnone { margin-top: 16px; display: grid; gap: 12px; justify-items: start; }
.dir-more { display: grid; gap: 12px; margin-top: 32px; }
.dir-more .card { display: grid; gap: 10px; align-content: start; justify-items: start; }
@media (min-width: 820px) { .dir-more { grid-template-columns: 1fr 1fr; gap: 16px; } }

.who-list { list-style: none; display: grid; gap: 12px; }
.who-list li { display: grid; gap: 2px; }
.who-list b { font-weight: 700; color: var(--ink); }
.who-list span { font-size: 15px; color: var(--muted); }

/* ---------- real estate ---------- */
.re-proof { display: inline-block; margin-bottom: 20px; padding: 2px 0 2px 14px; border-left: 4px solid var(--navy); font: 700 18px/1.5 var(--font); color: var(--ink); max-width: 40em; }
.re-grid { display: grid; gap: 12px; }
.re-card { display: grid; gap: 6px; align-content: start; border-top: 4px solid var(--navy); }
.re-card p { font-size: 15px; color: var(--ink); }
.re-how { margin: 20px 0 16px; max-width: 46em; font-size: 17px; }
@media (min-width: 620px) { .re-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .re-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* ---------- guides, About, hub (long-form reading: 17px / 1.75, 680px measure) ---------- */
.guide-grid { display: grid; gap: 12px; }
.guide-card { display: grid; gap: 8px; align-content: start; border-top: 4px solid var(--navy); color: var(--ink); text-decoration: none; }
.guide-card h3 { font-size: 18px; }
.guide-card p { font-size: 15px; color: var(--ink); }
.guide-card .link-arrow { justify-self: start; }
.guide-card:hover { background: var(--tint); }
.ml-n { display: inline-grid; place-items: center; justify-self: start; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--white); font: 700 16px/1 var(--font); }
.guide-head h1 { font-size: 26px; max-width: 24em; }
.answer { padding-left: 14px; border-left: 4px solid var(--red); font: 600 17px/1.7 var(--font); color: var(--ink); max-width: 40em; }
.byline { font-size: 14px; font-weight: 600; color: var(--muted); }
.guide-wrap { display: grid; gap: 20px; width: min(680px, 100% - 2 * var(--gut)); }
.keys { display: grid; gap: 10px; align-content: start; border-left: 4px solid var(--navy); }
.prose { display: grid; gap: 16px; }
.prose h2 { font-size: 22px; margin-top: 12px; }
.prose h3, .g-sec > h3 { font-size: 18px; margin-top: 4px; }
.prose p, .prose li, .keys li, .toc li, .answer + p { font-size: 17px; line-height: 1.75; color: var(--ink); }
.prose a:not(.btn), .keys a, .toc a, .answer a, .faq-i p a, .seealso a, .note a, .nf-block p a:not(.btn), .re-how a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; }
.prose a:not(.btn):hover { text-decoration-thickness: 2px; }
.g-sec { display: grid; gap: 14px; align-content: start; }
.steps-list { list-style: none; counter-reset: st; display: grid; gap: 16px; }
.steps-list li { counter-increment: st; position: relative; padding-left: 52px; }
.steps-list li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; font: 700 17px var(--font); }
.steps-list h3 { font-size: 18px; margin-bottom: 4px; }
.toc ol { padding-left: 1.4rem; display: grid; gap: 6px; margin-top: 10px; }
.verified { padding: 12px 14px; border-left: 4px solid var(--ok); border-radius: 0 8px 8px 0; background: var(--ok-bg); color: var(--ink); font-size: 15px; line-height: 1.7; max-width: none; }
.verified a { color: var(--ink); text-decoration: underline; overflow-wrap: anywhere; }
.creds { display: grid; gap: 8px; justify-items: start; }
.sources, .more-guides { display: grid; gap: 6px; padding-left: 20px; }
.sources a, .more-guides a { overflow-wrap: anywhere; }
.disc-card, .cta-card { display: grid; gap: 10px; justify-items: start; }
.cta-card { border: 2px solid var(--red); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); max-width: 100%; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.table-wrap caption { text-align: left; padding: 12px 14px; font-weight: 700; color: var(--ink); caption-side: top; }
.table-wrap th, .table-wrap td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); color: var(--ink); min-width: 92px; }
.table-wrap thead th { background: var(--navy); color: var(--white); font-weight: 600; }
.table-wrap tbody th { font-weight: 700; }
@media (min-width: 900px) { .guide-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .guide-head h1 { font-size: 34px; } }

/* ---------- tariff lookup (2026-10-20): the tool page + the 海关编码 field in the calculator ----------
   Up / down is NEVER red or green: a neutral arrow plus the words 上调 / 下调 / 不变. The rate is ink, big. Only token pairs already in validate.py PAIRS. */
.btn-navy { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn-navy:hover, .btn-navy:active { background: var(--navy-2); border-color: var(--navy-2); }
.tool-link { margin-top: 2px; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tl-wrap { display: grid; gap: 16px; }
.tl-box { max-width: 720px; padding: 16px; }
.tl-form { display: grid; gap: 10px; }
.tl-form label { font-weight: 600; font-size: 16px; color: var(--ink); }
.tl-row { display: flex; gap: 8px; }
.tl-row input { flex: 1 1 auto; min-width: 0; font-size: 20px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums lining-nums; }
.tl-row .btn { flex: 0 0 auto; min-width: 88px; }
.tl-eg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tl-eg-l { font-size: 14px; color: var(--muted); }
.tl-eg .fchip { font-variant-numeric: tabular-nums lining-nums; }
.tl-out { display: grid; gap: 14px; }
.tl-status { font-size: 15px; color: var(--muted); }
.tl-sum { display: grid; gap: 8px; align-content: start; border-left: 4px solid var(--navy); }
.tl-sum h3 { font-size: 18px; }
.tl-ln { font-size: 15px; line-height: 1.6; color: var(--ink); }
.tl-list { display: grid; gap: 12px; }
.tl-gh { grid-column: 1 / -1; margin-top: 6px; padding: 8px 12px; border-left: 4px solid var(--navy); background: var(--tint); color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.5; }
.tl-card { display: grid; gap: 8px; align-content: start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tl-code { font: 700 18px/1.3 var(--font); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.tl-badge { padding: 2px 8px; border-radius: 4px; background: var(--navy); color: var(--white); font-size: 13px; font-weight: 600; line-height: 1.5; }
.tl-desc { font-size: 15px; line-height: 1.6; color: var(--ink); }
.tl-ctx { font-size: 14px; line-height: 1.6; color: var(--muted); }
.tl-rate { display: grid; gap: 0; padding-top: 8px; border-top: 1px solid var(--border); }
.tl-big { font: 700 36px/1.1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.tl-lbl { font-size: 14px; font-weight: 600; color: var(--muted); }
.tl-dir { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.5; }
.tl-src { font-size: 14px; line-height: 1.6; color: var(--muted); }
.tl-xnote { padding: 10px 12px; border-left: 4px solid var(--navy); background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.6; }
.tl-more { justify-self: start; }
.tl-acts { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 4px; }
.tl-acts a { font-size: 15px; }
.tl-miss { display: grid; gap: 10px; justify-items: start; border-left: 4px solid var(--navy); }
.tl-miss p { font-size: 16px; line-height: 1.7; color: var(--ink); max-width: 60ch; }
@media (min-width: 900px) { .tl-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 14px; } }
.cav-card { border-left: 4px solid var(--navy); }
.cav { display: grid; gap: 10px; padding-left: 20px; }
.cav li { font-size: 16px; line-height: 1.7; color: var(--ink); }
.cav a, .tl-datap a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; }
.chap-list { display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.chap { border-top: 1px solid var(--border); }
.chap:first-child { border-top: 0; }
.chap > summary { list-style: none; cursor: pointer; position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 10px 40px 10px 16px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.chap > summary::-webkit-details-marker { display: none; }
.chap > summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); }
.chap[open] > summary { background: var(--tint); }
.chap[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); }
.chap-n { font: 700 15px var(--font); color: var(--navy); font-variant-numeric: tabular-nums lining-nums; }
.chap-c { font-size: 14px; color: var(--muted); white-space: nowrap; }
.chap-body { display: grid; gap: 12px; padding: 12px; background: var(--paper); border-top: 1px solid var(--border); }
.chap-body:empty { display: none; }
.tl-two { display: grid; gap: 12px; }
.tl-two .card { display: grid; gap: 12px; align-content: start; }
.tl-bars { list-style: none; display: grid; gap: 10px; }
.tl-bars li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 15px; }
.tl-bl { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.tl-bm { display: grid; gap: 4px; min-width: 0; }
.tl-ct { color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; justify-self: start; }
.tl-bt { display: block; height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.tl-bt span { display: block; height: 100%; min-width: 3px; border-radius: 999px; background: var(--navy); }
.tl-bn { font-size: 14px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.tl-all summary { cursor: pointer; font-weight: 600; color: var(--navy); min-height: 44px; display: flex; align-items: center; }
.tl-all .tl-bars { margin-top: 4px; }
.tl-datap { max-width: 70ch; margin-bottom: 14px; }
.tl-srcs { list-style: none; display: grid; gap: 12px; }
.tl-srcitem { display: grid; gap: 6px; align-content: start; }
.tl-sd { font-size: 17px; color: var(--ink); }
.tl-sm { font-size: 14px; color: var(--muted); }
.tl-st { font-size: 14px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.tl-sl { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; font-weight: 600; }
.tl-sl a { min-height: 32px; display: inline-flex; align-items: center; }
@media (min-width: 900px) { .tl-two { grid-template-columns: 1fr 1fr; gap: 16px; } .tl-srcs { grid-template-columns: repeat(3, 1fr); gap: 16px; } .tl-box { padding: 24px; } }
.hs-field { gap: 8px; }
.hs-out { display: grid; gap: 8px; }
.hs-msg { padding: 10px 12px; border-radius: 8px; background: var(--tint); color: var(--ink); font-size: 14px; line-height: 1.6; }
.hs-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-out a { font-weight: 600; font-size: 14px; }

/* header nav gained a sixth link (关税查询 / Aranceles / Tariff lookup): between 1100 and 1199 px the links get a little tighter so
   logo + 7 links + language + red button still fit on one line (measured at 1100 px in zh, es and en); from 1200 px the normal sizes fit */
@media (min-width: 1100px) and (max-width: 1199px) { .nav a { padding: 0 8px; font-size: 14px; } .bar, .menu { gap: 10px; } }

/* ---------- news desk 资讯 (2026-10-20): hub, brief page, sector pages, home block. Existing tokens and pairs only (see PAIRS in validate.py). ----------
   The 7th header link (资讯 / Noticias / News) is in the menu and the footer; the inline bar starts at 1100 px (1024-1099 px would overflow by 37 px / 2 px in es / en). */
.nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--muted); }
.nw-meta time { font-weight: 600; font-variant-numeric: tabular-nums; }
.nw-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.nw-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--tint); color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.nw-tag:hover { border-color: var(--navy); }
.nw-item { display: grid; gap: 12px; align-content: start; }
.nw-h { font-size: 20px; line-height: 1.45; }
.nw-sum { font-size: 17px; line-height: 1.75; color: var(--ink); }
.nw-why { display: grid; gap: 4px; padding: 12px 14px; border-left: 4px solid var(--navy); border-radius: 0 8px 8px 0; background: var(--tint); }
.nw-why-h { font-size: 15px; font-weight: 700; color: var(--navy); }
.nw-why p { font-size: 16px; line-height: 1.7; color: var(--ink); }
.nw-tool { font-size: 15px; }
.nw-src { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.nw-src-h { font-size: 14px; font-weight: 600; color: var(--muted); }
.nw-srcs { list-style: none; display: grid; gap: 6px; font-size: 15px; line-height: 1.6; }
.nw-srcs a { overflow-wrap: anywhere; }
.nw-sl { font-size: 13px; color: var(--muted); }
.nw-pn { display: grid; gap: 10px; }
.nw-pn .btn { justify-content: flex-start; text-align: left; }
.nw-pn .nw-n { justify-content: flex-end; text-align: right; }
@media (min-width: 560px) { .nw-pn { grid-template-columns: 1fr 1fr; } .nw-pn .nw-n { grid-column: 2; } }
.nw-hub { display: grid; gap: 28px; }
.nw-sec { display: grid; gap: 12px; align-content: start; }
.nw-latest { display: grid; gap: 12px; border-top: 4px solid var(--red); }
.nw-lt { font-size: 22px; line-height: 1.4; }
.nw-lt a, .nw-row-h a { color: var(--ink); text-decoration: none; }
.nw-lt a:hover, .nw-row-h a:hover { text-decoration: underline; }
.nw-dek { font-size: 16px; line-height: 1.7; color: var(--ink); }
.nw-hl { list-style: none; display: grid; }
.nw-hl > li { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--border); }
.nw-hl > li > a { color: var(--ink); font-weight: 600; line-height: 1.5; text-decoration: none; }
.nw-hl > li > a:hover { text-decoration: underline; }
.nw-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.nw-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 400 15px var(--font); text-decoration: none; }
.nw-chip:hover { background: var(--tint); }
.nw-chip[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--white); font-weight: 600; }
.nw-list { list-style: none; display: grid; gap: 12px; }
.nw-row { display: grid; gap: 8px; align-content: start; }
.nw-row-h { font-size: 18px; line-height: 1.45; }
.nw-row p { font-size: 15px; line-height: 1.7; color: var(--ink); }
.nw-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.nw-pager span { font-size: 14px; color: var(--muted); }
.nw-rss { font-size: 15px; }
.nw-home { display: grid; gap: 4px; }
.nw-about { display: grid; gap: 8px; }
.nw-about p { font-size: 15px; line-height: 1.75; color: var(--ink); max-width: 70ch; }
@media (min-width: 760px) { .nw-list { grid-template-columns: 1fr 1fr; gap: 16px; } .nw-lt { font-size: 26px; } }

/* ---------- resource center 资源中心 + glossary 词汇表 (2026-10-20): existing tokens and pairs only (see PAIRS in validate.py). ----------
   Phone first: cards in one column, the rows of the guide lists are WeChat-style cells (>= 56 px), chips and the source links are >= 44 px tall,
   no table anywhere (a long Chinese / Spanish row cannot make the page scroll sideways at 320 / 375 px). */
.res-tools, .res-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.res-card { display: grid; gap: 8px; align-content: start; border-top: 4px solid var(--navy); color: var(--ink); text-decoration: none; }
a.res-card:hover, a.res-card:active { background: var(--tint); }
.res-card h3 { font-size: 18px; }
.res-card p { font-size: 15px; line-height: 1.7; color: var(--ink); }
.res-card .link-arrow { justify-self: start; }
.res-card .status-chip { justify-self: start; }
.res-soon { background: var(--paper); border-top-color: var(--border-strong); }
.res-group { display: grid; gap: 8px; align-content: start; }
.res-group h3 { font-size: 18px; }
.cell-tx { flex: 1 1 auto; min-width: 0; margin-right: 12px; padding-block: 12px; line-height: 1.5; font-size: 16px; }
.res-more { margin-top: 8px; }
.res-more a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
@media (min-width: 760px) { .res-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .res-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.gl-note { margin-bottom: 16px; }
.gl-note p { font-size: 15px; line-height: 1.75; color: var(--ink); max-width: 70ch; }
.gl-checked { margin-top: 0; }
.gl-tools { display: grid; gap: 14px; margin-bottom: 8px; }
.gl-search { max-width: 520px; }
.gl-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.gl-term { display: grid; gap: 8px; align-content: start; min-width: 0; scroll-margin-top: calc(var(--head) + 16px); }
.gl-term:target { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); }
.gl-cat { justify-self: start; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--tint); color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1.5; }
.gl-es { font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }
.gl-es a { display: block; padding-block: 8px; color: var(--ink); text-decoration: none; }
.gl-es a:hover { text-decoration: underline; }
.gl-names { margin: 0; display: grid; gap: 4px; }
.gl-names > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; align-items: baseline; }
.gl-names dt { font-size: 14px; font-weight: 600; color: var(--muted); }
.gl-names dd { margin: 0; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.gl-def { font-size: 15px; line-height: 1.75; color: var(--ink); overflow-wrap: anywhere; }
.gl-gloss { font-size: 14px; line-height: 1.6; color: var(--muted); }
.gl-src { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 15px; }
.gl-src a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 760px) { .gl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .gl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- premium services 2026-10-21: home band, service pages, step forms (site.js sets is-js / is-cur / is-done / is-busy / is-sent), checklist (has-result) ---------- */
/* the 7 links overflow the bar in es (and en at 1024-1099 px): the home link (.nav-h; the logo goes home) leaves the inline bar and the links tighten; it stays in the phone menu */
@media (min-width: 1100px) { .nav a.nav-h { display: none; } .nav a { padding: 0 6px; } }
@media (min-width: 1100px) { .nav a { padding: 0 7px; } }
@media (min-width: 1200px) { .nav a { padding: 0 8px; } }
#premium { background: var(--tint); border-bottom: 1px solid var(--border); }
.hb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hb-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 16px 16px; border-top: 4px solid var(--navy); }
.hb-tag { align-self: flex-start; padding: 2px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--tint); color: var(--navy); font-size: 14px; font-weight: 600; }
.hb-card h3 { font-size: 20px; font-weight: 700; }
.hb-card .ticks { gap: 8px; font-size: 15px; }
.hb-price { margin-top: auto; padding: 10px 12px; border-left: 4px solid var(--gold); border-radius: 0 8px 8px 0; background: var(--tint); font-size: 14px; font-weight: 600; }
.hb-card .btn { width: 100%; }
@media (min-width: 768px) { .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .hb-card { padding: 24px 24px 20px; } .hb-card h3 { font-size: 22px; } }

.sv-head h1 { max-width: 20em; }
.sv-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--tint); color: var(--navy); font-size: 14px; font-weight: 600; }
.sv-head .verified { max-width: 52em; }
main .wrap.sv-narrow { width: min(720px, 100% - 2 * var(--gut)); }
.sv-p { font-size: 17px; line-height: 1.75; }
.sv-p + .sv-p { margin-top: 14px; }
.sv-p + .sv-two, .sv-p + .sv-cred, .sv-two + .card, .sv-two + .sv-no, .cta-card + .disc-card { margin-top: 16px; }
.sv-two, .sv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sv-two > .card, .sv-two + .card, .sv-no, .sv-card, .sv-price, .sv-cred { display: grid; gap: 10px; align-content: start; min-width: 0; }
.sv-card { grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 8px 12px; }
.sv-card p { grid-column: 1 / -1; font-size: 15px; }
.sv-no { border-left: 4px solid var(--danger); }
.sv-nolist { list-style: none; display: grid; gap: 8px; }
.sv-nolist li { position: relative; padding-left: 28px; }
.sv-nolist li::before { content: "\00D7"; position: absolute; left: 3px; top: 0; color: var(--danger); font: 700 22px/1.2 var(--font); }
.table-wrap + .sv-notes { margin-top: 16px; }
.sv-notes li { padding-left: 26px; }
.sv-notes li::before { left: 5px; top: .7em; width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--navy); transform: none; }
.sv-price { gap: 12px; padding: 18px 16px; border-left: 4px solid var(--gold); background: var(--tint); }
.sv-price-big, .sv-cred-big { font: 700 20px/1.5 var(--font); }
.sv-cred { gap: 0; padding: 18px 16px 14px; border-left: 4px solid var(--navy); }
.sv-cred-note { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-strong); line-height: 1.6; }
.sv-narrow .steps-list { gap: 20px; }
.sv-narrow .steps-list li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 42px; bottom: -18px; width: 2px; background: var(--border); }
#types .table-wrap table { min-width: 680px; font-size: 14px; }
#types .table-wrap th, #types .table-wrap td { padding: 10px 12px; }
#types .table-wrap thead th:first-child, #types .table-wrap tbody th { position: sticky; left: 0; z-index: 1; min-width: 88px; box-shadow: 1px 0 0 var(--border); }
#types .table-wrap tbody th { background: var(--surface); }
#types .table-wrap tbody tr:nth-child(even) > * { background: var(--paper); }
@media (max-width: 767px) { #types .table-wrap caption { position: sticky; left: 0; width: calc(100vw - 2 * var(--gut) - 2px); } }
@media (min-width: 768px) { .sv-two, .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .sv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sf { display: grid; gap: 16px; padding: 16px; }
.sf-prog { display: flex; align-items: center; gap: 6px; }
.sf:not(.is-js) .sf-prog { display: none; }
.sf-seg { flex: 1 1 0; height: 8px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.sf-seg.is-done { background: var(--navy); box-shadow: none; }
.sf-seg.is-cur { height: 12px; background: var(--red); box-shadow: none; }
.sf-step { display: grid; gap: 18px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; scroll-margin-top: calc(var(--head) + 16px); }
.sf-step:not(:last-of-type) { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.sf.is-js .sf-step:not(.is-cur) { display: none; }
.sf.is-js .sf-step { padding-bottom: 0; border-bottom: 0; }
.sf-h { display: block; width: 100%; margin-bottom: 14px; padding: 0; font: 700 20px/1.4 var(--font); }
.sf-h::before { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; background: var(--navy); color: var(--white); font: 700 15px/1 var(--font); vertical-align: 2px; }
.sf-step[data-step="1"] .sf-h::before { content: "1"; } .sf-step[data-step="2"] .sf-h::before { content: "2"; } .sf-step[data-step="3"] .sf-h::before { content: "3"; }
.sf-step[data-step="4"] .sf-h::before { content: "4"; } .sf-step[data-step="5"] .sf-h::before { content: "5"; }
.sf-contact { gap: 10px; }
.sf .field > legend { margin-bottom: 8px; }
.sf-cgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sf-c { display: grid; gap: 6px; min-width: 0; }
.sf .chip, .cl .chip { max-width: 100%; }
.sf .chip span, .cl .chip span { max-width: 100%; padding-block: 8px; border-radius: 22px; line-height: 1.35; text-align: left; }
.sf textarea { min-height: 112px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
textarea:focus-visible { border-color: var(--navy); }
textarea[aria-invalid="true"], .sf-contact[aria-invalid="true"] input, .sf-consent[aria-invalid="true"] .sf-check { border-color: var(--danger); }
.sf fieldset[aria-invalid="true"], .cl fieldset[aria-invalid="true"] { padding-left: 12px; border-left: 4px solid var(--danger); }
.sf-check { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--border-strong); border-radius: 12px; cursor: pointer; }
.field .sf-check { font-size: 15px; font-weight: 400; line-height: 1.6; }
.sf-check input { flex: 0 0 24px; width: 24px; height: 24px; min-height: 24px; margin: 0; padding: 0; border-width: 2px; border-radius: 6px; cursor: pointer; }
.sf-check input:checked { border-color: var(--navy); background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.sf-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.sf-nav .btn { min-height: 52px; }
.sf-back { flex: 0 0 auto; min-width: 104px; }
.sf-next, .sf-submit { flex: 1 1 160px; }
.sf .sf-prefill { order: -1; padding: 10px 12px; border-left: 4px solid var(--ok); border-radius: 0 8px 8px 0; background: var(--ok-bg); color: var(--ink); }
.sf.is-busy { cursor: progress; }
.sf.is-busy .sf-nav { pointer-events: none; }
.sf.is-sent { border-color: var(--ok); }
.sf.is-sent .sf-ok { order: -1; }
.sf-ok { display: grid; gap: 12px; padding: 18px 16px; border: 1.5px solid var(--ok); border-radius: 12px; background: var(--ok-bg); }
.sf-ok-h { display: flex; align-items: flex-start; gap: 10px; font: 700 20px/1.45 var(--font); }
.sf-ok-h::before { content: "\2713"; display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--wechat); color: var(--white); font: 700 16px/1 var(--font); }
.sf-ok .hint { color: var(--ink); font-weight: 600; }
@media (min-width: 640px) { .sf { gap: 20px; padding: 24px; } .sf-nav { flex-wrap: nowrap; justify-content: space-between; } .sf-next, .sf-submit { flex: 0 0 auto; min-width: 220px; margin-left: auto; } .sf-ok { padding: 24px; } }
@media (min-width: 768px) { .sf-cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cl { display: grid; gap: 16px; padding: 16px; }
.cl-disc, .cl-disc-bottom { display: grid; gap: 6px; padding: 12px 14px; border-left: 4px solid var(--navy); border-radius: 0 8px 8px 0; background: var(--tint); color: var(--muted); font-size: 12px; line-height: 1.55; }
.cl-disc p:first-child, .cl-disc-bottom p:first-child { color: var(--ink); font-size: 14px; }
.cl .tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 4px; background: var(--gold-text); color: var(--ink); font: 700 12px/1.5 var(--font); vertical-align: 1px; }
.cl-form { display: grid; counter-reset: clq; }
.cl-q { gap: 6px; padding: 14px 0; border-top: 1px solid var(--border); counter-increment: clq; }
.cl-q:first-child { padding-top: 0; border-top: 0; }
.cl-q legend { display: block; width: 100%; margin-bottom: 4px; padding-left: 32px; text-indent: -32px; line-height: 1.5; }
.cl-q legend::before { content: counter(clq); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: var(--navy); color: var(--white); font: 700 13px/1 var(--font); text-indent: 0; vertical-align: 1px; }
.cl-q .hint { line-height: 1.5; }
.cl-form > .btn { justify-self: stretch; margin-top: 8px; }
.cl-err { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--danger); border-left-width: 4px; border-radius: 8px; background: var(--danger-bg); }
.cl-out:empty { display: none; }
.cl-out:focus { outline: none; }
.cl-res { display: grid; gap: 20px; padding-top: 20px; border-top: 3px solid var(--navy); }
.cl-sum { padding: 12px 14px; border-left: 4px solid var(--navy); border-radius: 0 8px 8px 0; background: var(--tint); font: 600 17px/1.6 var(--font); }
.cl-sum-h { font-size: 19px; font-weight: 700; }
.cl-unv-note { padding: 10px 12px; border-left: 4px solid var(--warn-solid); border-radius: 0 8px 8px 0; background: var(--warn-bg); color: var(--warn); font-size: 15px; line-height: 1.6; }
.cl-sec { display: grid; gap: 10px; align-content: start; }
.cl-sec + .cl-sec { padding-top: 20px; border-top: 1px solid var(--border); }
.cl-sec > h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; }
.cl-sec > h3::before { content: ""; flex: 0 0 auto; width: 4px; height: 1em; border-radius: 2px; background: var(--navy); }
.cl-sec[data-sec="steps"] > h3::before { background: var(--red); }
.cl-sec[data-sec="warnings"] > h3::before { background: var(--warn-solid); }
.cl-list { list-style: none; display: grid; gap: 10px; counter-reset: cli; }
.cl-item { position: relative; display: grid; gap: 4px; align-content: start; min-width: 0; padding: 14px 14px 10px 52px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); counter-increment: cli; break-inside: avoid; }
.cl-item::before { content: ""; position: absolute; left: 14px; top: 15px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--navy); border-radius: 6px; background: var(--surface); }
.cl-sec[data-sec="steps"] .cl-item::before { content: counter(cli); border: 0; border-radius: 50%; background: var(--navy); color: var(--white); font: 700 14px/1 var(--font); }
.cl-sec[data-sec="warnings"] .cl-item::before { content: "!"; border: 1.5px solid var(--warn-solid); border-radius: 50%; background: var(--warn-bg); color: var(--warn); font: 700 15px/1 var(--font); }
.cl-sec .cl-item.cl-w-info::before { content: "i"; border-color: var(--navy); background: var(--tint); color: var(--navy); }
.cl-item.cl-w-warning { border-left: 4px solid var(--warn-solid); }
.cl-item.cl-w-info { border-left: 4px solid var(--navy); }
.cl-lab { font: 700 16px/1.5 var(--font); }
.cl-w-warning .cl-lab { color: var(--warn); }
.cl-lvl { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 4px; font-size: 13px; line-height: 1.6; }
.cl-w-warning .cl-lvl { background: var(--warn-bg); color: var(--warn); }
.cl-w-info .cl-lvl { background: var(--tint); color: var(--navy); }
.cl-note { font-size: 15px; line-height: 1.7; }
.cl-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-flag, .cl-cn { padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--tint); color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1.3; }
.cl-flag { display: inline-flex; align-items: center; min-height: 28px; }
.cl-meta { font-size: 14px; line-height: 1.9; color: var(--muted); }
.cl-who { font-weight: 600; color: var(--ink); }
.cl-src { padding-block: 10px; font-weight: 600; overflow-wrap: anywhere; }
.cl-unv { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 600; line-height: 1.5; }
.cl-unv::before { content: "?"; margin-right: 4px; font-weight: 700; }
.cl-actions { display: grid; gap: 10px; }
.cl-actions .btn { width: 100%; }
@media (min-width: 640px) { .cl { gap: 20px; padding: 24px; } .cl-form > .btn { justify-self: start; min-width: 240px; } .cl-actions { display: flex; flex-wrap: wrap; gap: 12px; } .cl-actions .btn { width: auto; } }

/* ---------- 404 ---------- */
.nf-grid { display: grid; gap: 12px; }
.nf-block { display: grid; gap: 12px; align-content: start; }
.nf-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) { .nf-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* ---------- larger phones: two-up grids ---------- */
@media (max-width: 374px) { .brand-name { display: none; } .gl { font-size: 13px; } }
@media print {
  .annc, .fbar, .mbar, .wx, .mei, .site-header, .lang-bar, .site-footer, .skip, .crumbs, .sf, .cl-form { display: none; }
  body { padding-bottom: 0; }
  /* site.js puts class cl-printing on <html> around window.print() of the checklist: then only the result prints */
  .cl-printing main > :not(#checklist), .cl-printing #checklist .xh, .cl-printing .cl-disc, .cl-printing .cl-actions, .cl-printing .cl noscript { display: none; }
  .cl-printing #checklist { padding: 0; }
  .cl-printing #checklist .wrap { width: 100%; }
  .cl-printing .cl { padding: 0; border: 0; }
  .cl-res { padding-top: 0; border-top: 0; }
  .cl-res::before { content: "Xin Puente 信桥 · xinpuente.com"; font: 700 12pt var(--font); }
  .cl-sum, .cl-item, .cl-flag, .cl-cn, .cl-unv, .cl-unv-note, .cl-lvl, .cl-disc-bottom { background: none; }
  .cl-sec > h3 { break-after: avoid; }
  .cl-sec > h3::before { width: 0; background: none; border-left: 4px solid var(--ink); border-radius: 0; }
  .cl-sec[data-sec="steps"] .cl-item::before, .cl-sec[data-sec="warnings"] .cl-item::before, .cl-sec .cl-item.cl-w-info::before { border: 1.5px solid var(--ink); background: none; color: var(--ink); }
  .cl-src[href]::after { content: " (" attr(href) ")"; font-weight: 400; word-break: break-all; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; transition: none; animation: none; } }

/* ---- instant Mexico-readiness assessment (/evaluacion/, 2026-10-27) + legal footer links ---- */
.foot-disc .foot-legal { font-size: 14px; }
.foot-disc .foot-legal a { color: var(--gold-text); font-weight: 600; text-underline-offset: 3px; }
.as { display: grid; gap: 18px; padding: 16px; max-width: 760px; margin-inline: auto; }
.as-prog { display: flex; align-items: center; gap: 12px; }
.as-bar { flex: 1 1 auto; height: 10px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong); overflow: hidden; }
.as-bar span { display: block; height: 100%; border-radius: 999px; background: var(--red); transition: width .25s; }
.as-count { flex: 0 0 auto; min-width: 3em; text-align: right; font-weight: 700; font-size: 15px; color: var(--navy); }
.as-q { font: 700 22px/1.4 var(--font); }
.as .chip { max-width: 100%; }
.as .chip span { max-width: 100%; padding-block: 10px; border-radius: 22px; line-height: 1.35; text-align: left; }
.as-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.as-nav .btn { min-height: 52px; }
.as-back { flex: 0 0 auto; min-width: 104px; }
.as-next { flex: 1 1 160px; }
.as-form { display: grid; gap: 16px; }
.as-notice, .as-disc, .as-how { margin: 0; }
.as-tease { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 18px 12px 4px; border-radius: 12px 12px 0 0; background: var(--tint); border: 1px solid var(--border); border-bottom: 0; }
.as-tease-n { font: 700 64px/1 var(--font); color: var(--navy); filter: blur(11px); user-select: none; }
.as-tease-d { font: 700 22px/1 var(--font); color: var(--muted); }
.as-tease-l { margin: -18px 0 0; padding: 0 12px 16px; text-align: center; font-weight: 600; color: var(--navy); background: var(--tint); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 12px 12px; }
.as-top { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 20px 14px; border-radius: 12px; background: var(--tint); border: 1px solid var(--border); }
.as-kicker { margin: 0; font-weight: 600; color: var(--muted); }
.as-score { margin: 0; line-height: 1; color: var(--navy); }
.as-score b { font: 700 72px/1 var(--font); }
.as-score span { font: 700 22px/1 var(--font); color: var(--muted); }
.as-meter { width: 100%; max-width: 360px; height: 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong); overflow: hidden; }
.as-meter span { display: block; height: 100%; border-radius: 999px; background: var(--red); }
.as-lv-mid .as-meter span { background: var(--warn-solid); }
.as-lv-high .as-meter span { background: var(--ok); }
.as-verdict { font: 700 26px/1.3 var(--font); }
.as-top p:last-child { margin: 0; max-width: 34em; }
.as-sec { display: grid; gap: 10px; }
.as-h { font: 700 19px/1.4 var(--font); }
.as-list { list-style: none; display: grid; gap: 10px; padding: 0; margin: 0; }
.as-list li { display: flex; gap: 10px; align-items: flex-start; }
.as-ic { flex: 0 0 auto; }
.as .steps-mini li b { display: block; }
.as .as-d { display: block; color: var(--muted); font-size: 15px; line-height: 1.6; }
.as-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.as-chips li { padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--tint); color: var(--ink); font-size: 15px; font-weight: 600; }
.as-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.as-cta { display: grid; gap: 12px; padding: 20px 16px; border-radius: 16px; background: var(--navy); color: var(--on-navy); }
.as-cta h3 { color: var(--on-navy); font: 700 21px/1.4 var(--font); }
.as-cta p { margin: 0; color: var(--on-navy-2); }
.as-cta .note { color: var(--on-navy-2); }
.as-cta a { color: var(--gold-text); }
.as-acts { display: grid; gap: 10px; }
.as-apply { background: var(--surface); color: var(--ink); border-radius: 12px; padding: 16px; }
.as-apply[hidden] { display: none; }
.as-apply .note, .as-apply a { color: var(--muted); }
.as-apply a { color: var(--navy); font-weight: 600; }
.as-apply .field label { color: var(--ink); }
@media (min-width: 640px) { .as { padding: 28px; gap: 22px; } .as-acts { display: flex; flex-wrap: wrap; } .as-acts .btn { min-width: 220px; } }
.as-cta .as-apply p, .as-cta .as-apply .note { color: var(--muted); }
.as-cta .as-apply .err { color: var(--danger); }
.as-cta .as-apply .form-note { color: var(--ok); }

/* ---------- marketplace (2026-10-27): anonymous directory cards, jobs board, job page, request / provider / employer forms ---------- */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 4px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.badge-rec { background: var(--red); color: var(--white); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-lang { background: var(--paper); color: var(--ink); border: 1px solid var(--border); }
.lc-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.llist, .jlist { list-style: none; display: grid; gap: 10px; }
.lcard, .jcard { display: grid; gap: 6px; align-content: start; padding: 12px; background: var(--paper); border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.lcard-rec, .jcard-feat { border: 2px solid var(--red); background: var(--tint); }
.lc-who { font-weight: 700; color: var(--ink); }
.lc-spec { font-size: 15px; color: var(--ink); }
.lc-meta, .lc-hid { font-size: 14px; color: var(--muted); }
.jcard h3 a { color: var(--navy); }
.job-pay { font-weight: 700; color: var(--ink); }
.dir-empty { display: grid; gap: 12px; margin-bottom: 20px; justify-items: start; }
.dir-empty .cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.dcard .link-arrow { justify-self: start; font-size: 15px; }
.jobs-tools { display: grid; gap: 12px; margin-bottom: 12px; }
.jlist { margin-bottom: 20px; }
.jobs-page .cta-row { margin-bottom: 24px; }
.job-body { display: grid; gap: 12px; align-content: start; }
.job-body h2 { margin-top: 6px; }
.mf textarea { min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.mf textarea[aria-invalid="true"], .mf select[aria-invalid="true"] { border-color: var(--danger); }
.mf input[type="file"] { padding: 10px 14px; min-height: 48px; }
.mf .sf-consent[aria-invalid="true"] .sf-check { border-color: var(--danger); }
.mf fieldset[aria-invalid="true"] { padding-left: 12px; border-left: 4px solid var(--danger); }
.field-row { display: grid; gap: 18px; }
.plans-2 { margin-bottom: 12px; }
.jp-fee { margin-bottom: 4px; }
.launch-tag { font-weight: 700; color: var(--ok); }
.price-list { list-style: none; display: grid; gap: 8px; }
.price-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 15px; }
.pr-old s { color: var(--muted); }
.pr-old b { color: var(--ink); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } .jobs-tools { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .plans-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .plans-2 { grid-template-columns: 1fr 1fr; } }