:root{
  --ink:#1B1A17; --ink-soft:#544F46; --ink-faint:#7A736A;
  --brand:#F0700C; --brand-deep:#A8470A; --brand-pale:#FFF2E4;
  --pine:#2F5D50; --pine-pale:#EAF2EF;
  --paper:#FFFDFA; --card:#fff; --line:#E7E0D6; --line-soft:#F1EBE2;
  --wrap:1120px; --r:14px; --r-sm:9px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17.5px/1.72 "Source Serif 4",Georgia,"Times New Roman",serif;
  overflow-x:hidden}
h1,h2,h3,h4{font-family:Outfit,"Segoe UI",system-ui,sans-serif;
  line-height:1.14;margin:0 0 .48em;letter-spacing:-.02em;font-weight:600}
h1{font-size:clamp(2.05rem,4.6vw,3.15rem);font-weight:700;letter-spacing:-.03em}
h2{font-size:clamp(1.55rem,2.9vw,2.15rem)}
h3{font-size:clamp(1.1rem,1.6vw,1.28rem)}
p{margin:0 0 1.05em;max-width:66ch}
a{color:var(--pine);text-underline-offset:3px}
a:hover{color:var(--brand-deep)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--pine);
  outline-offset:2px;border-radius:4px}
/* 邮箱链接出现在正文句子中间，默认只有一行文字高，375 下点不中（巡检实测 11 页命中）。
   垂直 padding 撑到 44px，再用等量负 margin 抵消，行距看上去不变。 */
a[href^="mailto:"]{display:inline-block;padding:11px 0;margin:-11px 0}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
small,.small{font-family:Outfit,system-ui,sans-serif}

/* 母题：品类格。四个方格里有一个是实心的 = 从一堆品类里挑一个。 */
.mark{display:inline-grid;grid-template-columns:repeat(2,1fr);gap:2px;width:20px;height:20px;
  vertical-align:-3px}
