:root {
 --white:#fff;
 --soft:#f3f6f4;
 --ink:#202725;
 --muted:#636d69;
 --line:#d5dcd8;
 --green:#14775a;
 --green-dark:#0c4f3c;
 --coral:#df7057;
 --container:1160px;
 }

* {
 box-sizing:border-box;
 }

html {
 scroll-behavior:smooth;
 }

body {
 margin:0;
 color:var(--ink);
 background:var(--white);
 font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,Helvetica,sans-serif;
 line-height:1.7;
 }

a {
 color:inherit;
 text-decoration:none;
 }

img {
 display:block;
 max-width:100%;
 height:auto;
 }

.container {
 width:min(calc(100% - 40px),var(--container));
 margin:auto;
 }

.header {
 position:sticky;
 top:0;
 z-index:30;
 color:#fff;
 background:#202725;
 }

.header-inner {
 min-height:74px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 }

.brand {
 display:flex;
 align-items:center;
 gap:10px;
 font-size:21px;
 font-weight:800;
 }

.brand img {
 border-radius:8px;
 }

.header nav,.footer-inner nav {
 display:flex;
 align-items:center;
 gap:25px;
 }

.header nav a {
 padding:8px 0;
 font-weight:650;
 }

.header nav .active {
 color:#78d7b8;
 border-bottom:2px solid #78d7b8;
 }

.header .download {
 padding:9px 17px;
 color:#fff;
 background:var(--green);
 border:0;
 }

.menu {
 display:none;
 width:42px;
 height:42px;
 color:#fff;
 background:#202725;
 border:1px solid #59615f;
 font-size:20px;
 }

.hero {
 background:var(--soft);
 border-bottom:1px solid var(--line);
 overflow:hidden;
 }

.hero-layout {
 min-height:620px;
 padding:48px 0 44px;
 display:grid;
 grid-template-columns:1fr 1fr;
 align-items:center;
 gap:70px;
 }

.kicker,.heading>span,.inner-hero span {
 color:var(--green);
 font-size:12px;
 font-weight:800;
 }

.hero h1 {
 margin:12px 0 18px;
 font-size:68px;
 line-height:1.07;
 }

.hero h1 span {
 display:block;
 }

.hero-copy>p {
 max-width:590px;
 color:var(--muted);
 font-size:17px;
 }

.actions {
 display:flex;
 gap:12px;
 margin:27px 0;
 }

.button {
 min-height:46px;
 padding:10px 21px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border:1px solid;
 font-weight:750;
 }

.button.primary {
 color:#fff;
 background:var(--green);
 border-color:var(--green);
 }

.button.secondary {
 background:#fff;
 border-color:#9aa49f;
 }

.button.coral {
 color:#fff;
 background:var(--coral);
 border-color:var(--coral);
 }

.progress {
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:10px;
 }

.progress div {
 display:grid;
 gap:6px;
 }

.progress span {
 color:var(--muted);
 font-size:11px;
 }

.progress b {
 height:3px;
 background:var(--green);
 }

.progress div:nth-child(2) b {
 background:var(--coral);
 }

.queue-visual {
 position:relative;
 min-height:470px;
 display:flex;
 align-items:center;
 justify-content:center;
 }

.queue-card {
 position:absolute;
 width:210px;
 padding:15px 18px;
 display:grid;
 background:#fff;
 border:1px solid var(--line);
 box-shadow:0 12px 25px rgba(30,50,42,.1);
 }

.queue-card span {
 color:var(--coral);
 font-size:11px;
 }

.queue-card b {
 font-size:13px;
 }

.card-one {
 left:15px;
 top:48px;
 transform:rotate(-3deg);
 }

.card-two {
 right:5px;
 bottom:80px;
 transform:rotate(3deg);
 }

.queue-visual figure {
 z-index:2;
 margin:0;
 padding:9px;
 background:#202725;
 border-radius:22px;
 box-shadow:0 22px 44px rgba(25,39,33,.2);
 }

.queue-visual figure img {
 width:auto;
 max-width:220px;
 max-height:390px;
 border-radius:14px;
 }

