/* 代运营页（中文和 /en/ 共用）的样式，叠在 site.css 上 */
/* 卖家卡在哪：三问等分 12 栏 */
.three { margin-top: 40px; row-gap: 32px; }
.three > div { grid-column: span 4; padding-top: 20px; border-top: 1.5px solid var(--ink); }
.three .n { font-size: 13px; line-height: 20px; color: var(--ink-3); }
.three .t3 { margin-top: 4px; }
.three .body { margin-top: 8px; }

/* 每个服务的亮点：右栏竖排，细线分开 */
.pts > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.pts > div:first-child { padding-top: 6px; }
.pts .body { margin-top: 4px; }

/* 增长路径：四步占满整行，步与步之间一个箭头 */
.path { grid-column: 1 / -1; margin: 48px 0 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); list-style: none; }
.path li { position: relative; padding-top: 16px; border-top: 1.5px solid var(--ink); }
.path li + li::before { content: "→"; position: absolute; left: calc(var(--gap) * -1 + 2px); top: -13px; padding: 0 2px; background: var(--paper); font-size: 15px; line-height: 24px; color: var(--ink-3); }
.path .n { font-size: 13px; line-height: 20px; color: var(--ink-3); }
.path .t3 { margin-top: 4px; }
.path .body { margin-top: 4px; }
.svc .fit-l { grid-column: 1 / span 5; }
.svc .fit-l .small { margin-top: 12px; }

/* 每一段都看得见：链路示意，只有分段和来源，不放数字 */
.chain .l { grid-column: 1 / span 5; }
.chain .r { grid-column: 7 / span 6; }
.chain .lead { margin-top: 16px; }
.chain .body { margin-top: 16px; }
.seg { list-style: none; border-top: 1px solid var(--line); }
.seg li { display: grid; grid-template-columns: 120px 1fr; column-gap: var(--gap); align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.seg .k { font-size: 15px; line-height: 24px; color: var(--ink); }
.seg .k small { display: block; font-size: 12px; line-height: 18px; color: var(--ink-3); }
.seg .bar { height: 10px; border-radius: 2px; background: var(--c); width: var(--w); }
.seg .grp { display: block; padding: 20px 0 6px; border-bottom: 0; font-size: 12px; letter-spacing: .1em; color: var(--ink-3); }

/* 每个服务：左 5 栏讲是什么，右 7 栏列事实；两栏从同一条线开始 */
.svc .cap { grid-column: 1 / -1; margin-bottom: 12px; }
.svc .l { grid-column: 1 / span 5; }
.svc .r { grid-column: 7 / span 6; }
.svc .lead { margin-top: 16px; }
.route { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 22px; color: var(--ink-2); }
.route b { font-weight: 600; color: var(--ink); }
.route i { font-style: normal; color: var(--ink-3); margin: 0 6px; }
.svc .side { margin-top: 16px; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.svc .side a { text-decoration: underline; text-underline-offset: 3px; }
dl.facts > div { display: grid; grid-template-columns: 96px 1fr; column-gap: var(--gap); padding: 16px 0; border-bottom: 1px solid var(--line); }
dl.facts > div:first-child { padding-top: 6px; }
dl.facts dt { font-size: 14px; line-height: 26px; color: var(--ink-3); }
dl.facts dd { font-size: 15px; line-height: 26px; color: var(--ink); }
dl.facts ul { list-style: none; }
dl.facts li { padding-left: 14px; position: relative; }
dl.facts li::before { content: ""; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }

/* 怎么开始：五步等分整行 */
.steps ol { margin-top: 40px; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
.steps li { padding-top: 16px; border-top: 1.5px solid var(--ink); }
.steps li .n { font-size: 13px; line-height: 20px; color: var(--ink-3); }
.steps li .t3 { margin-top: 4px; }
.steps li .body { margin-top: 4px; }
.steps .small { margin-top: 24px; }

/* 接与不接：各占 6 栏 */
.fit > div { grid-column: span 6; }
.fit ul { margin-top: 16px; list-style: none; border-top: 1px solid var(--line); }
.fit li { padding: 12px 0 12px 24px; border-bottom: 1px solid var(--line); position: relative; font-size: 15px; line-height: 24px; color: var(--ink); }
.fit .yes li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 9px; height: 4px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); }
.fit .no li::before, .fit .no li::after { content: ""; position: absolute; left: 1px; top: 23px; width: 11px; height: 1.5px; background: var(--ink-3); transform: rotate(45deg); }
.fit .no li::after { transform: rotate(-45deg); }
.fit .small { margin-top: 16px; }

/* 结尾：二维码直接放出来 */
.cta-row .qr { display: flex; align-items: center; gap: 20px; }
.cta-row .qr img { width: 112px; height: 112px; padding: 6px; background: #fff; border: 1px solid rgba(31,37,51,.12); border-radius: 8px; }
.cta-row .qr .small { max-width: 9em; }
.cta-row .mail { display: flex; align-items: center; gap: 16px; }
.cta-row .mail .small { user-select: all; }
.cta-row .sub { margin-top: 8px; }

@media (max-width: 960px) {
  .three > div, .svc .l, .svc .r, .svc .fit-l, .chain .l, .chain .r, .fit > div { grid-column: 1 / -1; }
  .svc .r, .chain .r { margin-top: 32px; }
  .path { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .path li:nth-child(3)::before { display: none; }
  .steps ol { grid-template-columns: 1fr 1fr; row-gap: 24px; }
}