:root{
  --bg:#E7EDF4;
  --paper:#FFFFFF;
  --ink:#2B3440;
  --ink-2:#4C5C6C;
  --line:#D5DEE8;
  --main:#7A2B3E;
  --main-d:#5F2030;
  --aux:#4A7A86;
  --dot:#D9A93C;
  --deep:#1D2A36;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',Arial,sans-serif;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,figcaption,blockquote,dl,dt,dd,table,th,td{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit}

.top{position:sticky;top:0;z-index:30;background:rgba(231,237,244,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.top__in{max-width:1080px;margin:0 auto;padding:13px 22px 0;display:flex;flex-wrap:wrap;align-items:center;gap:0 18px}
.brand{display:inline-flex;align-items:center;gap:10px;order:1;padding-bottom:12px}
.brand img{width:34px;height:34px;border-radius:9px;flex:0 0 auto}
.brand b{display:block;font-size:16px;line-height:1.25;letter-spacing:.01em}
.brand em{display:block;font-style:normal;font-size:11px;line-height:1.4;color:var(--aux);letter-spacing:.16em}
.top__get{order:2;margin-left:auto;padding-bottom:12px}
.nav{order:3;flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px 26px;border-top:1px solid var(--line);padding:9px 0 10px}
.nav a{font-size:14px;color:var(--ink-2);padding:3px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--main)}
.nav a[aria-current="page"]{color:var(--main);border-bottom-color:var(--main)}

.btn.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;width:auto;
  padding:11px 24px;border:0;border-radius:2px;cursor:pointer;
  background:var(--main);color:#FBF6EF;font-size:14px;font-weight:600;
  white-space:nowrap;letter-spacing:.04em
}
.btn.btn-primary:hover{background:var(--main-d);color:#FFFFFF}
.btn.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;width:auto;
  padding:10px 22px;border:1px solid var(--main);border-radius:2px;
  color:var(--main);background:transparent;font-size:14px;white-space:nowrap
}
.btn.btn-ghost:hover{background:rgba(122,43,62,.06);color:var(--main)}

.hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 320px at 88% 6%,rgba(74,122,134,.14),transparent 70%),
  linear-gradient(180deg,#EDF2F8 0%,var(--bg) 72%)}
.hero__in{max-width:1080px;margin:0 auto;padding:66px 22px 58px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:54px;align-items:center}
.hero__copy{border-left:3px solid var(--main);padding-left:26px}
.kicker{display:inline-block;font-size:12px;letter-spacing:.22em;color:var(--aux);padding-bottom:7px;border-bottom:2px solid var(--dot);margin-bottom:16px}
.hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.22;letter-spacing:-.015em;font-weight:700}
.lead{margin-top:18px;font-size:16.5px;color:var(--ink-2);max-width:34em}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:28px}
.cta-note{margin-top:16px;font-size:13px;color:#6D7C8C;letter-spacing:.02em}
.hero__shot{max-width:320px;margin:0 auto}
.hero__shot img{width:100%;height:auto;border-radius:4px;box-shadow:0 0 0 1px var(--line),0 26px 56px rgba(29,42,54,.16)}

.strip{background:var(--deep);color:#DCE5EE}
.strip__in{max-width:1080px;margin:0 auto;padding:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.strip b{display:block;font-size:22px;color:#FFFFFF;line-height:1.3}
.strip span{display:block;font-size:12.5px;color:#9FB2C4;letter-spacing:.06em}

.sec{padding:66px 0}
.sec--alt{background:#F1F5F9}
.sechead{max-width:840px;margin:0 auto;padding:0 22px}
.sechead h2{margin-top:0;font-size:clamp(22px,2.8vw,29px);line-height:1.35;font-weight:700;letter-spacing:-.01em}
.sechead .sub{margin-top:12px;font-size:15px;color:var(--ink-2);max-width:38em}
.wrap{max-width:840px;margin:0 auto;padding:0 22px}
.prose p{margin:14px 0;font-size:16px;color:#3B4A5A}
.prose h3{margin:30px 0 8px;font-size:18px;font-weight:700}

.rows{margin-top:30px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:58px 196px minmax(0,1fr);gap:16px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.row__no{font-size:12px;letter-spacing:.12em;color:var(--aux);padding-top:5px;font-variant-numeric:tabular-nums}
.row h3{font-size:17px;line-height:1.5;font-weight:700}
.row p{font-size:15px;color:#485868;line-height:1.85}

.shots{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.shot{background:var(--paper);border:1px solid var(--line);padding:12px 12px 14px;display:flex;flex-direction:column}
.shot img{width:100%;height:auto;border-radius:2px}
.shot figcaption{margin-top:auto;padding-top:11px;font-size:13px;line-height:1.65;color:#5B6B7B}

.steps{margin-top:30px}
.step{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px dashed #C7D3DF}
.step__no{font-size:13px;font-weight:700;color:var(--main);border:1px solid var(--main);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.step h3{font-size:16.5px;font-weight:700}
.step p{margin-top:6px;font-size:15px;color:#485868}

.quotes{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.quotes blockquote{border-left:2px solid var(--dot);padding-left:18px}
.quotes p{font-size:15px;color:#3B4A5A}
.quotes cite{display:block;margin-top:10px;font-style:normal;font-size:12.5px;color:var(--aux);letter-spacing:.04em}

.faq{margin-top:26px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:15px 0}
.faq summary{display:block;cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);position:relative;padding-right:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:-2px;color:var(--aux);font-size:19px;font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin-top:10px;font-size:15px;color:#485868}

.cta{background:var(--main-d);color:#F7EFE6}
.cta__in{max-width:840px;margin:0 auto;padding:58px 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center}
.cta h2{font-size:clamp(21px,2.6vw,27px);line-height:1.4;font-weight:700}
.cta p{margin-top:12px;font-size:15px;color:#E4CDBE;max-width:34em}
.cta .btn.btn-primary{background:#F3E4D2;color:#5F2030;justify-self:start}
.cta .btn.btn-primary:hover{background:#FFFFFF;color:#5F2030}

.foot{padding:52px 0 0;background:#EEF3F8;border-top:1px solid var(--line)}
.foot__in{max-width:1080px;margin:0 auto;padding:0 22px 34px;display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:44px;align-items:start}
.foot__brand{display:inline-flex;align-items:flex-start;gap:12px}
.foot__brand img{width:40px;height:40px;border-radius:10px;flex:0 0 auto}
.foot__brand b{display:block;font-size:17px;line-height:1.4}
.foot__brand p{margin-top:6px;font-size:13px;color:#5E6E7E;max-width:26em}
.foot__get p{font-size:13px;color:#5E6E7E;margin-bottom:12px}
.foot__legal{max-width:1080px;margin:0 auto;padding:16px 22px 30px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:12.5px;color:#6D7C8C}
.foot__legal nav{display:flex;flex-wrap:wrap;gap:16px}
.foot__legal a{color:#5E6E7E}
.foot__legal a:hover{color:var(--main)}

@media (max-width:980px){
  .hero__in{grid-template-columns:minmax(0,1fr);gap:36px;padding:48px 22px 44px}
  .hero__shot{max-width:300px}
  .strip__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row{grid-template-columns:44px minmax(0,1fr)}
  .row p{grid-column:2}
  .quotes{grid-template-columns:minmax(0,1fr)}
  .cta__in{grid-template-columns:minmax(0,1fr);gap:20px}
  .foot__in{grid-template-columns:minmax(0,1fr);gap:30px}
}
@media (max-width:620px){
  .top__in{padding:12px 16px 0}
  .brand{order:1}
  .top__get{order:2}
  .nav{order:3;justify-content:flex-start;gap:4px 18px;font-size:13.5px}
  .hero__copy{padding-left:18px}
  .hero__shot{max-width:270px}
  .sec{padding:48px 0}
  .sechead,.wrap,.cta__in,.foot__in,.foot__legal,.strip__in{padding-left:16px;padding-right:16px}
  .shots{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:minmax(0,1fr);gap:6px;padding:20px 0}
  .row p{grid-column:1}
  .step{grid-template-columns:36px minmax(0,1fr);gap:14px}
}