/* 上海顺泰零售有限公司 — 双色调套印 / 瑞士网格方向 */
:root{
  --paper:#f5f0e4;      /* 牛皮纸底 */
  --ink:#1c2b2d;        /* 深墨青（来自仓储货架与账本墨色） */
  --brick:#b5482a;      /* 砖红（来自纸箱与砖陶） */
  --ink-soft:#4b5a5c;
  --line:#1c2b2d;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --fs-xs:12px; --fs-s:14px; --fs-m:17px; --fs-l:26px; --fs-xl:40px; --fs-xxl:64px;
  --wrap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;font-size:var(--fs-m);line-height:1.75;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s6)}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--brick)}
a:focus,button:focus{outline:3px solid var(--brick);outline-offset:2px}
h1,h2,h3{line-height:1.2;letter-spacing:-0.01em}
h1{font-size:var(--fs-xxl);font-weight:800}
h2{font-size:var(--fs-xl);font-weight:800}
h3{font-size:var(--fs-l);font-weight:700}
p{max-width:68ch}

/* 页头：细双线 + 网格 */
.site-head{border-top:6px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--paper)}
.head-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);padding-top:var(--s4);padding-bottom:var(--s4)}
.head-in nav{display:flex;flex-wrap:wrap;gap:var(--s5)}
.head-in nav a{text-decoration:none;font-size:var(--fs-s);font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-bottom:3px solid transparent;padding-bottom:2px}
.head-in nav a:hover{border-bottom-color:var(--brick)}
.head-in img{height:32px;width:auto}

/* 面包屑 */
.breadcrumb{font-size:var(--fs-xs);letter-spacing:.08em;color:var(--ink-soft);padding:var(--s3) 0}
.breadcrumb a{color:var(--ink-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--brick)}
.breadcrumb span{margin:0 var(--s2)}

/* 首页首屏：左右分栏，色块描边 */
.hero{border-bottom:2px solid var(--ink);padding:var(--s8) 0}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s7);align-items:center}
.kicker{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--brick);font-weight:700;margin-bottom:var(--s4)}
.lead{font-size:var(--fs-m);margin-top:var(--s5)}
.hero-cta{margin-top:var(--s6);display:flex;gap:var(--s4);flex-wrap:wrap}
.btn{display:inline-block;background:var(--ink);color:var(--paper)!important;padding:var(--s3) var(--s5);font-weight:700;font-size:var(--fs-s);letter-spacing:.08em;text-decoration:none;border:2px solid var(--ink)}
.btn:hover{background:var(--brick);border-color:var(--brick);color:var(--paper)!important}
.btn-line{background:transparent;color:var(--ink)!important}
.btn-line:hover{background:var(--brick);color:var(--paper)!important}
.hero-fig img{width:100%;height:auto;display:block;border:2px solid var(--ink)}
.hero-fig figcaption{font-size:var(--fs-xs);color:var(--ink-soft);letter-spacing:.08em;margin-top:var(--s2)}

/* 区块 */
.block{padding:var(--s8) 0;border-bottom:2px solid var(--ink)}
.block.alt{background:#ece5d3}
.band{background:var(--ink);color:var(--paper)}
.band .sec-title,.band p{color:var(--paper)}
.sec-title{margin-bottom:var(--s5)}
.sec-lead{margin-bottom:var(--s6);color:var(--paper)}
.block .sec-lead{color:var(--ink-soft)}

/* 能力三块：上下双线，非卡片 */
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7)}
.caps article{border-top:6px solid var(--brick);padding-top:var(--s4)}

/* 九宫格（契约） */
.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border:2px solid var(--ink);filter:grayscale(15%)}
.item h2{font-size:var(--fs-l);margin-top:var(--s4)}
.item p{font-size:var(--fs-s);color:inherit;margin-top:var(--s2)}
.item ul{list-style:none;margin-top:var(--s3)}
.item li{font-size:var(--fs-s);padding-left:var(--s4);position:relative;color:inherit;opacity:.85}
.item li::before{content:"—";position:absolute;left:0;color:var(--brick)}
.band .item li{color:var(--paper)}
@media(max-width:760px){.items{grid-template-columns:minmax(0,1fr)}}

