:root {
  --ink:#171b18;
  --paper:#f3f2eb;
  --muted:#62675f;
  --line:#d9dcd1;
  --acid:#d8f26e;
  --dark:#1e2520}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit}
a:focus-visible,button:focus-visible {
  outline:3px solid #507a24;
  outline-offset:5px}
button:focus-visible {
  outline-offset:-5px}
.wrap {
  width:min(1320px,calc(100% - 96px));
  margin-inline:auto}
.skip {
  position:absolute;
  top:-100px;
  left:20px;
  padding:15px;
  background:var(--acid);
  z-index:10}
.skip:focus {
  top:10px}
.header {
  height:108px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:24px}
.brand {
  display:flex;
  align-items:center;
  gap:10px}
.brand svg {
  width:35px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.3;
  stroke-linecap:round}
.brand b {
  font-size:29px;
  letter-spacing:-1.5px}
.brand>span {
  font-size:9px;
  letter-spacing:1.5px;
  border-left:1px solid #bfc2b8;
  padding-left:14px;
  margin-left:7px;
  max-width:90px;
  line-height:1.6}
.header nav {
  display:flex;
  gap:30px;
  font-size:13px}
.header nav a:hover,.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px}
.header-cta {
  font-size:13px;
  font-weight:600;
  display:flex;
  gap:35px;
  border-bottom:1px solid var(--ink);
  padding-bottom:9px}
.hero {
  padding-top:65px}
.eyebrow,.section-label {
  font-size:11px;
  letter-spacing:1.8px;
  font-weight:600;
  text-transform:uppercase}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#648243;
  flex-shrink:0}
h1 {
  font-size:clamp(48px,6.9vw,100px);
  line-height:1.025;
  letter-spacing:-.065em;
  font-weight:500;
  margin:28px 0 25px}
h1>span {
  color:#78816d}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  margin-bottom:50px}
.hero-bottom p {
  font-size:18px;
  line-height:1.65;
  max-width:530px;
  color:#555e51;
  margin:0}
.button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:48px;
  padding:20px 23px;
  font-size:14px;
  font-weight:600;
  transition:transform .2s}
.button:hover {
  transform:translateY(-3px)}
.yellow {
  background:var(--acid)}
.button span {
  font-size:22px;
  font-weight:400}
.workspace-preview {
  border:1px solid #354238;
  border-radius:12px;
  background:#171f1a;
  color:#e4e9df;
  box-shadow:0 25px 50px -30px #1b281d70;
  overflow:hidden}
