@font-face {
  font-family:Manrope;
  src:url("ManropeMedium.73a929def7a3.ttf") format("truetype");
  font-weight:400 600;
  font-display:swap;
}

@font-face {
  font-family:Manrope;
  src:url("ManropeExtraBold.f949806ee085.ttf") format("truetype");
  font-weight:700 900;
  font-display:swap;
}

.blog {
  color-scheme:light;
  --ink:#222638;
  --muted:#596377;
  --blue:#314282;
  --button:#394456;
  --edge:#dedfe7;
  --paper:#fff;
  --soft:#f2f2f5;
  --tag:#e5e9f5;
  background:var(--soft);
  color:var(--ink);
  font:500 15px/1.55 Manrope,Arial,sans-serif;
  container-type:inline-size;
  overflow-wrap:anywhere;
  margin:0;
  min-width:0;
}

.blog *,.blog *::before,.blog *::after {
  box-sizing:border-box;
}

.blog h1,.blog h2,.blog h3,.blog p,.blog figure {
  margin:0;
}

.blog a {
  font:inherit;
}

.blog :focus-visible {
  outline:3px solid #5773b6;
  outline-offset:4px;
}

.blog .wrap {
  max-width:1160px;
  margin-inline:auto;
  padding-inline:clamp(18px,5cqw,62px);
}

.blog .top {
  background:var(--paper);
  border-bottom:1px solid var(--edge);
}

.blog .top .wrap,.blog .foot .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:68px;
}

.blog .brand {
  text-decoration:none;
  border:0;
  background:none;
  padding:0;
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--ink);
  font-size:14px;
}

.blog .brand img {
  display:block;
  width:134px;
  height:auto;
}

.blog .brand span {
  border-left:1px solid var(--edge);
  padding-left:13px;
}

.blog .platform {
  color:var(--blue);
  text-decoration:none;
  border-radius:10px;
  padding:8px 12px;
  background:var(--soft);
  font-size:13px;
  white-space:nowrap;
}

.blog .platform:hover {
  background:var(--tag);
}

.blog .intro {
  padding-block:34px 23px;
}

