/* ============================================================
   China Entity Setup — 单页四步
   ------------------------------------------------------------
   2026-09-26 第二轮（按反馈）：
     · 折叠改用标题右侧的倒三角（去掉 Collapse / Expand 文字按钮）；
     · 下证后 7 项从"介绍卡"改成"行动卡"，可展开看 Do this / Where / Takes；
     · 删掉与 PDF 对比的表格；
     · 所有可点的链接都要看得出来是链接：正文内链接加下划线与外链箭头，
       跨页入口一律做成按钮。
   ============================================================ */
.es-section { padding: 2.5rem 0; }
.es-alt { background: var(--bg-alt); }
.php-lead { font-size: 1.0625rem; color: var(--text-light); max-width: 64ch; line-height: 1.7; }
.es-h { font-size: 1.375rem; margin: 0 0 .35rem; }
.es-h3 { font-size: 1.0625rem; margin: 1.75rem 0 .6rem; }
.es-sub { color: var(--text-light); font-size: .9375rem; margin: 0 0 1.25rem; }

/* ---------- ① 你的情况 ---------- */
.es-profile { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 1.6rem 1.75rem; }
.es-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 1rem 1.25rem; }
.es-f { display: flex; flex-direction: column; gap: .35rem; }
/* 标签预留两行高度：Apostille 那条会折成两行，不预留的话它下面的下拉框
   会比同一行的其他控件低一截。 */
.es-f > span { font-size: .8125rem; font-weight: 600; line-height: 1.3; min-height: 2.6em; }
.es-f select, .es-f input {
  font: inherit; font-size: .9375rem; padding: .55rem .7rem;
  border: 1px solid var(--border); border-radius: 9px; background: #fff;
}
.es-f select:focus, .es-f input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }

/* 面谈入口 */
.es-talk {
  margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  background: #F7F9FC; border: 1px solid var(--border); border-left: 3px solid var(--crimson);
  border-radius: 12px; padding: 1.15rem 1.4rem;
}
.es-talk-txt { flex: 1 1 420px; }
.es-talk-txt b { display: block; font-size: 1rem; margin-bottom: .3rem; }
.es-talk-txt p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--text-light); }
.es-talk-btn { flex: none; }

/* ---------- 四步总览（.tk-ridge 的几何与配色来自 toolkit.css） ---------- */
.es-ov-wrap { padding: 2rem 0 .5rem; }
.es-ov-h { text-align: center; margin-bottom: .25rem; }
.es-ov-title { font-size: 1.375rem; margin: .35rem 0 0; }

/* ---------- 步骤标题与折叠 ----------
   折叠不用文字按钮：标题右侧一个圆圈里的倒三角，展开时朝下、收起时朝右。
   这是折叠面板的通用视觉语言，用户不用读字就知道能点。 */