.mark i{background:var(--line);border-radius:2px;display:block}
.mark i:first-child{background:var(--brand)}
.mark.big{width:30px;height:30px;gap:3px}
.mark.onlight i{background:#E2D9CC}
.mark.onlight i:first-child{background:var(--brand)}

/* 页头 */
.skip{position:absolute;left:-9999px;width:0;height:0;overflow:hidden}
.skip:focus{left:8px;top:8px;width:auto;height:auto;z-index:60;background:#fff;
  padding:12px 16px;min-height:44px;display:flex;align-items:center;
  border:2px solid var(--pine);border-radius:8px}
header.site{position:sticky;top:0;z-index:40;background:rgba(255,253,250,.97);
  backdrop-filter:saturate(160%) blur(9px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:16px;min-height:64px}
.brandmark{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  font-family:Outfit,sans-serif;font-weight:600;font-size:1rem;flex:0 0 auto;
  line-height:1.14;min-height:44px;letter-spacing:-.02em}
.brandmark b{font-weight:700}
.brandmark small{display:block;font-weight:400;font-size:.71rem;color:var(--ink-faint);
  letter-spacing:.04em;text-transform:uppercase}
nav.main{margin-left:auto}
nav.main ul{display:flex;gap:1px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
nav.main a{display:block;padding:10px 10px;min-height:44px;line-height:24px;
  text-decoration:none;color:var(--ink-soft);font-family:Outfit,sans-serif;
  font-size:.895rem;border-radius:7px;white-space:nowrap;transition:color .18s,background .18s}
nav.main a:hover{background:var(--brand-pale);color:var(--brand-deep)}
nav.main a[aria-current=page]{color:var(--ink);font-weight:600;background:var(--brand-pale)}
@media(min-width:960px) and (max-width:1199px){
  nav.main a{font-size:.83rem;padding:10px 7px}
  .brandmark small{display:none}
  .brandmark{font-size:.92rem}
}
.navtoggle{display:none;margin-left:auto;min-width:44px;min-height:44px;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;background:#fff;font-size:.9rem;
  font-family:Outfit,sans-serif;color:var(--ink);padding:0 14px}

/* section 通用 */
main section{padding:clamp(38px,5vw,68px) 0}
section.pale{background:var(--brand-pale)}
section.pine{background:var(--pine-pale)}
section.band{background:#fff;border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft)}
.eyebrow{font-family:Outfit,sans-serif;font-size:.75rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--brand-deep);font-weight:600;margin:0 0 .6em;
  display:flex;align-items:center;gap:8px}
.lede{font-size:1.14rem;color:var(--ink-soft);max-width:62ch}

/* duo = 图文并排（duo 文左，duor 图左） */
.duo{display:grid;gap:clamp(22px,3.2vw,44px);align-items:center}
/* grid 子项默认 min-width:auto，内部 overflow-x:auto 的表格会把网格撑破 */
.duo>*,.wall>*,.ladder>li>*,.pair>*{min-width:0}
@media(min-width:940px){
  .duo.duo{grid-template-columns:1.1fr .9fr}
  .duo.duor{grid-template-columns:.9fr 1.1fr}
  .duo.duor>.col-text{order:2}
  .duo.duor>.col-fig{order:1}
}
.col-fig img,.col-fig svg{width:100%;border-radius:var(--r)}
.col-fig .shot{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:9px;box-shadow:0 18px 40px -30px rgba(27,26,23,.6)}
figure{margin:0}
figcaption{font-family:Outfit,sans-serif;font-size:.83rem;color:var(--ink-faint);
  margin-top:.65em;line-height:1.5;max-width:56ch}

/* band = 整幅横图 */
.bandfig{margin-top:20px}
/* width:auto + max-width:100% 而不是 width:100%：图自带 width/height 属性，
   比通栏窄的截图落进整幅位时按自然尺寸停住，不会被放大（硬门 3② 只缩不放）。 */
.bandfig img{border:1px solid var(--line);border-radius:var(--r);
  width:auto;max-width:100%;height:auto;display:block;margin-inline:auto}
.stepfig img{width:auto;max-width:100%;height:auto;display:block}
/* pair 底下的图解：SVG 会被拉满整宽，连带把图里的字放大到比正文还大（实测很突兀）。
   按原始画幅给个上限并居中。 */
.pairfig{max-width:560px;margin:26px auto 0}
.pairfig svg{width:100%;border-radius:var(--r);background:#fff;
  border:1px solid var(--line)}

/* wall = 品类墙。本站的招牌版式：2/3/5 列，绝不三个等宽卡片横排。 */
.wall{display:grid;gap:12px;margin-top:22px;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.wall{grid-template-columns:repeat(4,1fr)}}
/* 四列不是五列：首页那面墙是硬门 2 点名的十六格，五列会剩一个孤儿格。 */
@media(min-width:1000px){.wall{grid-template-columns:repeat(4,1fr)}}
.tile{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  padding:12px;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  gap:8px;transition:border-color .18s,transform .18s,box-shadow .18s}
.tile:hover{border-color:var(--brand);transform:translateY(-2px);
  box-shadow:0 16px 30px -24px rgba(27,26,23,.55)}
.tile svg,.tile img{width:100%;border-radius:6px}
/* 商品图统一成方图，不然一排里高矮不齐（硬门 4 的同一条道理） */
.tile img{display:block;aspect-ratio:1/1;object-fit:cover;background:var(--brand-pale)}

/* ---- 硬门 1：hero 的搜索条。挂在 .duo 外面、.wrap 里面，所以是整幅宽 ---- */
.findbox{margin-top:clamp(22px,2.6vw,32px)}
.findrow{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:12px;box-shadow:0 18px 40px -30px rgba(27,26,23,.5)}
/* label 必须整行占满，否则被拉到输入框旁边、把按钮挤到下一行 */
.findrow label{flex:1 0 100%;font-family:Outfit,sans-serif;font-size:.78rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.findrow input[type=search]{flex:1 1 300px;min-width:0;min-height:50px;padding:12px 15px;
  font:inherit;font-size:1.02rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-sm);
  -webkit-appearance:none;appearance:none}
.findrow input[type=search]:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.findrow button{flex:0 0 auto;min-height:50px;padding:12px 24px;border:0;
  border-radius:var(--r-sm);background:var(--brand);color:#fff;
  font-family:Outfit,sans-serif;font-weight:600;font-size:.97rem;cursor:pointer}
.findrow button:hover{background:var(--ink)}
.findhint{margin:10px 2px 0;font-size:.88rem;color:var(--ink-soft)}
/* ---- 附属入口的窄条：不是按钮，但触点仍做满 44px（硬门 60） ---- */
.quicklinks{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:14px;align-items:center}
.quicklinks a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0;
  font-family:Outfit,sans-serif;font-size:.86rem;color:var(--ink-soft);
  text-decoration:none;border-bottom:1px solid var(--line)}
.quicklinks a:hover{color:var(--ink);border-bottom-color:var(--brand)}
.tile b{font-family:Outfit,sans-serif;font-size:.93rem;font-weight:600;line-height:1.25}
.tile span{font-family:Outfit,sans-serif;font-size:.78rem;color:var(--ink-faint);
  line-height:1.4}

/* cards = 说明卡（2 或 4 列） */
.cards{display:grid;gap:16px;margin-top:22px;grid-template-columns:1fr}
@media(min-width:740px){.cards.two{grid-template-columns:1fr 1fr}
  .cards.four{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cards.four{grid-template-columns:repeat(4,1fr)}}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:18px;display:flex;flex-direction:column;gap:9px}
.card h3{font-size:1.02rem;margin:0}
.card p{font-size:.95rem;margin:0;color:var(--ink-soft)}
.card img,.card svg{border-radius:8px;width:100%}
a.card{text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s}
a.card:hover{border-color:var(--brand);box-shadow:0 16px 30px -24px rgba(27,26,23,.5)}
a.card .go{margin-top:auto;font-family:Outfit,sans-serif;font-size:.85rem;
  color:var(--brand-deep);font-weight:600}

/* ladder = 编号步骤。数字在左侧竖线上，不是圆角方块。 */
ol.ladder{list-style:none;margin:24px 0 0;padding:0;counter-reset:s;
  border-left:2px solid var(--line);padding-left:0}
ol.ladder>li{counter-increment:s;padding:20px 0 20px 26px;position:relative;display:grid;
  gap:16px}
@media(min-width:880px){ol.ladder>li{grid-template-columns:1fr 1fr;align-items:start}
  ol.ladder>li.solo{grid-template-columns:1fr}
  /* wide = 界面截图横着铺满这一步，不挤进 518px 的图栏（硬门 3③） */
  ol.ladder>li.wide{grid-template-columns:1fr}}
ol.ladder>li.wide .stepfig{margin-top:10px}
/* band 的引导段跟整幅图同宽（硬门 4）；行宽靠分栏保住，不靠拉长 */
.bandintro>*:first-child{margin-top:0}
@media(min-width:900px){
  .bandintro{column-count:2;column-gap:40px}
  .bandintro>p{max-width:none;break-inside:avoid}
}
ol.ladder>li::before{content:counter(s);position:absolute;left:-15px;top:22px;
  font-family:Outfit,sans-serif;font-weight:700;font-size:.83rem;color:#fff;
  background:var(--pine);width:28px;height:28px;border-radius:50%;display:flex;
  align-items:center;justify-content:center}
ol.ladder h3{margin-bottom:.3em}
ol.ladder p{margin-bottom:.5em;font-size:1rem}

/* grid = 表格 */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(90deg,var(--paper) 30%,rgba(255,253,250,0)) left/26px 100% no-repeat,
             linear-gradient(270deg,var(--paper) 30%,rgba(255,253,250,0)) right/26px 100% no-repeat,
             radial-gradient(farthest-side at 0 50%,rgba(27,26,23,.14),transparent) left/11px 100% no-repeat,
             radial-gradient(farthest-side at 100% 50%,rgba(27,26,23,.14),transparent) right/11px 100% no-repeat;
  background-attachment:local,local,scroll,scroll}
table{border-collapse:collapse;width:100%;font-size:.97rem;min-width:440px}
th,td{text-align:left;padding:12px 13px;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
thead th{background:var(--pine-pale);font-family:Outfit,sans-serif;font-weight:600;
  font-size:.86rem;letter-spacing:.01em;border-bottom-color:var(--line)}
tbody tr:last-child td{border-bottom:0}

/* pair = 该选它 / 该选别家 */
.pair{display:grid;gap:16px;margin-top:22px}
@media(min-width:820px){.pair{grid-template-columns:1fr 1fr}}
.pair>div{border-radius:var(--r);padding:20px 22px;border:1px solid var(--line)}
.pair .fit{background:var(--brand-pale);border-color:#F3DCC3}
.pair .unfit{background:var(--pine-pale);border-color:#CFE0D9}
.pair h3{font-size:1rem}
.pair ul{margin:0;padding-left:1.1em}
.pair li{margin:.45em 0;font-size:.97rem}

/* hero：浅底，品类墙就在首屏下方 */
.hero{background:linear-gradient(180deg,var(--brand-pale) 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line-soft)}
.hero .wrap{padding-top:clamp(34px,4.4vw,60px);padding-bottom:clamp(28px,3.6vw,44px)}
.hero .duo{align-items:center}
.hero h1{max-width:15ch}
.hero p.lede{font-size:1.16rem;color:var(--ink-soft)}
.hero .kicker{font-family:Outfit,sans-serif;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-deep);font-weight:600;margin-bottom:.9em;
  display:flex;align-items:center;gap:9px}
.hero .col-fig img{border-radius:var(--r);border:1px solid var(--line);
  box-shadow:0 26px 50px -34px rgba(27,26,23,.7)}

/* CTA */
.ctarow{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:11px 19px;
  border-radius:9px;text-decoration:none;font-weight:600;font-size:.96rem;
  font-family:Outfit,sans-serif;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.btn-primary{background:var(--brand-deep);color:#fff}
.btn-primary:hover{background:#8A3806;color:#fff}
.btn-pine{background:var(--pine);color:#fff}
.btn-pine:hover{background:#24483E;color:#fff}
.btn-line{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-line:hover{border-color:var(--brand);color:var(--brand-deep)}
.btn small{font-weight:400;opacity:.85;font-size:.77rem;font-family:Outfit,sans-serif}

/* 出站目的地徽章 */
.dest{display:inline-block;font-family:Outfit,sans-serif;font-size:.71rem;
  letter-spacing:.07em;text-transform:uppercase;font-weight:600;padding:3px 8px;
  border-radius:5px}
.dest.w2c{background:var(--pine-pale);color:#1F4438}
.dest.official{background:var(--brand-pale);color:var(--brand-deep)}

/* 提示块与来源行 */
.note{border-left:3px solid var(--brand);background:#fff;padding:14px 18px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;margin:20px 0;font-size:.97rem;
  border-top:1px solid var(--line-soft);border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft)}
.note.pine{border-left-color:var(--pine)}
.note strong{font-family:Outfit,sans-serif}
.srcnote{font-family:Outfit,sans-serif;font-size:.81rem;color:var(--ink-faint);
  margin-top:.9em;line-height:1.55}

/* FAQ */
details{border-bottom:1px solid var(--line);background:transparent;margin:0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;padding:16px 4px;font-family:Outfit,sans-serif;font-weight:600;
  font-size:1.01rem;min-height:44px;display:flex;align-items:center;gap:10px}
summary::marker{color:var(--brand)}
details .inner{padding:0 4px 16px}
details .inner p:last-child{margin-bottom:0}

/* 页脚 */
footer.site{background:#1B1A17;color:#CFC7BB;padding:clamp(38px,4.6vw,60px) 0 28px;
  font-size:.95rem}
footer.site h4{color:#fff;font-family:Outfit,sans-serif;font-size:.85rem;
  letter-spacing:.11em;text-transform:uppercase;margin:0 0 .9em;font-weight:600}
footer.site a{color:#E4DCD0}
footer.site a:hover{color:var(--brand)}
footer.site p{max-width:56ch}
.footgrid{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:760px){.footgrid{grid-template-columns:1.7fr 1fr 1fr}}
footer.site ul{list-style:none;margin:0;padding:0}
/* 375 视口下页头折成汉堡，页脚链接是唯一还能点的导航，必须给足触点 */
footer.site li a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;
  padding:2px 0;text-decoration:none}
footer.site li a:hover{text-decoration:underline}
.footlogo{height:24px;width:auto;margin-bottom:13px}
.legal{border-top:1px solid rgba(255,255,255,.13);margin-top:30px;padding-top:18px;
  font-size:.85rem;color:#9C948A;font-family:Outfit,sans-serif}
.legal p{max-width:none;margin-bottom:.7em}

@media(max-width:959px){
  .navtoggle{display:block}
  nav.main{margin-left:0;position:absolute;left:0;right:0;top:64px;background:#fff;
    border-bottom:1px solid var(--line);display:none;padding:8px 20px 14px;
    box-shadow:0 20px 30px -26px rgba(27,26,23,.6)}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;gap:0}
  nav.main a{padding:12px 6px;border-radius:6px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;
    scroll-behavior:auto !important}
  .tile:hover{transform:none}
}