:root{--green:#23302B;--green-soft:#2f4038;--cream:#F7F4EE;--cream-deep:#EFEAE0;--gold:#B8863E;--gold-bright:#c99a4f;--ink:#23302B;--muted:#5c665f;--radius:18px;--maxw:1120px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.nav{position:sticky;top:0;z-index:10;background:rgba(247,244,238,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(35,48,43,.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.nav-logo{display:flex;align-items:center;gap:9px}
.nav-logo .mark{height:26px}.nav-logo .word{height:17px}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links .link{color:var(--green);font-weight:500;font-size:.95rem}
.nav-login{color:var(--green);font-weight:500;font-size:.95rem}
.btn{display:inline-block;border-radius:999px;padding:10px 18px;font-weight:600;font-size:.95rem;white-space:nowrap;transition:transform .1s ease}
.nav-login{white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--gold);color:#fff}
.btn-primary:hover{background:var(--gold-bright)}
main.doc{max-width:820px;margin:0 auto;padding:40px 24px 72px}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 4px}
.doc h1{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.15;color:var(--green);margin-bottom:18px}
.doc .lede{font-size:1.18rem;line-height:1.6;color:var(--green-soft);margin-bottom:14px}
.doc h2{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.4rem;color:var(--green);margin:38px 0 12px}
.doc p{margin:0 0 14px;color:#37423c}
.doc ul,.doc ol{margin:0 0 16px;padding-left:24px}
.doc li{margin-bottom:8px;color:#37423c}
.doc ol{counter-reset:step}
.doc .note{background:var(--cream-deep);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:12px 16px;font-size:.95rem;color:var(--green-soft)}
.doc .related{list-style:none;padding:0}
.doc .related li{margin-bottom:6px}
.doc-cta{margin-top:40px}
/* hub */
.hub .hub-head{margin-bottom:36px}
.hub .kicker{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:600;color:var(--gold);margin-bottom:10px}
.hub .lede{max-width:640px}
.hub-group{margin:0 0 34px}
.hub-group h2{margin:0 0 14px}
.doc .hub-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.hub-list a{display:block;background:#fff;border:1px solid rgba(35,48,43,.1);border-radius:14px;padding:16px 18px;transition:border-color .12s ease,transform .12s ease}
.hub-list a:hover{text-decoration:none;border-color:var(--gold);transform:translateY(-1px)}
.hub-q{display:block;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.08rem;color:var(--green);margin-bottom:3px}
.hub-d{display:block;font-size:.92rem;color:var(--muted);line-height:1.5}
footer{background:var(--green);color:#e9efe9;padding:48px 0}
footer .foot-inner{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
footer img{height:20px;opacity:.9}
footer .foot-links{display:flex;flex-wrap:wrap;gap:22px;font-size:.92rem}
footer .foot-links a{color:#cdd6cd}
footer .foot-links a:hover{color:#fff}
.foot-social{display:flex;gap:18px;margin-top:22px}
.foot-social a{color:#cdd6cd;display:inline-flex;align-items:center}
.foot-social a:hover{color:#fff;text-decoration:none}
footer .copy{color:#9aa79a;font-size:.85rem;margin-top:24px;border-top:1px solid rgba(255,255,255,.12);padding-top:20px}
@media(max-width:720px){
  .nav-links .link{display:none}
  .nav-logo{gap:7px}
  .nav-logo .mark{height:30px}
  .nav-logo .word{height:18px}
  /* mobile: drop "Create my site"; promote "Log in" to the single gold pill CTA */
  .nav-links .btn-primary{display:none}
  .nav-login{background:var(--gold);color:#fff;padding:9px 16px;border-radius:999px;font-size:.9rem}
  .nav-login:hover{color:#fff;background:var(--gold-bright);text-decoration:none}
}