/* TreePro — field manual. Bone paper, black ink, one green, one red.
   Rules do the work. No shadows, no gradients, no rounded pills. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --paper:#FBFAF7; --paper-2:#F3F1EA; --ink:#12140F; --ink-2:#3C4239;
  --mut:#6E766A; --line:#D9D6CB; --line-2:#BDB9AB;
  --grn:#1C6B3C; --grn-lt:#3DBE6E; --red:#B4341C; --amb:#A8720C;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);
  font:17px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;font-feature-settings:"kern","liga"}
.w{max-width:1080px;margin:0 auto;padding:0 28px}
.w-n{max-width:760px;margin:0 auto;padding:0 28px}
a{color:inherit}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:500}

/* ── chrome ───────────────────────────────────────────── */
.bar{background:var(--ink);color:var(--paper);font-size:12.5px;padding:7px 0}
.bar .w{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.bar b{color:var(--grn-lt);font-weight:600}
nav{border-bottom:1.5px solid var(--ink);position:sticky;top:0;background:var(--paper);z-index:20}
nav .w{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand svg{width:30px;height:30px;color:var(--ink)}
.brand span{font-size:20px;font-weight:700;letter-spacing:-.035em}
.nl{display:flex;gap:22px;align-items:center}
.nl a{color:var(--ink-2);text-decoration:none;font-size:14.5px;white-space:nowrap}
.nl a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.nl a.cur{color:var(--ink);font-weight:600}
.btn{background:var(--ink);color:var(--paper);padding:11px 20px;text-decoration:none;
  font-weight:600;font-size:15px;display:inline-block;border:1.5px solid var(--ink)}
.btn:hover{background:var(--grn);border-color:var(--grn)}
.btn-o{background:transparent;color:var(--ink);border:1.5px solid var(--ink);
  padding:11px 20px;text-decoration:none;font-weight:600;font-size:15px;display:inline-block}
.btn-o:hover{background:var(--ink);color:var(--paper)}
@media(max-width:860px){.nl a:not(.btn){display:none}}

/* ── type ─────────────────────────────────────────────── */
h1{font-size:clamp(38px,6.4vw,66px);line-height:1.02;letter-spacing:-.04em;font-weight:700}
h2{font-size:clamp(27px,3.6vw,38px);line-height:1.12;letter-spacing:-.03em;font-weight:700}
h3{font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:700}
h4{font-size:17px;font-weight:700;letter-spacing:-.01em}
p{margin-bottom:18px}
.big{font-size:21px;line-height:1.5;color:var(--ink-2)}
.lede{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:60ch}
.small{font-size:14.5px;color:var(--mut);line-height:1.55}
em.g{font-style:normal;color:var(--grn)}
strong{font-weight:700}

/* ── sections ─────────────────────────────────────────── */
section{padding:74px 0;border-bottom:1px solid var(--line)}
section.tight{padding:52px 0}
section.dark{background:var(--ink);color:var(--paper);border-bottom:0}
section.dark h2,section.dark h3{color:var(--paper)}
section.dark .lede,section.dark .big{color:#B6BCB0}
section.dark .mono{color:var(--grn-lt)}
section.tone{background:var(--paper-2)}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--mut);margin-bottom:22px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line-2)}
.num{font-family:ui-monospace,Menlo,monospace;color:var(--grn);font-weight:600}

/* ── hero ─────────────────────────────────────────────── */
.hero{padding:86px 0 70px}
.hero h1{max-width:16ch}
.hero .lede{margin:26px 0 34px;font-size:20px}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta .small{width:100%;margin-top:8px}

/* ── rule lists / specimen tables ─────────────────────── */
.spec{width:100%;border-collapse:collapse;margin-top:26px;font-size:15.5px}
.spec th{text-align:left;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mut);font-weight:500;
  padding:0 14px 10px 0;border-bottom:1.5px solid var(--ink)}
.spec td{padding:15px 14px 15px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec td:first-child{font-weight:650;width:30%}
.spec .mut{color:var(--mut)}

.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:38px}
.cols-2{display:grid;grid-template-columns:repeat(2,1fr);gap:46px;margin-top:34px}
.col h3{margin-bottom:9px}
.col p{color:var(--ink-2);font-size:15.5px;margin-bottom:0}
.col .mono{color:var(--grn);margin-bottom:13px;display:block}
@media(max-width:820px){.cols,.cols-2{grid-template-columns:1fr;gap:30px}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:34px}}

/* ── numbered steps ───────────────────────────────────── */
.steps{margin-top:36px;border-top:1.5px solid var(--ink)}
.step{display:grid;grid-template-columns:62px 1fr;gap:22px;padding:26px 0;
  border-bottom:1px solid var(--line)}
.step .n{font-family:ui-monospace,Menlo,monospace;font-size:26px;font-weight:600;
  color:var(--line-2);line-height:1;padding-top:4px}
.step h3{margin-bottom:8px}
.step p{color:var(--ink-2);margin-bottom:0;font-size:16px}
.step .aside{margin-top:12px;padding-left:15px;border-left:2px solid var(--grn);
  font-size:14.5px;color:var(--mut)}
