@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@600;700&family=Public+Sans:wght@400;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--ink:#1F2A26;--paper:#FAFAF7;--spruce:#1E4D40;--spruce-dk:#143A30;--manila:#E8D9B5;--manila-soft:#F2EAD6;--rule:#D8D5CC;}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Public Sans',system-ui,sans-serif;font-size:1.0625rem;line-height:1.65}
header{border-bottom:2px solid var(--rule)}
.hwrap{max-width:46rem;margin-inline:auto;padding:0.9rem 1.25rem;display:flex;flex-wrap:wrap;gap:0.5rem 1.4rem;align-items:baseline}
.brand{font-family:'Zilla Slab',serif;font-weight:700;font-size:1.25rem;color:var(--spruce-dk);text-decoration:none;margin-right:auto}
nav a{font-size:0.95rem;font-weight:600;color:var(--ink);text-decoration:none}
nav a:hover{color:var(--spruce);text-decoration:underline;text-decoration-color:var(--manila)}
nav a[aria-current]{color:var(--spruce);border-bottom:3px solid var(--manila)}
main{max-width:46rem;margin-inline:auto;padding:0.5rem 1.25rem 3rem}
h1,h2,h3{font-family:'Zilla Slab',serif;color:var(--spruce-dk);line-height:1.15;letter-spacing:-0.01em}
h1{font-size:clamp(1.9rem,5vw,2.9rem);font-weight:700;margin-top:1.6rem}
h2{font-size:clamp(1.35rem,3.5vw,1.7rem);font-weight:600;margin-top:2.75rem;position:relative;padding-top:1.1rem}
h2::before{content:"";position:absolute;top:0;left:0;width:3.5rem;height:0.55rem;background:var(--manila);border-radius:4px 4px 0 0;border:1px solid #DECBA0;border-bottom:none}
p{margin-block:0.9rem}
strong{color:var(--spruce-dk)} em{color:#4A544F}
a{color:var(--spruce);text-decoration-color:var(--manila);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--spruce-dk);text-decoration-color:var(--spruce)}
a:focus-visible{outline:3px solid var(--spruce);outline-offset:2px;border-radius:2px}
.ladder{margin:1.75rem 0;padding:1.25rem 1.25rem 1.25rem 1.5rem;background:#fff;border:1px solid var(--rule);border-left:4px solid var(--spruce);border-radius:0 6px 6px 0}
.ladder-step{display:grid;grid-template-columns:7.5rem 1fr;gap:0.9rem;align-items:baseline;padding:0.55rem 0;border-bottom:1px dashed var(--rule)}
.ladder-step:last-child{border-bottom:none}
.ladder-t{font-family:'IBM Plex Mono',monospace;font-size:0.85rem;font-weight:500;color:var(--spruce);text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap}
.ladder-step div{margin:0}
.ladder-note{margin-top:0.8rem;font-size:0.9rem;color:#4A544F;font-style:italic}
@media (max-width:480px){.ladder-step{grid-template-columns:1fr;gap:0.15rem}}
.panel{background:var(--manila-soft);border:1px solid #E3D7B8;border-radius:6px;padding:1rem 1.25rem;margin:1.5rem 0}
a.cta{display:inline-block;background:var(--spruce);color:#fff;font-weight:600;padding:0.7rem 1.3rem;border-radius:6px;text-decoration:none}
a.cta:hover{background:var(--spruce-dk)}
footer{border-top:2px solid var(--rule);margin-top:2rem}
.fwrap{max-width:46rem;margin-inline:auto;padding:1.1rem 1.25rem;font-size:0.9rem;color:#5A625D}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}a.cta-sm{display:inline-block;background:var(--spruce);color:#fff;font-weight:600;font-size:0.9rem;padding:0.45rem 0.9rem;border-radius:6px;text-decoration:none}
a.cta-sm:hover{background:var(--spruce-dk)}
.steps{margin:1.75rem 0;display:grid;gap:0.9rem}
.step{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:1rem 1.15rem;display:grid;grid-template-columns:2.4rem 1fr;gap:0.9rem;align-items:start}
.step-n{font-family:'IBM Plex Mono',monospace;font-weight:500;color:var(--spruce);font-size:1.05rem;border:2px solid var(--manila);border-radius:50%;width:2.1rem;height:2.1rem;display:grid;place-items:center}
.step p{margin:0.15rem 0 0}
.quote{margin:2rem 0;padding:1.1rem 1.35rem;background:var(--manila-soft);border-left:4px solid var(--manila);border-radius:0 6px 6px 0;font-style:italic}
.quote cite{display:block;margin-top:0.5rem;font-style:normal;font-size:0.9rem;color:#5A625D}
.portrait{float:right;width:9.5rem;aspect-ratio:4/5;margin:0.4rem 0 0.8rem 1.2rem;background:var(--manila-soft);border:1px solid var(--rule);border-radius:6px;display:grid;place-items:center;text-align:center;font-size:0.8rem;color:#5A625D;padding:0.5rem}
@media (max-width:480px){.portrait{float:none;width:100%;aspect-ratio:16/9;margin:1rem 0}}
.faq dt{font-weight:600;color:var(--spruce-dk);margin-top:1.4rem;font-family:'Zilla Slab',serif;font-size:1.1rem}
.faq dd{margin:0.4rem 0 0}


@media (max-width:560px){
.hwrap{display:block;padding:0.8rem 1.25rem}
.brand{display:inline-block;margin:0 0 0.45rem}
nav{display:flex;flex-wrap:wrap;gap:0.35rem 1.1rem;align-items:center}
nav a.cta-sm{margin-left:auto}
}

/* v4 header: brand + CTA top row, single scrolling nav row below */
.hwrap{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem;padding:0.8rem 1.25rem}
.brand{margin:0;margin-right:auto}
.hwrap > nav{flex-basis:100%;display:flex;flex-wrap:nowrap;gap:1.25rem;overflow-x:auto;white-space:nowrap;padding-bottom:0.2rem;scrollbar-width:none}
.hwrap > nav::-webkit-scrollbar{display:none}
nav a.cta-sm{display:none}
a.cta-top{background:var(--spruce);color:#fff;font-weight:600;font-size:0.9rem;padding:0.45rem 0.9rem;border-radius:6px;text-decoration:none;flex-shrink:0}
a.cta-top:hover{background:var(--spruce-dk)}
nav a[aria-current]{padding-bottom:2px}
@media (min-width:700px){
.hwrap > nav{flex-basis:auto;overflow:visible}
.hwrap{flex-wrap:nowrap}
}

/* v5 topnav */
.topnav{position:sticky;top:0;background:rgba(250,250,247,0.92);backdrop-filter:saturate(180%) blur(8px);-webkit-backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--rule);z-index:100}
.topnav-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1.25rem;max-width:46rem;margin:0 auto}
.topnav-brand{display:flex;align-items:center;gap:0.6rem;text-decoration:none}
.topnav-logo{width:34px;height:34px;border-radius:8px}
.topnav-name{font-family:'Zilla Slab',serif;font-weight:700;font-size:1.1rem;color:var(--spruce-dk);white-space:nowrap}
.topnav-links{list-style:none;display:flex;gap:0.25rem;align-items:center;margin:0;padding:0}
.topnav-links a{display:inline-block;padding:0.5rem 0.8rem;font-size:0.93rem;font-weight:600;color:var(--ink);text-decoration:none;border-radius:6px;transition:color .15s ease,background .15s ease}
.topnav-links a:hover{color:var(--spruce);background:var(--manila-soft)}
.topnav-links a[aria-current]{color:var(--spruce);border-bottom:3px solid var(--manila);border-radius:6px 6px 0 0}
.topnav-links a.topnav-cta{background:var(--spruce);color:#fff;margin-left:0.5rem;padding:0.55rem 1.1rem;border-radius:999px;border-bottom:none}
.topnav-links a.topnav-cta:hover{background:var(--spruce-dk);color:#fff}
.topnav-toggle{display:none;background:none;border:none;cursor:pointer;padding:0.5rem;flex-direction:column;gap:4px}
.topnav-toggle span{display:block;width:24px;height:2px;background:var(--spruce-dk);border-radius:2px}
@media (max-width:700px){
.topnav-toggle{display:flex}
.topnav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--rule);flex-direction:column;gap:0;padding:0.5rem 1rem 1rem}
.topnav.open .topnav-links{display:flex}
.topnav-links li{width:100%}
.topnav-links a{display:block;padding:0.85rem 0.5rem;border-bottom:1px solid var(--rule);border-radius:0}
.topnav-links a[aria-current]{border-bottom:1px solid var(--rule);border-left:4px solid var(--manila);padding-left:0.8rem}
.topnav-links li:last-child a{border-bottom:none}
.topnav-links a.topnav-cta{margin:0.75rem 0 0;text-align:center;border-radius:999px;border-bottom:none!important}
}