/* 对比区改造
   1) 首页 BEFORE/AFTER 区按 ai-ads 页（.ogilvy-comparison）原值还原：
      尺寸、比例、圆角、描边、玻璃头部材质全部对齐
   2) 两页的对错标记换成扁平渐变图标（替换原来的 ✔ ✕ 字符）
*/

/* ============ 一、首页对比区 ============ */
/* 整块收窄居中。原先撑满 .container 导致每栏过宽、内容填不满，两侧还贴边 */
/* align-items 必须留默认的 stretch：首页新栏内容天然比旧栏矮，
   用 start 的话旧栏会探出新栏底边 13px，露出一个直角缺口。
   stretch 让两栏底边永远对齐，改文案也不会破 */
.cmp{display:grid;grid-template-columns:.88fr 1.12fr;gap:0;
  max-width:1000px;margin:0 auto}

.cmp-panel{position:relative}

/* 旧方案：中性灰面板。右侧直角，与右栏对接。
   上移错位 + 底边收进：新栏左下是 26px 圆角，底边若与旧栏齐平，
   旧栏的直角就会从圆角缺口里露出来。margin-bottom 让旧栏底边整个
   躲开圆角区（stretch 下 margin 会撑高整行，新栏跟着变长，不会溢出）。
   色值按"同等对比度"换算过：ai-ads 画布是 #f4f5f5、这区是 #fefefe，
   直接照搬 #e9ebed 会比 ai-ads 重一倍，所以各通道加 11/19 提亮 */
.cmp-old{background:#f3f4f6;border:1px solid #e9ebee;
  border-radius:26px 0 0 26px;margin-top:30px;margin-bottom:48px}
.cmp-old .cmp-head{padding:28px 30px 22px}
.cmp-old .cmp-head h3{color:#252a32;font-size:26px}
.cmp-old .cmp-head span{color:#7d8794}
.cmp-old .cmp-list li + li{border-top-color:#eceef1}

/* 新方案：白底 + 玻璃质感渐变头，四角全圆 */
.cmp-new{background:#fff;border:1px solid #d5e2f2;
  border-radius:26px;box-shadow:0 16px 38px #29487912;overflow:hidden}
/* 玻璃头部：径向高光 + 渐变本体 + 内顶高光 + 内底内阴影，缺一就塌成平面色块 */
.cmp-new .cmp-head{
  border-radius:28px / 32px;
  border:1px solid #b8dcf58c;
  background:radial-gradient(ellipse at 100% 0,#a1dbcf99,transparent 60%),
             linear-gradient(125deg,#315fba,#4c7cbe 60%,#456ba5);
  box-shadow:inset 0 2px 2px #ffffff59,inset 0 -3px 5px #173b783d,0 10px 20px #29487926;
  color:#fff;
  padding:30px 30px 30px;
}
.cmp-new .cmp-head h3{color:#fff;font-size:40px;letter-spacing:-.045em;margin:0}
.cmp-new .cmp-head span{color:#edf4ff;font-size:15px;margin-top:8px}

.cmp-head h3{font-weight:400;letter-spacing:-.03em;margin:0}
.cmp-head span{display:block;font-size:13px;margin-top:8px}

.cmp-list{list-style:none;margin:0;padding:20px 28px 24px}
.cmp-list li{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:14px 0}
.cmp-list li + li{border-top:1px solid #eef2f7}
.cmp-list h4{font-size:16px;font-weight:500;letter-spacing:-.01em;margin:0 0 5px}
.cmp-list p{font-size:12px;line-height:1.8;margin:0;color:#757b84}
.cmp-old .cmp-list h4{color:#343a43}
.cmp-new .cmp-list h4{color:#173b70}
.cmp-new .cmp-list p{color:#64768b}
.cmp-mark{display:grid;place-items:center;width:26px;height:26px}
.cmp-mark svg{display:block;width:26px;height:26px}

/* 窄屏堆叠：不再对接，两栏各自四角全圆 */
@media(max-width:820px){
  .cmp{grid-template-columns:1fr;gap:16px}
  .cmp-old{margin-top:0;border-radius:26px}
  .cmp-head,.cmp-list{padding-left:22px;padding-right:22px}
  .cmp-new .cmp-head h3{font-size:30px}
}

/* ============ 二、ai-ads 页对错标记 ============
   原来用 ::before 挂字符 ✔ / ✕，字符的笔画粗细由字体决定、且换平台会变形。
   改成背景图引用同一套 SVG 图标。 */
.comparison-old .comparison-mark::before,
.comparison-new .comparison-mark::before{content:none}
.comparison-mark{width:26px;height:26px;background-position:center;background-repeat:no-repeat;background-size:contain}
.comparison-old .comparison-mark{background-image:url('role-icons/cross-flat.svg')}
.comparison-new .comparison-mark{background-image:url('role-icons/check-flat.svg')}