/* Trellan v2 · post cards (feed.js). Every card scales with its own width (container units),
   so the same card works at 130px on the board and 300px in a preview. */
.pc{container-type:inline-size;position:relative;width:100%;aspect-ratio:9/16;border-radius:12px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;line-height:1.3;display:flex;flex-direction:column;box-shadow:0 18px 40px -22px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);text-align:left}
.pc .ic{display:inline-flex;width:1em;height:1em}
.pc .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pc .ic svg .f{fill:currentColor;stroke:none}
.pc img,.pc video{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.pa{flex:none;display:inline-block;width:11cqw;height:11cqw;border-radius:50%;background:#ccc center/cover}
.pa.sq{border-radius:18%}
.pc b{font-weight:600}

/* LinkedIn */
.pc-li{background:#fff;color:#191919}
.pc-li .h{display:flex;gap:3.5cqw;align-items:flex-start;padding:5cqw 5cqw 3cqw;font-size:5.4cqw}
.pc-li .h .pa{width:12cqw;height:12cqw}
.pc-li .h>div{flex:1;min-width:0}
.pc-li .h b{display:block;font-size:5.8cqw}
.pc-li .h small{display:flex;align-items:center;gap:1cqw;font-size:4.4cqw;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-li .fo{color:#0a66c2;font-weight:600;font-size:5cqw;white-space:nowrap}
.pc-li .t{padding:0 5cqw 3.5cqw;font-size:5.4cqw;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pc-li .m{position:relative;flex:1;min-height:0;background:#eef3f8}
.pc-li .m.wide img{object-fit:cover}
.pc-li .pg{position:absolute;right:3cqw;top:3cqw;background:rgba(0,0,0,.72);color:#fff;font-size:4.2cqw;padding:1.2cqw 2.6cqw;border-radius:99px}
.pc-li .ac{display:flex;justify-content:space-around;padding:3.2cqw 2cqw;font-size:4.2cqw;color:#555;border-top:1px solid #e8e8e8}
.pc-li .ac span{display:flex;flex-direction:column;align-items:center;gap:1cqw}
.pc-li .ac .ic{font-size:6.5cqw}

/* Instagram feed post */
.pc-ig{background:#fff;color:#111}
.pc-ig .h{display:flex;align-items:center;gap:3cqw;padding:4cqw;font-size:5.4cqw}
.pc-ig .h .pa{width:10cqw;height:10cqw;box-shadow:0 0 0 .8cqw #fff,0 0 0 1.6cqw #e1306c}
.pc-ig .h b{flex:1}
.pc-ig .m{position:relative;aspect-ratio:4/5;flex:none;overflow:hidden}
.pc-ig .sl{position:relative;height:100%}
.pc-ig .ct{position:absolute;right:3cqw;top:3cqw;background:rgba(0,0,0,.6);color:#fff;font-size:4.2cqw;padding:1cqw 2.4cqw;border-radius:99px}
.pc-ig .dots{display:flex;justify-content:center;gap:1.2cqw;padding-top:2.5cqw}
.pc-ig .dots i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#ccc}.pc-ig .dots i.on{background:#0095f6}
.pc-ig .ac{display:flex;gap:4cqw;padding:3cqw 4cqw 2cqw;font-size:8cqw}
.pc-ig .ac .sp{flex:1}
.pc-ig .c{padding:0 4cqw;font-size:5cqw;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Facebook */
.pc-fb{background:#fff;color:#050505}
.pc-fb .h{display:flex;align-items:center;gap:3cqw;padding:4.5cqw 4.5cqw 3cqw;font-size:5.4cqw}
.pc-fb .h .pa{width:11cqw;height:11cqw}
.pc-fb .h>div{flex:1}.pc-fb .h b{display:block;font-size:5.6cqw}
.pc-fb .h small{display:flex;gap:1cqw;align-items:center;font-size:4.4cqw;color:#65676b}
.pc-fb .t{padding:0 4.5cqw 3.5cqw;font-size:5.3cqw;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pc-fb .m{flex:1;min-height:0}
.pc-fb .rx{display:flex;padding:2.5cqw 4.5cqw;gap:0}
.pc-fb .rx span{display:inline-flex;width:6.4cqw;height:6.4cqw;border-radius:50%;align-items:center;justify-content:center;color:#fff;font-size:3.8cqw;box-shadow:0 0 0 .7cqw #fff}
.pc-fb .rx .lk{background:#1877f2}.pc-fb .rx .lv{background:#f33e58;margin-left:-1cqw}
.pc-fb .ac{display:flex;justify-content:space-around;padding:2.8cqw 2cqw 3.4cqw;font-size:4.6cqw;color:#65676b;border-top:1px solid #e4e6eb}
.pc-fb .ac span{display:flex;align-items:center;gap:1.5cqw}.pc-fb .ac .ic{font-size:6cqw}

/* TikTok, Reels, Shorts: full-bleed vertical video */
.pc-tt{background:#000;color:#fff}
.pc-tt>video,.pc-tt>img{position:absolute;inset:0}
.pc-tt .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 18%,transparent 55%,rgba(0,0,0,.75))}
.pc-tt .top{position:absolute;top:5cqw;left:0;right:0;display:flex;justify-content:center;gap:5cqw;font-size:5.6cqw;color:rgba(255,255,255,.75)}
.pc-tt .top b{color:#fff;box-shadow:0 1.4cqw 0 -.7cqw #fff}
.pc-igr .top{justify-content:space-between;padding:0 5cqw;color:#fff}.pc-igr .top b{box-shadow:none;font-size:7cqw}.pc-igr .top .ic{font-size:7cqw}
.pc-tt .rail{position:absolute;right:3cqw;bottom:24cqw;display:flex;flex-direction:column;align-items:center;gap:5cqw;font-size:8.5cqw}
.pc-tt .rail span{display:flex;flex-direction:column;align-items:center;gap:.6cqw}
.pc-tt .rail small{font-size:3.6cqw}
.pc-tt .pf{width:11cqw;height:11cqw;border-radius:50%;background:center/cover;border:.6cqw solid #fff;position:relative;margin-bottom:2cqw}
.pc-tt .pf em{position:absolute;left:50%;bottom:-2.6cqw;transform:translateX(-50%);width:5cqw;height:5cqw;border-radius:50%;background:#fe2c55;font:700 4.4cqw/5cqw sans-serif;text-align:center;font-style:normal}
.pc-tt .mt{position:absolute;left:4cqw;right:18cqw;bottom:5cqw;font-size:5cqw}
.pc-tt .mt .w{display:flex;align-items:center;gap:2.4cqw;margin-bottom:2cqw}
.pc-tt .mt .w .pa{width:8.5cqw;height:8.5cqw}
.pc-tt .fl{border:1px solid rgba(255,255,255,.8);border-radius:1.6cqw;padding:.6cqw 2cqw;font-size:4.2cqw}
.pc-tt .sb{background:#fff;color:#0f0f0f;border-radius:99px;padding:1.2cqw 3cqw;font-size:4.2cqw;font-weight:600}
.pc-tt .c{margin-top:1.4cqw;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-tt .sn{display:flex;align-items:center;gap:1.4cqw;margin-top:2cqw;font-size:4.2cqw;white-space:nowrap;overflow:hidden}

/* YouTube watch page */
.pc-yt{background:#0f0f0f;color:#f1f1f1}
.pc-yt .pl{position:relative;aspect-ratio:16/9;flex:none;background:#000;overflow:hidden}
.pc-yt .pl>img,.pc-yt .pl>video,.pc-ig .m>img,.pc-ig .m>video{position:absolute;inset:0}
.pc-yt .pr{position:absolute;left:0;right:0;bottom:0;height:.9cqw;background:rgba(255,255,255,.3)}
.pc-yt .pr i{display:block;height:100%;width:38%;background:#f00}
.pc-yt .bd{padding:4cqw;display:flex;flex-direction:column;gap:3.6cqw;flex:1;min-height:0}
.pc-yt .tl{font-size:6cqw;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-yt .ch{display:flex;align-items:center;gap:2.6cqw;font-size:5cqw}
.pc-yt .ch .pa{width:9cqw;height:9cqw}.pc-yt .ch b{flex:1}
.pc-yt .sb{background:#f1f1f1;color:#0f0f0f;border-radius:99px;padding:1.6cqw 3.4cqw;font-size:4.4cqw;font-weight:600}
.pc-yt .cp{display:flex;gap:2cqw;font-size:4.2cqw}
.pc-yt .cp span{display:flex;align-items:center;gap:1.2cqw;background:#272727;border-radius:99px;padding:1.8cqw 3cqw}
.pc-yt .nx{display:flex;gap:3cqw;margin-top:auto;font-size:4.4cqw;padding-top:3cqw;border-top:1px solid #272727}
.pc-yt .nx .th{flex:none;width:42%;aspect-ratio:16/9;border-radius:2cqw;background:center/cover}
.pc-yt .nx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500}
.pc-yt .nx small{color:#aaa;font-size:3.8cqw}

/* X and Threads: text only */
.pc-x,.pc-th{background:#000;color:#e7e9ea}
.pc-x .row{padding:6cqw 5cqw}.pc-th .row{padding:0 5cqw}.pc-th .row:first-child{padding-top:6cqw}
.pc-x .row,.pc-th .row{display:flex;gap:3cqw}
.pc-x .bx,.pc-th .bx{flex:1;min-width:0}
.pc-x .h,.pc-th .h{display:flex;gap:1.6cqw;align-items:baseline;font-size:5.2cqw;white-space:nowrap;overflow:hidden}
.pc-x .h span,.pc-th .h span{color:#71767b;overflow:hidden;text-overflow:ellipsis}
.pc-x .t{font-size:6cqw;line-height:1.38;margin:1.8cqw 0 4cqw}
.pc-x .ac,.pc-th .ac{display:flex;justify-content:space-between;color:#71767b;font-size:6cqw;padding-right:4cqw}
.pc-th{background:#101010;color:#f3f5f7}
.pc-th .row+.row{margin-top:2cqw}
.pc-th .l{display:flex;flex-direction:column;align-items:center}
.pc-th .ln{flex:1;width:.6cqw;background:#333;margin:2cqw 0;border-radius:1px}
.pc-th .t{font-size:5.6cqw;line-height:1.38;margin:1.4cqw 0 3.2cqw}
.pc-th .ac{justify-content:flex-start;gap:5cqw;padding-bottom:2cqw}

/* label above a card: platform logo + which account / format */
.sl-lab{display:flex;align-items:center;gap:7px;font:500 12px/1 "Hanken Grotesk",sans-serif;color:var(--on-dark);margin-bottom:9px;white-space:nowrap}
.sl-lab .bi{display:inline-flex;width:15px;height:15px}.sl-lab .bi svg{width:100%;height:100%;fill:currentColor}
.sl-lab em{font-style:normal;margin-left:auto;color:var(--on-dark-2);opacity:.75;font-size:11px;letter-spacing:.04em}

/* What you give */
.give{display:flex;flex-direction:column;gap:16px}
.give .stack{position:relative;height:118px}
.give .stack img{position:absolute;top:0;left:calc(var(--i)*26px);width:86px;height:110px;object-fit:cover;border-radius:10px;box-shadow:0 10px 24px -10px rgba(0,0,0,.8),0 0 0 2px var(--ink);transform:rotate(calc((var(--i) - 3)*2.2deg));transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.give .extras{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.give .url,.give .voice{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:99px;background:rgba(255,255,255,.07);font-size:14px;color:var(--on-dark)}
.give .url .ic,.give .voice .ic{display:inline-flex;width:16px;height:16px}
.give .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8}.give .ic svg .f{fill:currentColor;stroke:none}
.give .voice{color:var(--accent)}
.give .wave{display:flex;align-items:center;gap:2px;height:18px}
.give .wave i{width:2px;height:var(--h);background:currentColor;border-radius:2px}
.give .fdoc{display:inline-flex;width:24px;height:28px;color:var(--on-dark)}.give .fdoc svg{width:100%;height:100%;fill:currentColor}

/* The sales funnel (feed.js funnelHTML): a drawn funnel, and what Trellan found beside each band */
.sfun{display:grid;grid-template-columns:170px minmax(0,1fr);gap:22px;align-items:start}
.sfun .fsvg{width:170px;height:auto;overflow:visible;filter:drop-shadow(0 18px 40px rgba(95,224,255,.18))}
.sfun .band{transition:opacity .6s}
.flabs{display:grid;grid-template-rows:repeat(4,54.4px) auto}
.fl{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0;transition:opacity .5s,transform .5s}
.fl .k{font:600 10.5px/1 "Hanken Grotesk";letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2)}
.fl .v{font-size:15px;line-height:1.3;color:var(--on-dark)}
.fl .sw{display:inline-flex;align-items:center;gap:5px}.fl .sw i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.fl .sw em{font:italic 300 20px/1 "Newsreader",serif;margin-left:6px;color:var(--on-dark)}
.fl .ctap{display:inline-flex;padding:5px 12px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent);font-size:13px}
.fl.out{padding-top:14px}
.fl .apps{display:flex;gap:6px}
.st-hide .sfun .band{opacity:0}.st-hide .fl{opacity:0;transform:translateX(8px)}

/* staged reveal: .play on the parent runs it */
.st-hide .stack img{opacity:0;transform:translateY(-30px) rotate(0)}
.st-hide .extras>*{opacity:0}
.st-hide .bslot{opacity:0;transform:translateY(14px)}
.bslot{transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.extras>*{transition:opacity .5s}

/* brand switcher */
.bpick{display:flex;gap:6px;flex-wrap:wrap}
.bpick button{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:99px;font-size:14px;color:var(--on-dark-2);transition:background .3s,color .3s}
.bpick button .pa{width:28px;height:28px}
.bpick button:hover{color:var(--on-dark)}
.bpick button.on{background:rgba(255,255,255,.1);color:var(--on-dark)}

/* board: hover a card to see it bigger */
.board .bslot{position:relative}
.board .pc{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.board .bslot:hover{z-index:6}
.board .bslot:hover .pc{transform:scale(1.6);box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1)}
.board .bslot .pc{transform-origin:50% 30%}
.board .bslot:nth-child(5n+1) .pc{transform-origin:0 30%}.board .bslot:nth-child(5n) .pc{transform-origin:100% 30%}
.board .bslot:nth-child(n+6) .pc{transform-origin:50% 85%}.board .bslot:nth-child(6) .pc{transform-origin:0 85%}.board .bslot:nth-child(10) .pc{transform-origin:100% 85%}
@media(hover:none){.board .bslot:hover .pc{transform:none}}

/* native app icons, in colour */
.appic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px}
.appic svg{width:56%;height:56%;fill:#fff}
.ai-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.ai-tiktok{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}.ai-tiktok svg{overflow:visible}
.ai-linkedin{background:#0A66C2}
.ai-youtube{background:#fff}.ai-youtube svg{fill:#FF0000;width:66%;height:66%}
.ai-x{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}.ai-x svg{width:50%;height:50%}
.ai-threads{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}.ai-threads svg{width:52%;height:52%}
.ai-facebook{background:#1877F2;border-radius:50%}.ai-facebook svg{width:44%;height:60%;transform:translateY(8%)}
.appic.sm{width:20px;height:20px;border-radius:6px}.appic.sm.ai-facebook{border-radius:50%}