/* Ad platform diagram (ported from Blueprint, in the site fonts). Self-contained. */
.pf{--pf-cyan:#2EA6D4;--pf-pale:#A9D8EE;--pf-slate:#9FB3C8;--pf-line:rgba(169,216,238,.38);--pf-box:#0C2443;margin:0}
.pf .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.bp{width:100%;height:auto;overflow:visible;display:block}
.bp .ln{fill:none;stroke:var(--pf-cyan);stroke-width:1.4}
.bp .ln2{fill:none;stroke:var(--pf-pale);stroke-width:1;opacity:.8}
.bp .box{fill:var(--pf-box);stroke:var(--pf-cyan);stroke-width:1.4}
.bp .boxk{fill:var(--pf-box);stroke:var(--pf-cyan);stroke-width:2.2}
.bp .arw{fill:var(--pf-cyan)}
.bp .t{font-family:"Public Sans",system-ui,sans-serif;font-weight:600;font-size:15px;fill:#fff}
.bp .tb7{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:15px;font-stretch:110%}
.bp .tk{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:18px;fill:#fff;font-stretch:112%}
.bp .m{font-family:"Public Sans",system-ui,sans-serif;font-size:12px;fill:var(--pf-pale)}
.bp .ms{font-family:"Public Sans",system-ui,sans-serif;font-size:11.5px;fill:var(--pf-slate)}
.bp .chip{fill:rgba(46,166,212,.1);stroke:var(--pf-line);stroke-width:1}
.bp .mc{font-family:"Public Sans",system-ui,sans-serif;font-size:11.5px;font-weight:500;fill:#E3ECF5}
.bp .pf-lab{font-size:14.5px}

/* Draw-in: starts when the diagram scrolls into view */
@media (prefers-reduced-motion:no-preference){
  .bp.pre .draw{stroke-dasharray:1;stroke-dashoffset:1}
  .bp.pre .fade{opacity:0}
  .bp.anim .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:pfdraw .7s cubic-bezier(.6,.05,.3,1) forwards;animation-delay:var(--d,0s)}
  .bp.anim .fade{opacity:0;animation:pffade .5s ease forwards;animation-delay:var(--d,0s)}
}
@keyframes pfdraw{to{stroke-dashoffset:0}}
@keyframes pffade{to{opacity:1}}
.bp.noanim .draw,.bp.noanim .fade{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}

/* Layout: desktop SVG with hit areas, mobile button grid + vertical SVG */
.pf-d{display:none}
.pf-m{display:block;max-width:440px;margin:0 auto}
@media (min-width:900px){.pf-d{display:block}.pf-m{display:none}}
.pf-stage{position:relative}
.pf-hit{position:absolute;margin:0;padding:0;border:0;background:transparent;border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pf-hit:focus-visible{outline:2px solid var(--pf-pale);outline-offset:2px}

.bp .pf-path{fill:none;stroke:var(--pf-cyan);stroke-width:1.4;opacity:.9;transition:opacity .25s ease,stroke-width .25s ease}
.bp .pf-node{fill:var(--pf-cyan)}
.bp .pf-bg{fill:#fff}
.bp .pf-ring{fill:none;stroke:var(--pc);stroke-width:2.4;opacity:0;transition:opacity .2s ease}
.bp .pf-tile{transition:opacity .25s ease}
.bp .pf-pulse circle{fill:#D8F2FF}
.bp .pf-pulse .halo{opacity:.35}
.bp.has-sel .pf-path:not(.on){opacity:.18!important}
.bp.has-sel .pf-path.on{opacity:1;stroke:var(--pc);stroke-width:2.6}
.bp.has-sel .pf-tile:not(.on){opacity:.4!important}
.bp.has-sel .pf-tile.on{opacity:1}
.bp.has-sel .pf-tile.on .pf-ring{opacity:1}
.bp.has-sel .pf-pulse{opacity:.2}
.bp.has-sel .pf-pulse.on{opacity:1}
.bp .pf-pulse.on circle{fill:var(--pc)}
.bp.has-sel .pf-node:not(.on){opacity:.3}

.pf-read{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0;padding:13px 18px;min-height:52px;border:1px solid var(--pf-line);border-top:0;border-radius:0 0 10px 10px;background:rgba(8,26,48,.55);font-size:.9375rem;line-height:1.4;color:#D6E2EE}
.pf-read .pf-rk{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:1rem;font-stretch:105%;color:var(--pf-cyan);flex:none}
.pf-read.on .pf-rk{color:#fff}
.pf-read.on{border-left:3px solid var(--pc,var(--pf-cyan));padding-left:16px}
.pf-d .pf-stage{border:1px solid var(--pf-line);border-bottom:0;border-radius:10px 10px 0 0;padding:4px 4px 0;background:rgba(8,26,48,.25)}

.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0}
.pf-btn{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:8px 2px 10px;border:0;background:transparent;color:#fff;font:600 .8125rem/1.2 "Public Sans",system-ui,sans-serif;cursor:pointer;border-radius:10px;-webkit-tap-highlight-color:transparent;transition:opacity .2s ease}
.pf-btn:focus-visible{outline:2px solid var(--pf-pale);outline-offset:-2px}
.pf-chip{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.2);transition:box-shadow .2s ease}
.pf-chip img{width:26px;height:26px}
.pf-btn[data-p="linkedin"] .pf-chip img,.pf-btn[data-p="meta"] .pf-chip img,.pf-btn[data-p="youtube"] .pf-chip img{width:28px;height:28px}
.pf-btn[data-p="x"] .pf-chip img{width:22px;height:22px}
.pf-grid.has-sel .pf-btn{opacity:.5}
.pf-grid.has-sel .pf-btn.on{opacity:1}
.pf-btn.on .pf-chip{box-shadow:0 0 0 3px var(--pc)}
.pf-m .pf-read{border-top:1px solid var(--pf-line);border-radius:10px;margin:6px 0 18px;min-height:60px;align-items:center}
.pf-m .bp-m{display:block;width:100%}
@media (prefers-reduced-motion:reduce){.bp .pf-path,.bp .pf-tile,.bp .pf-ring,.pf-btn,.pf-chip{transition:none}}
