/**
 * OPC 社区首页专属样式覆盖（front-page.php 独占，仅 is_front_page() 时加载）。
 *
 * 【隔离约定】依据 opc-functions.php 顶部 CSS 隔离说明：本文件是首页模块分片，
 * 只在这里写首页的新增样式与对基座（components.css）的覆盖，严禁改动
 * tokens.css / components.css / 其它 opc-*.css。所有覆盖用 `.page-frame ...`
 * 或独立新类选择器，确保等于或高于基座优先级、且不外溢到其它页面。
 *
 * 依赖：opc-prototype-components（见 enqueue 处 dep 声明）。
 * 覆盖点：
 *   #6a 首页两栏窄容器内 rich-meta 异常换行修复
 *   #6b 创意种子模块差异化（左侧强调色条 / 种子意象点缀）
 *   #6c OPC创业赋能生态 eco-* 卡片差异化（含精选大卡 .eco-feature-card）
 *   #6d 有求必应的互助交流 两栏话题行观感
 *   #6e 最新入驻的OPC 网址导航式三列网格（.opc-home-navgrid）
 *   #6f 可复制的启动SOP 模块打磨（标题图标 / 成本周期分隔观感）
 */

/* ================================================================== *
 * #6a 成功案例 rich-meta 换行修复
 * 首页两栏容器较窄，基座 .rich-meta 固定 76px 会把 who/pill/revenue 挤到换行。
 * 这里放宽最小宽度、禁止内部换行、保持右对齐竖排整齐。
 * ================================================================== */
.page-frame .rich-row .rich-meta {
  width: auto;
  min-width: 84px;
  max-width: 120px;
  align-items: flex-end;
  text-align: right;
  white-space: nowrap;
}
.page-frame .rich-row .rich-meta .who,
.page-frame .rich-row .rich-meta .revenue,
.page-frame .rich-row .rich-meta .rich-batch {
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================================================================== *
 * #6b 创意种子模块差异化（保留两栏，但与"成功案例"拉开区隔度）
 * 手法：种子/生长意象的青绿强调色，卡片间留白 + 悬浮上浮点亮，
 * 去掉左侧强调色条（用户反馈过于突出，改为更克制的留白+悬浮层级）。
 * 克制处理：只借用 idea-home-section 作用域，不改 idea-card 结构。
 * ================================================================== */
.page-frame .idea-home-section {
  --idea-accent: #17a06e; /* 种子/生长意象青绿，仅本模块作用域内生效 */
}
/* 2026-07-16：创意种子改用 .rich-row 行式（idea-row.php），与成功案例同版式。
   rich-row 靠 border-bottom 分隔，故列内不再要 gap；hover 只把标题染青绿，
   与案例的品牌蓝 hover 区隔。原针对纵向 .idea-card 的上浮/边框 hover 已不适用。 */
.page-frame .idea-home-section .col-stack {
  gap: 0;
}
.page-frame .idea-row-wrap .rich-row:hover .rich-name {
  color: var(--idea-accent);
}
.page-frame .idea-row-wrap .rich-row:hover .rich-thumb {
  box-shadow: none;
}
/* 2026-07-16e：创意种子容器复刻成功案例浅蓝圆角面板（idea-row-wrap 单独上底色/圆角/内边距，
   与案例 .case-two-col 观感一致但作用域独立，不影响归档页纵向 idea-card）。 */
.page-frame .idea-home-section .idea-row-wrap {
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  padding: 20px 28px;
}
/* 面板内两栏 col-stack 基座含 padding:0 35px，配合面板 28px 内边距会过挤，收窄一档。 */
.page-frame .idea-home-section .idea-row-wrap .col-stack {
  padding: 0 24px;
}
.page-frame .idea-home-section .idea-row-wrap .col-stack:first-child { padding-left: 0; }
.page-frame .idea-home-section .idea-row-wrap .col-stack:last-child { padding-right: 0; }
/* 浅蓝底吞掉基座 --line 中缝与行分隔，改黑色淡描边；hover 用 --surface 同色失效，改白底浮起。 */
.page-frame .idea-home-section .idea-row-wrap::after { background: rgba(0, 0, 0, .07); }
.page-frame .idea-home-section .idea-row-wrap .rich-row { border-bottom-color: rgba(0, 0, 0, .06); }
.page-frame .idea-home-section .idea-row-wrap .rich-row:hover { background: #fff; }
/* idea-row 右侧 meta：竖排 适合人群 + 成熟度徽章，宽度放宽以容纳中文 */
.page-frame .idea-row-wrap .rich-row .idea-row-meta {
  width: auto;
  min-width: 92px;
  max-width: 128px;
  gap: 8px;
}
.page-frame .idea-row-wrap .rich-row .idea-row-meta .idea-audience {
  text-align: right;
  -webkit-line-clamp: 2;
}
.page-frame .idea-row-wrap .rich-row .idea-row-meta .idea-mom-pill {
  align-self: flex-end;
  font-size: 11px;
  padding: 2px 9px;
}

/* ================================================================== *
 * #6c OPC创业赋能生态 eco-* 差异化
 * 与"启动SOP"同为 home-grid，用品牌蓝强调、卡片顶部细条，做出区隔。
 * ================================================================== */
.page-frame .eco-home-section {
  --eco-accent: #4d6bfe; /* 品牌蓝（=全站 --accent），与其余模块统一 */
}
.page-frame .eco-grid .eco-card {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(14deg, #fff 78%, rgba(77,107,254,.08) 100%);
}
.page-frame .eco-grid .eco-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--eco-accent), rgba(77,107,254,.2));
}
.page-frame .eco-grid .eco-card:hover .home-card-title {
  color: var(--eco-accent);
}
.page-frame .eco-grid .eco-card .home-card-tag {
  color: var(--eco-accent);
  font-weight: 600;
}
.page-frame .eco-feature-card:hover {
  box-shadow: 0 16px 30px -18px rgba(77, 107, 254, .35);
}
.page-frame .eco-feature-card .feature-flag {
  color: var(--eco-accent);
}
.page-frame .eco-feature-card .feature-foot {
  color: var(--eco-accent);
}
/* 左栏简介限制在合理行高内，赛道标签与 CTA 之间留出呼吸感 */
.page-frame .eco-feature-card .feature-desc {
  margin-bottom: 16px;
}
.page-frame .eco-feature-card .feature-badges {
  margin-bottom: 18px;
}
/* 精选标签内的"已核实"小徽标 */
.page-frame .eco-feature-card .eco-verified-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(77, 107, 254, .12);
  color: var(--eco-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: middle;
}
.page-frame .eco-feature-card .eco-verified-flag::before {
  content: "✓";
  font-size: 10px;
}

