:root {
  --ink: #111713;
  --muted: #657068;
  --line: #dfe5df;
  --soft-line: #edf1ed;
  --paper: #ffffff;
  --wash: #f5f7f4;
  --green: #178843;
  --green-dark: #106a33;
  --green-soft: #e8f5eb;
  --sidebar-width: 17rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv11";
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, summary { font: inherit; }
::selection { color: #07351a; background: #bdebc8; }

.skip-link {
  position: fixed; z-index: 100; top: .75rem; left: .75rem; translate: 0 -200%;
  border-radius: 999px; padding: .55rem .9rem; color: white; background: var(--ink);
  font-size: .875rem; font-weight: 650;
}
.skip-link:focus { translate: 0; }
.site-shell { min-height: 100vh; }

.desktop-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--sidebar-width);
  overflow-y: auto; border-right: 1px solid var(--line); background: rgba(255,255,255,.96);
}
.sidebar-inner { display: flex; min-height: 100%; flex-direction: column; padding: 1.4rem 1.4rem 1.1rem; }
.wordmark {
  display: inline-flex; align-items: center; gap: .72rem; width: fit-content;
  color: var(--ink); font-weight: 720; letter-spacing: -.025em;
}
.wordmark-large { gap: .85rem; font-size: 1.12rem; }
.wordmark-mark {
  position: relative; display: grid; width: 1.85rem; height: 1.85rem; place-items: center;
  overflow: hidden; border: 1px solid #1c2920; border-radius: 50%; background: var(--ink);
}
.wordmark-large .wordmark-mark { width: 2.1rem; height: 2.1rem; }
.wordmark-wave {
  width: 1rem; height: .62rem; background: white;
  clip-path: polygon(0 55%,10% 55%,10% 35%,24% 35%,24% 75%,43% 75%,43% 5%,57% 5%,57% 88%,73% 88%,73% 45%,88% 45%,88% 60%,100% 60%,100% 72%,82% 72%,82% 58%,69% 58%,69% 100%,51% 100%,51% 20%,49% 20%,49% 88%,17% 88%,17% 48%,0 48%);
}
.sidebar-kicker { margin: .35rem 0 0 2.58rem; color: var(--muted); font-size: .75rem; }
.guide-nav { display: grid; gap: 2rem; margin-top: 3rem; }
.nav-group h2 { margin: 0 0 .72rem; font-size: .78rem; font-weight: 680; letter-spacing: .02em; }
.nav-group ul {
  display: grid; gap: .08rem; margin: 0; padding: 0 0 0 .85rem;
  border-left: 1px solid var(--line); list-style: none;
}
.nav-group a {
  display: block; margin-left: -.9rem; border-left: 2px solid transparent;
  padding: .38rem 0 .38rem .85rem; color: var(--muted); font-size: .82rem; line-height: 1.35;
}
.nav-group a:hover { color: var(--ink); }
.nav-group a[aria-current="page"] { border-color: var(--ink); color: var(--ink); font-weight: 640; }
.sidebar-footer { display: grid; gap: .55rem; margin-top: auto; padding-top: 2.5rem; color: var(--muted); font-size: .78rem; }
.sidebar-footer a:hover, .top-links a:hover, .page-footer a:hover { color: var(--green-dark); }