.window-bar {
  height:49px;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 22px;
  border-bottom:1px solid #384238;
  background:#202a23;
  font-size:10px;
  color:#a2b09e}
.mini-brand {
  font-weight:700;
  letter-spacing:1.5px;
  color:#d8f26e}
.window-bar i {
  font-style:normal;
  margin:0 10px;
  color:#6c7868}
.preview-label {
  margin-left:auto;
  font-size:8px;
  letter-spacing:1.5px}
.preview-body {
  display:grid;
  grid-template-columns:160px 1fr 245px;
  min-height:370px}
.preview-sidebar {
  border-right:1px solid #303c32;
  display:flex;
  flex-direction:column;
  padding:24px 12px;
  gap:6px;
  font-size:11px;
  color:#a1b09c}
.preview-sidebar>span:not(.sidebar-title) {
  padding:11px 12px}
.sidebar-title {
  font-size:8px;
  letter-spacing:1.7px;
  padding:0 12px 15px;
  color:#7d8d78}
.preview-sidebar .active {
  background:#303d2f;
  color:#e2f3c6;
  border-radius:4px}
.sidebar-bottom {
  margin-top:auto;
  font-size:8px}
.graph-panel {
  padding:25px 24px 18px;
  overflow:hidden}
.graph-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px}
.graph-top small,.evidence-panel>small {
  font-size:8px;
  letter-spacing:1.4px;
  color:#a7b29b}
.graph-top h2 {
  font-size:15px;
  font-weight:500;
  letter-spacing:-.4px;
  margin:9px 0}
.chip {
  border:1px solid #41523b;
  border-radius:20px;
  font-size:8px;
  padding:6px 9px;
  color:#c6ddad;
  white-space:nowrap}
.graph {
  position:relative;
  height:245px;
  background-image:radial-gradient(#8ba67c26 .7px,transparent .7px);
  background-size:16px 16px}
.graph svg {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  stroke:#617c52;
  stroke-width:1;
  fill:none}
.node {
  position:absolute;
  min-width:95px;
  padding:12px 14px;
  font-size:10px;
  border:1px solid #4d6040;
  border-radius:5px;
  background:#263123;
  box-shadow:0 5px 20px #0002;
  transform:translate(-50%,-50%)}
.node small {
  display:block;
  font-size:6px;
  letter-spacing:1.2px;
  color:#a4b095;
  margin-bottom:7px}
.n1 {
  left:19%;
  top:26%}
.n2 {
  left:49%;
  top:50%;
  background:#d8f26e;
  color:#283619;
  border:0}
.n2 small {
  color:#4a5a35}
.n3 {
  left:77%;
  top:18%}
.n4 {
  left:23%;
  top:83%}
.n5 {
  left:83%;
  top:80%}
.graph-caption {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:8px;
  color:#9dad95;
  border-top:1px solid #33402e;
  padding-top:13px}
.graph-caption>span:last-child {
  margin-left:auto}
.graph-caption i {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#a4c083;
  margin-right:4px}
.evidence-panel {
  padding:28px 23px;
  border-left:1px solid #303c32;
  background:#20291f}
.record-type {
  display:block;
  color:#c8df9c;
  font-size:8px;
  margin:26px 0 12px;
  letter-spacing:1px}
.evidence-panel h3 {
  font-size:20px;
  line-height:1.2;
  font-weight:500;
  margin:0 0 13px;
  letter-spacing:-.5px}
.evidence-panel p {
  font-size:10px;
  line-height:1.7;
  color:#a4b09b;
  margin:0 0 20px}
.evidence-detail {
  display:flex;
  justify-content:space-between;
  font-size:8px;
  padding:9px 0;
  border-top:1px solid #3c4735;
  color:#a4b09b}
.evidence-detail b {
  font-weight:400;
  color:#d8e6c3}
.source-link {
  font-size:10px;
  margin-top:22px;
  display:flex;
  justify-content:space-between}
.hero-footnote {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#74796e;
  margin-top:22px}
.hero-footnote>span:last-child {
  font-size:9px;
  letter-spacing:1.4px}
.intro {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  column-gap:100px;
  padding-block:110px;
  border-bottom:1px solid var(--line)}
.intro .section-label {
  grid-column:1/-1;
  margin-bottom:22px}
.intro h2,.section-heading h2,.principles h2,.deployment h2 {
  font-weight:500;
  font-size:clamp(35px,4vw,56px);
  line-height:1.1;
  letter-spacing:-.05em;
  margin:0}
.intro-copy p {
  font-size:18px;
  line-height:1.65;
  margin:0 0 20px;
  color:#535b50}
.intro-copy p+p {
  font-size:14px;
  color:var(--muted);
  margin-bottom:0}
.features {
  padding-block:100px 110px}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:60px;
  margin-bottom:48px}
.section-heading .section-label {
  margin-bottom:22px}
.section-heading>p {
  max-width:310px;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
  margin:0}
.lens-buttons {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid #c5cabc}
.lens-buttons button {
  background:transparent;
  border:0;
  border-bottom:3px solid transparent;
  padding:19px 5px 19px 0;
  text-align:left;
  display:flex;
  gap:15px;
  justify-content:space-between;
  color:#686f61;
  cursor:pointer;
  font-size:14px}
.lens-buttons button:not(:last-child) {
  margin-right:26px}
.lens-buttons button span {
  font-size:9px;
  color:#89907f}
.lens-buttons .selected {
  color:var(--ink);
  border-color:#657c47}
.lens-display {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#e9ecdf;
  min-height:350px}
.lens-copy {
  padding:52px 48px}
.lens-copy .section-label {
  font-size:9px;
  color:#66714f}
.lens-copy h3 {
  font-size:30px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-1px;
  margin:22px 0 17px}
.lens-copy p {
  max-width:380px;
  color:#58624e;
  font-size:14px;
  line-height:1.7}
.lens-note {
  display:block;
  font-size:10px;
  color:#5f6956;
  line-height:1.6;
  max-width:350px;
  margin-top:26px}
.lens-art {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:35px;
  background:repeating-linear-gradient(0deg,transparent,transparent 35px,#66824a0a 35px,#66824a0a 36px),repeating-linear-gradient(90deg,transparent,transparent 35px,#66824a0a 35px,#66824a0a 36px)}
.art-kicker {
  font-size:8px;
  letter-spacing:1.5px;
  color:#687354;
  margin-bottom:22px}
.paper {
  width:min(100%,300px);
  background:#fafbf4;
  border:1px solid #ccd3bc;
  box-shadow:13px 13px 0 #dfe4d0;
  padding:25px;
  transform:rotate(-3deg)}
.paper-top {
  display:flex;
  justify-content:space-between;
  color:#737e62;
  font-size:8px;
  letter-spacing:1px;
  margin-bottom:24px}
.paper-line {
  height:5px;
  background:#dce1d2;
  width:85%;
  margin-top:12px}
.paper-line.full {
  width:100%}
.paper-line.short {
  width:60%}
.paper-line.highlight {
  background:#c4dc82;
  height:13px;
  width:100%}
.paper-bottom {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #dce1d2;
  margin-top:28px;
  padding-top:15px;
  font-size:7px;
  color:#778265}
.art-caption {
  font-size:9px;
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:30px;
  color:#6a7658}
.art-caption .status-dot {
  width:5px;
  height:5px}
.principles {
  background:var(--dark);
  color:#edf1e4;
  padding:90px 0}
.principles .section-label {
  color:#a9ba95;
  margin-bottom:25px}
.principles h2 {
  max-width:600px}
.principle-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:55px;
  margin-top:65px}
.principle-grid article {
  border-top:1px solid #536048;
  padding-top:20px}
.principle-number {
  font-size:11px;
  color:#bedc80}
.principle-grid h3 {
  font-size:23px;
  font-weight:500;
  letter-spacing:-.7px;
  margin:28px 0 14px}
.principle-grid p {
  font-size:14px;
  line-height:1.8;
  color:#a7b29e;
  max-width:320px}
.deployment {
  padding-block:110px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px}
.deployment .section-label {
  margin-bottom:23px}
.deployment>div>p {
  font-size:15px;
  line-height:1.8;
  color:var(--muted);
  max-width:400px;
  margin-block:25px}
.text-link {
  font-size:13px;
  display:inline-flex;
  gap:38px;
  border-bottom:1px solid #6f775f;
  padding-bottom:9px}
.deployment-options article {
  display:flex;
  gap:23px;
  border-top:1px solid var(--line);
  padding:27px 0}
.deployment-icon {
  font-size:26px;
  color:#6b775b}
.deployment-options h3 {
  font-size:20px;
  font-weight:500;
  margin:0 0 9px;
  letter-spacing:-.5px}
.deployment-options p {
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 10px}
.deployment-options article div>span {
  font-size:10px;
  color:#6b775b}
.deployment-options .deployment-note {
  font-size:11px;
  line-height:1.7;
  margin:12px 0 0;
  border-top:1px solid var(--line);
  padding-top:20px}
.start {
  padding:50px 55px;
  background:var(--acid);
  margin-bottom:60px}
.start h2 {
  font-size:clamp(40px,5.4vw,76px);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.055em;
  margin:30px 0}
.start em {
  font-family:Georgia,serif;
  font-weight:400}
.start-bottom {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px}
.start-bottom p {
  max-width:480px;
  font-size:14px;
  line-height:1.8;
  margin:0;
  color:#42522c}
.dark {
  background:var(--ink);
  color:var(--paper)}
footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-block:32px 45px;
  font-size:11px;
  color:var(--muted);
  gap:25px}
.footer-brand {
  font-size:22px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-1px}
.footer-brand span {
  font-size:10px;
  font-weight:400;
  margin-left:12px;
  letter-spacing:0;
  color:var(--muted)}

@media(min-width:1600px) {
  .hero {
  padding-top:85px}
}
@media(max-width:1100px) {
  .wrap {
  width:calc(100% - 64px)}
.brand>span {
  display:none}
.preview-body {
  grid-template-columns:130px 1fr 205px}
.preview-sidebar {
  padding-inline:6px}
.evidence-panel {
  padding-inline:18px}
.graph-panel {
  padding-inline:18px}
.graph-top h2 {
  font-size:12px}
.chip {
  display:none}
.node {
  min-width:80px;
  padding:10px;
  font-size:8px}
.intro,.deployment {
  gap:50px}
.lens-copy {
  padding:35px}
.principle-grid {
  gap:30px}
.button {
  gap:25px}
}
@media(max-width:760px) {
  .wrap {
  width:calc(100% - 36px)}
.header {
  height:78px;
  gap:15px}
.header nav {
  gap:15px;
  font-size:11px}
.header nav a:nth-child(2) {
  display:none}
.header-cta {
  display:none}
.brand svg {
  width:27px}
.brand b {
  font-size:25px}
.hero {
  padding-top:38px}
.eyebrow {
  font-size:8px;
  letter-spacing:1.2px}
h1 {
  font-size:clamp(42px,8.9vw,65px);
  margin-top:25px}
.hero-bottom {
  display:block;
  margin-bottom:34px}
.hero-bottom p {
  font-size:15px;
  max-width:440px}
.button {
  padding:16px 19px;
  font-size:12px;
  gap:35px}
.hero-bottom .button {
  margin-top:24px}
.window-bar {
  padding:0 13px;
  gap:16px;
  font-size:8px;
  height:39px}
.preview-label {
  display:none}
.preview-body {
  grid-template-columns:1fr;
  min-height:0}
.preview-sidebar,.evidence-panel {
  display:none}
.graph-panel {
  padding:18px 15px}
.graph-top h2 {
  font-size:13px}
.graph {
  height:240px}
.graph-caption {
  font-size:7px}
.hero-footnote {
  font-size:9px}
.hero-footnote>span:last-child {
  display:none}
.intro {
  display:block;
  padding-block:65px}
.intro h2 {
  margin:25px 0}
.intro-copy p {
  font-size:16px}
.features {
  padding-block:65px}
.section-heading {
  display:block;
  margin-bottom:30px}
.section-heading>p {
  margin-top:22px;
  max-width:400px}
.lens-buttons {
  grid-template-columns:repeat(2,1fr)}
.lens-buttons button {
  font-size:12px;
  padding-block:16px}
.lens-buttons button:not(:last-child) {
  margin-right:16px}
.lens-display {
  display:block}
.lens-copy {
  padding:30px 24px}
.lens-copy h3 {
  font-size:28px}
.lens-art {
  padding:20px 24px 35px}
.art-kicker {
  display:none}
.paper {
  width:230px;
  padding:20px}
.principles {
  padding-block:65px}
.principle-grid {
  grid-template-columns:1fr;
  gap:25px;
  margin-top:35px}
.principle-grid h3 {
  margin-top:18px}
.principle-grid p {
  max-width:100%;
  margin-bottom:0}
.deployment {
  display:block;
  padding-block:65px}
.deployment-options {
  margin-top:40px}
.start {
  padding:35px 25px;
  margin-bottom:35px}
.start-bottom {
  display:block}
.start-bottom .button {
  margin-top:25px}
footer {
  flex-wrap:wrap;
  font-size:10px;
  padding-block:25px}
footer>span {
  order:3;
  width:100%;
  font-size:9px}
.footer-brand span {
  font-size:9px}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
* {
  transition:none!important}
.button:hover {
  transform:none}
}