/* ice-steel footer/header 2026-08-31 */
:root {
  --wid-navy: #002b46;
  --wid-ink: #1c2330;
  --wid-muted: #5b6777;
  --wid-line: #d8dee6;
  --wid-paper: #f5f7fa;
  --wid-card: #fff;
  --wid-blue: #006cae; /* was #007fcd: 4.0-4.3:1 on paper/white; #006cae clears 4.5:1 everywhere incl. white text on it */
}
/* Blocksy palette-1 is the same brand blue; keep it in step so core links, buttons and the cookie banner pass too. */
html:root:not(.wi-charcoal) {
  --theme-palette-color-1: #006cae;
}
html:not(.wi-charcoal) .ct-cookies-accept-button {
  --theme-button-background-initial-color: #006cae;
}
.wid { font-family: "IBM Plex Sans", system-ui, sans-serif; color: var(--wid-ink); max-width: 1120px; margin: 0 auto; padding: 8px 4px 48px; --wid-col: calc((100% - 28px) / 3); }
.wid-kicker { letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--wid-blue); font-weight: 600; margin: 0 0 8px; }
.wid-title { font-family: Newsreader, Georgia, serif; font-size: clamp(32px, 5vw, 48px); line-height: 1.15; margin: 0 0 12px; font-weight: 600; color: var(--wid-navy); }
.wid-lede { color: var(--wid-muted); font-size: 18px; margin: 0 0 16px; }
/* Links inside running text need more than colour to stand out (WCAG 1.4.1). */
.wid p > a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
.wp-block-group.wid-wrap { max-width: 1120px; margin: 0 auto; padding: 8px 4px 0; }
.entry-content .wid-kicker, .wp-block-group.wid-wrap .wid-kicker { letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--wid-blue); font-weight: 600; margin: 0 0 8px; }
.entry-content h1.wid-title, .wp-block-group.wid-wrap h1.wid-title { font-family: Newsreader, Georgia, serif; font-size: clamp(32px, 5vw, 48px); line-height: 1.15; margin: 0 0 12px; font-weight: 600; color: var(--wid-navy); }
.wid-wrap > .wid-kicker,
.wid-wrap > h1.wid-title,
.wid-wrap > .wid-lede,
.entry-content .wid-kicker,
.entry-content h1.wid-title,
.entry-content .wid-lede { max-width: 1120px; }
.wid-mcp-source { font-size: 14px; margin: 8px 0 0; }
.wid-mcp-source a { color: var(--wid-blue); word-break: break-all; }
.wid-editorial h2 { font-family: Newsreader, Georgia, serif; font-size: 22px; margin: 28px 0 8px; color: var(--wid-navy); }
.wid-editorial ul { margin: 0 0 16px; padding-left: 1.2em; }
.wid-blog { margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.wid-blog a { color: var(--wid-blue); font-weight: 600; text-decoration: none; }
.wid-form { max-width: 480px; display: flex; flex-direction: column; gap: 6px; margin: 8px 0 32px; }
.wid-form label { font-size: 13px; font-weight: 600; color: var(--wid-navy); }
.wid-form input,
.wid-form select {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--wid-line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--wid-ink);
  background: #fff;
  margin-bottom: 10px;
}
.wid-form input:focus,
.wid-form select:focus { outline: 2px solid var(--wid-blue); border-color: var(--wid-blue); }
.wid-form .wid-visit { margin-top: 8px; align-self: flex-start; border: 0; cursor: pointer; font-family: inherit; }
.wid-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wid-search { width: 100%; box-sizing: border-box; border: 1px solid var(--wid-line); border-radius: 12px; padding: 14px 16px; font-size: 16px; background: #fff; font-family: inherit; color: var(--wid-ink); }
.wid-search:focus { outline: 2px solid var(--wid-blue); border-color: var(--wid-blue); }
.wid-groups { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
.wid-groups button { border: 1px solid var(--wid-line); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 14px; color: var(--wid-ink); cursor: pointer; font-family: inherit; }
.wid-groups button.is-on { background: var(--wid-navy); color: #fff; border-color: var(--wid-navy); }
.wid-sponsors { background: #eaf1ff; border: 1px solid #c9dbff; border-radius: 16px; padding: 16px; margin-bottom: 20px; overflow: hidden; }
.wid-sponsors-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-bottom: 12px; }
.wid-sponsors-head > span:first-child,
.wid-sponsors-head > h2:first-child { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; line-height: 1.4; margin: 0; font-family: inherit; color: var(--wid-navy); }
.wid-sponsors-note { color: var(--wid-muted); font-size: 13px; }
.wid-sponsors-cta { margin-left: auto; color: var(--wid-blue); font-weight: 600; text-decoration: none; font-size: 13px; }
.wid-sponsors-grid { margin: 0; }
.wid-sponsors-grid .wid-card[data-sponsor="demo"] .wid-sponsored,
.wid-sponsors-grid .wid-card[data-sponsor="paid"] .wid-sponsored { display: inline; }
.wid-open-mark {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px dashed #d8dee6;
  background: transparent;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.wid-open-mark img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}
.wid-sponsor {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  width: auto;
  min-height: 0;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--wid-line);
  box-sizing: border-box;
}
.wid-sponsor.open { border-style: dashed; color: var(--wid-muted); }
.wid-sponsor-body { min-width: 0; }
.wid-card { background: #fff; border: 1px solid #d8dee6; border-radius: 14px; padding: 16px; text-decoration: none; color: inherit; display: flex; flex-direction: row; align-items: flex-start; gap: 12px; min-height: 0; height: auto; box-sizing: border-box; box-shadow: none; }
.wid-sponsor strong { display: block; margin-top: 0; }
.wid-sponsor em { font-style: normal; font-size: 13px; color: var(--wid-muted); }
.wid-sponsor .badge { display: inline-block; font-size: 11px; font-weight: 700; color: var(--wid-blue); letter-spacing: .06em; text-transform: uppercase; }
.wid-collections { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 8px; }
.wid-chip { flex: 0 0 auto; border: 1px solid var(--wid-line); background: #fff; border-radius: 12px; padding: 12px 14px; text-align: left; min-width: 160px; cursor: pointer; font-family: inherit; color: inherit; }
.wid-chip strong { display: block; font-size: 14px; }
.wid-chip span { color: var(--wid-muted); font-size: 12px; }
.wid-chip.is-on { border-color: var(--wid-blue); box-shadow: 0 0 0 2px #d6e4ff; }
.wid-count { color: var(--wid-muted); font-size: 13px; margin: 0; }
.wid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.wid-view {
  display: inline-flex;
  border: 1px solid var(--wid-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}
.wid-view-btn {
  border: 0;
  background: #fff;
  color: #002b46;
  width: 36px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.wid-view-btn + .wid-view-btn { border-left: 1px solid var(--wid-line); }
.wid-view-btn.is-on {
  background: #002b46;
  color: #fff;
}
.wid-view-btn svg { display: block; }
.wid-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wid-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 20px 0 8px;
  padding: 4px 0 12px;
}
.wid-grid[data-wid-ssr="all"] .wid-card[hidden] {
  display: none !important;
}
body.tax-wi_category .wid-pagination,
body.tax-wi_category nav.navigation.pagination,
body.tax-wi_category .ct-pagination {
  display: none !important;
}
.wid-more[hidden] {
  display: none !important;
}
.wid-more__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.wid-more__actions button {
  border: 1px solid var(--wid-line);
  background: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wid-navy);
  cursor: pointer;
  font-family: inherit;
}
.wid-more__actions button:hover,
.wid-more__actions button:focus-visible {
  border-color: var(--wid-blue);
  color: var(--wid-blue);
}
.wid-more__actions button:focus-visible {
  outline: 2px solid var(--wid-blue);
  outline-offset: 2px;
}
.wid-toolbar:has(#wid-count-unused) {
  display: none !important;
}
@media (max-width: 900px) {
  .wid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wid-grid { grid-template-columns: 1fr; }
}
.wid-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wid-list .wid-card {
  min-height: 0;
  align-items: center;
  padding: 10px 14px;
}
.wid-list .wid-card > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  flex: 1;
  min-width: 0;
}
.wid-list .wid-card h3 { margin: 0; font-size: 15px; }
.wid-list .wid-card p { margin: 0; }
.wid-list .wid-flags { margin-top: 0; }
.wid-card:hover, .wid-sponsor:hover, .wid-chip:hover { border-color: var(--wid-blue); }
.wid-card img.wid-logo,
.wid-sponsor img.wid-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--wid-paper);
  flex-shrink: 0;
  display: block;
}
.wid-card h3 { margin: 0 0 4px; font-size: 16px; color: var(--wid-navy); }
.wid-card p { margin: 0; font-size: 13px; color: var(--wid-muted); }
.wid-card .wid-card-price { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--wid-navy); }
.wid-card h3 .wid-card-pick {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--wid-blue);
}
.wid-sort-note { margin: 0 0 14px; font-size: 13px; color: var(--wid-muted); }
.wid-sort-note a { color: var(--wid-blue); text-decoration: underline; }
.wid-flags { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin-top: 8px; }
/* Pills always read on one line ("FREE TRIAL", never "FREE / TRIAL"); the narrow homepage cards
   shrink the pill text instead (see .wid-home-wrap .wid-flags below). */
