@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:800;font-display:swap;src:url(/fonts/poppins-800.woff2) format("woff2")}
:root{--primary:#ff6a3e;--head:#1a1a1a;--body:#4e4b66;--muted:#8b8799;--cream:#fffcf3;--white:#fff;--line:#efe4de}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--body);font-family:Poppins,system-ui,-apple-system,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
header{padding:20px 24px;border-bottom:1px solid var(--line);background:var(--white)}
.brand{font-weight:800;font-size:22px;color:var(--head);text-decoration:none;letter-spacing:-.03em}
.brand span{color:var(--primary)}
main{max-width:720px;margin:0 auto;padding:48px 24px 64px}
.topper{text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700;color:var(--primary);margin:0 0 10px}
h1{font-weight:800;color:var(--head);font-size:clamp(28px,4.6vw,40px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
h2{font-weight:700;color:var(--head);font-size:22px;margin:34px 0 10px}
h3{font-weight:700;color:var(--head);font-size:17px;margin:22px 0 6px}
p{margin:0 0 16px}
a{color:var(--primary);text-underline-offset:2px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin:6px 0}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;background:#f4ece7;padding:1px 5px;border-radius:5px}
pre{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:14px 16px;overflow-x:auto}
pre code{background:none;padding:0}
.lead{font-size:18px;color:var(--body)}
.cta{display:inline-block;font-weight:700;padding:13px 26px;border-radius:8px;text-decoration:none;color:var(--head);
  background:linear-gradient(to right,var(--head) 50%,var(--primary) 50%);background-size:200% 100%;background-position:right bottom;transition:background-position .35s,color .35s;margin:6px 0}
.cta:hover{background-position:left bottom;color:var(--white)}
.card{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin:22px 0;box-shadow:0 6px 24px rgba(26,26,26,.06)}
.related{border-top:1px solid var(--line);margin-top:44px;padding-top:18px}
.related h2{font-size:16px;margin:0 0 8px}
.related a{display:block;margin:6px 0}
footer{border-top:1px solid var(--line);background:var(--white);padding:22px 24px;text-align:center;font-size:12.5px;color:var(--muted)}
footer a{color:var(--body)}
