/* Help pages. Same document style as /privacy and /terms, plus a few pieces for how-to content. */
:root{--bg:#0e0e0e;--panel:#171716;--raised:#262523;--line:#2a2927;--chalk:#edeae3;--muted:#8a8780;--tally:#e5251b}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--chalk);font:400 17px/1.6 "Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
a{color:inherit}
img{max-width:100%}
main{max-width:760px;margin:0 auto;padding:22px 24px 80px}
nav{padding:0 0 40px}
.brand{display:inline-flex;align-items:center;gap:12px;font:700 30px/1 "Barlow Condensed",sans-serif;text-transform:uppercase;text-decoration:none}
.brand img{width:38px;height:38px}
h1,h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1}
h1{font-size:56px;margin:0 0 10px}
h2{font-size:26px;margin:44px 0 10px;scroll-margin-top:16px}
h3{font:600 18px/1.3 "Instrument Sans",system-ui,sans-serif;margin:28px 0 6px;color:var(--chalk);scroll-margin-top:16px}
.k{font:500 12px/1.4 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.k a{text-decoration:none}
p,li{color:#c9c6bf}
b{color:var(--chalk)}
li{margin:6px 0}
ol,ul{padding-left:22px}
.lede{font-size:19px}

/* Topic cards on the hub, and next / previous links */
.topics{display:grid;gap:12px;margin:22px 0 0;padding:0;list-style:none}
.topics li{margin:0}
.topics a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-decoration:none}
.topics a b{display:block;font-size:18px}
.topics a span{display:block;color:var(--muted);font-size:15px;margin-top:2px}
.topics a:hover,.topics a:focus-visible{border-color:var(--muted)}

/* On this page */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:22px 0 0}
.toc ul{list-style:none;margin:8px 0 0;padding:0}
.toc li{margin:0}
.toc a{display:block;padding:7px 0;color:#c9c6bf}

/* iPhone / Android differences, and things worth a second look */
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--chalk);border-radius:10px;padding:12px 16px;margin:16px 0}
.note p{margin:6px 0}
.note p:first-child{margin-top:0}
.note p:last-child{margin-bottom:0}

/* Real screenshots */
figure{margin:22px 0;text-align:center}
figure img{width:260px;height:auto;border-radius:18px;border:1px solid var(--line);display:inline-block}
figcaption{color:var(--muted);font-size:14px;margin-top:8px}

.next{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:48px}
.next a{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;text-decoration:none;font-weight:600}

footer{margin-top:60px;padding-top:20px;border-top:1px solid var(--line);display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--muted)}

@media (max-width:520px){
  h1{font-size:46px}
  main{padding:18px 20px 64px}
  nav{padding-bottom:28px}
}

video.howto{display:block;width:100%;max-width:300px;height:auto;margin:20px auto 28px;border-radius:18px;background:#000}