/* 右栏：机构档案面板（原右栏只有常空的加入方式，现填充结构化事实） */
.page-frame .eco-feature-card .feature-side {
  flex: 1.05;
  justify-content: flex-start;
  gap: 0;
  background: linear-gradient(150deg, #eef1ff 0%, #f5f7ff 100%);
}
.page-frame .eco-feature-card .feature-side::before {
  border-color: rgba(77, 107, 254, .22);
  box-shadow: 0 0 0 14px rgba(77, 107, 254, .05), 0 0 0 30px rgba(77, 107, 254, .035);
}
.page-frame .eco-feature-card .feature-side::after {
  background: radial-gradient(circle, rgba(77, 107, 254, .14), transparent 70%);
}
.page-frame .eco-feature-card .feature-side-head {
  color: var(--eco-accent);
}
/* 事实定义列表：每行 label 左 / value 右，细分隔线拉出条理感 */
.page-frame .eco-feature-card .eco-facts {
  position: relative;
  z-index: 1;
  margin: 0 0 4px;
  display: flex;
  flex-direction: column;
}
.page-frame .eco-feature-card .eco-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(77, 107, 254, .12);
}
.page-frame .eco-feature-card .eco-fact:first-child {
  padding-top: 0;
}
.page-frame .eco-feature-card .eco-fact dt {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.page-frame .eco-feature-card .eco-fact dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  line-height: 1.4;
}
/* 加入方式：档案面板底部的强调行动块 */
.page-frame .eco-feature-card .eco-join {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(77, 107, 254, .18);
}
.page-frame .eco-feature-card .eco-join-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--eco-accent);
  margin-bottom: 4px;
}
.page-frame .eco-feature-card .eco-join-text {
  display: block;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}

