/* /lead-attribution/funnels-and-goals/ only: the flow that fills, the pattern tester, the
   trail walker, the save-day strip and the per-100 rulers. Prefix fg-. */

/* ---------- hero: the flow between the steps ---------- */
.fg-flow{--c-search:var(--sk-search);--c-direct:var(--sk-people);--c-social:#a58bd9;--c-ai:var(--sk-ai);border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep);overflow:hidden}
.fg-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .9rem;border-bottom:1px solid var(--sk-line);color:var(--sk-text-3);font:400 .7rem var(--sk-mono);letter-spacing:.04em}
.fg-btn{flex:none;padding:.25rem .55rem;border:1px solid var(--sk-line-2);border-radius:3px;background:none;color:var(--sk-text-2);font:500 .68rem var(--sk-mono);cursor:pointer}
.fg-heads,.fg-feet{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:0 .9rem}
.fg-heads{padding-top:.9rem}
.fg-h,.fg-f{margin:0;text-align:right;color:var(--sk-text-2);font:500 .74rem/1.35 var(--sk-sans)}
.fg-h i{display:inline-grid;place-items:center;width:1.1rem;height:1.1rem;margin-right:.2rem;border-radius:3px;background:var(--sk-line-2);color:var(--sk-text);font:600 .64rem var(--sk-mono);font-style:normal}
.fg-h b,.fg-f b{display:block;margin-top:.15rem;color:var(--sk-text);font:700 1.25rem/1.1 var(--sk-disp)}
.fg-h small,.fg-f small{display:block;color:var(--sk-text-4);font:400 .68rem var(--sk-mono)}
.fg-f small.big{color:var(--sk-ai)}
.fg-f{color:var(--sk-text-3)}
.fg-f b{font-size:1rem;color:var(--sk-text-2)}
.fg-plot{padding:.6rem .9rem .3rem}
.fg-svg{display:block;width:100%;height:auto}
.fg-b{opacity:.55;transition:opacity .45s}
.fg-b.fg-out{opacity:.2}
.fg-b.s-search,.fg-src.s-search,.fg-sw.s-search{fill:var(--c-search);background:var(--c-search)}
.fg-b.s-direct,.fg-src.s-direct,.fg-sw.s-direct{fill:var(--c-direct);background:var(--c-direct)}
.fg-b.s-social,.fg-src.s-social,.fg-sw.s-social{fill:var(--c-social);background:var(--c-social)}
.fg-b.s-ai,.fg-src.s-ai,.fg-sw.s-ai{fill:var(--c-ai);background:var(--c-ai)}
.fg-node{fill:var(--sk-text)}
.fg-sink{fill:var(--sk-text-4)}
.fg-src{transition:opacity .45s}
.fg-flow:not([data-state="any"]) .fg-b{opacity:.06}
.fg-flow[data-state="search"] .s-search,.fg-flow[data-state="direct"] .s-direct,.fg-flow[data-state="social"] .s-social,.fg-flow[data-state="ai"] .s-ai{opacity:.8}
.fg-flow[data-state="search"] .fg-out.s-search,.fg-flow[data-state="direct"] .fg-out.s-direct,.fg-flow[data-state="social"] .fg-out.s-social,.fg-flow[data-state="ai"] .fg-out.s-ai{opacity:.3}
.fg-flow:not([data-state="any"]) .fg-src{opacity:.2}
.fg-flow[data-state="search"] .fg-src.s-search,.fg-flow[data-state="direct"] .fg-src.s-direct,.fg-flow[data-state="social"] .fg-src.s-social,.fg-flow[data-state="ai"] .fg-src.s-ai{opacity:1}
/* the fill: without this file's script, everything shows at once */
.fg-flow.fg-anim .fg-bands{clip-path:inset(0 100% 0 0)}
.fg-flow.fg-anim.fg-go .fg-bands{clip-path:inset(0 0 0 0);transition:clip-path 2.6s cubic-bezier(.45,0,.25,1)}
.fg-flow.fg-anim .fg-heads .fg-h,.fg-flow.fg-anim .fg-feet .fg-f{opacity:.25;transition:opacity .5s}
.fg-flow.fg-anim.fg-go .fg-h,.fg-flow.fg-anim.fg-go .fg-f{opacity:1}
.fg-flow.fg-go .fg-h:nth-child(2),.fg-flow.fg-go .fg-f:nth-child(2){transition-delay:1s}
.fg-flow.fg-go .fg-h:nth-child(3),.fg-flow.fg-go .fg-f:nth-child(3){transition-delay:2s}
.fg-from{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;padding:.8rem .9rem .9rem;border-top:1px solid var(--sk-line)}
.fg-lab{margin:0;font:500 .7rem var(--sk-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sk-text-3)}
.fg-from .seg{padding:.45rem .65rem;font-size:.8rem}
.fg-sw{display:inline-block;width:.6rem;height:.6rem;margin-right:.4rem;border-radius:2px;vertical-align:.05em}