.wid-flags .wid-flag {
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--wid-line);
  border-radius: 999px;
  padding: 0 8px;
  line-height: 1;
  text-decoration: none;
  color: #8b95a1;
  background: #f0f2f5;
}
.wid-flags .wid-flag.is-on {
  color: var(--wid-navy);
  background: #fff;
  border-color: var(--wid-line);
}
.wid-flags .wid-flag-compare {
  background: #e8eaed;
  border-color: #c5c9d0;
  color: #4a5560;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  height: 20px;
  padding: 0 8px;
  margin: 0;
  line-height: 1;
}
.wid-flags .wid-flag-compare.is-on {
  background: #002b46;
  border-color: #002b46;
  color: #fff;
}
.wid-single .wid-visit { display: inline-block; background: var(--wid-blue); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.wid-mark {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #002b46;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}
.wid-wrap { background: var(--wid-paper); padding: 28px 16px 0; }
.wid-single { margin-top: 16px; padding-top: 32px; border-top: 1px solid var(--wid-line); }
.wid-single-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.wid-single .wid-mark,
.wid-single img.wid-logo,
.wid-single-logo {
  width: 56px;
  height: 56px;
  font-size: 22px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--wid-paper);
}
.wid-single .wid-mark {
  background: #002b46;
  color: #fff;
}
.wid-single-kicker { font-size: 13px; color: var(--wid-muted); margin: 0 0 4px; }
.wid-single h2 { font-family: Newsreader, Georgia, serif; margin: 0 0 8px; font-size: 32px; color: var(--wid-navy); font-weight: 600; }
.wid-single .wid-tagline { color: var(--wid-muted); margin: 0 0 12px; font-size: 18px; }
.wid-single .wid-desc { max-width: 640px; line-height: 1.55; margin: 0 0 20px; }
.wid-dir-foot {
  display: none;
}
body.wid-sketch { background: var(--wid-paper); }

/* Phase E: tool single + archive */
body.single-wi_tool,
body.post-type-archive-wi_tool {
  background: var(--wid-paper);
}
body.single-wi_tool .wid-single {
  margin-top: 0;
  padding-top: 8px;
  border-top: 0;
}
.wid-single h1 {
  font-family: Newsreader, Georgia, serif;
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--wid-navy);
  font-weight: 600;
}
.wid-visit:hover,
.wid-visit:focus {
  color: #fff;
  filter: brightness(0.92);
}
.wid-price {
  margin: 0 0 16px;
  color: var(--wid-ink);
  font-size: 15px;
}
.wid-price strong {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wid-muted);
  margin-bottom: 4px;
}
.wid-features {
  max-width: 640px;
  margin: 24px 0;
}
.wid-features h2 {
  font-family: Newsreader, Georgia, serif;
  font-size: 22px;
  color: var(--wid-navy);
  margin: 0 0 10px;
}
.wid-features ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wid-features li {
  border: 1px solid var(--wid-line);
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 14px;
}
.wid-related {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--wid-line);
}
.wid-related h2 {
  font-family: Newsreader, Georgia, serif;
  font-size: 22px;
  color: var(--wid-navy);
  margin: 0 0 16px;
}
.wid-archive-head { margin-bottom: 24px; }
.wid-pagination { margin-top: 28px; }
.wid-pagination a,
.wid-pagination .page-numbers {
  color: var(--wid-blue);
  font-weight: 600;
  text-decoration: none;
  margin-right: 10px;
}

