/* digital-marketing.html — page-only styles */
.chan .cell{min-height:320px}
.chan .glyph{font-size:clamp(3.2rem,6vw,5.4rem);line-height:.85;font-weight:800;letter-spacing:-.06em;margin:0}
.chan .cell:not(.cream):not(.mag) .glyph{color:transparent;-webkit-text-stroke:1.5px var(--mag-hi)}
.chan ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chan li{padding:6px 12px;border-radius:999px;border:1px solid currentColor;font-size:14px;opacity:.85}

/* flow: channels -> website -> you */
.flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.flow-in{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.flow-in li{position:relative;padding:16px 20px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--ink-2);font-weight:600;letter-spacing:-.01em}
.flow-in li::after{content:"";position:absolute;left:100%;top:50%;width:clamp(24px,4vw,64px);height:2px;background:linear-gradient(90deg,var(--mag),rgba(63,206,213,.15))}
.flow-site{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--ink-3);box-shadow:0 40px 80px -30px rgba(0,0,0,.7);outline:2px solid var(--mag);outline-offset:8px}
.flow-site img{width:100%;height:100%;object-fit:cover}
.flow-site .lbl{position:absolute;left:14px;bottom:14px;background:var(--mag);color:var(--on-mag);padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600}
.flow-out{display:grid;gap:12px}
.flow-out div{position:relative;padding:18px 20px;border-radius:var(--radius-sm);background:var(--cream);color:var(--ink)}
.flow-out div::before{content:"";position:absolute;right:100%;top:50%;width:clamp(24px,4vw,64px);height:2px;background:linear-gradient(90deg,rgba(63,206,213,.15),var(--mag))}
.flow-out strong{display:block;font-size:1.1rem;letter-spacing:-.02em}
.flow-out span{color:var(--muted-ink);font-size:15px}
.flow-caption{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:28px}
.flow-caption p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:900px){
.flow,.flow-caption{grid-template-columns:1fr}
.flow-in{grid-template-columns:1fr 1fr}
.flow-in li::after,.flow-out div::before{display:none}
.flow-caption{display:none}
}

/* connected points */
.joined{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line-ink)}
.joined>div{padding:clamp(24px,3vw,40px) clamp(16px,2.4vw,32px) clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line-ink)}
.joined>div+div{padding-left:clamp(16px,2.4vw,32px);border-left:1px solid var(--line-ink)}
.joined h3{margin:0 0 10px;font-size:clamp(1.4rem,2.2vw,2rem);letter-spacing:-.035em;line-height:1.05}
.joined p{margin:0;color:var(--muted-ink)}
@media (max-width:820px){.joined{grid-template-columns:1fr}.joined>div+div{border-left:0;padding-left:0}}
.net{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(40px,5vw,64px);align-items:center}
.net .mono{color:var(--muted-ink);margin-right:8px}
.net span.pill{padding:12px 20px;border-radius:999px;border:1px dashed rgba(11,12,14,.35);font-weight:600}