.blog-cover {
  margin-top:36px;
  margin-bottom:0;
  overflow:hidden;
  border:1px solid #e3eaf2;
  border-radius:24px;
  background:#f3f6fa;
  box-shadow:0 18px 48px rgba(22,36,58,.11)}
.blog-cover img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover}
.blog-article-header {
  max-width:850px;
  margin:0 auto;
  padding:43px 24px 25px}
.blog-article-header .eyebrow {
  margin:0 0 10px;
  color:var(--green);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase}
.blog-article-header h1 {
  max-width:780px;
  margin:0;
  color:var(--ink);
  font-size:clamp(34px,5vw,54px);
  letter-spacing:-.045em;
  line-height:1.06}
.blog-deck {
  max-width:700px;
  margin:17px 0 20px;
  color:#66758a;
  font-size:19px;
  line-height:1.55}
.blog-cta {
  margin-top:2px}
.blog-layout {
  display:grid;
  grid-template-columns:minmax(190px,230px) minmax(0,760px);
  align-items:start;
  justify-content:center;
  gap:clamp(30px,5vw,68px);
  padding-top:24px;
  padding-bottom:80px}
.blog-toc {
  position:sticky;
  top:100px;
  min-width:0;
  max-height:calc(100vh - 120px);
  overflow:auto}
.blog-toc details {
  padding:15px 16px;
  border:1px solid #e1e8f0;
  border-radius:14px;
  background:#f7f9fc}
.blog-toc summary {
  color:var(--green-dark);
  cursor:pointer;
  font-size:13px;
  font-weight:700}
.blog-toc ol {
  display:grid;
  gap:9px;
  margin:13px 0 0;
  padding-left:19px;
  color:#758296;
  font-size:11px}
.blog-toc a {
  color:#52627a;
  text-decoration:underline;
  text-decoration-color:#c6d1de;
  text-underline-offset:2px}
.blog-toc a:hover {
  color:var(--green)}
.blog-article {
  min-width:0}
.blog-prose {
  color:#34445a;
  font-size:17px;
  line-height:1.82}
.blog-prose h2 {
  margin:44px 0 16px;
  padding-top:7px;
  color:var(--ink);
  font-size:30px;
  letter-spacing:-.025em;
  line-height:1.2;
  scroll-margin-top:100px}
.blog-prose h3 {
  margin:30px 0 12px;
  color:#1c3452;
  font-size:23px;
  letter-spacing:-.015em;
  line-height:1.3;
  scroll-margin-top:100px}
.blog-prose h4 {
  margin:22px 0 10px;
  color:#263c59;
  font-size:19px;
  line-height:1.35}
.blog-prose p {
  margin:0 0 19px}
.blog-prose ul {
  display:grid;
  gap:8px;
  margin:0 0 23px;
  padding-left:25px}
.blog-prose li {
  padding-left:3px}
.blog-prose li::marker {
  color:var(--green)}
.blog-prose a {
  color:#164a78;
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:#aabbd0;
  text-underline-offset:3px;
  overflow-wrap:anywhere}
.blog-prose a:hover {
  color:#0b2e52;
  text-decoration-color:currentColor}
.blog-prose a.product-cta,
.blog-prose a.product-cta:hover {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  max-width:100%;
  min-height:48px;
  margin:2px 0 4px;
  padding:11px 17px;
  border:1px solid #173e68;
  border-radius:10px;
  background:#173e68;
  box-shadow:0 7px 16px rgba(16,45,77,.14);
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  text-decoration:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.blog-prose a.product-cta:hover,
.blog-prose a.product-cta:focus-visible {
  transform:translateY(-2px);
  border-color:#102d4d;
  background:#102d4d;
  box-shadow:0 10px 20px rgba(16,45,77,.2);
  color:#fff}
.blog-prose a.product-cta span {
  flex:none;
  font-size:17px}
.blog-prose blockquote {
  margin:20px 0 25px;
  padding:15px 20px;
  border-left:4px solid #d79831;
  border-radius:0 12px 12px 0;
  background:#fff8e9;
  color:#263a55;
  font-size:20px;
  font-weight:650}
.blog-prose blockquote p:last-child {
  margin-bottom:0}
.article-divider {
  height:1px;
  margin:38px 0;
  border:0;
  background:#e4eaf1}
.blog-end-card {
  margin-top:52px;
  padding:30px;
  border:1px solid #dce6f1;
  border-radius:18px;
  background:#f3f7fb}
.blog-end-card .eyebrow {
  margin:0 0 8px;
  color:var(--green);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase}
.blog-end-card h2 {
  margin:0 0 10px;
  color:var(--ink);
  font-size:27px;
  line-height:1.2}
.blog-end-card>p:not(.eyebrow) {
  color:#65748a}
.blog-end-card .button {
  display:inline-flex}
.blog-page footer {
  border-top:1px solid #e9edf3}

@media(max-width:900px) {
  .blog-layout {
    grid-template-columns:minmax(0,760px);
    gap:24px}
  .blog-toc {
    position:static;
    max-height:none;
    grid-row:1}
  .blog-article {
    grid-row:2}
}

@media(max-width:640px) {
  .blog-cover {
    margin-top:20px;
    border-radius:15px}
  .blog-article-header {
    padding:31px 0 16px}
  .blog-article-header .eyebrow {
    font-size:10px}
  .blog-article-header h1 {
    font-size:34px}
  .blog-deck {
    font-size:16px}
  .blog-layout {
    gap:20px;
    padding-top:14px;
    padding-bottom:48px}
  .blog-prose {
    font-size:16px;
    line-height:1.75}
  .blog-prose h2 {
    margin-top:34px;
    font-size:26px}
  .blog-prose h3 {
    margin-top:25px;
    font-size:21px}
  .blog-prose h4 {
    font-size:18px}
  .blog-prose blockquote {
    padding:13px 16px;
    font-size:18px}
  .blog-end-card {
    padding:22px 18px}
  .blog-end-card h2 {
    font-size:23px}
}