.page-column { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar {
  position: sticky; z-index: 15; top: 0; display: flex; height: 4.1rem;
  align-items: center; justify-content: space-between; gap: 2rem;
  border-bottom: 1px solid rgba(223,229,223,.72); padding: 0 2rem;
  background: rgba(255,255,255,.88); backdrop-filter: blur(16px);
}
.breadcrumb { overflow: hidden; color: var(--muted); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb-separator { padding: 0 .55rem; color: #a1aaa3; }
.top-links { display: flex; align-items: center; gap: 1.35rem; color: #344039; font-size: .82rem; }
.top-links .support-link {
  border: 1px solid var(--line); border-radius: 999px; padding: .38rem .78rem;
  color: var(--ink); font-weight: 620;
}
.top-links .support-link:hover { border-color: #b8c3ba; color: var(--ink); background: var(--wash); }
.mobile-brand, .mobile-nav { display: none; }
.main-content { min-width: 0; padding: 0 2rem; }
.content-width { width: min(100%, 76rem); margin: 0 auto; }

.hero-shell {
  position: relative; display: grid; min-height: 41rem;
  grid-template-columns: minmax(0,1fr) minmax(22rem,.86fr); align-items: center;
  gap: clamp(2.5rem,6vw,6.5rem); overflow: hidden; border-bottom: 1px solid var(--line);
  padding: 5.5rem clamp(0rem,3vw,2.4rem) 5.8rem;
}
.hero-grid {
  position: absolute; z-index: -1; top: -4rem; right: -3rem; width: 60%; height: 28rem; opacity: .72;
  background-image: linear-gradient(rgba(23,136,67,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(23,136,67,.08) 1px,transparent 1px),radial-gradient(circle at 68% 35%,rgba(66,182,104,.23),transparent 48%);
  background-size: 2rem 2rem,2rem 2rem,100% 100%; mask-image: linear-gradient(to left,black 40%,transparent 100%);
}
.hero-copy h1 {
  max-width: 42rem; margin: 2.3rem 0 0; font-size: clamp(2.75rem,5.1vw,5rem);
  font-weight: 570; letter-spacing: -.062em; line-height: .98; text-wrap: balance;
}
.lede { max-width: 39rem; margin: 1.9rem 0 0; color: #58635c; font-size: clamp(1rem,1.5vw,1.12rem); line-height: 1.72; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }
.button {
  display: inline-flex; min-height: 2.7rem; align-items: center; justify-content: center; gap: .65rem;
  border: 1px solid transparent; border-radius: 999px; padding: .58rem 1.05rem;
  font-size: .86rem; font-weight: 660; transition: 150ms ease;
}
.button-primary { color: white; background: var(--ink); }
.button-primary:hover { background: #29312c; transform: translateY(-1px); }
.button-secondary { border-color: var(--line); color: #303a34; background: rgba(255,255,255,.75); }
.button-secondary:hover { border-color: #b8c3ba; background: var(--wash); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 1.1rem 2rem; margin: 3.4rem 0 0; }
.hero-facts div { display: grid; gap: .2rem; }
.hero-facts dt { color: #869088; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-facts dd { margin: 0; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .8rem; font-weight: 560; }

.activity-preview {
  position: relative; width: min(100%,29rem); justify-self: end; border: 1px solid #ccd5cd;
  border-radius: 1.2rem; padding: .7rem; background: rgba(255,255,255,.72);
  box-shadow: 0 1.8rem 5rem rgba(41,66,48,.13); backdrop-filter: blur(12px); transform: rotate(1.2deg);
}
.preview-window { overflow: hidden; border: 1px solid #dce3dc; border-radius: .85rem; background: #fff; }
.preview-titlebar {
  display: flex; height: 2.5rem; align-items: center; gap: .42rem; border-bottom: 1px solid var(--soft-line);
  padding: 0 .85rem; background: #f8faf8;
}
.preview-titlebar i { width: .54rem; height: .54rem; border-radius: 50%; background: #d3d9d3; }
.preview-titlebar span { margin-left: auto; color: #7a847d; font-size: .65rem; }
.preview-body { padding: 1.25rem; }
.preview-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.preview-heading span, .preview-detail span { color: #78827b; font-size: .66rem; }
.preview-heading strong { display: block; margin-top: .18rem; font-size: .98rem; letter-spacing: -.02em; }
.preview-heading em { color: var(--green-dark); font-size: .68rem; font-style: normal; font-weight: 660; }
.heatmap { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: .23rem; margin-top: 1.35rem; }
.heat-cell { aspect-ratio: 1; border: 1px solid rgba(29,57,37,.19); border-radius: .22rem; background: #eef1ee; }
.heat-cell.level-1 { background: #ccebd3; }
.heat-cell.level-2 { background: #93d5a2; }
.heat-cell.level-3 { background: #4fb96b; }
.heat-cell.level-4 { background: #16883f; }
.heat-cell.current { outline: 2px solid var(--ink); outline-offset: 1px; }
.preview-axis { display: flex; justify-content: space-between; margin-top: .45rem; color: #939c95; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .58rem; }
.preview-detail { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; border-radius: .55rem; padding: .7rem .8rem; background: var(--wash); }
.preview-detail i { width: .58rem; height: .58rem; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .25rem var(--green-soft); }
.preview-detail strong { margin-left: auto; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .67rem; }

.content-section { display: grid; grid-template-columns: 8rem minmax(0,1fr); column-gap: 3rem; padding: 6rem clamp(0rem,3vw,2.4rem); }
.section-label { padding-top: .38rem; color: #7d877f; font-size: .73rem; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; }
.section-intro { max-width: 43rem; }
.section-intro h2, .principle-grid h2 { margin: 0; font-size: clamp(1.8rem,3vw,2.55rem); font-weight: 570; letter-spacing: -.045em; line-height: 1.08; }
.section-intro p { margin: 1rem 0 0; color: var(--muted); line-height: 1.7; }
.guide-list { grid-column: 2; display: grid; gap: 0; margin: 3rem 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.guide-card { display: grid; grid-template-columns: 2.5rem minmax(0,1fr) auto; gap: 1.3rem; align-items: start; border-bottom: 1px solid var(--line); padding: 1.55rem 0; }
.guide-card:hover strong, .guide-card:hover .guide-meta { color: var(--green-dark); }
.guide-number, .guide-meta { color: #8a938c; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .68rem; }
.guide-card-copy { display: grid; gap: .42rem; }
.guide-card-copy strong { font-size: 1rem; font-weight: 650; transition: color 150ms ease; }
.guide-card-copy > span { max-width: 39rem; color: var(--muted); font-size: .87rem; line-height: 1.55; }
.guide-meta { white-space: nowrap; }

.principle-grid { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--line); }
.principle-grid > div { min-height: 21rem; padding: 3rem 2.4rem; }
.principle-grid > div + div { border-left: 1px solid var(--line); }
.principle-mark { color: var(--green-dark); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .72rem; }
.principle-grid h2 { margin-top: 5rem; font-size: 1.55rem; }
.principle-grid p { margin: 1rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.65; }

.docs-page { display: grid; grid-template-columns: minmax(0,45rem) minmax(10rem,14rem); gap: clamp(3rem,7vw,7rem); padding: 5rem clamp(0rem,4vw,4rem) 6rem; }
.docs-page article { min-width: 0; }
.eyebrow { margin: 0 0 1.1rem; color: var(--green-dark); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .72rem; font-weight: 620; letter-spacing: .08em; text-transform: uppercase; }
.docs-page h1 { max-width: 45rem; margin: 0; font-size: clamp(2.55rem,5.2vw,4.75rem); font-weight: 560; letter-spacing: -.06em; line-height: .99; text-wrap: balance; }
.docs-page .intro { max-width: 43rem; margin: 1.55rem 0 0; color: var(--muted); font-size: 1.04rem; line-height: 1.75; }
.prose-section { margin-top: 4.6rem; scroll-margin-top: 6rem; }
.prose-section h2 { margin: 0; font-size: 1.65rem; font-weight: 600; letter-spacing: -.035em; }
.prose-section h3 { margin: 2.1rem 0 0; font-size: 1rem; font-weight: 680; }
.prose-section p, .prose-section li { color: #4f5a52; font-size: .94rem; line-height: 1.75; }
.prose-section p { margin: 1rem 0 0; }
.prose-section ul, .prose-section ol { display: grid; gap: .62rem; margin: 1.25rem 0 0; padding-left: 1.25rem; }
.steps { display: grid; gap: 1.2rem; margin: 2rem 0 0; padding: 0; counter-reset: setup; list-style: none; }
.steps li { position: relative; min-height: 4.4rem; border: 1px solid var(--line); border-radius: .85rem; padding: 1.1rem 1.2rem 1.1rem 4.5rem; background: #fff; counter-increment: setup; }
.steps li::before { position: absolute; top: 1rem; left: 1rem; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 50%; color: var(--green-dark); background: var(--green-soft); content: counter(setup,decimal-leading-zero); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .68rem; font-weight: 650; }
.steps strong { display: block; margin-bottom: .25rem; color: var(--ink); font-size: .92rem; }
.callout { margin-top: 2rem; border-left: 3px solid var(--green); border-radius: 0 .75rem .75rem 0; padding: 1.15rem 1.25rem; color: #35523d; background: var(--green-soft); font-size: .9rem; line-height: 1.65; }
.callout strong { color: #173b23; }

.status-table, .retention-table { width: 100%; margin-top: 1.5rem; border-collapse: collapse; font-size: .87rem; }
.status-table th, .status-table td, .retention-table th, .retention-table td { border-bottom: 1px solid var(--line); padding: .85rem .55rem; text-align: left; vertical-align: top; }
.status-table th, .retention-table th { color: #7b857e; font-size: .7rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.status-table td:first-child, .retention-table td:first-child { color: var(--ink); font-weight: 620; }
.toc { position: sticky; top: 7rem; align-self: start; border-left: 1px solid var(--line); padding-left: 1.2rem; }
.toc h2 { margin: 0 0 .8rem; color: #7b857e; font-size: .7rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.toc ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.toc a { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.toc a:hover { color: var(--green-dark); }

.docs-heatmap { overflow-x: auto; margin-top: 2rem; border: 1px solid var(--line); border-radius: .95rem; padding: 1.3rem; background: var(--wash); }
.docs-heatmap-row { display: grid; min-width: 34rem; grid-template-columns: 3.4rem repeat(24,1fr); gap: .2rem; align-items: center; margin-top: .25rem; }
.docs-heatmap-row span:first-child { color: #7c867f; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .58rem; }
.docs-heatmap .heat-cell { min-width: .65rem; border-radius: .15rem; }
.legend { display: flex; flex-wrap: wrap; gap: .8rem 1.25rem; margin-top: .8rem; color: #707a73; font-size: .68rem; }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend i { width: .6rem; height: .6rem; border: 1px solid #bac3bb; border-radius: .15rem; background: #eef1ee; }
.legend .legend-zero { background: #111; }
.legend .legend-active { background: #4fb96b; }
.legend .legend-partial { background: repeating-linear-gradient(135deg,#93d5a2 0 2px,#fff 2px 4px); }

.privacy-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; }
.privacy-card { border: 1px solid var(--line); border-radius: .85rem; padding: 1.25rem; }
.privacy-card.good { border-color: #bbdec4; background: #f2faf4; }
.privacy-card h3 { margin: 0; }
.privacy-card ul { margin-top: .8rem; }
.faq-list { margin-top: 1.8rem; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 1.2rem 2.2rem 1.2rem 0; cursor: pointer; list-style: none; font-size: .95rem; font-weight: 640; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 1.05rem; right: 0; color: #7f8981; content: "+"; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 1.15rem; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-answer { max-width: 42rem; padding: 0 2rem 1.25rem 0; color: #515c54; font-size: .9rem; line-height: 1.7; }
.next-guide { display: grid; gap: .45rem; margin-top: 5rem; border-block: 1px solid var(--line); padding: 1.4rem 0; }
.next-guide > span { color: #818b83; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.next-guide strong { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 640; }
.next-guide:hover strong { color: var(--green-dark); }
.page-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2rem clamp(0rem,3vw,2.4rem); color: #7b857e; font-size: .74rem; }

@media (max-width: 1100px) {
  :root { --sidebar-width: 15.5rem; }
  .hero-shell { grid-template-columns: 1fr; }
  .activity-preview { width: min(100%,37rem); justify-self: start; transform: none; }
  .hero-grid { width: 90%; }
  .docs-page { grid-template-columns: minmax(0,1fr); }
  .toc { position: static; order: -1; border-left: 0; border-bottom: 1px solid var(--line); padding: 0 0 1.4rem; }
  .toc ul { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
}
@media (max-width: 820px) {
  .desktop-sidebar { display: none; }
  .page-column { margin-left: 0; }
  .topbar { height: 4rem; padding: 0 1.1rem; }
  .mobile-brand { display: block; }
  .breadcrumb { display: none; }
  .mobile-nav { position: relative; display: block; }
  .mobile-nav summary { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; list-style: none; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .menu-lines, .menu-lines::before, .menu-lines::after { display: block; width: .88rem; height: 1px; background: var(--ink); content: ""; }
  .menu-lines::before { transform: translateY(-.28rem); }
  .menu-lines::after { transform: translateY(.22rem); }
  .mobile-nav-panel { position: absolute; top: 2.75rem; right: 0; width: min(20rem,calc(100vw - 2rem)); max-height: calc(100vh - 5rem); overflow-y: auto; border: 1px solid var(--line); border-radius: .85rem; padding: 1.1rem; background: white; box-shadow: 0 1.4rem 4rem rgba(24,42,29,.16); }
  .mobile-nav-panel .guide-nav { margin-top: 0; }
  .main-content { padding: 0 1.1rem; }
  .hero-shell { padding: 4rem 0 4.5rem; }
  .hero-copy h1 { font-size: clamp(2.8rem,13vw,4.35rem); }
  .content-section { grid-template-columns: 1fr; gap: 1.4rem; padding: 4.5rem 0; }
  .guide-list { grid-column: 1; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-grid > div { min-height: 15rem; padding: 2rem 1.25rem; }
  .principle-grid > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .principle-grid h2 { margin-top: 3.5rem; }
  .docs-page { padding: 3.7rem 0 5rem; }
  .docs-page h1 { font-size: clamp(2.6rem,13vw,4.2rem); }
  .privacy-columns { grid-template-columns: 1fr; }
  .page-footer { padding-inline: 1.1rem; }
}
@media (max-width: 560px) {
  .top-links > a { display: none; }
  .guide-card { grid-template-columns: 2rem 1fr; gap: .8rem; }
  .guide-meta { grid-column: 2; }
  .hero-facts { display: grid; grid-template-columns: 1fr 1fr; }
  .activity-preview { padding: .42rem; }
  .preview-body { padding: 1rem; }
  .preview-heading em { display: none; }
  .heatmap { gap: .14rem; }
  .docs-page .intro { font-size: .98rem; }
  .steps li { padding-left: 4rem; }
  .status-table, .retention-table { display: block; overflow-x: auto; }
  .page-footer { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}