:root{
  --primary:#D4620A;
  --navy:#1B2A4A;
  --bg:#F6F4F0;
  --panel:#fff;
  --text:#1B2A4A;
  --muted:rgba(27,42,74,0.68);
  --line:rgba(27,42,74,0.12);
  --font-display:'Cabinet Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'General Sans',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary)}
.g-top{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0.85rem 1.4rem;
  background:rgba(246,244,240,0.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.g-brand{display:flex;align-items:center;gap:0.65rem;text-decoration:none;color:var(--navy)}
.g-brand img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.g-brand span{font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:0.08em}
.g-brand small{display:block;font-family:var(--font-body);font-weight:600;font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(27,42,74,0.55)}
.g-home{
  color:var(--navy);text-decoration:none;font-size:13px;font-weight:700;
  border:1px solid var(--line);border-radius:999px;padding:0.4rem 0.8rem;background:#fff;
}
.g-home:hover{border-color:var(--primary);color:var(--primary)}
.g-wrap{max-width:1080px;margin:0 auto;padding:2.2rem 1.35rem 4rem}
.g-kicker{
  margin:0 0 0.55rem;font-size:12px;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--primary);
}
h1{
  margin:0 0 0.8rem;font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,4vw,3.1rem);line-height:1.05;letter-spacing:-0.03em;
}
.lede{margin:0 0 1.4rem;max-width:42rem;font-size:1.08rem;color:var(--muted)}
.layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:2.2rem;align-items:start}
.toc{
  position:sticky;top:84px;
  padding:0.9rem 0.95rem;background:#fff;border:1px solid var(--line);border-radius:14px;
}
.toc strong{display:block;margin-bottom:0.45rem;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(27,42,74,0.5)}
.toc a{display:block;padding:0.28rem 0;color:var(--navy);text-decoration:none;font-size:13.5px;font-weight:600}
.toc a:hover{color:var(--primary)}
h2{
  margin:2.1rem 0 0.55rem;font-family:var(--font-display);font-weight:800;
  font-size:1.55rem;letter-spacing:-0.02em;line-height:1.15;
}
h3{margin:1.25rem 0 0.35rem;font-family:var(--font-display);font-size:1.12rem;letter-spacing:-0.01em}
p{margin:0 0 0.8rem}
ul,ol{margin:0 0 0.9rem;padding-left:1.15rem}
li{margin:0.28rem 0}
.steps{list-style:none;padding:0;margin:0 0 1rem;counter-reset:step}
.steps li{
  position:relative;margin:0 0 0.7rem;padding:0.85rem 0.95rem 0.85rem 3.1rem;
  background:#fff;border:1px solid var(--line);border-radius:12px;
}
.steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0.8rem;top:0.85rem;
  width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:800;
  font-size:13px;display:flex;align-items:center;justify-content:center;
}
.callout{
  margin:1rem 0 1.15rem;padding:0.9rem 1rem;border-radius:12px;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--navy);
}
.callout.tip{border-left-color:var(--primary);background:#fffaf6}
.callout .label{
  display:block;margin-bottom:0.2rem;font-size:11px;font-weight:800;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--primary);
}
.callout.note .label{color:var(--navy)}
figure{margin:1rem 0 1.2rem}
figure img{
  display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--line);background:#fff;
}
figcaption{margin-top:0.4rem;font-size:13px;color:rgba(27,42,74,0.55)}
.related{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem;margin-top:0.4rem}
.related a{
  display:block;padding:0.8rem 0.9rem;background:#fff;border:1px solid var(--line);
  border-radius:12px;text-decoration:none;color:var(--navy);font-weight:700;
}
.related a span{display:block;margin-top:0.15rem;font-weight:500;font-size:13px;color:var(--muted)}
.related a:hover{border-color:var(--primary)}
.g-foot{
  margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:13px;color:rgba(27,42,74,0.55);
}
.g-foot a{color:var(--navy);font-weight:700;text-decoration:none}
.g-foot a:hover{color:var(--primary)}
.cards{display:grid;grid-template-columns:1fr;gap:0.75rem;margin-top:1.2rem}
.card{
  display:block;padding:1rem 1.05rem;background:#fff;border:1px solid var(--line);
  border-radius:14px;text-decoration:none;color:inherit;
}
.card:hover{border-color:var(--primary)}
.card strong{display:block;font-family:var(--font-display);font-size:1.2rem;letter-spacing:-0.02em}
.card span{display:block;margin-top:0.25rem;color:var(--muted)}
@media(max-width:860px){
  .layout{grid-template-columns:1fr}
  .toc{position:static}
  .related{grid-template-columns:1fr}
}