:root{
  --bg:#F6F2E7;
  --paper:#FBF8F1;
  --ink:#2B332C;
  --ink-2:#5B655C;
  --line:#E1D8C6;
  --line-2:#CFC4AC;
  --pri:#3F5D45;
  --pri-2:#2F4A36;
  --acc:#B8573C;
  --acc-2:#96422C;
  --gold:#C9A227;
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(rgba(63,93,69,.055) 1px,transparent 1px) 0 0/7px 7px,
    var(--bg);
  color:var(--ink);
  font:400 16px/1.85 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',Arial,sans-serif;
}
img{max-width:100%;display:block}
a{color:var(--pri);text-decoration:none}
h1,h2,h3,p,blockquote,figure,figcaption,dl,dd{margin:0}
h1,h2,h3{line-height:1.4;font-weight:700}

.top{
  position:sticky;top:0;z-index:30;
  background:rgba(246,242,231,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.top__in{
  max-width:1200px;margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;gap:22px;
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{width:46px;height:46px;border-radius:12px}
.brand__txt{
  display:flex;flex-direction:column;line-height:1.15;
  font-weight:700;font-size:19px;letter-spacing:.5px;color:var(--pri-2);
}
.brand__txt em{
  font-style:normal;font-size:10px;letter-spacing:3px;
  text-transform:uppercase;color:var(--acc);font-weight:400;
}
.top__tip{
  margin-left:auto;font-size:13px;color:var(--ink-2);
  border-left:2px solid var(--gold);padding-left:10px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;padding:12px 26px;border-radius:999px;
  font-size:15px;font-weight:700;line-height:1.2;
  border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;
}
.btn.btn-primary{
  display:inline-flex;width:auto;padding:12px 26px;
  background:var(--acc);color:#FFF7EE;border-color:var(--acc);
  box-shadow:0 8px 0 -4px rgba(63,93,69,.22);
}
.btn.btn-primary:hover{background:var(--acc-2);border-color:var(--acc-2);color:#FFF7EE}
.btn.btn-ghost{
  display:inline-flex;width:auto;padding:11px 24px;
  background:transparent;color:var(--pri-2);border-color:var(--line-2);
}
.btn.btn-ghost:hover{background:#EDE6D6;color:var(--pri-2);border-color:var(--pri)}
.btn--lg{padding:15px 40px;font-size:17px}

.shell{
  max-width:1200px;margin:0 auto;padding:0 22px;
  display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:58px;
  align-items:start;
}
.main{min-width:0;padding-bottom:26px}

.rail{
  position:sticky;top:96px;
  padding:20px 0 0 20px;border-left:1px solid var(--line-2);
}
.rail__cap{
  font-size:11px;letter-spacing:4px;color:var(--acc);
  text-transform:uppercase;margin-bottom:14px;
}
.rail__nav{display:flex;flex-direction:column;gap:2px}
.rail__nav a{
  display:flex;align-items:baseline;gap:9px;
  padding:9px 6px;font-size:15px;color:var(--ink-2);
  border-bottom:1px dashed var(--line);
  transition:color .2s,padding-left .2s;
}
.rail__nav a:hover{color:var(--acc);padding-left:10px}
.rail__nav a[aria-current]{color:var(--pri-2);font-weight:700}
.rail__nav i{
  font-style:normal;font-size:11px;letter-spacing:1px;
  color:var(--gold);
}
.rail__note{
  margin-top:20px;font-size:12px;line-height:1.75;color:var(--ink-2);
  padding:12px;background:rgba(201,162,39,.1);border-radius:10px;
}

.hero{padding:46px 0 10px}
.hero__in{display:grid;grid-template-columns:1.08fr .82fr;gap:36px;align-items:center}
.kicker{
  font-size:12px;letter-spacing:4px;color:var(--acc);
  text-transform:uppercase;margin-bottom:12px;
}
.kicker b{font-weight:700}
.hero h1{
  font-size:40px;letter-spacing:1px;color:var(--pri-2);
  margin-bottom:18px;
}
.lead{font-size:16.5px;line-height:1.9;color:var(--ink-2)}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 16px}
.hero__note{
  font-size:13px;color:var(--ink-2);padding-left:12px;
  border-left:3px solid var(--gold);line-height:1.7;
}
.hero__shot{margin:0}
.hero__shot img{
  width:100%;height:auto;max-width:318px;margin:0 auto;
  border-radius:20px;
  box-shadow:0 0 0 6px var(--paper),0 18px 34px rgba(43,51,44,.16);
}

.sec{padding:46px 0}
.sec--alt{
  background:var(--paper);
  border-radius:var(--r);
  padding:42px 32px;
  box-shadow:inset 0 0 0 1px var(--line),0 2px 0 rgba(63,93,69,.05);
}
.sec__in{max-width:100%}
.sec h2{
  font-size:25px;color:var(--pri-2);margin-bottom:12px;
  padding-bottom:12px;position:relative;
}
.sec h2::after{
  content:'';position:absolute;left:0;bottom:0;
  width:52px;height:3px;background:var(--acc);border-radius:2px;
}
.sub{font-size:14.5px;color:var(--ink-2);margin-bottom:24px}
.sec h3{font-size:17.5px;color:var(--pri-2);margin:24px 0 8px}
p{color:#3B443C}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{
  background:var(--paper);border-radius:12px;padding:22px 20px;
  box-shadow:inset 0 0 0 1px var(--line);
  position:relative;
}
.card .card__no{
  font-size:12px;letter-spacing:2px;color:var(--gold);
  margin-bottom:6px;
}
.card h3{margin:0 0 8px;font-size:17px}
.card p{font-size:14.5px;line-height:1.8;color:var(--ink-2)}

.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.step{
  border-top:3px solid var(--acc);padding-top:14px;
}
.step__no{font-size:12px;letter-spacing:3px;color:var(--acc);margin-bottom:6px}
.step__t{font-weight:700;font-size:17px;color:var(--pri-2);margin-bottom:6px}
.step__d{font-size:14.5px;color:var(--ink-2);line-height:1.8}
.tail{margin-top:20px;font-size:14px;color:var(--ink-2)}

.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.shot{margin:0;display:flex;flex-direction:column;justify-content:flex-end}
.shot img{
  width:100%;height:auto;border-radius:12px;
  box-shadow:0 0 0 3px var(--paper),0 8px 18px rgba(43,51,44,.12);
}
.shot figcaption{
  margin-top:10px;min-height:3.6em;font-size:12.5px;line-height:1.7;color:var(--ink-2);
}

.tbl-scroll{overflow-x:auto;margin:18px 0 0}
.tbl{
  width:100%;min-width:560px;border-collapse:collapse;
  font-size:14.5px;background:var(--paper);
}
.tbl th,.tbl td{
  border:1px solid var(--line);padding:11px 13px;text-align:left;
  vertical-align:top;
}
.tbl th{background:rgba(63,93,69,.08);color:var(--pri-2);font-weight:700;white-space:nowrap}
.tbl td{color:var(--ink-2)}
.tbl-note{margin-top:12px;font-size:13px;color:var(--ink-2)}

.qa{display:grid;gap:10px}
.qa details{
  background:var(--paper);border-radius:10px;
  box-shadow:inset 0 0 0 1px var(--line);
  padding:0 16px;
}
.qa summary{
  cursor:pointer;padding:13px 0;font-weight:700;font-size:15.5px;
  color:var(--pri-2);list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:'＋';color:var(--acc);margin-right:9px;font-weight:400}
.qa details[open] summary::before{content:'－'}
.qa details p{
  padding:0 0 15px;font-size:14.5px;line-height:1.85;color:var(--ink-2);
}

.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.quotes blockquote{
  background:var(--paper);border-radius:10px;padding:20px 18px;
  box-shadow:inset 0 0 0 1px var(--line);
  position:relative;
}
.quotes blockquote p{font-size:14.5px;line-height:1.8;color:#3B443C}
.quotes__by{
  margin-top:12px;font-size:12px;color:var(--acc);letter-spacing:1px;
  border-top:1px dashed var(--line-2);padding-top:9px;
}

.wide{margin:22px auto;text-align:center;max-width:330px}
.wide img{
  width:auto;max-width:100%;height:auto;margin:0 auto;
  border-radius:16px;box-shadow:0 0 0 4px var(--paper),0 12px 24px rgba(43,51,44,.14);
}
.wide figcaption{
  margin-top:12px;font-size:12.5px;color:var(--ink-2);line-height:1.7;
}

.page-hero{padding:42px 0 6px;border-bottom:1px solid var(--line);margin-bottom:6px}
.page-hero h1{font-size:32px;color:var(--pri-2);margin-bottom:14px}
.page-hero .lead{max-width:760px;padding-bottom:26px}

.cta{
  margin:26px 0 34px;padding:40px 32px;
  background:var(--pri);border-radius:var(--r);
  text-align:center;color:#F2EEE0;
}
.cta h2{color:#F7F3E6;font-size:24px;padding-bottom:0;margin-bottom:10px}
.cta h2::after{display:none}
.cta .sub{color:#CBD5C6;margin-bottom:22px}

.foot{
  background:#2A382E;color:#C9D2C4;
  padding:44px 22px 26px;
}
.foot__in{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:266px minmax(0,1fr);gap:34px;
}
.foot__head{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding-bottom:0;border-bottom:0;
}
.foot__head img{width:40px;height:40px;border-radius:10px}
.foot__who{flex:1 1 auto;min-width:0}
.foot__name{font-size:17px;font-weight:700;color:#F1ECDC;line-height:1.3}
.foot__desc{
  margin-top:4px;font-size:13px;line-height:1.75;color:#A9B6A6;
}
.foot__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
  padding:0;border-left:1px double #40503F;padding-left:26px;
}
.foot__h{
  font-size:12px;letter-spacing:2px;color:#8FA58F;margin-bottom:10px;
}
.foot__col p,.foot__col a{
  display:block;font-size:13.5px;line-height:2;color:#B9C4B5;
}
.foot__col a:hover{color:#F1ECDC}
.foot__col--get .btn.btn-primary{
  display:inline-flex;width:auto;padding:10px 22px;
  background:var(--acc);color:#FFF7EE;border-color:var(--acc);
}
.foot__end{
  grid-column:1/-1;border-top:1px solid #40503F;padding-top:16px;
}
.foot__disc{font-size:12.5px;line-height:1.8;color:#93A28F}
.foot__copy{margin-top:8px;font-size:12px;color:#7D8C7A}

@media (max-width:1080px){
  .shell{grid-template-columns:1fr;gap:0}
  .rail{
    position:static;order:-1;border-left:0;
    border-bottom:1px solid var(--line);padding:16px 0 18px;
  }
  .rail__cap{letter-spacing:3px;margin-bottom:10px}
  .rail__nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .rail__nav a{
    border:1px solid var(--line);border-radius:999px;
    padding:6px 14px;font-size:14px;
  }
  .rail__nav a:hover{padding-left:14px}
  .rail__nav a[aria-current]{background:var(--pri);color:#F4F0E2;border-color:var(--pri)}
  .rail__nav a[aria-current] i{color:var(--gold)}
  .rail__note{display:none}
}

@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:26px}
  .hero h1{font-size:33px}
  .hero__shot img{max-width:300px}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quotes{grid-template-columns:1fr}
  .sec--alt{padding:34px 24px}
}

@media (max-width:620px){
  .top__in{flex-wrap:wrap;gap:10px 14px;padding:10px 16px}
  .top__tip{
    margin-left:0;order:3;flex:1 0 100%;
    border-left:0;padding-left:0;font-size:12px;color:#7A8478;
  }
  .top__get{order:2;margin-left:auto;padding:10px 18px;font-size:14px}
  .shell{padding:0 16px}
  .hero{padding:30px 0 6px}
  .hero h1{font-size:27px}
  .lead{font-size:15.5px}
  .hero__shot img{max-width:262px}
  .sec{padding:34px 0}
  .sec h2{font-size:21px}
  .cards,.steps{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .page-hero h1{font-size:25px}
  .cta{padding:30px 20px;margin:20px 0 26px}
  .cta h2{font-size:20px}
  .foot__in{grid-template-columns:1fr;gap:20px}
  .foot__grid{grid-template-columns:1fr 1fr;gap:18px;border-left:0;padding-left:0}
}