/* Hide Blocksy page titles on Directory + Sponsors (avoid double H1).
   AI agents page (4758): keep Blocksy page-title as the sole H1; Gutenberg H1 removed from content. */
body.page-id-4220 h1.page-title,
body.page-id-4219 h1.page-title,
body.page-id-4225 h1.page-title,
body.page-id-4220 .hero-section,
body.page-id-4219 .hero-section,
body.page-id-4220 .ct-page-title,
body.page-id-4219 .ct-page-title,
body.page-id-4220 [data-id="hero"],
body.page-id-4219 [data-id="hero"],
body.page-id-4220 .ct-header-title,
body.page-id-4219 .ct-header-title,
body.page-id-4220 .hero-section[data-type],
body.page-id-4219 .hero-section[data-type] {
  display: none !important;
}

/* Compact 3-column navy footer (draft preview). Hide leftover Blocksy footer only. */
body.home h1.page-title,
body.home .hero-section,
body.home .ct-page-title,
body.home [data-id="hero"],
footer.ct-footer,
.ct-footer,
.site-footer:not(.wid-site-foot) {
  display: none !important;
}

.wid-site-foot {
  background: #E7EDF3 !important;
  background-color: #E7EDF3 !important;
  color: #102A43 !important;
  padding: 24px 20px 28px;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
.wid-site-foot-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
  gap: 20px 32px;
  max-width: 1120px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .wid-site-foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.wid-free-tools-grid {
  margin: 8px 0 24px;
}
.wid-free-tool-card {
  text-decoration: none;
  color: inherit;
}
.wid-free-tool-card h3 {
  color: var(--wid-navy);
}
.wid-free-tool-card:hover {
  border-color: rgba(0,127,205,0.4);
}
.wid-site-foot h2 {
  color: #102A43 !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
  margin: 0 0 8px;
}
.wid-site-foot p {
  margin: 0;
  color: #102A43 !important;
}
.wid-site-foot p + p {
  margin-top: 8px;
}
.wid-site-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wid-site-foot li {
  margin: 0;
}
.wid-site-foot a {
  color: #102A43 !important;
  text-decoration: none;
}
/* Footer links: 24px+ tap targets (WCAG 2.5.8) without changing the column look. */
.wid-site-foot li a {
  display: inline-block;
  padding: 5px 0;
}
.wid-site-foot a:focus-visible,
.wid a:focus-visible,
.wid button:focus-visible {
  outline: 2px solid var(--wid-blue, #006cae);
  outline-offset: 2px;
}
.wid-site-foot a:hover,
.wid-site-foot a:focus {
  color: #2B91D2 !important;
}
@media (max-width: 700px) {
  .wid-site-foot-grid {
    grid-template-columns: 1fr;
  }
}
.wid-site-foot-legal {
  max-width: 1120px;
  margin: 24px auto 0;
  padding-top: 14px;
  border-top: 1px solid #d8dee6;
}
.wid-site-foot-legal p {
  font-size: 12px;
  line-height: 1.5;
  color: #5c6573 !important;
}
html.wi-charcoal .wid-site-foot-legal {
  border-top-color: #2a394f;
}
html.wi-charcoal .wid-site-foot .wid-site-foot-legal p {
  color: #B0B8C2 !important;
}
.wid-site-foot-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  margin: 0 0 8px;
}
.wid-site-foot .wid-site-foot-bar a {
  display: inline-block;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
}
html.wi-charcoal .wid-site-foot .wid-site-foot-bar a {
  color: #E3E8EE !important;
}

/* Header: Directory | Blog, light on graphite */
body.wid-sketch #header,
body.wid-sketch .ct-header,
body.wid-sketch [data-header] {
  background: #E7EDF3 !important;
  background-color: #E7EDF3 !important;
}
body.wid-sketch #header .ct-menu-link,
body.wid-sketch #header .menu a,
body.wid-sketch .header-menu-1 a {
  color: #102A43 !important;
}
body.wid-sketch #header .ct-menu-link:hover,
body.wid-sketch #header .menu a:hover,
body.wid-sketch .header-menu-1 a:hover {
  color: #2B91D2 !important;
}
/* Mobile offcanvas: white lettering (desktop header stays navy on ice-steel) */
body.wid-sketch #off-canvas .ct-menu-link,
body.wid-sketch #off-canvas .menu a,
body.wid-sketch #off-canvas .mobile-menu a,
body.wid-sketch .ct-panel .mobile-menu a {
  color: #fff !important;
}
body.wid-sketch #off-canvas .ct-menu-link:hover,
body.wid-sketch #off-canvas .menu a:hover,
body.wid-sketch #off-canvas .mobile-menu a:hover,
body.wid-sketch .ct-panel .mobile-menu a:hover {
  color: #E7EDF3 !important;
}
body.single-wi_tool .ct-trending-block,
body.single-wi_tool .ct-trending,
body.single-wi_tool .ct-related-posts,
body.single-wi_tool .related-posts,
.ct-trending-block,
.ct-related-posts,
.wid-collections,
[data-id="trending"],
[data-id="related-posts"] {
  display: none !important;
}

/* Homepage From the blog row (directory-sketch only) */
.wid-blog-row {
  margin: 36px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--wid-line);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}
