/* =========================================================================
   iomblogs — blog components. Built on the main-site design tokens
   (--indigo #35226f, --ink, --slate, --paper, --line, .wrap container).
   Headings inherit Sora via the site's global font rule; body is Inter.
   ========================================================================= */

.page-blog { display: block; background: #fff; }

/* keep the desktop mega hidden until nav.js shows it (no flash) */
.header .mega { }

/* shared narrow container for reading measure */
.blog-wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

/* ---- eyebrow / labels ---- */
.blog-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--indigo);
  font: 700 12px/1 Manrope, Inter, sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
}

/* ---- category chip / pill ---- */
.cat-chip {
  display: inline-flex; align-items: center;
  color: var(--indigo);
  font: 700 11.5px/1 Manrope, Inter, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
}
.cat-chip:hover { color: var(--ink); }

/* =========================================================================
   LISTING HERO
   ========================================================================= */
.blog-hero { padding: 68px 0 34px; border-bottom: 1px solid var(--line); }
.blog-hero .wrap { display: block; min-height: 0; }
.blog-hero h1 {
  margin: 16px 0 0;
  font: 600 clamp(40px, 5.2vw, 68px)/1.02 Sora, Manrope, sans-serif;
  letter-spacing: -.045em; color: var(--ink);
}
.blog-hero h1 em { color: var(--indigo); font-style: normal; }
.blog-hero > .wrap > p {
  max-width: 620px; margin: 20px 0 0;
  color: var(--slate); font-size: 17px; line-height: 1.7;
}

