:root{
  --ink:#0A0A0B; --body:#3F3F49; --muted:#8E8E98;
  --line:#E7E7EB; --bg:#FFFFFF; --raised:#FAFAFB;
  --accent:#2DB9A8; --warn:#B8860B;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--body);
  font:400 17px/1.72 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:0 24px}
a{color:var(--ink); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
a:hover{color:var(--accent)}

header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line)}
.nav{max-width:760px; margin:0 auto; padding:0 24px; height:68px;
  display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink);
  font-weight:700; letter-spacing:-.02em; font-size:19px}
.brand img{width:34px; height:34px; border-radius:9px; display:block; border:1px solid var(--line)}
.back{font-size:15px; font-weight:500; color:var(--body); text-decoration:none}
.back:hover{color:var(--ink)}

.doc{padding:64px 0 84px}
h1{font-size:clamp(33px,5.5vw,46px); line-height:1.08; letter-spacing:-.035em;
  font-weight:800; color:var(--ink); margin:0 0 12px}
.meta{font-size:14.5px; color:var(--muted); margin:0 0 44px; padding-bottom:26px; border-bottom:1px solid var(--line)}
h2{font-size:22px; line-height:1.28; letter-spacing:-.022em; font-weight:700; color:var(--ink); margin:48px 0 14px}
h3{font-size:17.5px; font-weight:700; letter-spacing:-.012em; color:var(--ink); margin:30px 0 10px}
p{margin:0 0 17px}
ul,ol{margin:0 0 17px; padding-left:24px}
li{margin-bottom:9px}
strong{color:var(--ink); font-weight:600}

.tldr{background:var(--raised); border:1px solid var(--line); border-radius:18px; padding:28px 30px; margin:0 0 12px}
.tldr h2{margin-top:0; font-size:18px}
.tldr ul{margin-bottom:0}
.tldr li{font-size:16px}

.callout{border-left:3px solid var(--accent); background:var(--raised);
  padding:20px 24px; border-radius:0 14px 14px 0; margin:26px 0}
.callout p:last-child{margin-bottom:0}
.callout.alert{border-left-color:var(--warn)}

.ph{background:#FFF3CD; border-bottom:1px dashed #B8860B; color:#7A5C00;
  padding:1px 5px; border-radius:3px; font-weight:600}

.future{border:1px dashed var(--line); border-radius:14px; padding:22px 24px; margin:26px 0; background:#FCFCFD}
.future .tag{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line);
  background:#fff; padding:4px 10px; border-radius:999px; margin-bottom:13px}
.future p:last-child{margin-bottom:0}

table{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:15.5px; display:block; overflow-x:auto}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--ink); font-weight:600; white-space:nowrap}

footer{border-top:1px solid var(--line); padding:36px 0 52px; font-size:14.5px; color:var(--muted)}
.frow{max-width:760px; margin:0 auto; padding:0 24px;
  display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap}
.flinks{display:flex; gap:24px; flex-wrap:wrap}
.flinks a{text-decoration:none; color:var(--body); font-weight:500}
.flinks a:hover{color:var(--ink)}

@media (max-width:620px){ .doc{padding:44px 0 62px} h2{margin-top:38px} }