:root {
  --ink:#0b1416;
  --panel:#101c1f;
  --teal:#12a594;
  --teal-dark:#0e8377;
  --text:#172422;
  --muted:#5b6b69;
  --bg:#f7faf9;
  --paper:#ffffff;
  --line:#dfe9e7;
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--text);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
a { color:var(--teal-dark); }
a:hover { color:var(--teal); }
header { background:var(--ink); color:#fff; padding:16px 24px; }
.header-inner {
  width:100%; max-width:1080px; margin:0 auto;
  display:flex; align-items:center; gap:24px;
}
.logo {
  color:#fff; display:flex; align-items:center; gap:9px;
  font:800 20px/1 sans-serif; letter-spacing:.03em; text-decoration:none;
}
.logo span { color:var(--teal); }
.back { margin-left:auto; color:#aebcbe; font-size:14px; font-weight:600; text-decoration:none; }
.back:hover { color:#fff; }
.hero { background:linear-gradient(150deg,var(--ink),#152528); color:#fff; padding:62px 24px 54px; }
.hero-inner { max-width:920px; margin:0 auto; }
.eyebrow {
  color:#79d3c8; font:800 12px/1.2 sans-serif;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px;
}
h1 { font-size:clamp(38px,6vw,58px); line-height:1.05; letter-spacing:-.035em; margin-bottom:16px; }
.hero p { max-width:720px; color:#c2cad2; font-size:18px; }
main { max-width:920px; margin:0 auto; padding:40px 24px 72px; }
.meta { color:var(--muted); font-size:14px; margin-bottom:30px; }
.toc {
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:22px 24px; margin-bottom:36px;
}
.toc strong { display:block; color:var(--ink); margin-bottom:8px; }
.toc ol { margin:0; padding-left:22px; columns:2; column-gap:36px; }
.toc li { padding:3px 0; break-inside:avoid; }
.toc a { color:var(--muted); text-decoration:none; }
.toc a:hover { color:var(--teal-dark); text-decoration:underline; }
article { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:38px 42px; }
article section + section { border-top:1px solid var(--line); margin-top:34px; padding-top:34px; }
h2 { color:var(--ink); font-size:25px; line-height:1.25; margin-bottom:12px; }
h3 { color:var(--ink); font-size:18px; line-height:1.35; margin:22px 0 8px; }
p + p { margin-top:12px; }
ul { padding-left:22px; margin:12px 0; }
li + li { margin-top:7px; }
.callout { background:#edf8f6; border-left:4px solid var(--teal); border-radius:6px; padding:16px 18px; margin:18px 0; }
.contact { background:var(--panel); color:#dce6e5; border-radius:10px; padding:20px 22px; margin-top:18px; }
.contact strong { color:#fff; }
.contact a { color:#79d3c8; }
footer { background:var(--ink); color:#7e8a95; text-align:center; padding:28px 20px; font-size:13px; }
footer b { color:#fff; }
footer .links { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-top:9px; }
footer a { color:#aebcbe; }
footer a:hover { color:#fff; }
@media (max-width:640px) {
  header { padding:12px 14px; }
  .logo { font-size:17px; gap:6px; }
  .back { font-size:13px; }
  .hero { padding:48px 18px 42px; }
  .hero p { font-size:16px; }
  main { padding:28px 16px 52px; }
  .toc ol { columns:1; }
  article { padding:26px 20px; border-radius:10px; }
  h2 { font-size:22px; }
}