/* ════════════════════════════════════════════════════════════
   PRODUCTIZE · agency insight → SaaS
   Rides site.css + cpq.css + loop-visuals.css.
   ════════════════════════════════════════════════════════════ */

.cq[data-loop="productize"] { --lp: #4A5578; }

/* ── revenue shape: retainer vs product ── */
.pz-curve { position: relative; }
.pz-curve svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.pz-curve .gl { stroke: var(--rule); stroke-width: 1; }
.pz-curve .delta { fill: color-mix(in srgb, var(--lp) 14%, transparent); }
.pz-curve .ret { fill: none; stroke: var(--ink-3); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 640; stroke-dashoffset: 640; animation: cqDraw 9s var(--ease) infinite; }
.pz-curve .prod { fill: none; stroke: var(--lp); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 640; stroke-dashoffset: 640; animation: cqDraw 9s var(--ease) infinite; animation-delay: .5s; }
.pz-curve .lb { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .06em; }
.pz-curve .lb.r { fill: var(--ink-3); }
.pz-curve .lb.p { fill: var(--lp); }
.pz-curve .ax { font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; fill: var(--ink-3); }
.pz-curve .dl { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; fill: var(--lp); opacity: 0; animation: cqFade 9s var(--ease) infinite; animation-delay: 1.5s; }

/* ── the book: warm distribution fan-out ── */
.pz-book svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.pz-book .wire { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.pz-book .wire-on { fill: none; stroke: var(--lp); stroke-width: 1.6; stroke-dasharray: 3 60; animation: cqFlow 3s linear infinite; }
.pz-book .bx { fill: var(--surface); stroke: var(--rule-strong); }
.pz-book .bx-me { fill: var(--lp); stroke: var(--lp); }
.pz-book .t-me { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; fill: #FAFAF7; }
.pz-book .s-me { font-family: var(--font-mono); font-size: 8px; fill: #FAFAF7AA; }
.pz-book .cl { fill: var(--bg-2); stroke: var(--rule); }
.pz-book .cl.won { fill: color-mix(in srgb, var(--lp) 22%, transparent); stroke: var(--lp); opacity: 0; animation: cqFade 9s var(--ease) infinite; }
.pz-book .t { font-family: var(--font-mono); font-size: 8.5px; fill: var(--ink-2); }
.pz-book .hd { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-3); }
.pz-book .kpi { font-family: var(--font); font-size: 15px; font-weight: 500; fill: var(--ink); letter-spacing: -.02em; }
.pz-book .kpi-l { font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-3); }
.pz-book .cac { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; fill: var(--alert, #B33B1F); }

/* ── valuation multiple bars ── */
.pz-mult { display: grid; gap: 14px; }
.pz-mr { display: grid; grid-template-columns: 168px 1fr 78px; gap: 16px; align-items: center; }
.pz-mr .k { font: 500 10px/1.35 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pz-mr .k b { display: block; font-family: var(--font); font-size: 13px; color: var(--ink); letter-spacing: -.01em; text-transform: none; margin-bottom: 3px; }
.pz-mtr { height: 32px; border-radius: var(--r-1); background: var(--bg-2); overflow: hidden; }
.pz-mtr i { display: flex; align-items: center; height: 100%; border-radius: var(--r-1); padding: 0 12px; font: 500 10px/1 var(--font-mono); letter-spacing: .05em; white-space: nowrap; width: 0; animation: cqGrow 8s var(--ease) infinite; }
.pz-mr:nth-child(1) i { background: #0E0E0C1A; color: var(--ink-2); --w: 21%; animation-delay: .1s; }
.pz-mr:nth-child(2) i { background: color-mix(in srgb, var(--lp) 34%, transparent); color: var(--lp); --w: 43%; animation-delay: .4s; }
.pz-mr:nth-child(3) i { background: var(--lp); color: #FAFAF7; --w: 100%; animation-delay: .7s; }
.pz-mr .v { font: 500 15px/1 var(--font-mono); color: var(--ink); text-align: right; }
.pz-mult-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.pz-mult-note b { color: var(--ink); font-weight: 500; }

/* ── 4 steps ── */
.pz-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }
.pz-st { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3); padding: 26px; position: relative; }
.pz-st .n { font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lp); }
.pz-st h4 { font-size: 18px; font-weight: 500; letter-spacing: -.02em; margin: 12px 0 0; color: var(--ink); }
.pz-st p { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 9px 0 0; }
.pz-st .tool { font: 500 9px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); display: block; }
.pz-st .tool b { color: var(--lp); font-weight: 500; }

/* ── who this is for ── */
.pz-who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }
.pz-who > div { background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--c); border-radius: var(--r-3); padding: 24px; }
.pz-who .st { font: 500 9px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.pz-who h4 { font-size: 16px; font-weight: 500; letter-spacing: -.02em; margin: 11px 0 0; color: var(--ink); }
.pz-who p { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 9px 0 0; }
.pz-who .ex { font: 500 9px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--ink-3); margin-top: 12px; display: block; }

/* ── economics table strip ── */
.pz-econ { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }
.pz-econ > div { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3); padding: 26px; }
.pz-econ .v { font-size: clamp(26px,3vw,38px); font-weight: 500; letter-spacing: -.035em; color: var(--lp); line-height: 1; }
.pz-econ .l { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .pz-curve .ret, .pz-curve .prod, .pz-curve .dl, .pz-book .wire-on,
  .pz-book .cl.won, .pz-mtr i { animation: none !important; }
  .pz-curve .ret, .pz-curve .prod { stroke-dashoffset: 0; }
  .pz-curve .dl, .pz-book .cl.won { opacity: 1; }
  .pz-mtr i { width: var(--w); }
}
@media (max-width: 1080px) {
  .pz-steps, .pz-who, .pz-econ { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .pz-steps, .pz-who, .pz-econ { grid-template-columns: 1fr; }
  .pz-mr { grid-template-columns: 1fr auto; }
  .pz-mtr { grid-column: 1 / -1; }
}