.queue-summary {
 position:absolute;
 z-index:3;
 bottom:18px;
 left:50%;
 min-width:245px;
 padding:9px 13px;
 transform:translateX(-50%);
 display:flex;
 justify-content:space-between;
 color:#fff;
 background:var(--green-dark);
 }

.queue-summary span {
 font-size:11px;
 }

.queue-summary strong {
 font-size:12px;
 }

.summary {
 background:#fff;
 border-bottom:1px solid var(--line);
 }

.summary>.container {
 display:grid;
 grid-template-columns:repeat(4,1fr);
 }

.summary div>div {
 padding:16px;
 display:grid;
 border-right:1px solid var(--line);
 }

.summary small {
 color:var(--coral);
 }

.summary b {
 font-size:13px;
 }

.section {
 padding:86px 0;
 }

.heading {
 margin-bottom:30px;
 }

.heading h2 {
 margin:4px 0;
 font-size:34px;
 }

.features {
 background:#fff;
 }

.feature-grid {
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:14px;
 }

.feature-grid article {
 min-height:190px;
 padding:25px;
 background:var(--soft);
 border-top:3px solid var(--green);
 }

.feature-grid b {
 font-size:19px;
 }

.feature-grid p {
 color:var(--muted);
 }

.showcase {
 color:#fff;
 background:#202725;
 }

.show-grid {
 display:grid;
 grid-template-columns:.8fr 1.2fr;
 align-items:center;
 gap:65px;
 }

.showcase .heading>span {
 color:#77d3b5;
 }

.show-grid h3 {
 font-size:26px;
 }

.show-grid>div>p {
 color:#bdc7c3;
 }

.screens {
 display:flex;
 align-items:center;
 justify-content:center;
 gap:22px;
 }

.screens figure {
 width:235px;
 margin:0;
 padding:9px;
 color:var(--ink);
 background:#fff;
 }

.screens figure:first-child {
 transform:translateY(-16px);
 }

.screens img {
 width:auto;
 max-width:100%;
 max-height:340px;
 margin:auto;
 }

.screens figcaption {
 padding:8px 4px 2px;
 font-size:12px;
 }

.checklist {
 background:var(--soft);
 }

.checklist ol {
 margin:0;
 padding:0;
 list-style:none;
 border-top:1px solid var(--line);
 }

.checklist li {
 padding:18px 0;
 display:grid;
 grid-template-columns:70px 1fr;
 border-bottom:1px solid var(--line);
 }

.checklist li>span {
 color:var(--coral);
 font-weight:800;
 }

.checklist h3,.checklist p {
 margin:0;
 }

.checklist p {
 color:var(--muted);
 }

.help-links {
 margin-top:25px;
 display:flex;
 gap:18px;
 color:var(--green);
 font-weight:750;
 }

.faq-grid {
 display:grid;
 grid-template-columns:.45fr 1fr;
 gap:60px;
 }

details {
 border-top:1px solid var(--line);
 }

details:last-child {
 border-bottom:1px solid var(--line);
 }

summary {
 position:relative;
 padding:18px 30px 18px 0;
 cursor:pointer;
 font-weight:750;
 list-style:none;
 }

summary::-webkit-details-marker {
 display:none;
 }

summary::after {
 content:"+";
 position:absolute;
 right:5px;
 }

details[open] summary::after {
 content:"−";
 }

details p {
 margin:-4px 0 20px;
 color:var(--muted);
 }

.cta {
 padding:48px 0;
 color:#fff;
 background:var(--green-dark);
 }

.cta>.container {
 display:flex;
 align-items:center;
 justify-content:space-between;
 }

.cta span {
 color:#9edac6;
 font-size:12px;
 }

.cta h2 {
 margin:4px 0;
 font-size:30px;
 }

.inner-hero {
 padding:74px 0;
 color:#fff;
 background:#202725;
 }

.inner-hero span {
 color:#79d6b7;
 }

