:root{
  /* 实测取色：mascot.png 主橙 / logo 深蓝 + 红。见 _planning/04-design-dna.md */
  --brand:#F07818;          /* 装饰填充专用，绝不承载小字 */
  --brand-deep:#C25400;
  --brand-text:#8A3D06;     /* 压白 >=4.5:1，实测在 check 脚本里 */
  --navy:#00306C;
  --flag:#C0131F;           /* 官方红，只标「官方原话」与警示 */
  --ink:#1A1512;
  --ink-soft:#4A423C;
  --paper:#FFFCF8;
  --paper-2:#FBF3EA;
  --line:#E6D8C9;
  --shut:#8C7F74;
  --radius:14px;
  --maxw:1140px;
}
@media (prefers-color-scheme:dark){
  :root{
    --brand:#FF9442; --brand-deep:#FFB065; --brand-text:#FFC48C;
    --navy:#9EC2FF; --flag:#FF8E8E;
    --ink:#F4EDE6; --ink-soft:#C9BFB5;
    --paper:#16120F; --paper-2:#1F1915; --line:#3A302A; --shut:#9A8C80;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 "Source Sans 3","Source Fallback",system-ui,-apple-system,sans-serif;
  overflow-wrap:break-word;   /* 正文里引用的完整 URL 不换行会在 375 撑出横向溢出（实测 /help/ 418>375） */
}
h1,h2,h3,h4{
  font-family:"Bricolage Grotesque","Bricolage Fallback","Source Sans 3",sans-serif;
  line-height:1.15; margin:0 0 .5em; letter-spacing:-.015em;
}
h1{font-size:clamp(2rem,1.3rem + 2.8vw,3.1rem); font-weight:800}
h2{font-size:clamp(1.45rem,1.1rem + 1.5vw,2.1rem); font-weight:700; margin-top:0}
h3{font-size:1.18rem; font-weight:700}
p{margin:0 0 1em}
a{color:var(--brand-text); text-underline-offset:.18em}
a:hover{color:var(--brand-deep)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
main svg,main img{max-width:100%}            /* 全局兜底：没有包裹类的图位不许撑出去 */
main img{height:auto}
.ico{width:auto; max-width:120px; height:auto}  /* 精确封顶，不用 aria-label 匹配（会误伤品类卡） */
.skip{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
      clip-path:inset(50%); white-space:nowrap}  /* 不用负偏移：它会计入 scrollable overflow */
.skip:focus{position:static; width:auto; height:auto; clip:auto; clip-path:none;
            display:inline-block; min-height:44px; line-height:24px; padding:10px 16px;
            background:var(--brand-text); color:#fff}

/* ---- header ---- */
.top{border-bottom:1px solid var(--line); background:var(--paper); position:relative}
.top .wrap{display:flex; align-items:center; gap:18px; min-height:68px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; flex:0 0 auto}
.brand img{width:154px; height:24px}
.brand b{font-family:"Bricolage Grotesque",sans-serif; font-size:1rem; font-weight:800;
         color:var(--brand-text); white-space:nowrap}
nav.main{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
nav.main a{
  display:inline-block; padding:10px 12px; min-height:44px; line-height:24px;
  text-decoration:none; color:var(--ink-soft); border-radius:9px; font-size:.95rem;
}
nav.main a:hover{background:var(--paper-2); color:var(--brand-text)}
nav.main a[aria-current="page"]{background:var(--brand-text); color:#fff}

/* ---- hero（硬门 1：h1 -> lede -> 搜索框 -> 窄条 subnav） ---- */
.hero{background:linear-gradient(168deg,var(--paper-2) 0%,var(--paper) 72%);
      border-bottom:1px solid var(--line); padding:44px 0 34px}
.hero .lede{font-size:1.16rem; color:var(--ink-soft); max-width:62ch; margin:0 0 22px}
.hero .grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
            gap:28px; align-items:center}
@media (max-width:860px){.hero .grid{grid-template-columns:minmax(0,1fr)}}
.hero figure{margin:0}
.hero img{width:100%; height:auto; border-radius:var(--radius)}
.mascot{width:150px; height:165px; display:block; margin:0 auto}

/* 搜索框：hero 的核心部件。挂在 .grid 外、.wrap 内（塞进左栏会被挤成一小截） */
.find{
  display:flex; flex-wrap:wrap; gap:10px; align-items:stretch;
  background:var(--paper); border:2px solid var(--brand); border-radius:var(--radius);
  padding:12px; margin:0 0 14px; box-shadow:0 6px 22px rgba(192,84,0,.10);
}
.find label{flex:1 0 100%; font-weight:600; font-size:.92rem; color:var(--brand-text)}
.find input[type=search]{
  flex:1 1 320px; min-width:0; min-height:52px; padding:12px 14px; font-size:1.02rem;
  border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink);
}
.find button{
  flex:0 0 auto; min-height:52px; padding:12px 26px; font-size:1.02rem; font-weight:700;
  border:0; border-radius:10px; background:var(--brand-text); color:#fff; cursor:pointer;
}
.find button:hover{background:var(--brand-deep)}
.find .hint{flex:1 0 100%; margin:0; font-size:.88rem; color:var(--ink-soft)}

/* 窄条 subnav：附属 CTA 一律降级到这里，不做大按钮 */
.subnav{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.subnav a{
  display:inline-block; min-height:44px; line-height:28px; padding:8px 14px;
  font-size:.92rem; text-decoration:none; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; background:var(--paper);
}
.subnav a:hover{border-color:var(--brand); color:var(--brand-text)}

/* ---- 单向闸三态（本站母题） ---- */
.gate{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:700;
      padding:5px 11px; border-radius:999px; letter-spacing:.02em}
.gate::before{content:""; width:11px; height:11px; border-radius:2px; flex:0 0 auto}
.gate-open{background:rgba(240,120,24,.14); color:var(--brand-text)}
.gate-open::before{background:var(--brand)}
.gate-narrowing{background:rgba(240,120,24,.09); color:var(--brand-text)}
.gate-narrowing::before{background:linear-gradient(90deg,var(--brand) 50%,transparent 50%);
                        border:1.5px solid var(--brand)}
.gate-shut{background:transparent; color:var(--shut); border:1px dashed var(--shut)}
.gate-shut::before{border:1.5px dashed var(--shut); background:transparent}

/* ---- section 版式 ---- */
section{padding:44px 0; border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
.eyebrow{font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
         color:var(--brand-text); margin:0 0 8px}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px;
       align-items:stretch}                      /* 硬门 4：并排顶边齐 + 高度齐 */
.split.b{direction:rtl} .split.b>*{direction:ltr}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}  /* 不能写 1fr：它的隐含 min-width:auto 会被内容撑开，375 下实测溢出 43px */
.split figure{margin:0; display:flex; flex-direction:column; height:100%}
.split figure img{width:100%; height:100%; flex:1 1 auto; min-height:0; object-fit:cover;
                  border-radius:var(--radius); border:1px solid var(--line)}
.split .col-txt>:last-child{margin-bottom:0}
.split .col-txt>:first-child{margin-top:0}      /* 硬门 4：并排顶边要齐，h3/p 的 margin-top 会错开 17-29px */
/* 原生尺寸小于槽位的图（吉祥物 188px、支付条 500px）：按原生宽封顶，别拉大。
   硬门 3② 只缩不放 —— 放大的图在 1x 屏上就是糊的。 */
figure.natural img{width:auto; max-width:100%; height:auto; object-fit:contain;
                   margin-inline:auto; display:block; flex:0 0 auto}
.hero figure.natural img{border-radius:0; border:0}
figure{margin:0 0 1em}
figcaption{font-size:.86rem; color:var(--ink-soft); margin-top:8px}
.wide-fig img{width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line)}
.shot{max-width:100%; overflow-x:auto}           /* 文字截图窄屏容器内横滑 */

/* ---- 品类墙（硬门 2：紧跟 hero，16 格，每格配图） ---- */
.cats{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px;
      list-style:none; margin:0; padding:0}
.cats li{margin:0}
.cats a{
  display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--paper); transition:border-color .15s,transform .15s;
}
.cats a:hover{border-color:var(--brand); transform:translateY(-2px)}
.cats img{width:100%; height:132px; object-fit:cover; display:block; background:var(--paper-2)}
.cats .t{padding:11px 13px 4px; font-weight:700; font-size:.98rem}
.cats .n{padding:0 13px 13px; font-size:.84rem; color:var(--ink-soft); margin:0}
.cats .badge{align-self:flex-start; margin:0 13px 12px; font-size:.72rem; font-weight:700;
             letter-spacing:.04em; text-transform:uppercase; color:var(--brand-text);
             background:rgba(240,120,24,.13); padding:3px 8px; border-radius:5px}

/* ---- 卡片 / 表格 / 步骤 ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px;
       list-style:none; padding:0; margin:0}
.card{border:1px solid var(--line); border-radius:var(--radius); padding:20px;
      background:var(--paper); display:flex; flex-direction:column}
.card h3{margin-top:0}
.card>:last-child{margin-bottom:0}
.card svg{width:auto}                            /* 不写 100%：它把 120px 图标拉成 511px，站群踩过八次 */
table{width:100%; border-collapse:collapse; font-size:.95rem}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-weight:700; color:var(--brand-text); background:var(--paper-2)}
@media (max-width:720px){
  table,thead,tbody,tr,th,td{display:block}
  thead{display:none}
  tr{border:1px solid var(--line); border-radius:11px; margin-bottom:12px; padding:6px 0}
  td{border:0; padding:8px 14px}
  td::before{content:attr(data-label); display:block; font-weight:700; font-size:.78rem;
             letter-spacing:.06em; text-transform:uppercase; color:var(--brand-text)}
}
ol.steps{list-style:none; counter-reset:s; padding:0; margin:0}
ol.steps>li{counter-increment:s; position:relative; padding:0 0 22px 54px; margin:0}
ol.steps>li::before{
  content:counter(s); position:absolute; left:0; top:0; width:38px; height:38px;
  display:grid; place-items:center; border-radius:10px;
  background:var(--brand-text); color:#fff; font-weight:800;
}
ol.steps>li::after{content:""; position:absolute; left:18px; top:42px; bottom:4px; width:2px;
                   background:var(--line)}