/* ================================================================== *
 * #6f 可复制的启动SOP 首页模块打磨
 * "难度"维度已在M2整体删除，_opc_sop_cost 历史文案里残留的"中/低"前缀
 * 改由 opc_strip_difficulty_prefix() 在展示层剥离（不回写文章数据）。
 * 这里只做视觉细节打磨：三格网格的成本/周期分隔改用圆点替代裸露的
 * " · "文本，弱化次要信息的视觉权重（标题图标已移交"十倍提效的AI工具"）。
 * ================================================================== */
/* 2026-07-16e：按需求移除"AI工具"标题前 🛠 图标（idea 的 🌱 一并移除，见上）。 */
.page-frame .sop-home-section .home-grid .home-card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.page-frame .sop-home-section .home-grid .home-card-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted-2);
  flex-shrink: 0;
}

/* ================================================================== *
 * #6d 有求必应的互助交流 两栏话题行
 * 复用基座 .thread-row 观感；两栏中缝用 .two-col-wrap 既有分隔线。
 * thread-row 基座带 margin:0 -14px，两栏 col-stack 已含左右 padding，
 * 无需额外覆盖，仅微调标题裁剪，避免长标题撑破窄列。
 * ================================================================== */
.page-frame .forum-two-col .thread-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-frame .forum-two-col .thread-meta {
  flex-wrap: wrap;
}

/* ================================================================== *
 * #6e 最新入驻的OPC —— 网址导航式三列整表格网格（refer/06.png 观感）
 * 整体为一个带外边框的表格容器，每个OPC占一个格子，格子间用内部分隔线
 * 相连（非独立圆角卡片）。分隔线做法：容器画外框，格子只画 top/left，
 * 首行去 top、首列去 left，避免与外框重叠出现双线。
 * ================================================================== */
.page-frame .opc-home-navgrid {
  display: grid;
  /* 自适应网格：根据容器宽度自动决定列数，避免固定3列导致3+1布局失衡 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);  /* 浅灰底（对齐首页 OPC资讯 --surface） */
}
.page-frame .opc-nav-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid rgba(0, 0, 0, .06);
  border-left: 1px solid rgba(0, 0, 0, .06);
  text-decoration: none;
  color: inherit;
  transition: background-color .18s ease;
}
.page-frame .opc-nav-card:nth-child(-n+3) {
  border-top: none;
}
.page-frame .opc-nav-card:nth-child(3n+1) {
  border-left: none;
}
.page-frame .opc-nav-card:hover {
  background: #fff;
}
.page-frame .opc-nav-card:hover .opc-nav-name {
  color: var(--accent);
}
.page-frame .opc-nav-icon {
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--surface);
}
/* 2026-07-16f：图片占位统一为「灰字 + 白底 + 无线框」低调样式（底色由浅灰改白）。 */
.page-frame .opc-nav-icon--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-display);
}
.page-frame .opc-nav-text {
  min-width: 0;
  flex: 1;
}
.page-frame .opc-nav-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.page-frame .opc-nav-name {
  min-width: 0;
  flex: 0 1 auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .18s ease;
}
.page-frame .opc-nav-city {
  flex-shrink: 0;
  padding-left: 8px;
  border-left: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted-2);
  line-height: 1;
}
.page-frame .opc-nav-desc {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-frame .opc-nav-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.page-frame .opc-nav-tags .pill.opc-nav-tag {
  padding: 2px 9px;
  font-size: 11px;
  line-height: 1.6;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line);
}

/* 响应式：窄屏降列，保持网址导航密度可读。降列后表格分隔线规则需按新列数重算 */
@media (max-width: 860px) {
  .page-frame .opc-home-navgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-frame .opc-nav-card {
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
  .page-frame .opc-nav-card:nth-child(-n+2) {
    border-top: none;
  }
  .page-frame .opc-nav-card:nth-child(2n+1) {
    border-left: none;
  }
}
@media (max-width: 560px) {
  .page-frame .opc-home-navgrid {
    grid-template-columns: 1fr;
  }
  .page-frame .opc-nav-card {
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .page-frame .opc-nav-card:first-child {
    border-top: none;
  }
}

/* ================================================================== *
 * #6f 首页主行动按钮纯科技蓝（不使用 .btn-solid/.btn-cta-light 默认蓝紫渐变）
 * 与 components.css #444 起投稿按钮纯蓝覆盖手法一致，仅作用于首页 .cta-plain。
 * ================================================================== */
.cta-plain.btn-solid,
.cta-plain.btn-cta-light {
  background: var(--accent) !important;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), .28);
}
.cta-plain.btn-solid:hover,
.cta-plain.btn-cta-light:hover {
  background: #3a57ef !important;
}