/* category nav row */
.blog-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.blog-cats a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  color: #2b2733; text-decoration: none;
  font: 600 13.5px/1 Manrope, Inter, sans-serif; letter-spacing: -.01em;
  transition: .18s;
}
.blog-cats a small { color: var(--slate); font-weight: 600; }
.blog-cats a:hover { border-color: var(--indigo); color: var(--indigo); transform: translateY(-1px); }
.blog-cats a.is-active { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.blog-cats a.is-active small { color: #ffffffb0; }

/* =========================================================================
   FEATURED POST (first item, page 1)
   ========================================================================= */
.blog-body { padding: 46px 0 30px; }
.post-feature {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px;
  align-items: center; margin-bottom: 56px;
}
.post-feature .post-feature-media {
  aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
}
.post-feature .post-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-feature-copy .cat-chip { margin-bottom: 14px; }
.post-feature-copy h2 {
  margin: 0; font: 600 clamp(26px, 3vw, 40px)/1.1 Sora, Manrope, sans-serif;
  letter-spacing: -.035em;
}
.post-feature-copy h2 a { color: var(--ink); text-decoration: none; }
.post-feature-copy h2 a:hover { color: var(--indigo); }
.post-feature-copy p { margin: 16px 0 0; color: var(--slate); font-size: 16px; line-height: 1.7; }

/* =========================================================================
   POST GRID + CARDS
   ========================================================================= */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px; }

.post-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px #0a112b12; border-color: #dcd7e6; }
.post-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.post-card:hover .post-card-media img { transform: scale(1.045); }
.post-card-body { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 24px; flex: 1; }
.post-card h3 {
  margin: 2px 0 0; font: 600 20px/1.28 Sora, Manrope, sans-serif; letter-spacing: -.02em;
}
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h3 a:hover { color: var(--indigo); }
.post-card-excerpt { margin: 0; color: var(--slate); font-size: 14.5px; line-height: 1.65; }

/* meta row */
.post-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px;
  color: var(--slate); font: 600 13px/1 Manrope, Inter, sans-serif; letter-spacing: -.01em;
}
.post-meta-author { color: var(--ink); text-decoration: none; }
.post-meta-author:hover { color: var(--indigo); }
.post-meta-dot { color: #c8c3d2; }
.post-meta-date { color: var(--slate); }

/* =========================================================================
   PAGINATION
   ========================================================================= */
.blog-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 46px 0 8px; }
.blog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px;
  color: #2b2733; text-decoration: none;
  font: 600 14px/1 Manrope, Inter, sans-serif; transition: .18s;
}
.blog-pagination .page-numbers:hover { border-color: var(--indigo); color: var(--indigo); }
.blog-pagination .page-numbers.current { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.blog-pagination .page-numbers.dots { border-color: transparent; }

/* =========================================================================
   SINGLE POST
   ========================================================================= */
.single-hero { padding: 56px 0 0; }
.single-hero .wrap { display: block; min-height: 0; max-width: 900px; }
.single-hero .cat-chip { margin-bottom: 16px; }
.single-hero h1 {
  margin: 0; font: 600 clamp(32px, 4.4vw, 58px)/1.06 Sora, Manrope, sans-serif;
  letter-spacing: -.04em; color: var(--ink);
}
.single-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px;
  color: var(--slate); font: 600 14px/1 Manrope, Inter, sans-serif;
}
.single-meta .post-meta-author { color: var(--ink); text-decoration: none; }
.single-meta .post-meta-author:hover { color: var(--indigo); }
.single-meta .dot { color: #c8c3d2; }

.single-featured {
  width: min(1180px, calc(100% - 48px)); margin: 34px auto 0;
  border-radius: 18px; overflow: hidden; background: var(--paper); border: 1px solid var(--line);
}
.single-featured img { width: 100%; height: auto; display: block; }

/* article body */
.post-body {
  width: min(820px, calc(100% - 48px)); margin: 40px auto 0;
  color: #26232b; font-family: Inter, Arial, sans-serif;
  font-size: 17.5px; line-height: 1.8;
}
.post-body > * { margin: 0 0 22px; }
.post-body p { margin: 0 0 22px; }
.post-body h2 { margin: 44px 0 16px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.18; letter-spacing: -.03em; color: var(--ink); }
.post-body h3 { margin: 36px 0 12px; font-size: clamp(21px, 2vw, 26px); line-height: 1.25; letter-spacing: -.02em; color: var(--ink); }
.post-body h4 { margin: 28px 0 10px; font-size: 19px; color: var(--ink); }
.post-body a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { color: var(--indigo-dark); }
.post-body strong, .post-body b { font-weight: 700; color: #1c1922; }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 26px; }
.post-body li { margin: 0 0 10px; }
.post-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0 26px; }
.post-body figure { margin: 0 0 26px; }
.post-body figure img { margin-bottom: 8px; }
.post-body figcaption { color: var(--slate); font-size: 14px; text-align: center; }
.post-body blockquote {
  margin: 26px 0; padding: 8px 0 8px 24px; border-left: 3px solid var(--indigo);
  color: #3a3543; font-size: 20px; line-height: 1.6; font-style: italic;
}
.post-body pre {
  background: #14101f; color: #eee; padding: 20px 22px; border-radius: 12px;
  overflow-x: auto; font-size: 14px; line-height: 1.6;
}
.post-body code { font-family: Consolas, Monaco, monospace; font-size: .92em; }
.post-body :not(pre) > code { background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 15px; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.post-body h2:first-child, .post-body h3:first-child, .post-body p:first-child { margin-top: 0; }

/* tags + footer of single */
.single-foot { width: min(820px, calc(100% - 48px)); margin: 40px auto 0; padding-top: 26px; border-top: 1px solid var(--line); }
.single-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.single-tags a {
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  color: #4a4553; text-decoration: none; font: 600 12.5px/1 Manrope, Inter, sans-serif; transition: .18s;
}
.single-tags a:hover { border-color: var(--indigo); color: var(--indigo); }

/* author box */
.author-box {
  width: min(820px, calc(100% - 48px)); margin: 34px auto 0;
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px;
}
.author-box .avatar { width: 56px; height: 56px; border-radius: 50%; flex: none; overflow: hidden; background: #ded9e8; }
.author-box .avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-box .a-name { font: 600 18px/1.2 Sora, Manrope, sans-serif; color: var(--ink); letter-spacing: -.01em; }
.author-box .a-role { margin-top: 3px; color: var(--indigo); font: 700 11.5px/1 Manrope; letter-spacing: .12em; text-transform: uppercase; }
.author-box .a-bio { margin: 10px 0 0; color: var(--slate); font-size: 14.5px; line-height: 1.65; }

/* prev / next + back to blog */
.single-nav { width: min(820px, calc(100% - 48px)); margin: 30px auto 0; display: flex; justify-content: space-between; gap: 16px; }
.single-nav a { color: var(--indigo); text-decoration: none; font: 600 14px/1.4 Manrope, Inter, sans-serif; max-width: 46%; }
.single-nav a small { display: block; color: var(--slate); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; margin-bottom: 4px; }
.single-nav a:hover { color: var(--indigo-dark); }

/* related posts */
.related { padding: 60px 0 0; }
.related .section-head { margin-bottom: 30px; }

/* =========================================================================
   ARCHIVE HEADER (category / tag / author / search)
   ========================================================================= */
.blog-cathead { padding: 66px 0 30px; border-bottom: 1px solid var(--line); }
.blog-cathead .wrap { display: block; min-height: 0; }
.blog-cathead h1 { margin: 14px 0 0; font: 600 clamp(34px, 4.4vw, 58px)/1.03 Sora, Manrope, sans-serif; letter-spacing: -.04em; color: var(--ink); }
.blog-cathead p { max-width: 620px; margin: 16px 0 0; color: var(--slate); font-size: 16px; line-height: 1.7; }

/* empty state */
.blog-empty { width: min(700px, calc(100% - 48px)); margin: 80px auto; text-align: center; }
.blog-empty h2 { font: 600 30px/1.1 Sora, Manrope, sans-serif; letter-spacing: -.03em; }
.blog-empty p { color: var(--slate); margin-top: 12px; }

/* =========================================================================
   BLOG HEADER — dedicated blog nav (WordPress-managed categories). Reuses the
   main-site white sticky bar; only the inner layout is blog-specific.
   ========================================================================= */
.blog-header .nav { gap: 26px; }
/* nav fills the space between the brand and the CTA so the overflow logic has a
   definite width to measure against; the visible links stay flush to the right. */
.blognav {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 22px;
}
.blognav-links {
  display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; min-width: 0;
  list-style: none; margin: 0; padding: 0;
}
.blognav-links li { margin: 0; padding: 0; flex: 0 0 auto; }
.blognav-links a {
  display: inline-block; padding: 30px 0; white-space: nowrap;
  color: #334155; font: 600 12.5px/1 Manrope, Inter, sans-serif; letter-spacing: .01em;
  text-decoration: none; transition: color .18s;
}
.blognav-links a:hover { color: var(--indigo); }
.blognav-links .current-menu-item > a,
.blognav-links .current_page_item > a,
.blognav-links .current-cat > a { color: var(--indigo); }

/* "+" overflow control (priority-plus). Hidden until JS finds items that
   don't fit on one line, then it holds them in a dropdown. */
/* The slim sticky header bar clips overflow; let the dropdown escape it. */
.blog-header, .blog-header .nav, .blognav { overflow: visible; }
.blognav-more { position: relative; flex: 0 0 auto; display: none; }
.blognav-more-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: #334155; cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.blognav-more-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* The bundled main-site styles.css asserts conflicting values on elements inside
   .header with higher precedence, so the open/hover states below use !important
   to reliably win. Scoped tightly to these blog-only classes. */
.blognav-more-btn:hover,
.blognav-more.open .blognav-more-btn { color: #fff !important; background: var(--indigo, #35226f) !important; border-color: var(--indigo, #35226f) !important; }
.blognav-more-menu {
  position: absolute; top: calc(100% - 14px); right: 0; z-index: 60;
  min-width: 220px; margin: 0; padding: 8px; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(20, 16, 45, .28);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.blognav-more.open .blognav-more-menu { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; }
.blognav-more-menu li { margin: 0; padding: 0; }
.blognav-more-menu a {
  display: block; padding: 10px 12px; border-radius: 9px; white-space: nowrap;
  color: #334155; font: 600 13px/1.2 Manrope, Inter, sans-serif; letter-spacing: .01em;
  text-decoration: none; transition: color .16s, background .16s;
}
.blognav-more-menu a:hover { color: var(--indigo); background: #f5f3fb; }
.blognav-more-menu .current-menu-item > a,
.blognav-more-menu .current-cat > a { color: var(--indigo); }

.blog-header-cta { display: flex; align-items: center; gap: 18px; }

@media (max-width: 1000px) {
  .blognav, .blog-header-cta { display: none; }
}
/* blog mobile menu (category list) */
.blog-mobile-nav .mobile-menu-wrap { display: block; }
.blog-mobile-nav .mobile-menu { list-style: none; margin: 0; padding: 0; display: block; }
.blog-mobile-nav .mobile-menu li { margin: 0; }
.blog-mobile-nav .mobile-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font: 600 20px/1.2 Sora, Manrope, sans-serif; letter-spacing: -.02em;
  text-decoration: none; text-transform: capitalize;
}
.blog-mobile-nav .mobile-menu a:hover { color: var(--indigo); }
.blog-mobile-nav .mobile-est { margin-top: 24px; }

/* =========================================================================
   PREMIUM LANDING HERO (dark gradient)
   ========================================================================= */
.blog-eyebrow.light { color: #b9a7f0; }
.blog-hero-lg {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(160deg, #0e0a1e 0%, #241748 46%, #35226f 100%);
  padding: 104px 0 84px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.blog-hero-lg .wrap { display: block; min-height: 0; position: relative; z-index: 2; }
.blog-hero-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(58% 120% at 80% 6%, rgba(139,111,224,.42), transparent 60%),
    radial-gradient(46% 92% at 6% 104%, rgba(53,34,111,.55), transparent 60%);
}
.blog-hero-lg h1 {
  margin: 18px 0 0; max-width: 16ch;
  font: 600 clamp(40px, 5.4vw, 72px)/1.02 Sora, Manrope, sans-serif;
  letter-spacing: -.045em; color: #fff;
}
.blog-hero-lg h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #c4b5fd, #8b6fe0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.blog-hero-lg > .wrap > p {
  max-width: 640px; margin: 22px 0 0;
  color: rgba(255,255,255,.72); font-size: 17.5px; line-height: 1.7;
}

/* =========================================================================
   TRENDING IN NEWS
   ========================================================================= */
.blog-trending { padding: 66px 0 6px; }
.blog-trending .section-head { margin-bottom: 34px; }
.trend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.trend-card {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.trend-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px #0a112b12; border-color: #dcd7e6; }
.trend-media { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--paper); }
.trend-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.trend-card:hover .trend-media img { transform: scale(1.05); }
.trend-media.is-placeholder { background: linear-gradient(135deg, #efeaf7, #e0d9ef); }
.trend-flag {
  position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px; background: rgba(14,10,30,.82); color: #fff;
  font: 700 10.5px/1 Manrope, Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.trend-flag svg { width: 12px; height: 12px; fill: #c4b5fd; stroke: none; }
.trend-body { display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 18px; flex: 1; }
.trend-body h3 { margin: 0; font: 600 16.5px/1.3 Sora, Manrope, sans-serif; letter-spacing: -.02em; }
.trend-body h3 a { color: var(--ink); text-decoration: none; }
.trend-body h3 a:hover { color: var(--indigo); }
.trend-body .post-meta { font-size: 12px; }
/* The four secondary trending cards are the narrowest place the meta row is
   used, so with the avatar in front the author + date can just miss fitting on
   one line (it does at ~1180px). Keep the row on one line and let a long author
   name ellipsize instead, rather than wrapping the date under the avatar. */
.trend-card:not(.trend-lead) .post-meta { flex-wrap: nowrap; gap: 7px; }
.trend-card:not(.trend-lead) .post-meta-author {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trend-card:not(.trend-lead) .post-meta-dot,
.trend-card:not(.trend-lead) .post-meta-date { flex: none; }
@media (min-width: 901px) {
  .trend-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
  .trend-lead { grid-column: span 2; grid-row: span 2; }
  .trend-lead .trend-media { aspect-ratio: 16/9; }
  .trend-lead .trend-body { padding: 22px 24px 24px; gap: 12px; }
  .trend-lead .trend-body h3 { font-size: 26px; line-height: 1.16; }
  .trend-lead .trend-body p { margin: 0; color: var(--slate); font-size: 15.5px; line-height: 1.65; }
}

/* =========================================================================
   CARD READ-MORE + AVATAR IN META
   ========================================================================= */
.post-card-more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 2px;
  color: var(--indigo); font: 700 12.5px/1 Manrope, Inter, sans-serif; letter-spacing: .02em; text-decoration: none;
}
.post-card-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s ease; }
.post-card-more:hover svg { transform: translateX(3px); }
.post-card-media.is-placeholder { display: block; background: linear-gradient(135deg, #efeaf7, #e0d9ef); }

.post-meta-avatar { display: inline-flex; flex: none; }
.post-meta-avatar .pm-avatar,
.post-meta .pm-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #ded9e8; }

.single-avatar { display: inline-flex; flex: none; margin-right: 2px; }
.single-avatar .pm-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #ded9e8; }

.section-page { flex: none; padding-bottom: 8px; color: var(--slate); font: 600 13px/1 Manrope, Inter, sans-serif; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1000px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .post-feature { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
  .trend-grid { grid-template-columns: 1fr; }
  .blog-hero { padding: 46px 0 26px; }
  .blog-hero-lg { padding: 72px 0 54px; }
  .author-box { flex-direction: column; }
}

/* =========================================================================
   HEADER SEARCH (blog). The base .header-search* styling is inherited from the
   bundled main-site styles.css so the control looks identical to the main site.
   These scoped !important rules only force the OPEN state to win over the
   bundled CSS that applies inside .header (same precedence issue the "+" menu
   hit). Below that: the search-results "refine" field.
   ========================================================================= */
.header-search { flex: 0 0 auto; }
.header-search.open .header-search-panel { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; }
.header-search.open .header-search-btn,
.header-search-btn:hover { color: #fff !important; background: var(--indigo, #35226f) !important; border-color: var(--indigo, #35226f) !important; }

/* Search results page: a "refine your search" field in the archive header. */
.search-refine {
  display: flex; align-items: center; gap: 8px; width: min(520px, 100%); margin: 26px 0 0;
  padding: 6px 6px 6px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.search-refine .search-refine-ic { display: grid; place-items: center; color: #8a8594; }
.search-refine .search-refine-ic svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.search-refine input {
  flex: 1 1 auto; min-width: 0; height: 44px; border: 0; background: transparent;
  font: 500 15.5px/1 Manrope, Inter, sans-serif; color: var(--ink); outline: none;
}
.search-refine input::placeholder { color: #9a95a3; }
.search-refine button {
  flex: 0 0 auto; height: 40px; padding: 0 18px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--indigo); color: #fff; font: 600 13px/1 Manrope, Inter, sans-serif; transition: background .2s;
}
.search-refine button:hover { background: var(--indigo-dark, #25174f); }
.blog-cathead .blog-result-count { margin-top: 12px; color: var(--slate); font-size: 15px; }