@media(max-width:620px){.step{grid-template-columns:38px 1fr;gap:14px}.step .n{font-size:19px}}

/* ── callouts ─────────────────────────────────────────── */
.note{border:1.5px solid var(--ink);padding:24px 26px;margin:34px 0}
.note .mono{color:var(--grn);display:block;margin-bottom:11px}
.note p:last-child{margin-bottom:0}
.warn{border-left:3px solid var(--red);background:var(--paper-2);padding:18px 22px;margin:28px 0}
.warn .mono{color:var(--red);display:block;margin-bottom:8px}
.warn p:last-child{margin-bottom:0}

/* ── plain lists ──────────────────────────────────────── */
ul.tick{list-style:none;margin:22px 0}
ul.tick li{padding:11px 0 11px 30px;position:relative;border-bottom:1px solid var(--line);font-size:16px}
ul.tick li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:9px;
  border:1.5px solid var(--grn);background:var(--grn)}
ul.cross li::before{background:transparent;border-color:var(--red)}
ul.plain{list-style:none;margin:18px 0}
ul.plain li{padding:7px 0 7px 20px;position:relative;color:var(--ink-2);font-size:16px}
ul.plain li::before{content:"—";position:absolute;left:0;color:var(--line-2)}

/* ── footer ───────────────────────────────────────────── */
footer{background:var(--ink);color:#9AA294;padding:58px 0 34px;font-size:14.5px}
footer a{color:#CFD4C9;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:36px;
  border-bottom:1px solid #2A2E26}
.fgrid svg{width:34px;height:34px;color:var(--grn-lt);margin-bottom:14px}
.fgrid h5{color:var(--paper);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-family:ui-monospace,Menlo,monospace;font-weight:500;margin-bottom:14px}
.fgrid li{list-style:none;padding:5px 0}
.fbot{padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px}
@media(max-width:960px){.fgrid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:600px){.fgrid{grid-template-columns:1fr;gap:26px}}

/* ── misc ─────────────────────────────────────────────── */
.kicker{font-size:15px;color:var(--mut);margin-top:14px}
.hr-h{height:1.5px;background:var(--ink);margin:0}
figure{margin:34px 0}
figcaption{font-size:14px;color:var(--mut);margin-top:12px;padding-left:15px;
  border-left:2px solid var(--line-2)}
.diag{width:100%;height:auto;display:block;border:1px solid var(--line);background:#fff}

/* ── fixes found in review ────────────────────────────── */
/* .nl a (0,2,0) was beating .btn (0,1,0), so the nav CTA rendered
   dark ink on a near-black ground. Raise the button inside the nav. */
.nl a.btn{color:var(--paper)}
.nl a.btn:hover{color:var(--paper);text-decoration:none}
/* Two-column spec tables were wrapping the label column to three lines. */
.spec td:first-child{width:42%}
.split .spec td:first-child{width:46%}
/* Checklist markers on the dark ground need to carry, not recede. */
section.dark ul.tick li{border-bottom-color:#2A2E26}
section.dark ul.tick li::before{border-color:var(--grn-lt);background:var(--grn-lt)}
section.dark ul.cross li::before{background:transparent;border-color:#E0674B}
section.dark ul.tick li strong{color:var(--paper)}
/* Long right-hand lists were centring against a short left column. */
section.dark .split{align-items:start}

/* ── plates & product shots ───────────────────────────── */
.plate{margin:40px 0}
.plate img{width:100%;height:auto;display:block;border:1.5px solid var(--ink);background:#fff}
.plate figcaption{font-size:14px;color:var(--mut);margin-top:12px;padding-left:15px;
  border-left:2px solid var(--line-2);max-width:66ch}
section.dark .plate img{border-color:#2A2E26}
section.dark .plate figcaption{color:#8A9382;border-left-color:#2A2E26}

.shot{margin:38px 0}
.shot .chrome{border:1.5px solid var(--ink);background:var(--ink);padding:9px 12px;
  display:flex;align-items:center;gap:7px}
.shot .chrome i{width:9px;height:9px;border-radius:50%;background:#4A5147;font-style:normal}
.shot .chrome span{margin-left:8px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;
  color:#8A9382;letter-spacing:.09em}
.shot img{width:100%;height:auto;display:block;border:1.5px solid var(--ink);border-top:0}
.shot figcaption{font-size:14px;color:var(--mut);margin-top:12px;padding-left:15px;
  border-left:2px solid var(--line-2);max-width:66ch}
.shots-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:34px}
@media(max-width:860px){.shots-2{grid-template-columns:1fr}}

/* The narrow-column hero sat on both its own bottom padding and the next
   section's top padding, leaving a dead band on every field-guide page. */
.hero{padding-bottom:44px}
.hero + section{padding-top:56px}
@media(max-width:1080px){.nl{gap:16px}.nl a{font-size:14px}}
@media(max-width:1000px){.nl a[data-p="office"],.nl a[data-p="site"]{display:none}}