:root{
  --bg:#23272B;
  --card:#2B3035;
  --card2:#31373C;
  --ink:#EDF1F4;
  --body:#B4BEC6;
  --muted:#8B959D;
  --brand:#5FA8C7;
  --brand-d:#4C8DA8;
  --accent:#E3A265;
  --line:#3C4348;
  --deep:#1A1E21;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  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;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,figcaption,blockquote,table{margin:0}
ul,ol{padding-left:0;list-style:none}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--accent)}
img{display:block;max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 26px}
.top{background:var(--deep);border-bottom:1px solid var(--line)}
.top__in{max-width:1080px;margin:0 auto;padding:0 26px}
.top__row1{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:14px 0}
.brand{display:flex;align-items:center;gap:9px;justify-self:start}
.brand__mark{display:block;width:30px;height:30px}
.brand__name{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.3px}
.top__cta{justify-self:end;display:flex;gap:8px}
.nav{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.nav a{
  text-align:center;
  padding:12px 6px;
  font-size:14px;
  color:var(--body);
  border-right:1px solid var(--line);
  letter-spacing:.4px;
}
.nav a:last-child{border-right:0}
.nav a:hover{background:var(--card);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--card2);color:var(--brand);font-weight:600}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:auto;
  white-space:nowrap;
  padding:10px 18px;
  border-radius:3px;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  border:1px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn.btn-primary{background:var(--brand);color:#14191C}
.btn.btn-primary:hover{background:#7CBBD4;color:#14191C}
.btn.btn-ghost{background:transparent;color:var(--brand);border-color:#4A5A64}
.btn.btn-ghost:hover{background:#33424A;color:var(--accent);border-color:var(--accent)}
.top__ios{padding:8px 13px;font-size:13px}
.hero{
  background:var(--deep);
  padding:56px 0 60px;
  border-bottom:1px solid var(--line);
}
.hero__in{
  max-width:1080px;
  margin:0 auto;
  padding:0 26px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:48px;
  align-items:center;
}
.kicker{
  font-size:12px;
  letter-spacing:2.4px;
  color:var(--accent);
  font-weight:700;
  margin-bottom:14px;
}
.hero h1{
  font-size:40px;
  line-height:1.24;
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.4px;
}
.lead{margin-top:18px;font-size:16px;color:var(--body);max-width:36em}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cta-note{margin-top:18px;font-size:13px;color:var(--muted)}
.hero__shot{position:relative}
.hero__shot img{
  position:relative;
  width:auto;
  height:auto;
  max-width:320px;
  margin:0 auto;
  border-radius:3px;
  box-shadow:12px 12px 0 rgba(227,162,101,.3);
}
.hero__shot figcaption{
  position:relative;
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
  padding-top:14px;
}
.sec{padding:64px 0}
.sec--deep{background:var(--deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sechead{position:relative;margin-bottom:34px;padding-right:120px}
.sechead .no{
  position:absolute;
  right:0;
  top:-18px;
  font-size:96px;
  line-height:1;
  font-weight:700;
  color:var(--card2);
  letter-spacing:-4px;
}
.sechead h2{font-size:27px;color:var(--ink);font-weight:700}
.sechead .sub{margin-top:10px;font-size:15px;color:var(--body);max-width:46em}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{background:var(--card);padding:26px 24px}
.tile h3{font-size:17px;color:var(--ink);margin-bottom:8px}
.tile p{font-size:14.5px}
.tile .tag{
  display:inline-block;
  font-size:11px;
  letter-spacing:1.2px;
  color:var(--accent);
  border:1px solid #4B4335;
  padding:1px 7px;
  margin-bottom:10px;
}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.gal figure{background:var(--card);display:flex;flex-direction:column}
.gal img{width:100%;height:auto}
.gal figcaption{
  font-size:13px;
  color:var(--muted);
  padding:12px 14px;
  margin-top:auto;
}
.gal--two{grid-template-columns:repeat(2,1fr)}
.gal--single{grid-template-columns:1fr;margin-top:34px}
.gal--single img{max-width:340px;margin:0 auto}
.gal__wide{grid-column:1 / -1}
.gal__wide img{width:100%;height:auto;max-width:780px;margin:0 auto}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl thead th{
  background:var(--card2);
  color:var(--ink);
  font-size:13px;
  letter-spacing:.6px;
  text-align:left;
  padding:12px 14px;
}
.tbl th,.tbl td{padding:13px 14px;text-align:left;vertical-align:top}
.tbl tbody tr:nth-child(even){background:var(--card)}
.tbl tbody th{color:var(--ink);font-weight:600;width:26%}
.prose p{margin-bottom:15px}
.prose p:last-child{margin-bottom:0}
.prose h3{color:var(--ink);font-size:17px;margin:26px 0 10px}
.note{
  border:1px solid #4B4335;
  background:#2E2A22;
  color:#D8C4A6;
  padding:16px 18px;
  font-size:14.5px;
  margin-top:24px;
}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.list{display:grid;gap:14px}
.list li{
  padding-left:16px;
  position:relative;
  font-size:14.5px;
}
.list li::before{
  content:"";
  position:absolute;
  left:0;top:.68em;
  width:7px;height:7px;
  background:var(--accent);
  transform:rotate(45deg);
}
.faq2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.qa{background:var(--card);padding:22px}
.qa h3{font-size:15.5px;color:var(--ink);margin-bottom:8px}
.qa p{font-size:14px}
.cta{background:#1B2B33;border-top:1px solid #2C3F49;padding:56px 0}
.cta h2{font-size:27px;color:var(--ink);font-weight:700}
.cta p{margin-top:12px;font-size:15px;color:#A9BCC4;max-width:48em}
.cta__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.cta .btn.btn-primary{background:var(--accent);color:#2A1F12}
.cta .btn.btn-primary:hover{background:#EDB57F;color:#2A1F12}
.cta .btn.btn-ghost{color:#DDE7EB;border-color:#4A5F69}
.cta .btn.btn-ghost:hover{background:#24343C;color:#fff}
.foot{background:var(--deep);border-top:1px solid var(--line);padding:50px 0 0}
.foot__in{
  max-width:1080px;
  margin:0 auto;
  padding:0 26px;
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr 1fr;
  gap:32px;
}
.foot h3{font-size:13px;color:var(--ink);letter-spacing:1.2px;margin-bottom:12px;font-weight:600}
.foot p{font-size:13.5px;color:var(--muted);max-width:30em}
.foot__col ul{display:grid;gap:8px}
.foot__col a{color:var(--body);font-size:13.5px}
.foot__col a:hover{color:var(--accent)}
.foot__dl{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.foot__dl .btn{width:auto}
.foot__legal{
  max-width:1080px;
  margin:36px auto 0;
  padding:18px 26px 30px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:#6E777D;
}
.page-hero{background:var(--deep);border-bottom:1px solid var(--line);padding:44px 0 46px}
.page-hero h1{font-size:31px;color:var(--ink);font-weight:700;letter-spacing:-.3px}
.page-hero .lead{margin-top:14px}
.bread{font-size:12.5px;color:var(--muted);margin-bottom:12px;letter-spacing:.5px}
.bread a{color:var(--muted)}
.bread a:hover{color:var(--brand)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.step{background:var(--card);padding:22px}
.step .no{font-size:12px;letter-spacing:1.4px;color:var(--brand);font-weight:700}
.step h3{font-size:15.5px;color:var(--ink);margin:8px 0 8px}
.step p{font-size:14px}
.more{margin-top:36px;border-top:1px solid var(--line);padding-top:24px}
.more h2{font-size:18px;color:var(--ink);margin-bottom:14px}
.more ul{display:grid;gap:12px}
.more li a{font-size:14.5px}
.more li span{display:block;font-size:13px;color:var(--muted)}
html[data-js] .lift{opacity:0}
html[data-js] .lift[data-in]{opacity:1;animation:glowline .7s ease both}
@keyframes glowline{
  0%{opacity:0;box-shadow:inset 0 0 0 1px rgba(95,168,199,.55)}
  55%{opacity:1;box-shadow:inset 0 0 0 1px rgba(95,168,199,.3)}
  100%{opacity:1;box-shadow:inset 0 0 0 1px rgba(95,168,199,0)}
}
@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:32px}
  .hero h1{font-size:32px}
  .hero__shot{max-width:420px;margin:0 auto}
  .tiles{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr;gap:24px}
  .faq2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr 1fr;gap:28px}
  .sechead{padding-right:80px}
  .sechead .no{font-size:72px;top:-8px}
}
@media (max-width:620px){
  .wrap,.hero__in,.top__in,.foot__in,.foot__legal{padding-left:16px;padding-right:16px}
  .top__row1{grid-template-columns:1fr auto;row-gap:10px;padding:12px 0}
  .brand{grid-column:1}
  .top__cta{grid-column:2}
  .nav{grid-template-columns:1fr 1fr}
  .nav a{border-bottom:1px solid var(--line);font-size:13px}
  .nav a:nth-child(2n){border-right:0}
  .hero{padding:32px 0 38px}
  .hero h1{font-size:27px;line-height:1.3}
  .lead{font-size:15px}
  .hero__shot img{max-width:280px}
  .sec{padding:42px 0}
  .sechead{padding-right:0}
  .sechead .no{display:none}
  .sechead h2{font-size:22px}
  .gal{grid-template-columns:1fr}
  .page-hero{padding:30px 0 32px}
  .page-hero h1{font-size:24px}
  .cta{padding:40px 0}
  .cta h2{font-size:22px}
  .foot__in{grid-template-columns:1fr}
  .tbl th,.tbl td{padding:11px 9px;font-size:13.5px}
}