/* ==========================================================================
   Parallex · v3 "Pulse" · pages-analytics.css  (Parallex Analytics page)
   ========================================================================== */

/* ---------- hero: live dashboard ---------- */
.an-hero .ph-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); }
@media (max-width: 1023px) { .an-hero .ph-grid { grid-template-columns: 1fr; } }
.page-hero .lda { display: block; min-height: 600px; padding: 26px 26px 60px; background: radial-gradient(80% 60% at 90% 0%, #7FA0EC, rgba(127,160,236,0) 60%), var(--field-deep); }
.lda-app { position: relative; z-index: 2; background: #F7F9FD; border-radius: 22px; padding: 16px; box-shadow: var(--sh-panel); display: grid; gap: 12px; color: var(--navy); font-size: 13px; }
.lda-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lda-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; }
.lda-proj { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px 5px 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--border); font-weight: 500; }
.lda-range { margin-inline-start: auto; color: var(--muted); }
.lda-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lda-kpis > div { position: relative; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--border); overflow: hidden; }
.lda-kpis small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lda-kpis b { display: inline-block; font-family: var(--f-head); font-weight: 500; font-size: 30px; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lda-kpis em { font-style: normal; margin-inline-start: 6px; font-size: 11.5px; font-weight: 500; color: var(--live-text); }
.lda-kpis b.is-tick { animation: kpiTick .6s var(--ease-snap); color: var(--b1); }
@keyframes kpiTick { 0% { transform: translateY(6px); opacity: .3; } 100% { transform: none; opacity: 1; } }
.lda-grid { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 8px; }
.lda-card { padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--border); min-width: 0; }
.lda-heat { grid-row: span 2; }
.lda-card .dc-h { margin-bottom: 8px; }
.lda-card .dc-h b { display: inline-flex; align-items: center; }
.hgrid { display: grid; grid-template-columns: 50px repeat(4, minmax(0, 1fr)); gap: 4px; }
.hgrid .hc { text-align: center; color: var(--muted); font-size: 11.5px; padding-bottom: 2px; }
.hgrid .hl { color: var(--muted); font-size: 11.5px; display: flex; align-items: center; }
.hcell { position: relative; height: 30px; border-radius: 7px; background: rgba(80,111,179, calc(.07 + var(--v) * .93)); transition: background .6s, transform .25s var(--ease-snap), box-shadow .25s; cursor: pointer; }
.hcell:hover, .hcell:focus-visible, .hcell.is-sel { transform: scale(1.08); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--b3); z-index: 1; }
.hcell.is-ping::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--b3); animation: ping .9s var(--ease-out) forwards; }
@keyframes ping { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } }
.hg-tip { margin-top: 10px; display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 12.5px; }
.hg-tip b { font-weight: 500; }
.donut-wrap { position: relative; width: 108px; height: 108px; margin: 0 auto 8px; }
.donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 5.2; }
.dn-bg { stroke: var(--tint); }
.dn-seg { transition: stroke-dasharray .9s var(--ease-snap), stroke-dashoffset .9s var(--ease-snap), stroke-width .25s; cursor: pointer; }
.dn-seg.is-on { stroke-width: 6.6; }
.dn-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dn-c b { font-family: var(--f-head); font-weight: 500; font-size: 22px; letter-spacing: -.02em; line-height: 1; }
.dn-c small { color: var(--muted); font-size: 11.5px; }
.dn-legend { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; font-size: 11.5px; }
.dn-legend li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.dn-legend li i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.dn-legend li b { margin-inline-start: auto; color: var(--navy); font-weight: 500; }
.lda-stream { list-style: none; padding: 0; display: grid; gap: 4px; }
.lda-stream li { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 1.25; }
.lda-stream li:first-child { background: linear-gradient(90deg, rgba(103,142,229,.14), rgba(103,142,229,0)); }
.lda-stream .fi { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--tint); color: var(--b1); }
.lda-stream .fi .ic, .lda-stream .fi svg { width: 13px; height: 13px; }
.lda-stream li.is-new { animation: feedIn .45s var(--ease-snap) both; }
.lda-crm { position: absolute; z-index: 3; left: 26px; bottom: 16px; }
.lda .sample { right: 18px; bottom: 18px; }
@media (max-width: 1180px) and (min-width: 1024px) { .lda-kpis b { font-size: 24px; } .page-hero .lda { padding: 18px 18px 58px; } }
@media (max-width: 599px) {
  .page-hero .lda { padding: 12px 12px 58px; min-height: 0; }
  .lda-app { padding: 12px; gap: 10px; border-radius: 18px; }
  .lda-range { display: none; }
  .lda-kpis { grid-template-columns: 1fr 1fr; }
  .lda-kpis b { font-size: 24px; }
  .lda-grid { grid-template-columns: 1fr; }
  .lda-heat { grid-row: auto; }
  .lda-aud { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: center; }
  .lda-aud .dc-h { grid-column: 1 / -1; }
  .lda-aud .donut-wrap { width: 96px; height: 96px; margin: 0; }
  .dn-legend { grid-template-columns: 1fr; }
  .lda-crm { left: 12px; bottom: 14px; }
  .lda .sample { right: 12px; bottom: 16px; }
}

