*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#050607; --teal:#21D5C9; --off-white:#F2F4F5; --grey:#E4E6E8;
  --text:#1A1A1A; --muted:#6B7178; --white:#FFFFFF;
  --fh:'Space Grotesk',sans-serif; --fb:'Inter',sans-serif;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--fb);background:var(--off-white);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased}
header.doc-nav{background:var(--black);padding:22px 48px;display:flex;align-items:center;justify-content:space-between}
header.doc-nav img{height:36px;width:auto}
header.doc-nav a.back{font-size:.85rem;font-weight:500;letter-spacing:.03em;color:rgba(255,255,255,.75);text-decoration:none;transition:color .2s}
header.doc-nav a.back:hover{color:var(--teal)}
.doc-hero{background:var(--black);padding:40px 48px 80px;text-align:center}
.doc-hero h1{font-family:var(--fh);font-weight:700;color:var(--white);font-size:clamp(2.2rem,4.6vw,3.2rem);line-height:1.1;margin-bottom:14px}
.doc-hero p{color:rgba(255,255,255,.5);font-weight:300;font-size:.95rem}
.doc-wrap{max-width:820px;margin:-44px auto 0;background:var(--white);border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,.08);padding:64px 60px;position:relative}
.doc-wrap h2{font-family:var(--fh);font-weight:700;font-size:1.5rem;color:var(--text);margin:42px 0 14px;line-height:1.2}
.doc-wrap h2:first-of-type{margin-top:0}
.doc-wrap h3{font-size:1rem;font-weight:600;color:var(--text);margin:26px 0 8px}
.doc-wrap p{color:var(--muted);margin-bottom:14px;font-size:1rem}
.doc-wrap ul{margin:0 0 16px 22px;color:var(--muted)}
.doc-wrap li{margin-bottom:8px}
.doc-wrap a{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(31,214,200,.4);transition:border-color .2s}
.doc-wrap a:hover{border-color:var(--teal)}
.accent{width:48px;height:3px;background:linear-gradient(to right,var(--teal),transparent);border-radius:2px;margin-bottom:36px}
.doc-note{background:rgba(31,214,200,.06);border:1px solid rgba(31,214,200,.2);border-radius:12px;padding:18px 22px;margin:0 0 28px}
.doc-note p{margin-bottom:0;color:var(--text);font-size:.92rem}
footer.doc-foot{background:var(--black);margin-top:80px;padding:40px 48px;text-align:center}
footer.doc-foot p{color:rgba(255,255,255,.32);font-size:.78rem}
footer.doc-foot a{color:rgba(255,255,255,.55);text-decoration:none}
footer.doc-foot a:hover{color:var(--teal)}
@media(max-width:640px){
  header.doc-nav,.doc-hero{padding-left:24px;padding-right:24px}
  .doc-wrap{padding:40px 24px;border-radius:0;margin-top:-32px}
}
