/* Match About typography while keeping these adjustments on the blog listing. */
body.blog-listing {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  background: #fff;
}

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

.blog-listing a { color: inherit; text-decoration: none; }
.blog-listing img { display: block; max-width: 100%; }
.blog-listing #main { font-family: inherit; font-size: 15px; line-height: 1.45; }
.blog-listing #main button,
.blog-listing #main input,
.blog-listing #main .blog-button {
  font-family: inherit;
}
.blog-listing .blog-wrap { width: min(1240px, calc(100% - 80px)); }

.blog-listing #main h1 {
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -1.5px;
}

.blog-listing #main h2 {
  font-size: 20px !important;
  line-height: 1.18;
  letter-spacing: -.8px;
}

.blog-listing #main h3 {
  font-size: 17px !important;
  line-height: 1.25;
  letter-spacing: -.3px;
}

.blog-listing #main p:not(.eyebrow):not(.cta-statement) {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.blog-listing #main .eyebrow {
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1.6 !important;
  letter-spacing: 1.7px;
}

/* Full-width photo and soft wash follow the About / Software hero layout. */
.blog-listing .blog-hero {
  position: relative;
  isolation: isolate;
  background: #fafaf7;
  border-bottom: 0;
}
.blog-listing .blog-hero-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 69%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  z-index: -2;
}
.blog-listing .blog-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fafaf7 0%, #fafaf7 30%, #fafaf7ed 38%, #fafaf75c 51%, transparent 64%);
  z-index: -1;
}
.blog-listing .hero-layout { display: flex; align-items: center; min-height: 420px; }
.blog-listing .hero-layout > div { max-width: 465px; padding: 48px 0; }
.blog-listing #main .hero-layout .blog-hero-copy > p:not(.eyebrow) {
  max-width: 360px;
  font-size: 17px !important;
  line-height: 1.65 !important;
}
.blog-listing .blog-hero-copy .blog-button {
  margin-top: 28px;
  gap: 24px;
  border-radius: 4px;
  background: linear-gradient(135deg, #f4df62, #e9d036);
  padding: 12px 25px;
  font-family: inherit;
  font-weight: 700;
}
.blog-listing .insights-content { scroll-margin-top: 110px; }
.blog-listing .insights-content > .search-box { margin: 0 0 24px auto; }
.blog-listing #main .hero-layout h1 { margin-top: 14px; }
.blog-listing #main .hero-layout p:not(.eyebrow) { margin-top: 20px !important; }
.blog-listing .search-box { height: 48px; margin-top: 24px; }
.blog-listing .search-box input { font-size: 15px; }
.blog-listing .insights-content { padding: 28px 0 56px; }
.blog-listing .category-tabs { gap: 12px; }
.blog-listing .category-tabs button,
.blog-listing .topic-grid button { font-size: 13px; font-weight: 700; line-height: 1.45; }
.blog-listing .category-tabs button { min-height: 46px; padding: 10px 12px; }
.blog-listing .featured-post { grid-template-columns: 1fr 1fr; margin-top: 0; }
.blog-listing .featured-image { min-height: 330px; }
.blog-listing .featured-copy { padding: 32px; }
.blog-listing #main .featured-copy h2 { margin-top: 14px; }
.blog-listing #main .featured-copy > p:not(.eyebrow) { margin-top: 18px !important; }
.blog-listing .card-footer { flex-wrap: wrap; gap: 12px; padding-top: 24px; font-size: 13px; }
.blog-listing .text-link { font-size: 13px; }
.blog-listing .posts-section { padding-top: 44px; scroll-margin-top: 110px; }
.blog-listing .latest-heading { gap: 16px; margin-bottom: 24px; }
.blog-listing .latest-heading span { font-size: 13px; }
.blog-listing .posts-grid { gap: 24px; }
.blog-listing .post-card img { height: 210px; }
.blog-listing .post-card > div { padding: 24px; }
.blog-listing #main .post-card .eyebrow { margin-bottom: 12px !important; }
.blog-listing #main .post-card p:not(.eyebrow) { margin-top: 14px !important; }
.blog-listing .post-card .card-footer { padding-top: 24px; }
.blog-listing .dark-cta-inner { padding: 48px 0; gap: 32px; }
.blog-listing .blog-button { min-height: 46px; font-size: 13px; font-weight: 700; line-height: 1.45; }
.blog-listing #main .cta-statement { font-size: 12px !important; line-height: 1.6 !important; }
.blog-listing .topics-section { padding: 44px 0 32px; }
.blog-listing .topic-grid { gap: 14px; margin-top: 24px; }
.blog-listing .topic-grid button { min-height: 72px; padding: 14px; }
.blog-listing .subscribe { grid-template-columns: auto 1fr; padding: 32px; margin-top: 44px; margin-bottom: 48px; gap: 24px; }
.blog-listing .subscribe-form { grid-column: 2; padding: 0; border: 0; }
.blog-listing .subscribe-form input { height: 48px; font-size: 15px; line-height: 1.45; }
.blog-listing .subscribe-form button { width: 132px; font-size: 13px; }
.blog-listing #main .subscribe p { margin-top: 12px !important; }
.blog-listing #main a:focus-visible,
.blog-listing #main button:focus-visible { outline: 3px solid #a58c16; outline-offset: 4px; }
.blog-listing .search-box:focus-within { outline: 3px solid #a58c16; outline-offset: 4px; }

/* About uses a 15px hero description on tablet and mobile. */
@media (max-width: 850px) {
  .blog-listing #main .hero-layout .blog-hero-copy > p:not(.eyebrow) {
    font-size: 15px !important;
  }
}

@media (max-width: 1000px) {
  .blog-listing .category-tabs { grid-template-columns: repeat(3, 1fr); }
  .blog-listing .posts-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-listing .topic-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-listing .dark-cta-inner { grid-template-columns: 1fr 160px; }
  .blog-listing .cta-statement { display: none; }
}

@media (max-width: 800px) {
  .blog-listing .blog-wrap { width: calc(100% - 32px); }
  .blog-listing .hero-layout { min-height: 0; padding-bottom: 260px; }
  .blog-listing .hero-layout > div { padding: 44px 0; }
  .blog-listing .blog-hero-copy .blog-button { margin-top: 12px; }
  .blog-listing .blog-hero-photo { width: 100%; height: 300px; top: auto; bottom: 0; object-position: center 40%; }
  .blog-listing .blog-hero::after { background: linear-gradient(#fafaf7 0%, #fafaf7 48%, #fafaf700 78%); }
  .blog-listing .insights-content > .search-box { width: 100%; }
  .blog-listing .featured-post { grid-template-columns: 1fr; }
  .blog-listing .featured-image { min-height: 0; }
  .blog-listing .featured-image img { height: 280px; }
  .blog-listing .subscribe-form { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .blog-listing .hero-layout > div { padding: 36px 0; }
  .blog-listing .category-tabs button { min-width: 150px; }
  .blog-listing .featured-copy, .blog-listing .post-card > div { padding: 24px; }
  .blog-listing .posts-grid, .blog-listing .topic-grid { grid-template-columns: 1fr; }
  .blog-listing .featured-image img { height: 220px; }
  .blog-listing .dark-cta-inner { display: block; padding: 36px 0; }
  .blog-listing .subscribe { padding: 24px; }
  .blog-listing .subscribe-form { display: flex; flex-wrap: wrap; gap: 12px; }
  .blog-listing .subscribe-form input { flex-basis: 100%; border-radius: 7px; }
  .blog-listing .subscribe-form button { width: 100%; min-height: 46px; border-radius: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-listing #main .reveal { animation: none; }
  .blog-listing #main * { transition: none; }
}