.wid-blog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.wid-blog-row h2 {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--wid-navy);
}
.wid-blog-sub {
  margin: 4px 0 0;
  color: var(--wid-muted);
  font-size: 14px;
}
.wid-blog-all {
  margin-left: auto;
  color: var(--wid-blue);
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}
.wid-blog-all:hover,
.wid-blog-all:focus {
  text-decoration: underline;
}
.wid-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
a.wid-card.wid-blog-card {
  flex-direction: column !important;
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid #d8dee6;
  border-radius: 14px;
  box-shadow: none !important;
  min-width: 0;
}
.wid-blog-card img {
  width: 100%;
  height: 148px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--wid-paper);
  flex-shrink: 0;
}
.wid-blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.wid-blog-card h3 {
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--wid-navy);
  line-height: 1.3;
}
.wid-blog-card p {
  margin: 0;
  font-size: 13px;
  color: var(--wid-muted);
  line-height: 1.4;
}
.wid-blog-index {
  padding: 40px 0 80px;
}
.wid-blog-meta {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wid-muted);
}
.wid-blog-grid-index {
  margin-top: 8px;
}
/* Blog search and topic chips. */
.wid-blog-search {
  margin: 20px 0 0;
  max-width: 720px;
}
.wid-blog-search-label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wid-navy);
}
.wid-blog-search-row {
  display: flex;
  gap: 8px;
}
.wid-blog-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #b9c2cd;
  border-radius: 10px;
  background: #fff;
  color: var(--wid-ink, #111827);
  font-size: 16px;
}
.wid-blog-search input[type="search"]:focus {
  outline: 2px solid var(--wid-blue);
  outline-offset: 1px;
  border-color: var(--wid-blue);
}
.wid-blog-search button {
  min-height: 44px;
  padding: 8px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--wid-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.wid-blog-search button:focus-visible {
  outline: 2px solid var(--wid-navy);
  outline-offset: 2px;
}
.wid-blog-status {
  min-height: 1.2em;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--wid-muted);
}
.wid-blog-results {
  margin: 8px 0 0;
}
.wid-blog-empty {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--wid-muted);
}
.wid-blog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 20px;
}
.wid-blog-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid #d8dee6;
  border-radius: 999px;
  background: #fff;
  color: var(--wid-navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.wid-blog-chip:hover {
  border-color: rgba(0,108,174,0.45);
}
.wid-blog-chip:focus-visible {
  outline: 2px solid var(--wid-blue);
  outline-offset: 2px;
}
.wid-blog-chip.is-active {
  background: var(--wid-navy);
  border-color: var(--wid-navy);
  color: #fff;
}
.wid-blog-chip-n {
  font-size: 12px;
  font-weight: 700;
  color: var(--wid-muted);
}
.wid-blog-chip.is-active .wid-blog-chip-n {
  color: #dbe4ee;
}
@media (max-width: 700px) {
  .wid-blog-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .wid-blog-chip {
    flex: 0 0 auto;
  }
}
.wid-blog-grid-index .wid-blog-card.is-featured {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  gap: 20px;
  padding: 16px;
}
.wid-blog-grid-index .wid-blog-card.is-featured img {
  height: 280px;
  border-radius: 10px;
}
.wid-blog-index .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.wid-blog-index .page-numbers a,
.wid-blog-index .page-numbers span {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--wid-line);
  border-radius: 8px;
  color: var(--wid-navy);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.wid-blog-index .page-numbers .current {
  background: var(--wid-navy);
  color: #fff;
  border-color: var(--wid-navy);
}
@media (max-width: 700px) {
  .wid-blog-grid {
    grid-template-columns: 1fr;
  }
  .wid-blog-all {
    margin-left: 0;
  }
  .wid-blog-grid-index .wid-blog-card.is-featured {
    grid-template-columns: 1fr;
  }
  .wid-blog-grid-index .wid-blog-card.is-featured img {
    height: 180px;
  }
}

.wid-ask-ai-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wid-blue, #006cae);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.wid-ask-ai-btn:hover,
.wid-ask-ai-btn:focus {
  color: #006aad;
}
.wid-ask-ai {
  position: absolute;
  z-index: 80;
  min-width: 168px;
  padding: 8px;
  background: #fff;
  border: 1px solid #d8dee6;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,43,70,0.12);
}
.wid-ask-ai[hidden] {
  display: none !important;
}
.wid-ask-ai-link {
  display: block;
  padding: 6px 8px;
  color: #002b46;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
}
.wid-ask-ai-link:hover,
.wid-ask-ai-link:focus {
  background: #f5f7fa;
  color: var(--wid-blue, #006cae);
}

/* Tomba mock only: hide leftover directory-card chrome if plugin still prints #wid-single */
body:has(#wi-tomba) #wid-single .wid-single-head,
body:has(#wi-tomba) #wid-single .wid-price,
body:has(#wi-tomba) #wid-single .wid-flags,
body:has(#wi-tomba) #wid-single .wid-visit,
body:has(#wi-tomba) #wid-single .wid-mcp-source,
body:has(#wi-tomba) #wid-single .wid-desc,
body:has(#wi-tomba) #wid-single .wid-features,
body:has(#wi-tomba) #wid-single .wid-compare-btn,
body:has(#wi-tomba) #wid-single .wid-related {
  display: none !important;
}
body:has(#wi-tomba) a.wid-visit {
  display: none !important;
}
/* Plugin prepends leftover chrome as .wid-single > p (logo/price/flags) around the mock */
body:has(#wi-tomba) .wid-single > p {
  display: none !important;
}
body:has(#wi-tomba) .ct-featured-image,
body:has(#wi-tomba) .ct-featured-image-container,
body:has(#wi-tomba) figure.ct-featured-image {
  display: none !important;
}

/* Pass 2: AI agents for recruiting — scoped; main /directory/ unchanged.
   Hide only real price/rating nodes (.wid-price / .wid-rating), never the Built by us badge. */
.wid-ai-agents .wid-card .wid-price,
.wid-ai-agents .wid-card .wid-rating,
.wid-cat-ai-agents .wid-card .wid-price,
.wid-cat-ai-agents .wid-card .wid-rating {
  display: none !important;
}
.wid-ai-agents .wid-card.is-first-party,
.wid-cat-ai-agents .wid-card.is-first-party {
  border: 2px solid var(--wid-blue);
  box-shadow: 0 0 0 1px rgba(0,127,205,0.12);
}
.wid-ai-agents .wid-built-badge,
.wid-cat-ai-agents .wid-built-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--wid-navy);
  color: #fff;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
/* Suppress search chrome on AI agents page (hidden #wid-q still present for directory.js) */
.wid-ai-agents .wid-search,
.wid-ai-agents .wid-search-label,
.wid-cat-ai-agents .wid-search,
.wid-cat-ai-agents .wid-search-label {
  display: none !important;
}
.wid-ai-agents .wid-req-note,
.wid-cat-ai-agents .wid-req-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--wid-muted);
}
/* Hide Compare + Ask AI on AI agents page; Add to Grok Bot is the card CTA */
.wid-ai-agents .wid-flag-compare,
.wid-cat-ai-agents .wid-flag-compare,
.wid-ai-agents .wid-ask-ai-btn,
.wid-cat-ai-agents .wid-ask-ai-btn {
  display: none !important;
}
/* Geometry matches .wid-flag-compare exactly (height 20px, padding 0 8px, 11px/700, pill). */
.wid-ai-agents .wid-cta-grok,
.wid-cat-ai-agents .wid-cta-grok {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 20px;
  margin: 8px 0 0;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  /* Default: outlined third-party */
  background: transparent;
  color: var(--wid-ink);
  border: 1px solid rgba(44, 44, 42, 0.4);
}
.wid-ai-agents .wid-cta-grok:hover,
.wid-cat-ai-agents .wid-cta-grok:hover {
  background: var(--wid-paper);
  color: var(--wid-ink);
}
/* First-party (Req-to-Outreach): solid */
.wid-ai-agents .wid-card.is-first-party .wid-cta-grok,
.wid-cat-ai-agents .wid-card.is-first-party .wid-cta-grok {
  background: #2C2C2A;
  color: #F1EFE8 !important;
  border: 0;
}
.wid-ai-agents .wid-card.is-first-party .wid-cta-grok:hover,
.wid-cat-ai-agents .wid-card.is-first-party .wid-cta-grok:hover {
  background: #2C2C2A;
  color: #F1EFE8 !important;
  filter: brightness(1.08);
}

/* AI agents job filter chips */
.wid-job-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
}
.wid-job-chips button {
  border: 1px solid var(--wid-line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--wid-ink);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.wid-job-chips button.is-on {
  background: var(--wid-navy);
  color: #fff;
  border-color: var(--wid-navy);
}
.wid-job-chips button:focus-visible {
  outline: 2px solid var(--wid-blue);
  outline-offset: 2px;
}
.wid-empty {
  color: var(--wid-muted);
  text-align: center;
  padding: 32px 16px;
  margin: 0;
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .wid-job-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -4px;
    margin-right: -4px;
    padding: 0 4px 6px;
  }
  .wid-job-chips::-webkit-scrollbar {
    display: none;
  }
  .wid-job-chips button {
    flex: 0 0 auto;
  }
}

/* Browse by category tiles (directory pass 3) */
.wid-cats {
  margin: 40px 0 24px;
  padding: 0 4px;
}
.wid-cats__title {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
  color: var(--wid-navy);
  font-weight: 700;
}
.wid-cats__lede {
  margin: 0 0 28px;
  color: var(--wid-muted);
  font-size: 15px;
  max-width: 40rem;
}
.wid-cats__group {
  margin-bottom: 28px;
}
.wid-cats__group-label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wid-navy);
}
.wid-cats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
/* /directory/ renders .wid-cats outside #wid-root (1120px); cap it to the home-page width so tiles match. */
.wid-wrap > .wid-cats {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .wid-wrap > .wid-cats {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 768px) {
  .wid-cats__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .wid-cats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.wid-cats {
  --wid-cat-record: #0073ba;
  --wid-cat-find: #2E8B77;
  --wid-cat-reach: #C1743A;
  --wid-cat-assess: #7B5EA7;
  --wid-cat-pay: #4A7C3F;
  --wid-cat-grow: #B4576B;
}
.wid-cat-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  height: 100%;
  box-sizing: border-box;
  padding: 16px;
  background: #fff;
  border: 1px solid #d8dee6;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
}
.wid-cat-tile--record { --wid-cat-accent: var(--wid-cat-record); }
.wid-cat-tile--find { --wid-cat-accent: var(--wid-cat-find); }
.wid-cat-tile--reach { --wid-cat-accent: var(--wid-cat-reach); }
.wid-cat-tile--assess { --wid-cat-accent: var(--wid-cat-assess); }
.wid-cat-tile--pay { --wid-cat-accent: var(--wid-cat-pay); }
.wid-cat-tile--grow { --wid-cat-accent: var(--wid-cat-grow); }
.wid-cat-tile--record:hover {
  background: rgba(0,115,186,0.07);
  border-color: rgba(0,115,186,0.35);
}
.wid-cat-tile--find:hover {
  background: rgba(46, 139, 119, 0.07);
  border-color: rgba(46, 139, 119, 0.35);
}
.wid-cat-tile--reach:hover {
  background: rgba(193, 116, 58, 0.07);
  border-color: rgba(193, 116, 58, 0.35);
}
.wid-cat-tile--assess:hover {
  background: rgba(123, 94, 167, 0.07);
  border-color: rgba(123, 94, 167, 0.35);
}
.wid-cat-tile--pay:hover {
  background: rgba(74, 124, 63, 0.07);
  border-color: rgba(74, 124, 63, 0.35);
}
.wid-cat-tile--grow:hover {
  background: rgba(180, 87, 107, 0.07);
  border-color: rgba(180, 87, 107, 0.35);
}
@supports (background: color-mix(in srgb, red 7%, transparent)) {
  .wid-cat-tile:hover {
    background: color-mix(in srgb, var(--wid-cat-accent) 7%, transparent);
    border-color: color-mix(in srgb, var(--wid-cat-accent) 35%, transparent);
  }
}
.wi-icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--wid-cat-icon, var(--wid-cat-accent, currentColor));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wid-cat-tile__icon {
  display: inline-flex;
  align-items: center;
  opacity: 1;
}
.wid-cat-tile__name {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 15px;
  font-weight: 500;
  color: var(--wid-navy);
  line-height: 1.3;
}
.wid-cat-tile__count {
  font-size: 13px;
  color: var(--wid-muted);
}
@media (max-width: 767px) {
  .wi-icon {
    width: 18px;
    height: 18px;
  }
}

/* Compact directory hero - namespaces only; matches tile border/radius */
.wid-sponsors-grid .wid-sponsor-open {
  border-style: dashed;
  text-decoration: none;
  color: inherit;
}
.wid-sponsors-grid .wid-sponsor-open h3 {
  color: var(--wid-navy);
}
.wid-sponsors-grid .wid-sponsor-open p {
  color: var(--wid-muted);
}
html.wi-charcoal .wid-sponsors-grid .wid-sponsor-open {
  border-color: #2a394f;
}
html.wi-charcoal .wid-sponsors-grid .wid-sponsor-open h3 {
  color: #F4F7FA;
}
html.wi-charcoal .wid-sponsors-grid .wid-sponsor-open p {
  color: #B0B8C2;
}
.wid-hero {
  margin: 20px 0 18px;
  padding: 1.75rem 1.25rem 1.5rem;
  background: #f5f7fa;
  background: linear-gradient(160deg, #f9fbfd 0%, #f3f6fa 55%, #e9eff7 100%);
  border: 1px solid #e3e8ee;
  border-radius: 18px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .wid-hero {
    padding: 2.5rem 2.25rem 2rem;
  }
}
html.wi-charcoal .wid-hero {
  background: #0c131f;
  border-color: #142235;
}
.wid-hero__title {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.15;
  margin: 0 0 10px;
  font-weight: 600;
  color: var(--wid-navy);
  text-align: center;
}
.wid-hero__sub {
  margin: 0 auto 18px;
  max-width: 42rem;
  color: var(--wid-muted);
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
}
.wid-hero__search {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 20px;
}
.wid-hero__search .wid-search {
  width: 100%;
}
.wid-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}
.wid-stats__item {
  background: #fff;
  border: 1px solid #d8dee6;
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  box-sizing: border-box;
}
.wid-stats__num {
  display: block;
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 700;
  color: var(--wid-navy);
  line-height: 1.1;
}
.wid-stats__label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--wid-muted);
  letter-spacing: .02em;
}
.wid-logos {
  margin: 0 0 22px;
}
.wid-logos__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wid-logos__track {
  display: flex;
  width: max-content;
  animation: wid-logos-marquee 40s linear infinite;
}
.wid-logos__row {
  display: flex;
  gap: 18px;
  padding-right: 18px;
  flex: 0 0 auto;
  align-items: center;
}
.wid-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #d8dee6;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
  text-decoration: none;
}
.wid-logos__item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .2s ease, opacity .2s ease;
}
.wid-logos__item:hover img {
  filter: none;
  opacity: 1;
}
@keyframes wid-logos-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .wid-logos__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .wid-logos__row[aria-hidden="true"] {
    display: none;
  }
  .wid-logos__row {
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
    gap: 12px;
  }
}
.wid-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 16px;
}
.wid-points__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #d8dee6;
  border-radius: 14px;
  padding: 14px 16px;
  box-sizing: border-box;
}
.wid-points__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--wid-navy);
}
.wid-points__icon .wi-icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}
.wid-points__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wid-points__copy strong {
  font-size: 14px;
  color: var(--wid-navy);
  font-weight: 600;
}
.wid-points__copy span {
  font-size: 13px;
  color: var(--wid-muted);
  line-height: 1.4;
}
.wid-hero__actions {
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: flex-end;
}
.wid-hero__actions a {
  color: var(--wid-blue);
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}
.wid-how {
  max-width: 42rem;
  margin: 28px auto 8px;
  padding: 0 4px 8px;
}
.wid-how__title {
  font-family: Newsreader, Georgia, serif;
  font-size: 20px;
  margin: 0 0 10px;
  color: var(--wid-navy);
  font-weight: 600;
}
.wid-how__p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--wid-muted);
}
.wid-how__p:last-child {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .wid-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .wid-stats {
    gap: 8px;
  }
  .wid-stats__item {
    padding: 12px 8px;
  }
  .wid-hero__sub {
    font-size: 15px;
  }
}