ol.steps>li:last-child::after{display:none}
.quote{border-left:3px solid var(--flag); padding:4px 0 4px 16px; margin:0 0 1em;
       color:var(--ink-soft); font-style:normal}
.quote cite{display:block; margin-top:7px; font-size:.84rem; font-style:normal; color:var(--shut)}
.note{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
      padding:18px 20px; margin:0 0 1em}
.note>:last-child{margin-bottom:0}

/* ---- 签名交互 ---- */
.tool{border:2px solid var(--brand); border-radius:var(--radius); padding:22px;
      background:var(--paper)}
.tool .row{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px;
           margin-bottom:18px}
.tool label{display:block; font-weight:700; font-size:.9rem; margin-bottom:6px;
            color:var(--brand-text)}
.tool select{width:100%; min-height:46px; padding:10px 12px; font-size:1rem;
             border:1px solid var(--line); border-radius:9px; background:var(--paper);
             color:var(--ink)}
.tool .out{border-top:1px solid var(--line); padding-top:18px}
.tool .out dl{display:grid; grid-template-columns:minmax(118px,auto) 1fr; gap:10px 18px; margin:0}
.tool .out dt{font-weight:700; color:var(--brand-text); font-size:.9rem}
.tool .out dd{margin:0}
.tool .basis{font-size:.88rem; color:var(--ink-soft); border-left:3px solid var(--flag);
             padding-left:14px; margin-top:16px}

/* ---- footer ---- */
footer.site{background:var(--paper-2); border-top:1px solid var(--line); padding:38px 0 28px;
            font-size:.93rem; color:var(--ink-soft)}
footer.site .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:26px}
footer.site a{color:var(--brand-text)}
footer.site ul{list-style:none; padding:0; margin:0}
footer.site li{margin:0 0 7px}
footer.site li a{display:inline-block; min-height:44px; min-width:44px; line-height:28px;
                 padding:8px 10px; margin-left:-10px}   /* 触点是宽度不够不是高度不够 */
.disclose{margin-top:24px; padding-top:18px; border-top:1px solid var(--line); font-size:.87rem}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}