.inner-hero h1 {
 max-width:850px;
 margin:8px 0 14px;
 font-size:54px;
 line-height:1.18;
 }

.inner-hero p {
 max-width:780px;
 color:#cbd2cf;
 font-size:17px;
 }

.guide-layout {
 display:grid;
 grid-template-columns:190px minmax(0,760px);
 justify-content:center;
 gap:70px;
 }

.guide-layout aside {
 position:sticky;
 top:100px;
 padding:18px 0;
 display:grid;
 gap:10px;
 border-top:3px solid var(--green);
 border-bottom:1px solid var(--line);
 }

.guide-layout aside a {
 color:var(--muted);
 font-size:14px;
 }

.guide-layout article section {
 padding-bottom:42px;
 margin-bottom:42px;
 border-bottom:1px solid var(--line);
 scroll-margin-top:100px;
 }

.guide-layout article span {
 color:var(--green);
 font-size:12px;
 font-weight:800;
 }

.guide-layout h2,.faq-list h2 {
 font-size:28px;
 }

.guide-layout p,.faq-list p {
 color:var(--muted);
 }

.guide-layout a,.faq-list a {
 color:var(--green);
 text-decoration:underline;
 }

.faq-list {
 max-width:900px;
 }

.faq-list>section+section {
 margin-top:58px;
 }

footer {
 padding:38px 0 24px;
 color:#eef2f0;
 background:#151a18;
 }

.footer-inner {
 display:flex;
 align-items:center;
 justify-content:space-between;
 }

.footer-inner nav {
 color:#bcc5c1;
 font-size:14px;
 }

.legal {
 margin-top:24px;
 padding-top:20px;
 border-top:1px solid #3c4541;
 text-align:center;
 color:#a5afaa;
 font-size:12px;
 }

.legal p {
 margin:4px;
 }

@media(max-width:860px){

  .menu{
display:block}
.header nav{
display:none;
position:absolute;
top:74px;
left:20px;
right:20px;
padding:16px;
flex-direction:column;
align-items:stretch;
color:var(--ink);
background:#fff;
border:1px solid var(--line)}
.header nav.open{
display:flex}

  .hero-layout{
min-height:auto;
grid-template-columns:1fr;
gap:16px}
.queue-visual{
order:2}
.show-grid,.faq-grid,.guide-layout{
grid-template-columns:1fr}
.guide-layout aside{
position:static;
grid-template-columns:repeat(4,1fr)}
.guide-layout aside b{
grid-column:1/-1}

}

@media(max-width:560px){

  .container{
width:min(calc(100% - 32px),var(--container))}
.header-inner{
min-height:68px}
.header nav{
top:68px;
left:16px;
right:16px}
.hero-layout{
padding:30px 0 24px;
gap:8px}
.hero h1{
font-size:44px}
.hero-copy>p{
font-size:15px}
.actions .button{
flex:1}
.queue-visual{
min-height:215px}
.queue-card{
width:132px;
padding:8px 10px}
.queue-card b{
font-size:10px}
.card-one{
left:8px;
top:20px}
.card-two{
right:5px;
bottom:45px}
.queue-visual figure{
padding:6px;
border-radius:16px}
.queue-visual figure img{
max-width:105px;
max-height:186px;
border-radius:10px}
.queue-summary{
bottom:4px;
min-width:210px;
padding:6px 9px}
.summary>.container{
overflow-x:auto;
grid-template-columns:repeat(4,150px)}
.section{
padding:62px 0}
.heading h2{
font-size:29px}
.feature-grid{
grid-template-columns:1fr 1fr}
.feature-grid article{
min-height:150px;
padding:18px}
.show-grid{
gap:32px}
.screens{
gap:10px}
.screens figure{
width:48%}
.screens img{
max-height:255px}
.cta>.container,.footer-inner{
align-items:stretch;
flex-direction:column;
gap:20px}
.inner-hero{
padding:54px 0}
.inner-hero h1{
font-size:39px}
.guide-layout aside{
grid-template-columns:1fr 1fr}
.guide-layout h2,.faq-list h2{
font-size:24px}

}