/* MotiveGTM, /b2b-content-marketing-agency. Loads after base.css and pillar.css. */

/* ---------- Sources and inline citation markers ---------- */
.cite-mark{display:inline-block;margin-left:2px;padding:0 4px;border-radius:4px;font-size:.62em;line-height:1.5;vertical-align:super;text-decoration:none;color:var(--pillar-hi);background:rgba(var(--pillar-rgb),.12)}
.cite-mark:hover{background:rgba(var(--pillar-rgb),.24)}
.src-list{margin-top:24px;padding-top:16px;border-top:1px solid var(--hairline);display:grid;gap:6px;counter-reset:src}
.src-list li{position:relative;padding-left:22px;font-size:13px;line-height:1.5;color:var(--text-muted);counter-increment:src;scroll-margin-top:calc(var(--nav-h) + 24px)}
.src-list li::before{content:counter(src);position:absolute;left:0;top:0;font-family:var(--font-mono);font-size:11px;color:var(--pillar-hi)}
.src-list a{color:var(--text-secondary)}
.src-list li:target{color:#fff}

/* ---------- One idea, published five ways ---------- */
.cm-hub-lead{margin-bottom:18px;font-size:14.5px;line-height:1.55;color:var(--text-secondary)}
.cm-core{padding:16px 18px;border-radius:12px;border:1px solid rgba(var(--pillar-rgb),.5);background:rgba(var(--pillar-rgb),.1);display:grid;gap:4px}
.cm-core b{font-size:16px;font-weight:500;color:#fff}
.cm-core span{font-size:14px;line-height:1.5;color:var(--text-secondary)}
.cm-spokes{margin-top:8px;display:grid;gap:8px}
.cm-spokes li{position:relative;display:grid;gap:3px;margin-left:22px;padding:12px 14px;border-radius:10px;border:1px solid var(--hairline);background:rgba(15,35,73,.7)}
.cm-spokes li::before{content:"";position:absolute;left:-22px;top:-6px;bottom:50%;width:12px;border-left:1px solid rgba(var(--pillar-rgb),.45);border-bottom:1px solid rgba(var(--pillar-rgb),.45);border-bottom-left-radius:8px}
.cm-spokes li:first-child::before{top:-10px}
.cm-spokes b{font-size:14.5px;font-weight:500;color:#fff}
.cm-spokes span{font-size:13.5px;line-height:1.45;color:var(--text-secondary)}

/* ---------- Why content does not compound ---------- */
.cm-why{margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);counter-reset:why}
.cm-why li{position:relative;padding-top:22px;border-top:2px solid rgba(var(--pillar-rgb),.45);counter-increment:why}
.cm-why li:nth-child(2){border-top-color:rgba(var(--pillar-rgb),.3)}
.cm-why li:nth-child(3){border-top-color:rgba(var(--pillar-rgb),.18)}
.cm-why-k{font-size:clamp(17px,1.6vw,20px);line-height:1.25;font-weight:500;letter-spacing:-.014em;color:#fff;text-wrap:balance}
.cm-why li p+p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--text-secondary);text-wrap:pretty}

/* ---------- The five steps ---------- */
.cm-steps{margin-top:clamp(26px,3vw,44px);display:grid;gap:0}
.cm-step{display:grid;grid-template-columns:96px minmax(0,1fr);gap:clamp(16px,3vw,44px);align-items:start;padding:clamp(20px,2.2vw,30px) 0;border-top:1px solid var(--hairline)}
.cm-step:last-child{border-bottom:1px solid var(--hairline)}
.cm-n{font-family:var(--font-mono);font-size:clamp(28px,3.4vw,44px);line-height:1;color:rgba(var(--pillar-rgb),.55);letter-spacing:-.02em}
.cm-step h3{font-size:clamp(19px,1.8vw,23px);line-height:1.22;font-weight:500;letter-spacing:-.016em;color:#fff}
.cm-step p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--text-secondary);max-width:68ch;text-wrap:pretty}
.cm-step:hover .cm-n{color:var(--pillar)}

/* ---------- Formats ---------- */
.cm-formats{margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px clamp(20px,3vw,44px)}
.cm-formats li{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--hairline)}
.cm-formats b{font-size:15.5px;font-weight:500;color:#fff}
.cm-formats span{font-size:14.5px;line-height:1.5;color:var(--text-secondary);text-wrap:pretty}

/* ---------- Month table ---------- */
.cm-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px}
.cm-table{width:100%;min-width:620px;border-collapse:collapse;font-size:15px;line-height:1.5}
.cm-table th,.cm-table td{padding:16px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--hairline)}
.cm-table thead th{border-top:0;padding-top:0;font-size:13.5px;font-weight:500;color:var(--text-muted)}
.cm-table tbody th{width:16%;font-weight:500;color:var(--pillar-hi)}
.cm-table td{color:var(--text-secondary)}
.cm-table td:first-of-type{color:#fff}

@media (max-width:900px){
  .cm-why{grid-template-columns:1fr;gap:0}
  .cm-why li{padding:20px 0;border-top:1px solid var(--hairline);border-left:2px solid rgba(var(--pillar-rgb),.45);padding-left:16px}
  .cm-formats{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cm-step{grid-template-columns:1fr;gap:6px;padding:20px 0}
  .cm-n{font-size:22px}
}
