:root {
  color-scheme: light dark;
  --canvas: #fbfcf8;
  --ink: #111b16;
  --muted: #44564c;
  --green: #285f45;
  --green-deep: #174531;
  --leaf: #d5e6d4;
  --sage: #eaf1df;
  --line: #dce6de;
  --card: #fff;
  --cream: #f9f8ee;
  --focus: #b36f18;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); line-height: 1.65; }
a { color: var(--green); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .13em; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--leaf); color: var(--ink); }
.skip-link { position: absolute; top: -80px; left: 1rem; z-index: 10; background: var(--ink); color: var(--card); padding: .55rem .85rem; border-radius: .7rem; }
.skip-link:focus { top: 1rem; }

.site-header { max-width: 1160px; margin: auto; padding: 1.35rem clamp(1.2rem, 4vw, 3rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 800; letter-spacing: -.035em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 38% 44% 38% 44%; color: #fff; background: var(--green); box-shadow: 0 6px 16px #285f4524; transform: rotate(-7deg); }
.brand-mark svg { width: 1.28rem; transform: rotate(7deg); }
.site-nav { display: flex; flex-wrap: wrap; gap: .35rem; }
.site-nav a { padding: .46rem .8rem; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 700; }
.site-nav a[aria-current="page"] { background: var(--sage); color: var(--green-deep); }
.site-nav a:hover { background: var(--leaf); color: var(--ink); }

.hero { position: relative; overflow: hidden; isolation: isolate; margin: 0 clamp(.7rem, 2vw, 1.4rem); border: 1px solid var(--line); border-radius: 2.1rem; background: radial-gradient(circle at 88% 24%, #dfeddb 0, transparent 34%), radial-gradient(circle at 4% 115%, #f1eacb 0, transparent 42%), linear-gradient(125deg, #f7faef, #eaf2e6 70%, #e0eddd); }
.hero:after { content: ""; position: absolute; z-index: -1; right: -8%; top: -73%; width: 65%; aspect-ratio: 1; border: 1px solid #285f4530; border-radius: 50%; box-shadow: 0 0 0 56px #285f4509, 0 0 0 112px #285f4507, 0 0 0 168px #285f4505; }
.hero-inner { max-width: 1080px; margin: auto; padding: clamp(3rem, 7vw, 6.2rem) clamp(1.4rem, 5vw, 4rem); }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; text-transform: uppercase; letter-spacing: .19em; font-size: .72rem; font-weight: 850; color: var(--green); }
.eyebrow:before { content: ""; width: 1.55rem; height: 1px; background: currentColor; }
h1 { max-width: 13ch; margin: .8rem 0 1rem; font-size: clamp(3.25rem, 8vw, 6.8rem); line-height: .99; letter-spacing: -.075em; font-weight: 800; }
.hero-lede { max-width: 58ch; margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--muted); }
.hero-meta { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; }
.meta-pill { display: inline-flex; align-items: center; padding: .43rem .75rem; background: #ffffffa9; border: 1px solid #ffffffb8; border-radius: 999px; font-size: .78rem; font-weight: 750; color: var(--green-deep); }

.page-grid { max-width: 1160px; margin: auto; padding: clamp(2rem, 5vw, 4.5rem) clamp(1.2rem, 4vw, 3rem) 5rem; display: grid; grid-template-columns: minmax(185px, 240px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.toc { position: sticky; top: 1.5rem; border-left: 1px solid var(--line); padding: .2rem 0 .2rem 1rem; }
.toc p { margin: 0 0 .8rem; color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .15em; }
.toc a { display: block; padding: .34rem 0; color: var(--muted); text-decoration: none; font-size: .88rem; line-height: 1.4; }
.toc a:hover { color: var(--green); }
main { min-width: 0; }
.intro-card, .callout { padding: clamp(1.3rem, 3vw, 2rem); border-radius: 1.5rem; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 38px #173b2010; }
.intro-card { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.intro-icon { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 1rem; background: var(--sage); color: var(--green); }
.intro-icon svg { width: 1.65rem; }
.intro-card h2 { margin: .05rem 0 .45rem; font-size: 1.35rem; line-height: 1.2; }
.intro-card p { margin: 0; color: var(--muted); }
.document-section { padding: 2.3rem 0 2.2rem; border-bottom: 1px solid var(--line); scroll-margin-top: 2rem; }
.section-num { display: block; margin-bottom: .65rem; color: var(--green); font-weight: 850; font-size: .75rem; letter-spacing: .15em; }
.document-section h2 { margin: 0 0 1rem; font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.18; letter-spacing: -.045em; }
.document-section h3 { margin: 1.6rem 0 .45rem; font-size: 1.08rem; }
.document-section p { margin: .75rem 0; color: var(--muted); }
.document-section ul { color: var(--muted); padding-left: 1.4rem; }
.document-section li { padding-left: .2rem; margin: .35rem 0; }
.document-section strong { color: var(--ink); }
.callout { background: var(--cream); box-shadow: none; margin: 1.3rem 0; }
.callout h3 { margin: 0 0 .45rem; }
.callout p { margin: 0; }
.contact-card { margin-top: 2.2rem; padding: 1.65rem; border-radius: 1.4rem; background: var(--green-deep); color: #fff; }
.contact-card h2 { margin: 0 0 .35rem; font-size: 1.5rem; letter-spacing: -.04em; }
.contact-card p { margin: 0 0 1rem; color: #e1eee6; }
.contact-card a { color: #fff; font-weight: 750; overflow-wrap: anywhere; }
.site-footer { max-width: 1160px; margin: auto; padding: 1.5rem clamp(1.2rem, 4vw, 3rem) 2.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.5rem; color: var(--muted); font-size: .82rem; }
.site-footer a { color: var(--muted); }

@media (max-width: 740px) {
  .page-grid { display: block; }
  .toc { position: static; border-left: 0; border-bottom: 1px solid var(--line); padding: 0 0 1.25rem; margin-bottom: 2rem; }
  .toc div { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .15rem; }
  .toc a { flex: 0 0 auto; padding: .44rem .7rem; border-radius: 999px; background: var(--sage); color: var(--green-deep); }
  .hero { border-radius: 1.35rem; }
  .hero:after { right: -50%; top: -20%; width: 95%; }
}
@media (max-width: 480px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .intro-card { grid-template-columns: 1fr; }
}
@media (prefers-color-scheme: dark) {
  :root { --canvas: #09120e; --ink: #f1f8f3; --muted: #b5c8bc; --green: #78d6a9; --green-deep: #aee5c4; --leaf: #203129; --sage: #17241c; --line: #33483c; --card: #142019; --cream: #171a15; --focus: #ffd27a; }
  .brand-mark { background: #285f45; }
  .hero { background: radial-gradient(circle at 88% 24%, #234633 0, transparent 34%), radial-gradient(circle at 4% 115%, #453e2a 0, transparent 42%), linear-gradient(125deg, #142119, #1a2a21 70%, #17241c); }
  .hero:after { border-color: #78d6a933; box-shadow: 0 0 0 56px #78d6a909, 0 0 0 112px #78d6a907, 0 0 0 168px #78d6a905; }
  .meta-pill { background: #142019bc; border-color: #33483c; color: var(--green); }
  .intro-card { box-shadow: none; }
  .contact-card { background: #203b2b; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  :root { color-scheme: light; --canvas: #fff; --ink: #111; --muted: #333; --green: #285f45; --line: #ccc; --card: #fff; --cream: #fff; }
  body { background: #fff; }
  .site-nav, .toc, .skip-link { display: none; }
  .hero { border: 0; margin: 0; background: none; }
  .hero:after { display: none; }
  .hero-inner { padding: 1rem 0; }
  h1 { font-size: 3rem; }
  .page-grid { display: block; padding-top: 1rem; }
  .intro-card, .callout { box-shadow: none; break-inside: avoid; }
  .document-section { break-inside: avoid; }
  a { color: #111; }
}