.funnel-card { padding:clamp(18px,3vw,34px); background:radial-gradient(circle at 50% 15%,#fff 0%,#fbfdff 70%); border:1px solid #e4eaf3; border-radius:18px; box-shadow:0 10px 30px rgba(15,23,42,.05); }.funnel-chart { display:grid; place-items:center; min-height:770px; overflow-x:auto; }.funnel-flow { width:1000px; display:grid; justify-items:center; }.funnel-stage-row { width:700px; display:grid; justify-items:center; position:relative; }.funnel-node { height:118px; display:flex; align-items:center; justify-content:center; gap:48px; color:#092364; background:linear-gradient(115deg,#cfeeff,#a9dcff); box-shadow:0 8px 18px rgba(29,78,216,.08); clip-path:polygon(0 0,100% 0,95% 100%,5% 100%); }.funnel-node__icon { width:52px; height:52px; display:grid; place-items:center; color:#0788f4; }.funnel-node__icon svg { width:100%; height:100%; }.funnel-node div { min-width:130px; display:grid; gap:6px; text-align:left; }.funnel-node strong { font-size:1.25rem; font-weight:800; }.funnel-node b { font-size:2.45rem; line-height:.95; }.funnel-node--new { width:100%; }.funnel-node--contacted { width:92%; background:linear-gradient(115deg,#bde9ff,#83cafa); }.funnel-node--quoting { width:77%; background:linear-gradient(115deg,#ffeaa3,#ffd375); }.funnel-node--quoting .funnel-node__icon { color:#ff9000; }.funnel-node--pipeline { width:64%; color:#fff; background:linear-gradient(115deg,#926cff,#7548eb); }.funnel-node--upside { width:60%; color:#fff; background:linear-gradient(115deg,#4d9fff,#2877e8); }.funnel-node--forecast { width:56%; color:#fff; background:linear-gradient(115deg,#2bc8bb,#159b91); }.funnel-node--pipeline .funnel-node__icon,.funnel-node--upside .funnel-node__icon,.funnel-node--forecast .funnel-node__icon,.funnel-node--won .funnel-node__icon,.funnel-node--complete .funnel-node__icon { color:#fff; }.funnel-node--won { width:52%; color:#fff; background:linear-gradient(115deg,#2fc26d,#19a955); }.funnel-node--complete { width:48%; color:#fff; background:linear-gradient(115deg,#2fc26d,#17a84f); }
.funnel-lost { min-width:0; padding:9px 18px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:12px; color:#e3363f; background:linear-gradient(90deg,#ffeded,#ffe1e3); position:relative; }.funnel-lost strong { font-size:1.2rem; line-height:1; }.funnel-lost small { color:#e3363f; font-size:.88rem; }
.funnel-transition { width:700px; height:74px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:46px 17px; align-items:center; justify-content:center; column-gap:14px; position:relative; }.funnel-transition .funnel-metric,.funnel-unknown { min-width:0; padding:9px 18px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:12px; background:linear-gradient(90deg,#edf8ff,#e7f3fc); color:#0788ef; position:relative; }.funnel-transition .funnel-metric::before,.funnel-unknown::before { content:''; position:absolute; left:50%; bottom:100%; width:3px; height:13px; margin-left:-1px; background:#8290b0; }.funnel-transition .funnel-metric::after,.funnel-unknown::after { content:''; position:absolute; left:50%; bottom:calc(100% + 8px); margin-left:-5px; border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid #8290b0; }.funnel-transition--quoting .funnel-metric { background:linear-gradient(90deg,#fff7e9,#fff3df); color:#ff8a00; }.funnel-transition--pipeline .funnel-metric { background:linear-gradient(90deg,#f3efff,#f2eeff); color:#6c36ec; }.funnel-transition--upside .funnel-metric { background:linear-gradient(90deg,#edf5ff,#e7f0ff); color:#2563eb; }.funnel-transition--forecast .funnel-metric { background:linear-gradient(90deg,#e8fbf8,#e1f7f4); color:#0f8d83; }.funnel-transition--won .funnel-metric,.funnel-transition--complete .funnel-metric { background:linear-gradient(90deg,#eaf8ed,#eef8f0); color:#139440; }.funnel-metric strong,.funnel-unknown strong { font-size:1.2rem; line-height:1; }.funnel-metric small,.funnel-unknown small { color:#65739d; font-size:.88rem; }.funnel-unknown { color:#526486; background:linear-gradient(90deg,#f2f5f8,#e8edf3); }.funnel-transition .funnel-arrow { grid-column:1; justify-self:center; }.funnel-arrow--down { width:3px; height:15px; background:#8290b0; display:block; position:relative; }.funnel-arrow--down::after { content:''; position:absolute; left:-5px; bottom:-1px; border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid #8290b0; }.funnel-transition--won .funnel-arrow--down,.funnel-transition--complete .funnel-arrow--down { background:#19aa54; }.funnel-transition--won .funnel-arrow--down::after,.funnel-transition--complete .funnel-arrow--down::after { border-top-color:#19aa54; }.funnel-empty { padding:36px; color:#64748b; text-align:center; }
@media (max-width:720px) { .funnel-card { padding:18px 10px; }.funnel-chart { min-height:0; overflow:visible; }.funnel-flow,.funnel-stage-row { width:100%; }.funnel-stage-row { gap:8px; }.funnel-node { height:84px; gap:22px; }.funnel-node__icon { width:38px; height:38px; }.funnel-node div { min-width:82px; gap:3px; }.funnel-node strong { font-size:1rem; }.funnel-node b { font-size:1.85rem; }.funnel-lost { width:auto; min-height:0; margin:0; padding:8px; }.funnel-transition { width:100%; height:67px; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:8px; }.funnel-transition .funnel-metric,.funnel-unknown { padding:8px 6px; gap:4px; white-space:nowrap; }.funnel-metric strong,.funnel-unknown strong,.funnel-lost strong { font-size:clamp(.72rem,3vw,1rem); }.funnel-metric small,.funnel-unknown small,.funnel-lost small { font-size:clamp(.62rem,2.4vw,.78rem); }.funnel-transition .funnel-arrow { grid-column:1; } }

/* The desktop layout needs room for right-side Lost callouts. On tablets,
   place each outcome below its stage so no content is clipped horizontally. */
@media (max-width:1100px) { .funnel-chart { min-height:0; overflow:visible; }.funnel-flow,.funnel-stage-row { width:100%; }.funnel-stage-row { gap:10px; }.funnel-node--new { width:100%; }.funnel-lost { width:auto; min-height:0; margin:0; padding:8px 12px; }.funnel-transition { width:min(100%,700px); grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:10px; }.funnel-transition .funnel-metric,.funnel-unknown { min-width:0; padding-inline:10px; gap:7px; white-space:nowrap; }.funnel-metric strong,.funnel-unknown strong,.funnel-lost strong { font-size:clamp(.82rem,2.4vw,1.15rem); }.funnel-metric small,.funnel-unknown small,.funnel-lost small { font-size:clamp(.68rem,1.8vw,.85rem); } }

/* Phones use a simple single-column sequence: Lost (when present), next stage,
   then Current. Arrows are removed to prioritise legibility. */
@media (max-width:560px) { .funnel-card { padding:14px 8px; }.funnel-node { height:76px; gap:16px; }.funnel-node__icon { width:34px; height:34px; }.funnel-node div { min-width:72px; }.funnel-node strong { font-size:.92rem; }.funnel-node b { font-size:1.65rem; }.funnel-lost { width:min(230px,90vw); }.funnel-transition { width:100%; height:auto; grid-template-columns:1fr; grid-template-rows:auto; gap:8px; padding:8px 0 14px; }.funnel-transition .funnel-metric,.funnel-unknown { width:min(270px,90vw); min-height:38px; box-sizing:border-box; margin:auto; }.funnel-transition .funnel-arrow,.funnel-transition::before,.funnel-transition .funnel-metric::before,.funnel-transition .funnel-metric::after,.funnel-unknown::before,.funnel-unknown::after { display:none; } }

/* Centre only the outcome pills that are present at each stage. */
.funnel-transition { width:700px; height:74px; display:grid; grid-template-rows:46px 17px; grid-template-columns:1fr; }
.funnel-outcomes { display:flex; align-items:center; justify-content:center; gap:14px; min-width:0; }
.funnel-outcomes > .funnel-metric,.funnel-outcomes > .funnel-unknown,.funnel-outcomes > .funnel-lost { flex:0 1 220px; box-sizing:border-box; }
.funnel-transition .funnel-arrow { grid-column:1; justify-self:center; }
.funnel-lost::before { content:''; position:absolute; left:50%; bottom:100%; width:3px; height:13px; margin-left:-1px; background:#8290b0; }
.funnel-lost::after { content:''; position:absolute; left:50%; bottom:calc(100% + 8px); margin-left:-5px; border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid #8290b0; }
@media (max-width:560px) { .funnel-transition { width:100%; height:auto; grid-template-rows:auto auto; }.funnel-outcomes { display:grid; grid-template-columns:1fr; gap:8px; justify-items:center; }.funnel-outcomes > .funnel-metric,.funnel-outcomes > .funnel-unknown,.funnel-outcomes > .funnel-lost { width:min(270px,90vw); min-height:38px; margin:0; }.funnel-transition .funnel-arrow,.funnel-transition .funnel-metric::before,.funnel-transition .funnel-metric::after,.funnel-unknown::before,.funnel-unknown::after,.funnel-lost::before,.funnel-lost::after { display:none; } }

@media (max-width:1100px) and (min-width:561px) { .funnel-transition { width:min(100%,700px); } }

/* The progression arrow belongs to the progression pill, not the row centre. */
.funnel-outcomes { align-items:center; }
.funnel-progress { display:grid; grid-template-rows:46px 17px; justify-items:center; min-width:0; }
.funnel-progress .funnel-metric { width:100%; box-sizing:border-box; align-self:center; }
.funnel-progress .funnel-arrow { grid-column:auto; justify-self:center; }

/* With three outcomes, the outer arrows fan out from the stage centre. */
.funnel-outcomes--3 > .funnel-progress .funnel-metric::before,.funnel-outcomes--3 > .funnel-progress .funnel-metric::after { transform:rotate(45deg); transform-origin:bottom center; }
.funnel-outcomes--3 > .funnel-lost::before,.funnel-outcomes--3 > .funnel-lost::after { transform:rotate(-45deg); transform-origin:bottom center; }

@media (max-width:560px) { .funnel-progress { width:min(270px,90vw); grid-template-rows:auto; }.funnel-progress .funnel-metric { width:100%; min-height:38px; }.funnel-progress .funnel-arrow { display:none; }.funnel-outcomes--3 > .funnel-progress .funnel-metric::before,.funnel-outcomes--3 > .funnel-progress .funnel-metric::after,.funnel-outcomes--3 > .funnel-lost::before,.funnel-outcomes--3 > .funnel-lost::after { display:none; } }

/* Outcome pills are intentionally uniform; the report no longer uses arrows. */
.funnel-outcomes > .funnel-progress,.funnel-outcomes > .funnel-unknown,.funnel-outcomes > .funnel-lost { flex:0 0 220px; width:220px; }
.funnel-progress .funnel-arrow,.funnel-transition .funnel-metric::before,.funnel-transition .funnel-metric::after,.funnel-unknown::before,.funnel-unknown::after,.funnel-lost::before,.funnel-lost::after { display:none; }
@media (max-width:560px) { .funnel-outcomes > .funnel-progress,.funnel-outcomes > .funnel-unknown,.funnel-outcomes > .funnel-lost { flex:0 0 auto; width:min(270px,90vw); } }

/* Tighter stage rhythm with consistent outcome-pill dimensions. */
.funnel-transition { height:57px; grid-template-rows:57px; }
.funnel-outcomes { align-items:start; padding-bottom:10px; box-sizing:border-box; margin-top:-20px; }
.funnel-progress { height:42px; grid-template-rows:42px; }
.funnel-progress .funnel-metric,.funnel-unknown,.funnel-lost { height:42px; min-height:42px; box-sizing:border-box; }
@media (max-width:560px) { .funnel-transition { height:auto; grid-template-rows:auto; }.funnel-progress { grid-template-rows:auto; }.funnel-progress .funnel-metric,.funnel-unknown,.funnel-lost { height:auto; min-height:38px; } }

/* Compact tablet rows: three pills share the available width without overflow. */
@media (min-width:561px) and (max-width:720px) { .funnel-outcomes { width:100%; gap:6px; padding-inline:2px; box-sizing:border-box; }.funnel-outcomes > .funnel-progress,.funnel-outcomes > .funnel-unknown,.funnel-outcomes > .funnel-lost { flex:1 1 0; width:auto; min-width:0; }.funnel-progress .funnel-metric,.funnel-unknown,.funnel-lost { padding-inline:4px; gap:3px; } }

/* Account for the persistent sidebar: compact behaviour starts before the
   browser viewport reaches the usual tablet breakpoint. */
@media (max-width:1400px) { .funnel-page .dashboard-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }.funnel-chart { min-height:0; overflow:visible; }.funnel-flow { width:min(100%,1000px); }.funnel-stage-row { width:min(100%,700px); }.funnel-key-rates { width:min(100%,900px); box-sizing:border-box; }.funnel-key-rate { padding-inline:clamp(8px,1.2vw,18px); gap:8px; }.funnel-key-rate small { font-size:clamp(.68rem,1.2vw,.8rem); } }

.funnel-key-rates { width:min(100%,900px); margin:30px auto; padding:14px 16px 8px; border-radius:14px; background:linear-gradient(120deg,#fbfdff,#f4f9ff); border:1px solid #edf2f7; }.funnel-key-rates h2 { margin:0 0 10px; color:#10265f; font-size:1rem; letter-spacing:-.02em; }.funnel-key-rates__items { display:grid; grid-template-columns:repeat(3,1fr); }.funnel-key-rate { min-width:0; display:flex; align-items:center; gap:11px; padding:4px 18px; border-left:1px solid #e2e8f0; }.funnel-key-rate:first-child { border-left:0; padding-left:0; }.funnel-key-rate__icon { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:10px; color:#0b89f4; background:#e2f4ff; }.funnel-key-rate__icon svg { width:23px; height:23px; }.funnel-key-rate__icon--quoting { color:#f58a00; background:#fff2d3; }.funnel-key-rate__icon--pipeline { color:#6b3df0; background:#f0ebff; }.funnel-key-rate small,.funnel-key-rate strong { display:block; }.funnel-key-rate small { color:#1b356d; font-size:.72rem; font-weight:700; white-space:nowrap; }.funnel-key-rate strong { margin-top:1px; color:#071e59; font-size:1.4rem; line-height:1; }
@media (max-width:700px) { .funnel-key-rates { margin-top:22px; padding:13px 12px; }.funnel-key-rates__items { grid-template-columns:1fr; }.funnel-key-rate,.funnel-key-rate:first-child { padding:10px 0; border-left:0; border-top:1px solid #e2e8f0; }.funnel-key-rate:first-child { border-top:0; } }

.funnel-key-rate small { font-size:.8rem; }

/* Colour-matched borders make each funnel outcome bubble more distinct. */
.funnel-transition .funnel-metric { border:1px solid rgba(8,136,239,.24); }
.funnel-transition--quoting .funnel-metric { border-color:rgba(245,138,0,.28); }
.funnel-transition--pipeline .funnel-metric { border-color:rgba(108,54,236,.25); }
.funnel-transition--upside .funnel-metric { border-color:rgba(37,99,235,.24); }
.funnel-transition--forecast .funnel-metric { border-color:rgba(15,141,131,.24); }
.funnel-transition--won .funnel-metric,.funnel-transition--complete .funnel-metric { border-color:rgba(19,148,64,.24); }
.funnel-unknown { border:1px solid rgba(82,100,134,.22); }
.funnel-lost { border:1px solid rgba(227,54,63,.26); }

/* Lead-stage palette: neutral intake → engagement → active opportunity → outcome. */
.funnel-node--new { color:#334155; background:linear-gradient(115deg,#e2e8f0,#cbd5e1); }
.funnel-node--new .funnel-node__icon { color:#64748b; }
.funnel-node--contacted { color:#075985; background:linear-gradient(115deg,#d9f3ff,#a5e3ff); }
.funnel-node--contacted .funnel-node__icon { color:#0284c7; }
.funnel-node--quoting { color:#7c3d00; background:linear-gradient(115deg,#ffe9a8,#fbd274); }
.funnel-node--upside { background:linear-gradient(115deg,#6366f1,#4338ca); }
.funnel-node--forecast { background:linear-gradient(115deg,#2dd4bf,#0f9d8d); }
.funnel-node--won { background:linear-gradient(115deg,#4ade80,#16a34a); }
.funnel-node--complete { background:linear-gradient(115deg,#22c55e,#15803d); }
.funnel-transition--upside .funnel-metric { background:linear-gradient(90deg,#eef2ff,#e5e7ff); color:#4338ca; border-color:rgba(67,56,202,.24); }
.funnel-transition--forecast .funnel-metric { background:linear-gradient(90deg,#e6fffb,#d9f8f2); color:#0f766e; border-color:rgba(15,118,110,.24); }