/* 流程 */
.steps{list-style:none;counter-reset:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}
.steps li{border-left:4px solid var(--brick);padding-left:var(--s4)}
.steps span{font-size:var(--fs-xl);font-weight:800;color:var(--brick);display:block}
.steps-v{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps li p{font-size:var(--fs-s)}

/* FAQ */
.faq details{border-top:2px solid var(--ink);padding:var(--s4) 0}
.faq details:last-of-type{border-bottom:2px solid var(--ink)}
.faq summary{font-size:var(--fs-l);font-weight:700;cursor:pointer}
.faq summary:hover{color:var(--brick)}
.faq p{margin-top:var(--s3);font-size:var(--fs-m)}
.more-link{margin-top:var(--s5);font-size:var(--fs-s)}

/* 正文页 */
.prose h2{font-size:var(--fs-l);margin:var(--s7) 0 var(--s4);border-left:6px solid var(--brick);padding-left:var(--s3)}
.prose p{margin-bottom:var(--s4)}
.prose ul,.prose ol{margin:var(--s4) 0 var(--s4) var(--s5)}
.checklist{list-style:none}
.checklist li{padding-left:var(--s6);position:relative;margin-bottom:var(--s2)}
.checklist li::before{content:"☑";position:absolute;left:0;color:var(--brick);font-weight:700}
.table-wrap{overflow-x:auto;margin:var(--s5) 0}
table{border-collapse:collapse;width:100%;font-size:var(--fs-s)}
caption{font-size:var(--fs-xs);letter-spacing:.1em;text-align:left;color:var(--ink-soft);padding-bottom:var(--s2)}
th,td{border:2px solid var(--ink);padding:var(--s3) var(--s4);text-align:left;vertical-align:top}
th{background:var(--ink);color:var(--paper)}

/* 内页首屏：四种不同结构 */
.hero-service{background:var(--ink);color:var(--paper);padding:var(--s8) 0;border-bottom:6px solid var(--brick)}
.hero-service .lead{color:var(--paper)}
.hero-about .about-grid,.hero-contact .contact-grid,.hero-guide .guide-grid{display:grid;grid-template-columns:6fr 5fr;gap:var(--s7);align-items:center}
.hero-guide{background:#ece5d3;border-bottom:2px solid var(--ink)}
.hero-contact{border-bottom:2px solid var(--ink)}
.hero-about figure img,.hero-contact figure img,.hero-guide figure img{width:100%;height:auto;display:block;border:2px solid var(--ink)}
.hero-plain{padding:var(--s8) 0;border-bottom:2px solid var(--ink);background:linear-gradient(0deg,var(--paper),var(--paper)),repeating-linear-gradient(90deg,#ece5d3 0 40px,var(--paper) 40px 80px)}
.faq-page details{background:var(--paper)}

/* CTA */
.cta{background:var(--brick);color:var(--paper);border-bottom:none;text-align:left}
.cta h2,.cta p{color:var(--paper)}
.cta a{color:var(--paper)}
.cta .btn{background:var(--paper);color:var(--ink)!important;border-color:var(--paper);margin-top:var(--s5)}
.cta .btn:hover{background:var(--ink);color:var(--paper)!important}

/* 页脚 */
.site-foot{border-top:6px solid var(--ink);padding:var(--s6) 0}
.site-foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s4)}
.site-foot nav{display:flex;gap:var(--s4);flex-wrap:wrap}
.site-foot a{text-decoration:none;font-size:var(--fs-s)}
.site-foot p{font-size:var(--fs-s);color:var(--ink-soft)}

@media(max-width:900px){
  :root{--fs-xxl:40px;--fs-xl:30px;--fs-l:21px}
  .wrap{padding:0 var(--s4)}
  .hero-grid,.hero-about .about-grid,.hero-contact .contact-grid,.hero-guide .guide-grid,.caps,.steps,.steps-v{grid-template-columns:minmax(0,1fr)}
  .head-in{flex-direction:column;align-items:flex-start}
}