:root{
  --navy-900:#07152B; --navy-800:#0B1E3F; --navy-700:#122A52;
  --green-700:#3F9A6E; --green-600:#50B080; --green-100:#DEF2E6;
  --sky:#2AB7F0;
  --bg:#FFFFFF; --bg-soft:#F7F7F4; --bg-cream:#FAF6EE;
  --fg-1:#07152B; --fg-2:#2A3A55; --fg-3:#5C6B85; --fg-inv-2:#C8D2E2;
  --border:#E6E8EE;
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--fg-1);background:var(--bg);
     -webkit-font-smoothing:antialiased;line-height:1.55}
.wrap{max-width:720px;margin:0 auto;padding:0 24px}
a{color:var(--green-700)}

header{background:var(--navy-800);color:#fff;padding:16px 0}
.brand-row{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;color:#fff;
       text-decoration:none}
.brand img{width:30px;height:30px;border-radius:8px;display:block}
.brand span{font-size:16px}
.back{margin-left:auto;font-size:13px;color:var(--fg-inv-2);text-decoration:none}
.back:hover{color:#fff}

.title{padding:44px 0 10px}
.title h1{font-size:clamp(27px,4.4vw,38px);letter-spacing:-0.025em;margin:0 0 10px;
          font-weight:800}
.title p{color:var(--fg-3);margin:0;font-size:16px}

main{padding:18px 0 56px}
.step{padding:26px 0;border-top:1px solid var(--border)}
.step:first-child{border-top:none}
.step-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.num{flex:none;width:26px;height:26px;border-radius:8px;background:var(--green-100);
     color:var(--green-700);font-weight:800;font-size:13px;display:grid;
     place-items:center;align-self:center}
.step h2{font-size:19px;margin:0;font-weight:700;letter-spacing:-0.01em}
.step p{margin:0 0 12px;color:var(--fg-2);font-size:15.5px}
.step p:last-child{margin-bottom:0}
.step img{display:block;max-width:100%;border:1px solid var(--border);
          border-radius:10px;margin:14px 0 4px}
.step img.narrow{max-width:330px}
.step img.strip{max-width:262px}
.icon-badge{display:flex;align-items:center;gap:14px;margin:12px 0 2px}
.icon-badge img{width:52px;height:52px;border:none;border-radius:13px;margin:0}
.icon-badge span{font-size:14.5px;color:var(--fg-3)}
.caption{font-size:13px;color:var(--fg-3);margin:0 0 4px}

kbd{font-family:var(--mono);font-size:13px;background:var(--bg-soft);
    border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;
    padding:2px 8px;color:var(--fg-1);white-space:nowrap;font-weight:600}
code{font-family:var(--mono);font-size:13.5px;background:var(--bg-soft);
     padding:2px 6px;border-radius:5px}

.menu{border:1px solid var(--border);border-radius:10px;overflow:hidden;
      margin:14px 0 4px;background:#fff;max-width:330px}
.menu div{padding:9px 14px;font-size:14.5px;border-top:1px solid var(--border);
          color:var(--fg-2);display:flex;gap:10px;align-items:center}
.menu div:first-child{border-top:none;background:var(--bg-soft);
                      color:var(--fg-3);font-size:13px}
.menu b{color:var(--fg-1);font-weight:600}

.keys{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}

.note{background:var(--bg-cream);border-radius:10px;padding:14px 16px;
      font-size:14.5px;color:var(--fg-2);margin:14px 0 0}
.note b{color:var(--fg-1)}

.trouble{background:var(--bg-soft);padding:30px 0 40px;border-top:1px solid var(--border)}
.trouble h2{font-size:20px;margin:0 0 14px;font-weight:800}
details{background:#fff;border:1px solid var(--border);border-radius:10px;
        padding:14px 16px;margin-bottom:10px}
summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--fg-3)}
details[open] summary::after{content:"-"}
details p{margin:10px 0 0;color:var(--fg-2);font-size:14.5px}

footer{background:var(--navy-900);color:var(--fg-inv-2);padding:26px 0;font-size:13.5px}
footer a{color:#fff}

@media (max-width:600px){
  .title{padding:32px 0 6px}
  .step img.narrow,.menu{max-width:100%}
}