:root{
  --ink:#101418; --ink-2:#3d4753; --ink-3:#6b7684;
  --line:#e4e8ed; --bg:#ffffff; --bg-2:#f7f9fb;
  --accent:#1f5fd6; --accent-ink:#153f8f;
  --radius:10px; --wrap:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

header.top{border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:10}
.top .wrap{display:flex; align-items:center; gap:24px; height:64px}
.brand{font-weight:700; letter-spacing:-.01em; color:var(--ink); font-size:17px}
.brand span{color:var(--ink-3); font-weight:500}
.top nav{margin-left:auto; display:flex; align-items:center; gap:22px; font-size:15px}
.top nav a{color:var(--ink-2)}
.btn{
  display:inline-block; background:var(--accent); color:#fff; padding:10px 18px;
  border-radius:var(--radius); font-weight:600; font-size:15px; border:1px solid var(--accent);
}
.btn:hover{background:var(--accent-ink); border-color:var(--accent-ink); text-decoration:none}
.btn.ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--bg-2); color:var(--ink)}

.hero{padding:76px 0 64px; border-bottom:1px solid var(--line)}
.hero h1{font-size:44px; line-height:1.15; letter-spacing:-.025em; margin:0 0 18px; max-width:19ch}
.hero p.lead{font-size:19px; color:var(--ink-2); margin:0 0 30px; max-width:60ch}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap}

section{padding:64px 0; border-bottom:1px solid var(--line)}
section.alt{background:var(--bg-2)}
h2{font-size:27px; letter-spacing:-.02em; margin:0 0 10px}
h2+p.sub{color:var(--ink-3); margin:0 0 34px; max-width:64ch}
h3{font-size:17px; margin:0 0 7px}

.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.card p{margin:0; color:var(--ink-2); font-size:15px}

ol.steps{counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
ol.steps li{counter-increment:s; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 22px 22px 58px; position:relative}
ol.steps li::before{content:counter(s); position:absolute; left:20px; top:21px;
  width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff;
  font-size:13px; font-weight:700; display:grid; place-items:center}
ol.steps p{margin:0; color:var(--ink-2); font-size:15px}

.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius)}
table.perms{width:100%; min-width:520px; border-collapse:collapse; font-size:15px; background:#fff}
table.perms th,table.perms td{border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top}
table.perms th{background:var(--bg-2); font-weight:600; font-size:14px}
table.perms code{font-size:13px; background:var(--bg-2); padding:2px 6px; border-radius:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

footer.bot{padding:44px 0; font-size:14px; color:var(--ink-3); background:#fff}
footer.bot .cols{display:flex; gap:44px; flex-wrap:wrap; justify-content:space-between}
footer.bot a{color:var(--ink-2)}
footer.bot .legal{margin-top:26px; padding-top:22px; border-top:1px solid var(--line); line-height:1.8}
.fill{background:#fffbe6; border:1px solid #f0d98c; border-radius:6px; padding:1px 6px; font-weight:600; color:#7a5c00}

article.doc{padding:52px 0 68px; max-width:760px}
article.doc h1{font-size:32px; letter-spacing:-.02em; margin:0 0 8px}
article.doc .updated{color:var(--ink-3); font-size:14px; margin:0 0 34px}
article.doc h2{font-size:20px; margin:38px 0 10px}
article.doc h3{font-size:16px; margin:24px 0 6px}
article.doc p,article.doc li{color:var(--ink-2)}
article.doc ul{padding-left:22px}
article.doc li{margin-bottom:7px}
article.doc .box{background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px; margin:22px 0}
article.doc .box p:last-child{margin-bottom:0}

@media (max-width:640px){
  .hero{padding:52px 0 44px}
  .hero h1{font-size:32px}
  .top nav{gap:14px; font-size:14px}
  .top nav a.hide-sm{display:none}
}