:root{
--ink:#12374f;
--paper:#f4f1e8;
--paper-2:#eae6da;
--copper:#b45a26;
--line:#12374f;
--muted:#5a6b76;
--white:#fdfcf8;
--fs-xs:12px;
--fs-s:14px;
--fs-m:16px;
--fs-l:20px;
--fs-xl:28px;
--fs-xxl:48px;
--sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--sp6:32px;--sp7:48px;--sp8:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
background:var(--paper);
background-image:linear-gradient(var(--paper-2) 1px,transparent 1px),linear-gradient(90deg,var(--paper-2) 1px,transparent 1px);
background-size:48px 48px;
color:var(--ink);
font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
font-size:var(--fs-m);
line-height:1.8;
}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--sp5)}
main{min-height:60vh}
img{max-width:100%;height:auto;display:block}
a{color:var(--copper)}
a:hover{color:var(--ink);text-decoration:underline}
a:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
h1,h2,h3{font-weight:700;letter-spacing:.02em;line-height:1.35}
h1{font-size:var(--fs-xxl);font-weight:800;letter-spacing:.04em}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-l)}
p{max-width:68ch}
/* header */
.site-header{border-bottom:2px solid var(--line);background:var(--paper)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp5);padding-top:var(--sp3);padding-bottom:var(--sp3);flex-wrap:wrap}
.brand img{height:32px;width:auto}
.header-inner nav ul{list-style:none;display:flex;gap:var(--sp4);flex-wrap:wrap;align-items:center}
.header-inner nav a{color:var(--ink);text-decoration:none;font-size:var(--fs-s);letter-spacing:.08em}
.header-inner nav a:hover{color:var(--copper);text-decoration:underline}
.header-inner nav a[aria-current="page"]{color:var(--copper);border-bottom:2px solid var(--copper)}
/* kicker / buttons */
.kicker{font-size:var(--fs-xs);letter-spacing:.24em;color:var(--muted);text-transform:uppercase;margin-bottom:var(--sp3);font-weight:600}
.btn{display:inline-block;padding:var(--sp2) var(--sp5);border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-size:var(--fs-s);letter-spacing:.1em;background:transparent}
.btn:hover{background:var(--ink);color:var(--white);text-decoration:none}
.btn:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.btn-solid{background:var(--ink);color:var(--white)}
.btn-solid:hover{background:var(--copper);border-color:var(--copper);color:var(--white)}
/* breadcrumb */
.breadcrumb{font-size:var(--fs-xs);letter-spacing:.12em;color:var(--muted);padding:var(--sp4) 0;border-bottom:1px solid var(--paper-2);margin-bottom:var(--sp6)}
.breadcrumb a{color:var(--muted)}
.breadcrumb span{margin:0 var(--sp2)}
/* hero (index: split) */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp7);align-items:center;padding-top:var(--sp8);padding-bottom:var(--sp8)}
.hero-copy .lead{font-size:var(--fs-l);margin-bottom:var(--sp5)}
.hero-copy p:last-child{display:flex;gap:var(--sp3);flex-wrap:wrap}
.hero-fig{border:1px solid var(--line);background:var(--white)}
/* capability band */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2);padding:var(--sp8) 0;margin:var(--sp8) 0}
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp5)}
.cap{border-left:2px solid var(--copper);padding-left:var(--sp5)}
.cap h2{margin-bottom:var(--sp3)}
/* items grid (contract) */
.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}
.item{border:1px solid var(--paper-2);background:var(--white);padding-bottom:var(--sp4)}
.item img{border-bottom:1px solid var(--line)}
.item h2,.item h3{padding:var(--sp3) var(--sp4) var(--sp2);font-size:var(--fs-l)}
.item p{padding:0 var(--sp4) var(--sp3);font-size:var(--fs-s)}
.item ul{padding:0 var(--sp4) var(--sp4);font-size:var(--fs-s);color:var(--muted);list-style:square inside}
.item ul li{margin-bottom:var(--sp1)}
@media(max-width:760px){.items{grid-template-columns:minmax(0,1fr)}}
.sec-title{margin-bottom:var(--sp5)}
/* steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp5);counter-reset:st}
.steps li{counter-increment:st;border-top:2px solid var(--ink);padding-top:var(--sp3)}
.steps li::before{content:counter(st,decimal-leading-zero);font-size:var(--fs-xl);font-weight:800;color:var(--copper);display:block;line-height:1}
.steps strong{display:block;margin:var(--sp2) 0}
.steps span{font-size:var(--fs-s);color:var(--muted);display:block;max-width:none}
.steps-v{grid-template-columns:1fr;gap:var(--sp4)}
.steps-v li{border-top:none;border-left:2px solid var(--ink);padding:0 0 0 var(--sp4)}
/* faq */
.faq details{border-bottom:1px solid var(--paper-2);padding:var(--sp4) 0}
.faq summary{font-weight:700;cursor:pointer;font-size:var(--fs-m);letter-spacing:.04em}
.faq summary:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.faq details p{margin-top:var(--sp3);color:var(--ink)}
.faq-long{max-width:820px;margin-bottom:var(--sp8)}
/* cta */
.cta{border:2px solid var(--ink);background:var(--white);padding:var(--sp7) var(--sp5);margin:var(--sp8) 0;text-align:left;position:relative}
.cta::before{content:"CONTACT";position:absolute;top:var(--sp3);right:var(--sp4);font-size:var(--fs-xs);letter-spacing:.24em;color:var(--muted)}
.cta p{margin-bottom:var(--sp4)}
/* about split */
.split-intro{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp7);align-items:start;padding-top:var(--sp6);padding-bottom:var(--sp7)}
.split-fig{border:1px solid var(--line);background:var(--white)}
.prose h2{border-top:2px solid var(--ink);padding-top:var(--sp4);margin:var(--sp7) 0 var(--sp4)}
.prose p{max-width:74ch}
/* contact */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--sp7);padding-top:var(--sp6);padding-bottom:var(--sp8)}
.contact-grid h1{font-size:var(--fs-xl);margin-bottom:var(--sp4)}
.contact-info figure{border:1px solid var(--line);background:var(--white);margin:var(--sp5) 0}
.contact-dl{display:grid;gap:var(--sp3);border-top:1px solid var(--paper-2);padding-top:var(--sp4)}
.contact-dl div{display:flex;gap:var(--sp4)}
.contact-dl dt{font-size:var(--fs-xs);letter-spacing:.12em;color:var(--muted);width:96px;flex:none;padding-top:var(--sp1)}
.contact-dl dd{font-weight:600}
.contact-side h2{margin:var(--sp6) 0 var(--sp4);border-top:2px solid var(--ink);padding-top:var(--sp4)}
.contact-side h2:first-child{margin-top:0}
/* guide article */
.article{max-width:860px;padding-top:var(--sp6);padding-bottom:var(--sp8)}
.article h1{margin-bottom:var(--sp3)}
.article-meta{font-size:var(--fs-xs);letter-spacing:.12em;color:var(--muted);margin-bottom:var(--sp6)}
.article h2{margin:var(--sp7) 0 var(--sp4);border-top:2px solid var(--ink);padding-top:var(--sp4)}
.article ul{list-style:none}
.checklist li{border-bottom:1px dashed var(--paper-2);padding:var(--sp2) 0 var(--sp2) var(--sp6);position:relative}
.checklist li::before{content:"";position:absolute;left:var(--sp2);top:calc(var(--sp2) + 6px);width:8px;height:8px;border:2px solid var(--copper)}
table.cmp{width:100%;border-collapse:collapse;margin:var(--sp4) 0;font-size:var(--fs-s)}
.cmp th,.cmp td{border:1px solid var(--ink);padding:var(--sp2) var(--sp3);text-align:left;vertical-align:top}
.cmp thead{background:var(--ink);color:var(--white)}
.cmp caption{text-align:left;font-size:var(--fs-xs);letter-spacing:.12em;color:var(--muted);padding-bottom:var(--sp2)}
/* faq hero */
.faq-hero{display:grid;grid-template-columns:1fr .7fr;gap:var(--sp7);align-items:end;padding-top:var(--sp6);padding-bottom:var(--sp6)}
.faq-hero figure{border:1px solid var(--line);background:var(--white)}
/* footer */
.site-footer{border-top:2px solid var(--ink);background:var(--ink);color:var(--paper);padding:var(--sp6) 0 var(--sp5)}
.site-footer a{color:var(--paper)}
.site-footer a:hover{color:#f0b28a}
.foot-brand{font-weight:700;letter-spacing:.1em;margin-bottom:var(--sp3)}
.site-footer nav{font-size:var(--fs-s);margin-bottom:var(--sp3)}
.foot-note{font-size:var(--fs-xs);letter-spacing:.12em;color:#9db1bd;margin-top:var(--sp3)}
@media(max-width:900px){
.hero,.split-intro,.contact-grid,.faq-hero,.caps,.steps{grid-template-columns:minmax(0,1fr)}
.steps{gap:var(--sp4)}
h1{font-size:var(--fs-xl)}
.cta::before{display:none}
}