/* ---------- problem: silos ---------- */
.silos { position: relative; min-height: 440px; filter: grayscale(1); }
.silos > .silo { position: absolute; }
.silo { background: #fff; border-radius: 16px; box-shadow: var(--sh-float); overflow: hidden; font-size: 13px; }
.silo.s1 { left: 0; top: 4%; width: 300px; rotate: -3deg; }
.silo.still { position: relative; rotate: none; width: min(92%, 380px); }
.silo .xls-bar { background: #5F6B66; }
.silo .xls-grid span { height: 2.2em; }
.silo.s2 { right: 2%; top: 14%; width: 230px; padding: 14px; display: grid; gap: 6px; rotate: 4deg; }
.silo.s2 b { font-weight: 500; } .silo.s2 small { color: var(--muted); }
.silo.s2 i { height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, #D9DCE2 0 18px, transparent 18px 22px); }
.silo.s3 { left: 22%; bottom: 2%; width: 260px; padding: 8px 8px 10px; rotate: 2deg; }
.silo.s3 .shot img { width: 100%; height: 130px; object-fit: cover; border-radius: 10px; }
.silo.s3 small { display: block; padding: 6px 4px 0; color: var(--muted); font-size: 11.5px; }
.silo.s4 { right: 0; bottom: 18%; width: 190px; padding: 14px; background: #FFF6C9; border-radius: 4px; font-family: "Segoe Print", "Bradley Hand", var(--f-body); rotate: -4deg; font-size: 14px; }
@media (max-width: 599px) { .silos { min-height: 400px; } .silo.s1 { width: 250px; } .silo.s3 { left: 4%; width: 210px; } .silo.s3 .shot img { height: 100px; } .silo.s2 { top: 32%; width: 190px; } .silo.s4 { bottom: 34%; display: none; } }

/* ---------- four questions: media ---------- */
.views-blind { display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--before-text); }
.views-blind b { font-family: var(--f-head); font-weight: 500; font-size: clamp(64px, 40px + 5vw, 120px); letter-spacing: -.05em; line-height: .9; }
.views-blind small { font-size: 15px; }
.vb-faces { display: flex; margin-top: 18px; }
.vb-faces span { width: 52px; height: 52px; margin-inline-start: -10px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 3px #D9DCE2; font-family: var(--f-head); font-size: 22px; color: var(--faint); }
.aud-card, .mini-rank, .unit-demand { width: min(94%, 500px); background: #fff; border-radius: 22px; padding: 16px; box-shadow: var(--sh-panel); display: grid; gap: 12px; font-size: 13px; }
.ac-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ac-h b { font-weight: 500; font-size: 15px; } .ac-h small { color: var(--muted); font-size: 12px; }
.ac-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ac-cols > div { padding: 12px; border-radius: 14px; background: var(--mist); display: grid; gap: 6px; align-content: start; }
.ac-cols small { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.ac-cols .bars { font-size: 12px; }
.split { display: flex; height: 10px; border-radius: 99px; overflow: hidden; gap: 2px; }
.split i { flex: var(--v); background: var(--b1); } .split i + i { background: var(--b3); }
.sp-l { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--muted); }
.cols5 { display: flex; align-items: flex-end; gap: 5px; height: 54px; }
.cols5 i { flex: 1; height: calc(var(--v) * 100%); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--b3), var(--b1)); }
.camp { list-style: none; padding: 0; display: grid; gap: 5px; font-size: 12px; }
.camp li { display: flex; justify-content: space-between; } .camp b { font-weight: 500; }
.gut { position: relative; width: min(92%, 400px); }
.old-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--sh-float); font-size: 14px; }
.old-sheet b { grid-column: 1 / -1; padding: 12px 14px; background: #5F6B66; color: #fff; font-weight: 500; }
.old-sheet span { padding: 12px 14px; border-bottom: 1px solid #E3E5E9; }
.old-sheet span:nth-last-child(1) { color: var(--red-text); }
.gut .sticky-note { position: absolute; right: -10px; bottom: -40px; rotate: -5deg; }
.ud-grid { display: grid; grid-template-columns: 34px repeat(6, minmax(0, 1fr)); gap: 3px; font-size: 11px; }
.ud-grid .ul { color: var(--muted); display: flex; align-items: center; }
.ud-grid .uh { color: var(--muted); text-align: center; }
.ud-grid i { height: 22px; border-radius: 5px; background: rgba(80,111,179, calc(.06 + var(--v) * .94)); }
.ud-grid i.hot { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #E4572E; }
.ud-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.ud-foot i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-inline-end: 4px; }
.ud-foot i.lo { background: rgba(80,111,179,.1); } .ud-foot i.hi { background: var(--b1); }
.ud-ramp { width: 60px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, rgba(80,111,179,.1), var(--b1)); }
.ud-best { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #FFE9E1; color: #B4380D; font-weight: 500; }
.mr { list-style: none; padding: 0; display: grid; gap: 6px; }
.mr li { display: grid; grid-template-columns: 18px 32px 1fr auto; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--mist); }
.mr li:first-child { background: var(--tint); box-shadow: inset 0 0 0 1px rgba(80,111,179,.35); }
.mr .rk { color: var(--muted); text-align: center; }
.mr b { display: block; font-weight: 500; font-size: 14px; } .mr small { color: var(--muted); font-size: 12px; }
.mr-n { font-family: var(--f-head); font-size: 24px !important; letter-spacing: -.02em; }
.cal { width: min(92%, 360px); background: #fff; border-radius: 18px; padding: 16px; box-shadow: var(--sh-float); }
.cal-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cal-h b { font-weight: 500; } .cal-h small { color: var(--muted); }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 11px; text-align: center; color: var(--muted); }
.cal-g i { height: 26px; border-radius: 6px; background: #F1F2F4; font-style: normal; display: grid; place-items: center; }
.cal-g i.due { background: #E3E5E9; color: var(--before-text); box-shadow: inset 0 0 0 2px var(--red); font-weight: 500; }
.cal-n { margin-top: 12px; font-size: 14px; color: var(--before-text); }
@media (max-width: 599px) {
  .ac-cols { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ac-cols > div { padding: 8px; }
  .aud-card, .mini-rank, .unit-demand { padding: 12px; gap: 8px; }
  .ud-grid i { height: 18px; }
  .ud-best { margin-inline-start: 0; }
  .gut .sticky-note { bottom: -60px; right: 0; }
}

/* ---------- leaderboard ---------- */
.perf-grid { align-items: center; }
.board { position: relative; background: #fff; border-radius: 28px; padding: 18px; box-shadow: var(--sh-panel); display: grid; gap: 8px; }
.bd-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 4px 8px; }
.bd-h > b { font-family: var(--f-head); font-weight: 500; font-size: 20px; letter-spacing: -.02em; }
.bd-h .badge { margin-inline-start: auto; }
.bd-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--border); }
.bd-seg button { min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--muted); transition: background .25s, color .25s; }
.bd-seg button[aria-checked="true"] { background: var(--navy); color: #fff; }
.bd-cols, .bd-row { display: grid; grid-template-columns: 26px 40px minmax(0, 1fr) 90px 80px; align-items: center; gap: 10px; }
.bd-cols { padding: 0 12px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.bd-cols span:nth-child(n+4) { text-align: end; }
.bd-list { list-style: none; padding: 0; display: grid; gap: 4px; }
.bd-row { width: 100%; padding: 10px 12px; border-radius: 16px; text-align: start; transition: background .25s, box-shadow .25s; }
.bd-row:hover { background: var(--mist); }
.bd-row[aria-expanded="true"] { background: var(--tint); box-shadow: inset 0 0 0 1px rgba(80,111,179,.35); }
.bd-rk { font-family: var(--f-head); font-weight: 500; font-size: 18px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.bd-list li:first-child .bd-rk { color: var(--b1); }
.bd-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 500; }
.bd-nm b { display: block; font-weight: 500; font-size: 15px; } .bd-nm small { color: var(--muted); font-size: 12.5px; }
.bd-n { text-align: end; font-family: var(--f-head); font-weight: 500; font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bd-bar { display: block; height: 4px; margin-top: 6px; border-radius: 99px; background: var(--tint); overflow: hidden; }
.bd-bar i { display: block; height: 100%; width: calc(var(--v) * 100%); background: linear-gradient(90deg, var(--b3), var(--b1)); transition: width .8s var(--ease-snap); }
.bd-mv { display: inline-block; margin-inline-start: 4px; font-size: 11px; font-weight: 500; color: var(--live-text); opacity: 0; transition: opacity .3s; }
.bd-mv.is-on { opacity: 1; }
.bd-pipe { overflow: hidden; }
.bd-pipe:empty { display: none; }
.pipe { margin: 4px 0 2px; padding: 14px; border-radius: 18px; background: var(--navy); color: #fff; display: grid; gap: 10px; animation: tabIn .45s var(--ease-snap); }
.pipe-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pipe-h b { font-weight: 500; } .pipe-h small { color: var(--on-dark-2); font-size: 12.5px; }
.pipe-f { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pipe-f span { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-size: 11.5px; color: var(--on-dark-2); }
.pipe-f b { font-family: var(--f-head); font-weight: 500; font-size: 22px; color: #fff; }
.pipe-f span:last-child { background: rgba(37,211,102,.14); box-shadow: inset 0 0 0 1px rgba(37,211,102,.35); }
.pipe-note { font-size: 12.5px; color: var(--on-dark-2); display: flex; align-items: center; gap: 6px; }
.bd-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 0; }
@media (max-width: 599px) {
  .board { padding: 12px; border-radius: 22px; }
  .bd-cols, .bd-row { grid-template-columns: 20px 34px minmax(0, 1fr) 54px 50px; gap: 8px; }
  .bd-row { padding: 8px; }
  .bd-av { width: 34px; height: 34px; }
  .bd-n { font-size: 17px; }
  .bd-cols { padding: 0 8px; font-size: 10px; letter-spacing: .04em; }
  .pipe-f { grid-template-columns: 1fr 1fr; }
}

/* ---------- privacy ---------- */
.privacy .t-lead { color: var(--on-dark-2); margin-top: 22px; max-width: 48ch; }
.priv-vis { display: grid; gap: 14px; }
.pv-row { display: grid; gap: 8px; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.pv-row > small { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--b3); font-weight: 500; }
.pv-fact { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #fff; color: var(--navy); font-weight: 500; font-size: 15px; }
.pv-agg-b { display: flex; gap: 4px; height: 38px; }
/* one bar split in segments: only the outer ends are rounded */
.pv-agg-b span:first-child { border-radius: 8px 0 0 8px; } .pv-agg-b span:last-child { border-radius: 0 8px 8px 0; }
.pv-agg-b span { flex: var(--v); display: grid; place-items: center; border-radius: 0; background: var(--b1); font-size: 12px; font-weight: 500; }
.pv-agg-b span:nth-child(2) { background: var(--b2); } .pv-agg-b span:nth-child(3) { background: var(--b3); } .pv-agg-b span:nth-child(4) { background: #3B5690; }
.pv-contact { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 14px; background: rgba(255,255,255,.06); color: var(--on-dark-2); }
.pv-contact .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); filter: blur(1.5px); }
.pv-contact b { display: block; letter-spacing: .02em; opacity: .5; filter: blur(2.5px); font-weight: 500; }
.pv-contact small { opacity: .6; filter: blur(2px); }
.pv-contact .ic { color: var(--wa); }

/* ---------- connected ---------- */
.conn-vis { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto; align-items: center; gap: 18px 0; padding: 32px; border-radius: var(--r-tile); background: var(--mist); box-shadow: 0 0 0 1px var(--border); min-height: 280px; }
.cn-node { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; border-radius: 999px; background: #fff; box-shadow: var(--sh-float); font-weight: 500; white-space: nowrap; }
.cn-crm .ic { color: var(--b1); }
.cn-lines { width: 100%; height: 60px; overflow: visible; }
.cn-lines path { fill: none; stroke: var(--b3); stroke-width: 2; stroke-dasharray: 6 8; animation: cnDash 1.94s linear infinite; vector-effect: non-scaling-stroke; }
.cn-lines path.rev { stroke: var(--b1); stroke-dasharray: 6 8; animation-direction: reverse; transform: translateY(8px); } /* both lines dashed */
@keyframes cnDash { to { stroke-dashoffset: -28; } }
.reduced-motion .cn-lines path, .motion-paused .cn-lines path { animation: none; }
@media (max-width: 599px) { .conn-vis { grid-template-columns: 1fr; justify-items: center; padding: 22px; } .cn-lines { width: 60px; height: 50px; transform: rotate(90deg); } }
/* polish: the audience card needs its full height on phones (was cropped by the 4:4.6 panel) */
@media (max-width: 599px) {
  #q-who .media-panel { aspect-ratio: auto; min-height: 500px; }
  #q-who .aud-card { width: 100%; font-size: 12px; }
  #q-who .ac-cols { grid-template-columns: 1fr; }
  #q-who .ac-cols > div:nth-child(3) { display: none; }
  #q-who .media-panel .sample { top: 12px; bottom: auto; }
  #q-who .media-panel [data-pm="with"] { padding: 40px 12px 12px; }
}