/* ================================================================== *
 * #6g 2026-07-16 首页密度优化：成功案例删简介后收紧，创意种子行式同档收紧。
 * 基座 .rich-row 为 height:136px / padding:22px 14px / thumb 96×72，
 * 删掉 .rich-desc 后行高冗余，这里在首页两栏作用域内压缩到更紧凑的节奏，
 * 不改 components.css 基座（归档页 rich-row 维持原观感）。
 * ================================================================== */
.page-frame .case-two-col .rich-row,
.page-frame .idea-row-wrap .rich-row {
  height: auto;
  min-height: 0;
  padding: 12px 14px;
  gap: 12px;
}
.page-frame .case-two-col .rich-thumb {
  width: 84px;
  height: 54px;
}
.page-frame .case-two-col .rich-body,
.page-frame .idea-row-wrap .rich-body {
  gap: 5px;
  justify-content: center;
}

/* ================================================================== *
 * #6h 方案C：资讯板块降密增质。每栏首条 .news-lead 头条大卡（整宽 16:9 顶图
 * + 大标题），其余 .news-row 保持行式但 padding 略放宽、分隔虚线调更淡。
 * ================================================================== */
.page-frame .news-two-col { padding-bottom:0px; }
 .page-frame .news-two-col .news-row {
  padding: 16px 14px;
  border-bottom-color: rgba(0, 0, 0, .06);
  background: var(--surface);  /* 浅蓝底（品牌色 5% 淡染） */
  border-radius: 20px;                   /* 灰底面板圆角 */
}
 .page-frame .news-two-col .case-news-row { background: none; }
/* 2026-07-16f：资讯栏「最新资讯 / 最热资讯」列标题弱化 —— 去基座蓝色下划线、
   不加粗、改灰色，退成轻量分栏标签而非强调标题。 */
.page-frame .news-two-col .col-title {
  border-bottom: none;
  padding-bottom: 0;
  font-weight: 400;
  color: var(--muted);
}
/* 2026-07-16b：成功案例质感再设计 —— 纯浅灰扁平通铺底（去基座圆角方框+渐变），
   整段像一块低调的"上岸榜单"面板，与资讯栏行式一致但用灰底与其它白底区块拉开层次。
   作用域限定 .page-frame，不影响 components.css 基座与归档页 .opc-arc。 */
.page-frame .two-col-wrap.case-two-col {
  border-radius: 20px;                   /* 灰底面板圆角 */
  border: none;
  overflow: hidden;                      /* 圆角需裁切内容 */
  background: var(--surface);            /* 浅灰底（对齐首页 OPC资讯 --surface） */
  padding: 20px 28px;                   /* 底内留呼吸，两栏不贴边 */
}
/* 灰底上分隔线（基座 --line #ececed 会被灰底吞掉）改用更清晰的描边色。 */
.page-frame .two-col-wrap.case-two-col::after { background: rgba(0, 0, 0, .07); }
/* 灰底下 news-row 的 hover 高亮（基座用 --surface 会与底色同色而失效）改为白色浮起。 */
.page-frame .case-news-two-col .news-row { border-bottom-color: rgba(0, 0, 0, .06); }
.page-frame .case-news-two-col .news-row:hover { background: #fff; }
/* 2026-07-16f：案例/SOP 行无封面占位块统一为「灰字 + 白底 + 无线框」低调样式。 */
.page-frame .case-news-two-col .news-thumb--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: #fff;
  border: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  user-select: none;
}
/* 2026-07-16：启动SOP 完全复刻成功案例版式（容器复用 case-two-col/case-news-two-col 全套：
   圆角/内边距/分隔线/hover/占位块自动继承），仅底色单独改浅灰，与案例的浅蓝区分。 */