/* ---------- 01: the pattern tester (paper) ---------- */
.fg-match{padding:1.3rem;border:1px solid var(--sk-paper-line);border-radius:8px;background:#fff;color:var(--sk-paper-ink)}
.fg-pat{display:flex;flex-direction:column;gap:.3rem;font:500 .68rem var(--sk-mono);letter-spacing:.06em;text-transform:uppercase;color:#4a5866}
.fg-pat input{width:100%;padding:.6rem .7rem;border:1px solid #b9ae99;border-radius:4px;background:var(--sk-paper);color:var(--sk-paper-ink);font:500 1rem var(--sk-mono);letter-spacing:0;text-transform:none}
.fg-pat input:focus{outline:2px solid var(--sk-ai-deep);outline-offset:1px}
.fg-link{margin:.55rem 0 .9rem;color:#4a5866;font:400 .74rem var(--sk-mono)}
.fg-link code{color:var(--sk-ai-deep);font-weight:600}
.fg-pages{margin:0;padding:0;list-style:none;border-top:1px solid var(--sk-paper-line)}
.fg-pages li{display:grid;grid-template-columns:1.2rem minmax(0,1fr) auto;align-items:baseline;gap:.5rem;padding:.45rem .2rem;border-bottom:1px solid var(--sk-paper-line);transition:background .3s}
.fg-pages li::before{content:'·';color:#9a907e;font:700 .9rem var(--sk-mono);text-align:center}
.fg-pages li.hit{background:rgba(27,175,122,.1)}
.fg-pages li.hit::before{content:'✓';color:#11805a}
.fg-pages code{font:500 .84rem var(--sk-mono);color:var(--sk-paper-ink);overflow-wrap:anywhere}
.fg-pages li:not(.hit) code{color:#7b8592}
.fg-pages span{color:#5d6773;font:400 .7rem var(--sk-mono);text-align:right}
.fg-pages li.hit span{color:#11805a}
.fg-sum{margin:.8rem 0 0;color:#4a5866;font:400 .8rem var(--sk-mono)}
.fg-sum b{color:var(--sk-paper-ink);font-size:1rem}
.fg-pages li.flash{animation:fgFlash .5s ease-out}
@keyframes fgFlash{from{background:rgba(235,104,52,.25)}}

/* ---------- 02: the trail walker ---------- */
.fg-walk-wrap{margin-top:2rem}
.fg-walk-wrap .fg-lab{margin-bottom:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.fg-visits{display:flex;flex-direction:column;gap:.45rem}
.fg-v{display:flex;align-items:baseline;gap:.7rem;width:100%;padding:.7rem .9rem;border:1px solid var(--sk-line-2);border-radius:6px;background:var(--sk-ink);color:var(--sk-text-2);text-align:left;cursor:pointer;transition:border-color .2s,background .2s;position:relative;overflow:hidden}
.fg-v b{flex:none;color:var(--sk-text);font:700 .95rem var(--sk-disp)}
.fg-v code{font:400 .8rem/1.45 var(--sk-mono);overflow-wrap:anywhere}
.fg-v[aria-checked="true"]{border-color:var(--sk-ai);background:#1c1612;color:var(--sk-text)}
.fg-v:focus-visible{outline:2px solid var(--sk-ai);outline-offset:2px}
.fg-v .autobar{position:absolute;left:0;bottom:0;height:2px;background:var(--sk-ai);animation:fgAuto var(--auto) linear both}
@keyframes fgAuto{from{width:0}to{width:100%}}
.fg-walk{padding:1.2rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep)}
.fg-steps{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.1rem;padding:0;list-style:none}
.fg-steps li{padding:.3rem .6rem;border:1px dashed var(--sk-line-2);border-radius:4px;color:var(--sk-text-4);font:500 .76rem var(--sk-sans);transition:all .3s}
.fg-steps li i{margin-right:.35rem;font:600 .68rem var(--sk-mono);font-style:normal}
.fg-steps li.met{border:1px solid var(--sk-search);color:var(--sk-text);background:rgba(27,175,122,.12)}
.fg-steps li.miss{border-color:var(--sk-ai);color:var(--sk-ai)}
.fg-trail{display:flex;flex-wrap:wrap;gap:.9rem .5rem;margin:0;padding:0;list-style:none;counter-reset:pg}
.fg-trail li{position:relative;display:flex;flex-direction:column;gap:.35rem;min-width:0}
.fg-trail li+li::before{content:'›';position:absolute;left:-.4rem;top:.2rem;color:var(--sk-text-3);font:700 1rem/1.4 var(--sk-mono)}
.fg-trail li+li{padding-left:.4rem}
.fg-trail code{display:block;padding:.35rem .55rem;border:1px solid var(--sk-line-2);border-radius:4px;background:var(--sk-ink);color:var(--sk-text-2);font:500 .8rem var(--sk-mono);transition:all .25s}
.fg-trail span{min-height:1rem;color:var(--sk-search);font:600 .64rem var(--sk-mono);letter-spacing:.04em;text-transform:uppercase}
.fg-trail li.met code{border-color:var(--sk-search);color:var(--sk-text)}
.fg-trail li.look code{border-color:var(--sk-ai);box-shadow:0 0 0 3px rgba(235,104,52,.25);color:var(--sk-text)}
.fg-trail li.look::after{content:'▲';position:absolute;left:.7rem;bottom:-.95rem;color:var(--sk-ai);font-size:.6rem}
.fg-verdict{margin:1.3rem 0 .3rem;color:var(--sk-text);font:700 1.05rem var(--sk-disp)}
.fg-why{margin:0;color:var(--sk-text-2);font-size:.9rem;line-height:1.55}
.fg-bars{margin:1rem 0 0;padding:0;list-style:none;border:1px solid var(--sk-line);border-radius:8px;overflow:hidden}
.fg-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;gap:.2rem .7rem;padding:.6rem .9rem;border-top:1px solid var(--sk-line)}
.fg-bars li:first-child{border-top:0}
.fg-bars span{color:var(--sk-text-2);font-size:.86rem}
.fg-bars span i{margin-right:.3rem;color:var(--sk-text-4);font:600 .7rem var(--sk-mono);font-style:normal}
.fg-bars b{color:var(--sk-text);font:700 1.05rem var(--sk-disp)}
.fg-bars small{min-width:6.5rem;color:var(--sk-text-4);font:400 .7rem var(--sk-mono);text-align:right}
.fg-bars em{grid-column:1/-1;color:var(--sk-text-3);font:400 .72rem var(--sk-mono);font-style:normal}
.fg-bars em.big{color:var(--sk-ai)}

/* ---------- 03: the save-day strip ---------- */
.fg-save{margin-top:2rem;padding:1.2rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep)}
.fg-save-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;margin-bottom:1rem;color:var(--sk-text-3);font:400 .7rem var(--sk-mono);letter-spacing:.04em}
.fg-strip{display:grid;grid-template-columns:repeat(30,1fr);gap:3px;height:9rem;margin:0;padding:0;list-style:none;align-items:end}
.fg-d{position:relative;height:100%;display:flex;align-items:flex-end;border-radius:2px}
.fg-d i{display:block;width:100%;height:calc(var(--h) * 100%);border-radius:2px 2px 0 0;background:var(--sk-people);transition:height .45s,background .3s,opacity .3s}
.fg-d.nr i{height:100%;opacity:.9;background:repeating-linear-gradient(135deg,var(--sk-line-2) 0 3px,transparent 3px 7px);border:1px solid var(--sk-line)}
.fg-d.kept::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-.55rem;height:3px;background:var(--sk-ai)}
.fg-d.saved i{background:var(--sk-text)}
.fg-axis{display:grid;grid-template-columns:23fr 7fr;gap:3px;margin-top:.8rem;color:var(--sk-text-4);font:400 .66rem var(--sk-mono)}
.fg-axis>span:last-child{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 .5rem}
.fg-kept-l{color:var(--sk-ai)}
.fg-slide{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1rem;margin-top:1.2rem;color:var(--sk-text-2);font:400 .85rem var(--sk-sans)}
.fg-slide b{color:var(--sk-text)}
.fg-slide input{width:100%;accent-color:var(--sk-ai)}
.fg-read{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 .6rem}
.fg-read span{padding:.4rem .65rem;border:1px solid var(--sk-line-2);border-radius:4px;color:var(--sk-text-2);font:400 .76rem var(--sk-mono)}
.fg-read span:nth-child(2){border-style:dashed}
.fg-read span:nth-child(3){border-color:rgba(235,104,52,.5)}
.fg-read b{color:var(--sk-text)}
.fg-hist{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem;color:var(--sk-text-2);line-height:1.6}
.fg-hist p{margin:0}

/* ---------- 04: the per-100 rulers ---------- */
.fg-rule{padding:1.2rem;border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep)}
.fg-rule-h{margin:0 0 1rem;color:var(--sk-text-2);font:400 .95rem var(--sk-sans)}
.fg-rule-h b{color:var(--sk-text);font:700 1.05rem var(--sk-disp)}
.fg-rule ul{margin:0;padding:0;list-style:none}
.fg-rule li{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 3.2rem;grid-template-areas:"s t v" "n t v";align-items:center;gap:.1rem .9rem;padding:.55rem 0;border-top:1px solid var(--sk-line)}
.fg-rs{grid-area:s;color:var(--sk-text);font-size:.88rem}
.fg-rn{grid-area:n;color:var(--sk-text-4);font:400 .68rem var(--sk-mono)}
.fg-rn b{color:var(--sk-text-2);font-weight:500}
.fg-rt{grid-area:t;position:relative;height:1.4rem;background:repeating-linear-gradient(90deg,var(--sk-line-2) 0 1px,transparent 1px 20%) 0 100%/100% 6px no-repeat;border-bottom:1px solid var(--sk-line-2)}
.fg-rt::after{content:'';position:absolute;right:0;bottom:0;width:1px;height:6px;background:var(--sk-line-2)}
.fg-rt i{position:absolute;bottom:0;left:var(--x,0%);width:0;height:0;margin-left:-6px;border:6px solid transparent;border-bottom:10px solid var(--sk-search);border-top:0;transition:left .7s cubic-bezier(.3,1.3,.5,1)}
.fg-rule li[data-src="ai"] .fg-rt i{border-bottom-color:var(--sk-ai)}
.fg-rule li[data-src="direct"] .fg-rt i{border-bottom-color:var(--sk-people)}
.fg-rule li[data-src="social"] .fg-rt i{border-bottom-color:#a58bd9}
.fg-rule li[data-src="email"] .fg-rt i{border-bottom-color:var(--sk-text-3)}
.fg-rule li.few .fg-rt{background:repeating-linear-gradient(135deg,var(--sk-line) 0 3px,transparent 3px 7px);border-bottom-style:dashed}
.fg-rule li.few .fg-rt i{display:none}
.fg-rv{grid-area:v;color:var(--sk-text);font:700 1rem var(--sk-disp);text-align:right}
.fg-rule li.few .fg-rv{color:var(--sk-text-3);font:400 .66rem/1.3 var(--sk-mono)}
.fg-scale{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 3.2rem;gap:.9rem;margin:.3rem 0 0;color:var(--sk-text-4);font:400 .6rem var(--sk-mono)}
.fg-sc{display:flex;justify-content:space-between}
.fg-sc i{width:0;font-style:normal;display:flex;justify-content:center}
.fg-scale span:last-child{text-align:right}

@media (max-width:980px){
  .fg-hist{grid-template-columns:1fr}
}
@media (max-width:640px){
  .fg-heads,.fg-feet{gap:.3rem;padding:0 .6rem}
  .fg-h,.fg-f{font-size:.66rem}
  .fg-h b{font-size:1rem}
  .fg-f b{font-size:.88rem}
  .fg-plot{padding:.5rem .6rem .2rem}
  .fg-pages li{grid-template-columns:1rem minmax(0,1fr)}
  .fg-pages span{grid-column:2;text-align:left}
  .fg-strip{gap:2px;height:7rem}
  .fg-slide{grid-template-columns:1fr}
  .fg-rule li{grid-template-columns:minmax(0,1fr) 3.2rem;grid-template-areas:"s v" "n v" "t t"}
  .fg-scale{grid-template-columns:minmax(0,1fr) auto}
  .fg-scale span:first-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fg-flow.fg-anim .fg-bands{clip-path:none}
  .fg-b,.fg-src,.fg-d i,.fg-rt i,.fg-pages li{transition:none;animation:none}
}