.es-step-h { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.es-step-h h2 { margin: 0; font-size: 1.4375rem; letter-spacing: -.01em; }
.es-step-n {
  width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .875rem; flex: none;
}
.es-step-tg {
  margin-left: auto; flex: none; width: 32px; height: 32px; padding: 0; display: grid;
  place-items: center; background: #fff; border: 1px solid var(--border); border-radius: 50%;
  color: var(--navy); cursor: pointer; transition: border-color .15s, background .15s;
}
.es-step-tg:hover { border-color: var(--navy); background: #F7F9FC; }
.es-step-tg:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* 共用箭头样式：默认朝下（展开），aria-expanded="false" 时转成朝右（收起） */
.es-chev { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.es-step-tg[aria-expanded="false"] .es-chev { transform: rotate(-90deg); }
.es-step.is-collapsed .es-step-body { display: none; }
.es-step.is-collapsed { padding-bottom: 1.5rem; }
.es-step { scroll-margin-top: 90px; }

/* ---------- 进度与操作 ---------- */
.es-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.es-prog { display: flex; align-items: center; gap: .7rem; font-size: .9375rem; font-weight: 600; }
.es-prog-bar { display: inline-block; width: 160px; height: 6px; border-radius: 99px; background: rgba(10,37,64,.1); overflow: hidden; }
.es-prog-bar i { display: block; height: 100%; width: 0; background: var(--crimson); transition: width .25s ease; }
.es-actions { display: flex; align-items: center; gap: .9rem; }
.es-reset { background: none; border: 0; padding: 0; font: inherit; font-size: .8125rem; color: var(--text-light); cursor: pointer; text-decoration: underline; }
.es-reset:hover { color: var(--navy); }

/* ---------- ① 清单 ---------- */
.es-group { margin-bottom: 1.6rem; }
.es-group-h {
  font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--navy);
  margin: 0 0 .7rem; padding-bottom: .35rem; border-bottom: 1px solid var(--border);
}
.es-item { background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: .85rem 1rem; margin-bottom: .5rem; transition: border-color .15s; }
.es-item:hover { border-color: rgba(10,37,64,.24); }
.es-item.is-done { background: #F7FAFC; }
.es-item-h { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; }
.es-item-h input { margin-top: .22rem; width: 16px; height: 16px; accent-color: var(--crimson); flex: none; }
.es-num {
  flex: none; font-size: .6875rem; font-weight: 700; color: var(--navy); background: #EEF3F8;
  border-radius: 5px; padding: .1rem .35rem; min-width: 1.9em; text-align: center; margin-top: .1rem;
}
.es-item.is-done .es-num { background: #E6F4EA; color: #1E6B33; }
.es-title { font-size: .9688rem; font-weight: 640; line-height: 1.45; }
.es-item-b { margin: .6rem 0 0 2.45rem; display: flex; flex-direction: column; gap: .4rem; font-size: .9063rem; line-height: 1.6; }
.es-item-b p { margin: 0; }
.es-item-b b { color: var(--navy); font-weight: 620; }
.es-branch { background: #F2F7FC; border-left: 2px solid var(--navy); padding: .5rem .7rem; border-radius: 0 7px 7px 0; }
/* 2026-09-26：配合文案从 "Watch out" 改 "Note"，配色也从警告红降成中性灰蓝
   —— 内容是提请注意，不是风险告警。红色左边框会让读者以为这条特别严重。 */
.es-note { background: #F8FAFC; border-left: 2px solid #94A3B8; padding: .5rem .7rem; border-radius: 0 7px 7px 0; }

/* 事实条：只留正文 + 出处。出处是真链接，所以必须看得出来是链接 ——
   下划线 + 外链箭头（↗），颜色比正文深。 */
.es-fact { background: #F7F9FC; border-radius: 8px; padding: .6rem .75rem; font-size: .875rem; line-height: 1.6; color: #2c3e50; }
.es-fact .es-src { margin-top: .35rem; font-size: .75rem; color: var(--text-light); }
.es-fact .es-src a {
  color: var(--navy); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(10,37,64,.35); transition: text-decoration-color .15s;
}
.es-fact .es-src a:hover { text-decoration-color: var(--navy); }
.es-fact .es-src a::after { content: ' \2197'; font-weight: 400; }

/* ---------- ② 选择类型 ---------- */
.es-vehicles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.es-v {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--border); border-radius: 13px; padding: 1.05rem 1.15rem 1rem;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.es-v:hover { border-color: rgba(10,37,64,.3); }
.es-v:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.es-v.is-on { border-color: var(--navy); background: #FCFDFF; box-shadow: 0 0 0 1px var(--navy) inset; }
.es-v-head { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; }
.es-v-tick {
  flex: none; width: 17px; height: 17px; margin-top: .18rem; border-radius: 50%;
  border: 2px solid #CBD5E0; display: grid; place-items: center; transition: border-color .15s, background .15s;
}
.es-v-tick::after {
  content: ''; width: 4px; height: 8px; margin-top: -2px; transform: rotate(45deg) scale(0);
  border: solid #fff; border-width: 0 2px 2px 0; transition: transform .15s;
}
.es-v.is-on .es-v-tick { border-color: var(--crimson); background: var(--crimson); }
.es-v.is-on .es-v-tick::after { transform: rotate(45deg) scale(1); }
.es-v-name { display: flex; flex-direction: column; gap: .1rem; }
.es-v-name b { font-size: 1.0625rem; letter-spacing: -.01em; }
.es-v-name span { font-size: .75rem; color: var(--text-light); }
.es-v-when { margin: 0 0 .55rem; font-size: .9063rem; line-height: 1.6; color: var(--text); }
.es-v-time { margin: 0; font-size: .875rem; color: var(--text-light); line-height: 1.55; }
.es-v-time span {
  display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--navy); background: #EEF3F8; border-radius: 4px;
  padding: .1rem .35rem; margin-right: .4rem; vertical-align: 1px;
}
.es-v-more { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--border); }
/* 必须显式写：作者样式的 display:flex 会盖掉 [hidden] 自带的 display:none，
   不写这条"默认收起"就完全失效（详情一进来全是展开的）。 */
.es-v-more[hidden] { display: none; }
.es-v-more p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--text); }
.es-v-more p > span {
  display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy); margin-bottom: .15rem;
}
.es-v-extra { background: #FBF7EE; border-left: 2px solid var(--gold); padding: .5rem .7rem; border-radius: 0 7px 7px 0; }
/* margin-top:auto 让按钮贴到卡片底部 —— 同一行的两张卡内容长短不一，
   不贴底的话按钮会一个在中间一个在底部，看起来很随意。 */
.es-v-toggle {
  align-self: flex-start; margin-top: auto; padding-top: .9rem; background: none; border: 0;
  font: inherit; font-size: .8125rem; font-weight: 600; color: var(--crimson); cursor: pointer;
}
.es-v-toggle:hover { text-decoration: underline; }
.es-facts { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .5rem; }

/* ---------- ③ 流程 ---------- */
.es-flow { display: flex; flex-direction: column; gap: .6rem; }
.es-stage { background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: .85rem 1rem; }
.es-stage.is-done { background: #F7FAFC; }
.es-stage-top { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.es-stage-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff;
  font-size: .75rem; font-weight: 700; display: grid; place-items: center;
}
.es-stage-t { font-size: .9688rem; font-weight: 640; margin: 0; }
.es-stage-w { font-size: .75rem; color: var(--text-light); background: #F1F5F9; border-radius: 4px; padding: .12rem .4rem; }
.es-stage-c { margin-left: auto; font-size: .75rem; color: var(--text-light); display: flex; align-items: center; gap: .3rem; }
.es-stage-c input { accent-color: var(--crimson); }
.es-stage-b { margin-top: .55rem; display: flex; flex-direction: column; gap: .35rem; font-size: .9063rem; line-height: 1.6; }
.es-stage-b p { margin: 0; }
.es-stage-b b { color: var(--navy); font-weight: 620; }
.es-blocker { background: #FBF7EE; border-left: 2px solid var(--gold); padding: .45rem .7rem; border-radius: 0 7px 7px 0; }
.es-par { font-size: .8438rem; color: var(--text-light); }

/* ---------- 下证后 7 项：行动卡 ----------
   用户反馈：原来只写"这项是干什么的"，客户看完不知道自己下一步干什么。
   现在卡面留 why 一句话，点标题行展开 Do this / Where / Takes。
   注意类名是 .es-post-card —— 容器已经占用 .es-post（grid），不能同名。 */
/* 列宽下限 320px：1280 视口下排 3 列左右。先前 268px 会挤成 4 列，
   展开后每行只有四五个词，读起来很累。
   高度：收起时同一行等高（默认 stretch），整排看起来平齐；一旦展开，
   那张卡用 .is-open 占满整行，自己一行把细节铺开 —— 这样既不会出现
   "展开一张把旁边三张拉高、下面全是空白"，也不会出现卡片长短不一。
   （上一版用 align-items:start 是想避开空白，结果收起状态下同一行的卡
   高度参差，反而更乱。） */
.es-post { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .6rem; }
.es-post-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  border-radius: 11px; padding: .8rem .9rem; transition: border-color .15s;
}
.es-post-card:hover { border-color: rgba(10,37,64,.24); }
.es-post-card.is-rel { border-left: 3px solid var(--gold); }
.es-post-card.is-done { background: #F7FAFC; }
.es-post-h { display: flex; align-items: flex-start; gap: .55rem; }
.es-post-h input { flex: none; margin-top: .2rem; width: 15px; height: 15px; accent-color: var(--crimson); }
.es-post-tg {
  flex: 1; display: flex; align-items: flex-start; gap: .6rem; background: none; border: 0;
  padding: 0; font: inherit; text-align: left; cursor: pointer; color: var(--navy);
}
.es-post-tg:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
.es-post-name { flex: 1; font-size: .9375rem; font-weight: 650; line-height: 1.4; }
.es-post-name em {
  font-style: normal; font-size: .625rem; font-weight: 700; color: #8A5A00; background: #FFF6E0;
  border-radius: 4px; padding: .05rem .28rem; margin-left: .35rem; white-space: nowrap;
}
.es-post-tg .es-chev { flex: none; width: 14px; height: 14px; margin-top: .28rem; }
.es-post-tg[aria-expanded="false"] .es-chev { transform: rotate(-90deg); }
/* 缩进对齐到标题起点（勾选框 + 图标 + 两处间距 ≈ 3.8rem），
   否则 why 会缩在图标底下，与标题错开半行。 */
.es-post-why { margin: .4rem 0 0 3.8rem; font-size: .875rem; line-height: 1.55; color: var(--text-light); }
/* 展开时卡片占满整行，细节分两栏：左边动作步骤、右边在哪办与耗时 */
.es-post-card.is-open { grid-column: 1 / -1; }
.es-post-body { margin: .7rem 0 0 3.8rem; }
.es-post-body[hidden] { display: none; }
.es-post-card.is-open .es-post-body {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1rem 1.75rem;
}
.es-post-card.is-open .es-post-facts {
  background: #F7F9FC; border-radius: 9px; padding: .7rem .85rem; align-self: start;
}
.es-post-lb {
  margin: 0 0 .35rem; font-size: .6875rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--navy);
}
.es-post-steps { margin: 0 0 .65rem; padding-left: 1.15rem; font-size: .875rem; line-height: 1.55; }
.es-post-steps li { margin-bottom: .28rem; }
.es-post-steps li:last-child { margin-bottom: 0; }
.es-post-meta { margin: 0 0 .35rem; font-size: .8438rem; line-height: 1.5; }
.es-post-meta:last-child { margin-bottom: 0; }
.es-post-meta span {
  font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy); margin-right: .35rem;
}

/* ---------- 主题图标 ----------
   两个模块各用一个色系，既能把长列表拆出节奏，又都在站点配色内：
     第 4 步「长期义务」→ 暖金（延续页面里 extra / blocker 的金色）
     下证后 7 项      → 蓝（navy 的浅色变体） */
.es-ic {
  flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: #FBF7EE; color: #9A7B2E;
}
.es-ic svg { width: 15px; height: 15px; }
.es-ic.blue { background: #EEF3F8; color: #2C5282; }

/* ---------- ④ 长期义务 ----------
   8 条全部铺开时这一屏读起来是"一堵字墙"。现在每条只留标题行（带主题图标），
   点开才展开正文、事实与链接；展开的那条占满整行，避免把同行的其他卡片
   一起拉高留下大片空白。 */
.es-obl { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: .6rem; }
.es-obl-item {
  background: #fff; border: 1px solid var(--border); border-radius: 11px;
  padding: .7rem .8rem; transition: border-color .15s;
}
.es-obl-item:hover { border-color: rgba(10,37,64,.24); }
.es-obl-item.is-open { grid-column: 1 / -1; }
.es-obl-tg {
  width: 100%; display: flex; align-items: center; gap: .6rem; background: none; border: 0;
  padding: 0; font: inherit; text-align: left; cursor: pointer; color: var(--navy);
}
.es-obl-tg:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 6px; }
.es-obl-name { flex: 1; font-size: .9375rem; font-weight: 650; line-height: 1.4; }
.es-obl-tg .es-chev { color: var(--text-light); }
.es-obl-tg[aria-expanded="false"] .es-chev { transform: rotate(-90deg); }
.es-obl-body { margin-top: .6rem; padding-left: 2.5rem; }
.es-obl-body[hidden] { display: none; }
.es-obl-body p { margin: 0 0 .45rem; font-size: .9063rem; line-height: 1.6; }
.es-obl-body .es-fact { margin-left: 0; margin-bottom: .5rem; }
.es-obl-link { margin: .5rem 0 0 !important; }
.es-t { border-bottom: 1px dotted var(--navy); cursor: help; color: var(--navy); }

/* ---------- ⑥ 分流与跨页入口 ----------
   用户：这些链接看着和普通文字差不多，谁知道能点。所以跨页入口一律做成
   描边按钮 + 右箭头，hover 反色。 */
.es-branch { background: #fff; border: 1px solid var(--border); border-radius: 13px; padding: 1.4rem 1.5rem; }
.es-branch p { font-size: .9375rem; line-height: 1.7; margin: .5rem 0 0; }
.es-cta { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.es-cta-btn {
  display: inline-flex; align-items: center; gap: .45rem; padding: .58rem 1.05rem;
  background: #fff; border: 1.5px solid var(--navy); border-radius: 9px; color: var(--navy);
  font-size: .9375rem; font-weight: 650; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.es-cta-btn:hover { background: var(--navy); color: #fff; }
.es-cta-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.es-cta-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.es-obl-link a {
  display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem;
  border: 1.5px solid var(--navy); border-radius: 8px; font-size: .875rem; font-weight: 650;
  color: var(--navy); text-decoration: none; transition: background .15s, color .15s;
}
.es-obl-link a:hover { background: var(--navy); color: #fff; }

.es-term {
  position: absolute; z-index: 50; max-width: 320px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: .85rem .95rem; box-shadow: 0 8px 24px rgba(10,37,64,.14); font-size: .875rem;
}
.es-term b { display: block; margin-bottom: .35rem; color: var(--navy); }
.es-term p { margin: 0 0 .5rem; }
/* 弹窗里的 "Official source" 同样是外链，一样要看得见是链接 */
.es-term a {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; font-weight: 650;
  color: var(--navy); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(10,37,64,.35);
}
.es-term a:hover { text-decoration-color: var(--navy); }
.es-term a::after { content: '\2197'; font-weight: 400; }

@media (max-width: 860px) {
  .es-vehicles { grid-template-columns: 1fr; }
  .es-talk { flex-direction: column; align-items: flex-start; }
  .es-talk-btn { width: 100%; text-align: center; }
}
@media (max-width: 720px) {
  .es-item-b, .es-post-why, .es-post-body { margin-left: 0; }
  .es-bar { flex-direction: column; align-items: flex-start; }
  /* 窄屏两栏挤不下，展开卡内的动作与地点上下排 */
  .es-post-card.is-open .es-post-body { grid-template-columns: 1fr; }
}