.page-frame .two-col-wrap.sop-two-col { background: var(--surface); /* 浅灰底（对齐首页 OPC资讯 --surface） */ }
.page-frame .news-two-col .news-lead {
  display: block;
  margin: 0 -14px 8px;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: box-shadow .2s ease, transform .2s ease;
}
.page-frame .news-two-col .news-lead:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.page-frame .news-two-col .news-lead:hover .news-lead-title {
  color: var(--accent);
}
.page-frame .news-two-col .news-lead-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  overflow: hidden;
}
.page-frame .news-two-col .news-lead-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-frame .news-two-col .news-lead-cover--ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  user-select: none;
}
.page-frame .news-two-col .news-lead-cat {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  backdrop-filter: blur(2px);
}
.page-frame .news-two-col .news-lead-body {
  padding: 12px 16px 14px;
}
.page-frame .news-two-col .news-lead-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
  transition: color .15s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-frame .news-two-col .news-lead-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted-2);
}
.page-frame .news-two-col .news-lead-views {
  margin-left: auto;
  font-weight: 600;
  color: var(--muted);
}

/* ================================================================== *
 * 2026-07-17 首页交互微调
 * ================================================================== */

/* #6b「你的OPC在哪一站」：卡片由整体链接改为容器 + 卡内双链接（预埋两条路径）。
 * 卡片本体去掉 .stage-card 的 :hover 抬升（改由链接各自高亮），保留渐变/焦点底。 */
.page-frame .stage-links {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.page-frame .stage-link {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: .01em;
  transition: color .15s ease, transform .15s ease;
}
.page-frame .stage-link:hover {
  color: var(--accent-hover);
  transform: translateX(2px);
}
/* 容器化后不再整卡跳转，hover 抬升交给链接；卡片仅保留轻微底色反馈 */
.page-frame .stage-card:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* #6d 资讯行：news-stats（右侧浏览数）与 news-body 顶部对齐（原基线 align-self:flex-end 沉底）。 */
.page-frame .news-row .news-stats {
  align-self: flex-start;
}

/* #6f 创意种子：idea-audience（适合人群）字体精修 + 品牌蓝，与右侧成熟度徽章拉开语义。 */
.page-frame .idea-row-wrap .rich-row .idea-row-meta .idea-audience {
  text-align: right;
  -webkit-line-clamp: 2;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--muted);
}
.page-frame .idea-row-wrap .rich-row .idea-row-meta .idea-audience .idea-audience-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  opacity: .7;
  padding-right: 3px;
}

/* 2026-07-18：创意种子首页改用 .news-row 版式（idea-row-home），每 item 均含封面缩略图。
   容器补挂 case-news-two-col 复用整套 news-row 面板样式（圆角/内边距/分隔线/hover/占位块）。
   成熟度徽章配色 opc-idea.css 首页不加载，此处补进首页作用域，复刻归档页 rgba 语义色。 */
.page-frame .idea-home-section .news-row .news-stats .idea-mom-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
}
.page-frame .idea-home-section .news-row .idea-mom-pill.mom-emerging {
  background: rgba(52, 211, 153, 0.08); color: rgb(16, 185, 129); border-color: rgba(52, 211, 153, 0.2);
}
.page-frame .idea-home-section .news-row .idea-mom-pill.mom-rising {
  background: rgba(59, 130, 246, 0.08); color: rgb(37, 99, 235); border-color: rgba(59, 130, 246, 0.2);
}
.page-frame .idea-home-section .news-row .idea-mom-pill.mom-validated {
  background: rgba(16, 185, 129, 0.08); color: rgb(5, 150, 105); border-color: rgba(16, 185, 129, 0.2);
}
.page-frame .idea-home-section .news-row .idea-mom-pill.mom-saturated {
  background: rgba(239, 68, 68, 0.08); color: rgb(220, 38, 38); border-color: rgba(239, 68, 68, 0.2);
}
.page-frame .idea-home-section .news-row .idea-mom-pill.mom-transforming {
  background: rgba(168, 85, 247, 0.08); color: rgb(147, 51, 234); border-color: rgba(168, 85, 247, 0.2);
}