:root {
  color-scheme:light;
  --green:#1e6f5c;
  --deep:#13493d;
  --ink:#1b2925;
  --muted:#58645e;
  --paper:#f6f3ed;
  --line:#d9dfd8;
  --white:#fffefa
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:16px;
  line-height:1.65
}
a {
  color:var(--deep);
  text-underline-offset:4px
}
a:hover {
  color:var(--green)
}
a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #9c5c13;
  outline-offset:5px
}
h1,h2,h3,.wordmark {
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.025em
}
h1 {
  font-size:clamp(2.7rem,5.4vw,4.65rem);
  margin:20px 0 24px
}
h2 {
  font-size:2rem
}
h3 {
  font-size:1.6rem
}
p {
  margin:0 0 1.1em
}
em {
  font-weight:400;
  color:var(--green)
}
.site-header,main,.site-footer {
  max-width:1160px;
  margin:auto;
  padding-left:32px;
  padding-right:32px
}
.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:28px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
  gap:20px
}
.wordmark {
  font-size:1.75rem;
  text-decoration:none;
  color:var(--deep)
}
nav {
  display:flex;
  gap:25px;
  align-items:center
}
.site-header nav>a {
  font-size:.85rem;
  font-weight:600;
  text-decoration:none
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  background:var(--green);
  color:white!important;
  text-decoration:none;
  font-weight:700;
  font-size:.9rem;
  min-height:48px;
  padding:14px 22px;
  border-radius:9px
}
.button:hover {
  background:var(--deep)
}
.button.small {
  padding:10px 16px;
  min-height:44px
}
.eyebrow {
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.13em;
  color:var(--green);
  margin-bottom:14px
}
.index-hero {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:72px;
  padding:72px 0 64px;
  align-items:center
}
.lede {
  font-size:1.08rem;
  color:var(--muted);
  max-width:610px;
  line-height:1.75
}
.text-link {
  display:inline-flex;
  gap:20px;
  font-size:.9rem;
  font-weight:700;
  margin-top:15px
}
.desk-note {
  background:#eee9dc;
  border:1px solid #dfd6c2;
  border-radius:4px 22px 22px 4px;
  padding:30px 32px;
  border-left:5px solid #d4ad6d;
  transform:rotate(1.5deg)
}
.desk-note h2 {
  font-size:2rem;
  line-height:1.25;
  margin:20px 0
}
.desk-note p:not(.eyebrow) {
  font-size:.91rem;
  color:#4e574c
}
.desk-note span {
  font-size:.72rem;
  color:#58604f
}
.note-rule {
  height:1px;
  background:#cdc5b1;
  margin:25px 0 15px
}
.section-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px
}
.section-heading h2 {
  margin:0
}
.section-heading p,.section-heading>a {
  font-size:.8rem;
  color:var(--muted);
  margin:0
}
.guide-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.guide-card {
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px;
  position:relative
}
.guide-card:hover {
  border-color:#779487
}
.guide-card h3 {
  margin:2px 0 18px;
  line-height:1.24
}
.guide-card h3 a {
  color:var(--ink);
  text-decoration:none
}
.guide-card h3 a:after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:14px
}
.guide-card>p:not(.eyebrow) {
  font-size:.87rem;
  color:var(--muted);
  line-height:1.75
}
.read-link {
  display:flex;
  justify-content:space-between;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:.75rem;
  color:var(--green)
}
.product-strip {
  margin:54px 0 68px;
  background:#e5eee6;
  border:1px solid #cbdccd;
  border-radius:16px;
  padding:32px 36px;
  display:flex;
  align-items:center;
  gap:32px;
  justify-content:space-between
}
.product-strip h2 {
  font-size:1.8rem;
  margin:0 0 12px
}
.product-strip p:last-child {
  margin:0;
  font-size:.9rem;
  color:var(--muted)
}
.product-strip .button {
  white-space:nowrap
}
.site-footer {
  border-top:1px solid var(--line);
  padding-top:32px;
  padding-bottom:30px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:26px
}
.site-footer .wordmark {
  font-size:1.5rem
}
.site-footer p {
  font-size:.8rem;
  color:var(--muted);
  margin:10px 0 0
}
.site-footer>div+div {
  display:flex;
  gap:24px;
  font-size:.8rem;
  align-items:start
}
.site-footer .fine {
  width:100%;
  font-size:.71rem;
  margin:0
}
.article-top {
  max-width:900px;
  padding:45px 0 30px
}
.back-link {
  font-size:.8rem;
  text-decoration:none;
  display:inline-block;
  margin-bottom:32px
}
.article-top h1 {
  font-size:clamp(2.3rem,4.5vw,3.8rem);
  max-width:870px
}
.article-top .lede {
  max-width:750px
}
.byline {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:.75rem;
  color:var(--muted);
  margin:24px 0 8px
}
.article-layout {
  display:grid;
  grid-template-columns:235px minmax(0,740px);
  gap:52px;
  padding-top:24px;
  border-top:1px solid var(--line)
}
.contents {
  align-self:start;
  position:sticky;
  top:24px;
  padding-top:12px
}
.contents nav {
  display:block
}
.toc ul {
  padding:0;
  list-style:none;
  margin:0
}
.toc li {
  margin-bottom:14px;
  font-size:.79rem;
  line-height:1.6
}
.toc a {
  text-decoration:none;
  color:var(--muted)
}
.toc a:hover {
  color:var(--green);
  text-decoration:underline
}
.short-answer {
  background:#e7eee5;
  border-left:3px solid var(--green);
  border-radius:0 12px 12px 0;
  padding:26px 30px;
  margin-bottom:36px
}
.short-answer p:last-child {
  margin:0;
  line-height:1.8
}
.prose {
  font-size:1rem;
  line-height:1.9
}
.prose h2 {
  font-size:1.85rem;
  line-height:1.25;
  margin:42px 0 18px
}
.prose h3 {
  font-size:1.4rem;
  margin:30px 0 16px
}
.prose li {
  margin-bottom:10px
}
.prose ul,.prose ol {
  padding-left:24px
}
.prose blockquote {
  margin:24px 0;
  padding:18px 24px;
  border-left:3px solid #caa461;
  background:#eee9df;
  border-radius:0 8px 8px 0
}
.prose blockquote p:last-child {
  margin:0
}
.prose pre {
  background:#eaece6;
  border:1px solid var(--line);
  border-radius:10px;
  padding:24px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:.83rem;
  line-height:1.85
}
.prose a {
  overflow-wrap:anywhere
}
.table-wrap {
  overflow-x:auto;
  margin:24px 0;
  border:1px solid var(--line);
  border-radius:10px
}
.prose table {
  border-collapse:collapse;
  width:100%;
  font-size:.82rem;
  line-height:1.65;
  background:var(--white)
}
.prose th,.prose td {
  text-align:left;
  vertical-align:top;
  padding:14px 16px;
  min-width:145px;
  border-bottom:1px solid var(--line)
}
.prose th {
  background:#e5ebe2;
  color:var(--deep)
}
.prose tr:last-child td {
  border-bottom:0
}
.article-cta {
  margin:42px 0;
  background:#e7eee5;
  padding:28px 30px;
  border-radius:12px
}
.article-cta h2 {
  font-size:1.65rem;
  margin:0 0 12px
}
.article-cta p {
  font-size:.9rem
}
.related {
  border-top:1px solid var(--line);
  padding:45px 0 65px;
  margin-top:24px
}
.skip {
  position:absolute;
  top:-100px;
  left:16px;
  padding:12px;
  background:white;
  z-index:10
}
.skip:focus {
  top:12px
}
.missing {
  padding:100px 0
}
@media(max-width:960px) {
  .index-hero {
    gap:32px
  }
  .guide-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .article-layout {
    grid-template-columns:190px minmax(0,1fr);
    gap:30px
  }
  .product-strip {
    align-items:start;
    flex-direction:column
  }
}
@media(max-width:680px) {
  .site-header,main,.site-footer {
    padding-left:22px;
    padding-right:22px
  }
  .site-header {
    flex-wrap:wrap;
    gap:16px;
    padding-top:20px;
    padding-bottom:20px
  }
  .wordmark {
    font-size:1.55rem
  }
  .site-header nav {
    width:100%;
    justify-content:space-between;
    gap:15px
  }
  .index-hero {
    display:block;
    padding:42px 0
  }
  .index-hero h1 {
    font-size:2.8rem
  }
  .desk-note {
    margin-top:34px;
    transform:none;
    padding:24px
  }
  .desk-note h2 {
    font-size:1.75rem
  }
  .guide-grid {
    grid-template-columns:1fr
  }
  .section-heading {
    display:block
  }
  .section-heading h2 {
    margin-bottom:12px;
    font-size:1.8rem
  }
  .guide-card {
    padding:25px
  }
  .product-strip {
    padding:26px;
    margin:35px 0 45px
  }
  .product-strip .button {
    white-space:normal
  }
  .article-top {
    padding-top:28px
  }
  .article-top h1 {
    font-size:2.4rem
  }
  .article-layout {
    display:flex;
    flex-direction:column;
    gap:22px
  }
  .contents {
    position:static;
    width:100%;
    padding:0 0 14px;
    border-bottom:1px solid var(--line)
  }
  .toc ul {
    display:flex;
    flex-wrap:wrap;
    gap:10px 20px
  }
  .toc li {
    margin:0
  }
  .short-answer {
    padding:23px
  }
  .prose h2 {
    font-size:1.65rem
  }
  .prose pre {
    padding:18px
  }
  .article-cta {
    padding:24px
  }
  .byline {
    gap:8px
  }
  .related {
    padding-top:30px
  }
  .site-footer {
    gap:20px
  }
  .site-footer>div+div {
    min-height:44px
  }
  .fine {
    line-height:1.7
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}
@media print {
  .site-header,.contents,.article-cta,.related,.site-footer {
    display:none
  }
  .article-layout {
    display:block
  }
  .article-top h1 {
    font-size:30px
  }
  .prose {
    font-size:11pt
  }
  .short-answer {
    background:none
  }
  body {
    background:white
  }
  .table-wrap {
    overflow:visible
  }
}
.mobile-contents {
  display:none
}
.related .guide-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))
}
@media(max-width:680px) {
  .contents {
    display:none
  }
  .mobile-contents {
    display:block;
    border-bottom:1px solid var(--line);
    padding:0 0 16px
  }
  .mobile-contents summary {
    cursor:pointer;
    font-size:.85rem;
    font-weight:600;
    color:var(--deep);
    padding:10px 0
  }
  .mobile-contents nav {
    display:block;
    margin-top:12px
  }
  .mobile-contents .toc ul {
    display:block
  }
  .mobile-contents .toc li {
    margin:0 0 12px
  }
}
@media(max-width:480px) {
  .table-wrap::before {
    content: 'Scroll sideways to read all columns →';
    display: block;
    padding: 10px 14px;
    background: #e5ebe2;
    color: var(--deep);
    font-size: .7rem;
  }
}