/* AI agents hub: note callout + below-grid muted links */
.entry-content .wid-note,
.wid-note {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--wid-line);
  border-left: 3px solid var(--wid-blue);
  border-radius: 12px;
  background: var(--wid-paper);
  color: var(--wid-ink);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.entry-content .wid-note p,
.wid-note p {
  margin: 0;
}
.entry-content .wid-ai-below-wrap,
.wid-ai-below-wrap {
  margin: 12px 0 0;
  max-width: 100%;
}
.entry-content .wid-ai-below,
.wid-ai-below {
  margin: 0 0 6px;
  color: var(--wid-muted);
  font-size: 14px;
  line-height: 1.5;
}
.entry-content .wid-ai-below:last-child,
.wid-ai-below:last-child {
  margin-bottom: 0;
}
.entry-content .wid-ai-below a,
.wid-ai-below a {
  color: var(--wid-blue);
  text-decoration: none;
}
.entry-content .wid-ai-below a:hover,
.wid-ai-below a:hover {
  text-decoration: underline;
}

/* Free pages */
.wid-free .wid-free-cat{margin:2rem 0 1.25rem;}
.wid-free .wid-free-cat__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:0.75rem;}
.wid-free .wid-free-cat__head h2{margin:0;font-size:clamp(1.2rem,2vw,1.45rem);color:var(--wid-navy,#192a3d);}
.wid-free .wid-free-cat__head h2 a{color:inherit;text-decoration:none;}
.wid-free .wid-free-cat__free-link,.wid-free .wid-free-see-all a{color:var(--wid-blue,#007fcd);font-weight:600;text-decoration:none;font-size:0.95rem;}
.wid-free .wid-free-see-all{margin:0.85rem 0 0;text-align:right;}
.wid-free .wid-free-trials{margin:2.5rem 0 1rem;padding-top:1.5rem;border-top:1px solid #e5e7eb;}
.wid-free .wid-free-trials h2{margin:0 0 0.5rem;font-size:clamp(1.2rem,2vw,1.45rem);color:var(--wid-navy,#192a3d);}
@media (min-width:768px){.wid-home-curated__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1024px){.wid-home-curated__grid{grid-template-columns:repeat(4,minmax(0,1fr));}}


/* wid-pricing-facet phase2 */
.wid-pricing-facet {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px 0 24px;
}
.wid-pricing-facet button {
  border: 1px solid var(--wid-line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--wid-ink);
  cursor: pointer;
  font-family: inherit;
}
.wid-pricing-facet button.is-on {
  background: var(--wid-navy);
  color: #fff;
  border-color: var(--wid-navy);
}
.wid-flags .wid-flag-pricing {
  /* same visual weight as MCP .wid-flag.is-on — never larger */
  font-size: 11px;
  font-weight: 700;
  height: 20px;
  padding: 0 8px;
}
/* Homepage cards (Featured, Just added, Popular in) are narrow: keep all pills on one row
   by shrinking the pill text rather than letting a pill break onto two lines. */
.wid-home-wrap .wid-flags { gap: 4px; }
.wid-home-wrap .wid-flags .wid-flag {
  font-size: 10px;
  padding: 0 6px;
  letter-spacing: .02em;
}
@media (min-width: 1024px) and (max-width: 1099px) {
  .wid-home-wrap .wid-flags .wid-flag {
    font-size: 9px;
    padding: 0 5px;
    letter-spacing: 0;
  }
}
/* Below 1024px three cards are too narrow for a four-pill row at any readable size, so
   Featured and Just added go two-up there, the same breakpoints Popular in already uses. */
@media (min-width: 640px) and (max-width: 1023px) {
  .wid-home-wrap .wid-home-just-added__grid,
  .wid-home-wrap .wid-home-sponsored__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- AI agents hub (/ai-agents-for-recruiting/, page 4758). Violet = existing AI colour. ---- */
body.page-id-4758 .hero-section .entry-header {
  background: linear-gradient(135deg, #ECE8FB 0%, #F7F5FE 45%, #FFFFFF 100%);
  border: 1px solid #DDD7F3;
  border-radius: 18px;
  padding: 28px 24px;
}
body.page-id-4758 .entry-content .wid-note {
  background: #F5F6F8;
  border-left-width: 5px;
  border-radius: 14px;
  padding: 16px 20px;
}
.wid-cat-ai-agents .wid-agent-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 16px;
}
.wid-cat-ai-agents .wid-agent-stat {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  background: #F2F0FC;
  border: 1px solid #CFC7EE;
  color: #4A3B9B;
}
.wid-cat-ai-agents .wid-agent-stat-main {
  background: #6B5BC7;
  border-color: #6B5BC7;
  color: #fff;
}
.wid-cat-ai-agents .wid-agent-steps {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.wid-cat-ai-agents .wid-agent-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  background: #F7F5FE;
  border: 1px solid #DDD7F3;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--wid-ink);
}
.wid-cat-ai-agents .wid-agent-step-n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #6B5BC7;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.wid-cat-ai-agents .wid-agent-search {
  position: relative;
  margin: 0 0 12px;
}
.wid-cat-ai-agents .wid-agent-search-ico {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6B5BC7;
  pointer-events: none;
}
.wid-cat-ai-agents .wid-agent-search input.wid-agent-q {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 0 16px 0 46px;
  border: 1px solid #CFC7EE;
  border-radius: 14px;
  background: #fff;
  color: var(--wid-ink);
  font-family: inherit;
  font-size: 16px;
}
.wid-cat-ai-agents .wid-agent-search input.wid-agent-q:focus {
  outline: 2px solid #6B5BC7;
  outline-offset: 1px;
  border-color: #6B5BC7;
}
.wid-cat-ai-agents .wid-job-chips button {
  min-height: 44px;
  border-color: #CFC7EE;
  color: #4A3B9B;
  font-weight: 600;
}
.wid-cat-ai-agents .wid-job-chips button:not(.is-on):hover {
  background: #F2F0FC;
}
.wid-cat-ai-agents .wid-job-chips button.is-on {
  background: #6B5BC7;
  border-color: #6B5BC7;
  color: #fff;
}
.wid-cat-ai-agents .wid-card {
  border-top: 3px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wid-cat-ai-agents .wid-card:hover {
  transform: translateY(-2px);
  border-top-color: #6B5BC7;
  box-shadow: 0 8px 22px rgba(74, 59, 155, .12);
}
@media (prefers-reduced-motion: reduce) {
  .wid-cat-ai-agents .wid-card,
  .wid-cat-ai-agents .wid-card:hover {
    transition: none;
    transform: none;
  }
}
.wid-cat-ai-agents .wid-card .wid-agent-jobs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}
.wid-cat-ai-agents .wid-card .wid-agent-job {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  background: #F2F0FC;
  border: 1px solid #CFC7EE;
  color: #4A3B9B;
}
.wid-cat-ai-agents .wid-card .wid-agent-by {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--wid-muted);
}
.wid-cat-ai-agents .wid-card .wid-agent-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.wid-cat-ai-agents .wid-agent-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin: 28px 0 0;
  padding: 20px 24px;
  background: linear-gradient(135deg, #ECE8FB 0%, #F7F5FE 60%, #FFFFFF 100%);
  border: 1px solid #DDD7F3;
  border-radius: 18px;
}
.wid-cat-ai-agents .wid-agent-submit p {
  margin: 0;
}
.wid-cat-ai-agents .wid-agent-submit-h {
  font-size: 18px;
  font-weight: 700;
  color: #3B2F85;
}
.wid-cat-ai-agents .wid-agent-submit-p {
  font-size: 15px;
  color: var(--wid-ink);
}
.wid-cat-ai-agents a.wid-agent-submit-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: #6B5BC7;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.wid-cat-ai-agents a.wid-agent-submit-btn:hover {
  background: #4A3B9B;
  color: #fff;
}
.wid-cat-ai-agents a.wid-agent-submit-btn:focus-visible {
  outline: 2px solid #4A3B9B;
  outline-offset: 2px;
}

/* Category FAQ. */
.wid .wid-cat-faq {
  margin: 28px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--wid-line);
}
.wid .wid-cat-faq h2 {
  margin: 0 0 12px;
  font-size: 18px;
  color: var(--wid-navy);
}
.wid .wid-cat-faq-list {
  display: grid;
  gap: 8px;
}
.wid .wid-cat-faq-item {
  border: 1px solid var(--wid-line);
  border-radius: 12px;
  background: var(--wid-card, #fff);
}
.wid .wid-cat-faq-item summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--wid-navy);
}
.wid .wid-cat-faq-item[open] {
  background: var(--wid-tint, #f5f8ff);
}
.wid .wid-cat-faq-a {
  padding: 0 16px 14px;
}
.wid .wid-cat-faq-a p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wid-ink);
}
.wid .wid-cat-faq-foot {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--wid-muted);
}