.blog .intro h1 {
  font-size:clamp(34px,5.3cqw,58px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.048em;
}

.blog .intro p {
  color:var(--muted);
  font-size:clamp(15px,2cqw,19px);
  margin-top:10px;
}

.blog .feature {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  background:var(--paper);
  border:1px solid var(--edge);
  border-radius:22px;
  overflow:hidden;
  margin-bottom:36px;
}

.blog .feature-copy {
  padding:clamp(20px,3.3cqw,36px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:13px;
}

.blog .eyebrow {
  color:var(--blue);
  font-weight:800;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.blog .feature h2 {
  font-size:clamp(25px,3.5cqw,39px);
  line-height:1.12;
  letter-spacing:-.034em;
  font-weight:800;
}

.blog .feature-copy p {
  color:var(--muted);
}

.blog .feature-image {
  display:block;
  width:100%;
  height:100%;
  min-height:225px;
  max-height:365px;
  object-fit:cover;
  background:#dce8f5;
}

.blog .primary {
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 15px;
  background:var(--button);
  color:#fff;
  border:0;
  border-radius:10px;
  font-weight:800;
  text-decoration:none;
}

.blog .primary:hover {
  background:var(--blue);
}

.blog .collection {
  background:var(--paper);
  border-top:1px solid var(--edge);
  padding-block:30px 40px;
}

.blog .collection-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:17px;
}

.blog .collection h2 {
  font-size:clamp(23px,3cqw,34px);
  font-weight:800;
  letter-spacing:-.035em;
}

.blog .filters {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.blog .filters a {
  font-size:12px;
  text-decoration:none;
  padding:6px 10px;
  border:1px solid var(--edge);
  border-radius:9px;
  background:var(--paper);
  color:var(--muted);
}

.blog .filters a:hover,.blog .filters a[aria-current="page"] {
  background:var(--tag);
  color:var(--blue);
  border-color:var(--tag);
}

.blog .cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.blog .card {
  display:flex;
  flex-direction:column;
  text-align:left;
  background:var(--paper);
  border:1px solid var(--edge);
  border-radius:15px;
  overflow:hidden;
  padding:0;
  color:var(--ink);
  text-decoration:none;
}

.blog .card:hover {
  border-color:#899abd;
}

.blog .card-visual {
  display:flex;
  width:100%;
  height:clamp(104px,15cqw,175px);
  align-items:center;
  justify-content:center;
  background:#e8edf7;
  color:#526ba5;
}

.blog .card-visual img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.blog .card-visual svg {
  width:68px;
  height:68px;
}

.blog .card-visual[data-topic="teams"] {
  background:#edf0f3;
  color:#54667b;
}

.blog .card-copy {
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:14px;
  flex:1;
}

.blog .card strong {
  font-size:17px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.017em;
}

.blog .card .more {
  color:var(--blue);
  margin-top:auto;
  font-size:13px;
  padding-top:5px;
}

.blog .article-page {
  background:var(--paper);
}

.blog .article-head {
  background:var(--soft);
  padding-block:22px 28px;
}

.blog .article-lead {
  max-width:780px;
  margin-inline:auto;
}

.blog .back {
  border:0;
  padding:4px 0;
  background:transparent;
  color:var(--blue);
  display:inline-block;
  margin-bottom:18px;
  font-size:14px;
  text-decoration:none;
}

.blog .back:hover {
  text-decoration:underline;
}

.blog .article-head h1 {
  font-weight:800;
  font-size:clamp(30px,5.2cqw,53px);
  line-height:1.09;
  letter-spacing:-.043em;
  margin:8px 0 13px;
}

.blog .article-head p {
  font-size:clamp(16px,2.1cqw,19px);
  color:var(--muted);
  max-width:670px;
}

.blog .article-cover {
  width:100%;
  display:block;
  border-radius:16px;
  margin-top:21px;
  height:auto;
}

.blog .article-body {
  max-width:680px;
  margin:auto;
  padding-block:28px 42px;
  font-size:clamp(15px,1.8cqw,18px);
  line-height:1.7;
}

.blog .article-body > * + * {
  margin-top:13px;
}

.blog .article-body h2 {
  font-weight:800;
  font-size:clamp(22px,3cqw,29px);
  line-height:1.2;
  letter-spacing:-.025em;
  margin-top:29px;
}

.blog .article-body h2:first-child {
  margin-top:0;
}

.blog .article-body a {
  color:var(--blue);
}

.blog .article-body ul,.blog .article-body ol {
  padding-left:25px;
}

.blog .article-body blockquote {
  margin-inline:0;
  padding:16px 18px;
  background:var(--soft);
  border-left:3px solid #869ac5;
  border-radius:0 10px 10px 0;
}

.blog figcaption {
  color:var(--muted);
  font-size:13px;
  margin-top:8px;
}

.blog .article-body img {
  max-width:100%;
  display:block;
  border-radius:12px;
}

.blog .foot {
  border-top:1px solid var(--edge);
  background:var(--soft);
  color:var(--muted);
  font-size:13px;
}

@container (max-width:660px) {
  .blog .feature {
    grid-template-columns:1fr;
  }
  .blog .feature-image {
    height:auto;
    min-height:0;
    aspect-ratio:1.9;
    grid-row:1;
  }
  .blog .cards {
    grid-template-columns:1fr;
  }
  .blog .card-visual {
    height:130px;
  }
}

@container (max-width:365px) {
  .blog .brand {
    text-decoration:none;
    gap:8px;
  }
  .blog .brand img {
    width:104px;
  }
  .blog .brand span {
    padding-left:8px;
  }
  .blog .platform {
    padding-inline:7px;
  }
}

.blog .feature-without-image {
  grid-template-columns:1fr;
}

.blog .feature-without-image .feature-copy {
  max-width:740px;
}

.blog .preview-banner {
  padding-block:10px;
  background:#e5e9f5;
  color:#314282;
}

.blog .preview-banner a {
  color:inherit;
  margin-left:10px;
}

.blog .empty {
  grid-column:1/-1;
  color:var(--muted);
}

.blog .article-body > * + * {
  margin-top:13px;
}

.blog .article-body p + p,.blog .article-body img {
  margin-top:13px;
}

.blog .article-body img {
  height:auto;
}

.blog .article-body pre {
  white-space:pre-wrap;
  padding:14px;
  background:var(--soft);
  border-radius:8px;
}