/* "Three kinds of intent, one score" (views/partials/pm-score.ejs; /intent), AK Oct 24.
   Desktop: the three parts stacked on the left, the score card on the right. Each part lights in turn (data-step on .psc__viz);
   the ring fills by part, the number counts up, then the trend line draws (.is-done). Phones: one column.
   Brand tokens only: gold #FFC61E, ink #110A33, violet #341D99, lavender #DDD6FF, mist #F6F4FF, cream #FFF4D2, slate #5B6478, white.
   Part colours: Active violet, Research gold, Market ink. */
html body .psc { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-move: cubic-bezier(.65, 0, .35, 1); --pc0: #341D99; --pc1: #FFC61E; --pc2: #110A33; --card: #fff; padding: 56px 0; background: #F6F4FF; color: #110A33; }
html body .psc--white { background: #fff; --card: #F6F4FF; }
html body .psc .section-header { margin-bottom: 32px; }
html body .psc__viz { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; align-items: stretch; }
html body .psc__parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
html body .psc__part { position: relative; margin: 0; padding: 18px 20px; border: 1px solid rgba(221, 214, 255, .7); border-radius: 20px; background: rgba(221, 214, 255, .3); transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); } /* ANIM-P2: no transform (the lit card no longer moves) */
html body .psc__part:nth-child(1) { --pc: var(--pc0); } html body .psc__part:nth-child(2) { --pc: var(--pc1); } html body .psc__part:nth-child(3) { --pc: var(--pc2); }
/* W18 (X4): a part that has not lit yet is not faded with opacity (its text fell to about 2:1). It keeps its text and gets a lighter border and a lavender fill; slate (#5B6478) on that fill is 5:1 or better. Lit parts turn into the full card. */
html body .psc__part:not(.is-on) .psc__top h3, html body .psc__part:not(.is-on) .psc__what { color: #5B6478; }
html body .psc__part.is-on { background: var(--card); border-color: #DDD6FF; }
html body .psc__part.is-now { border-color: var(--pc); box-shadow: 0 10px 24px -12px rgba(17, 10, 51, .25); } /* ANIM-P2 Oct 27: the 4px sideways jump is gone; the lit card keeps the shared right edge */
html body .psc__top { display: flex; align-items: center; gap: 10px; }
/* W10 Oct 26 (Krish O20-034): each kind is a titled card: a colour dot (the same colour as its ring segment), the title (Active Intent...),
   its points, then one line with the source in a lavender chip (from Vidar / Bombora Company Surge® / Signals) and what the kind is. The old
   coloured side stripe is gone (a 4px stripe on a card), the dot carries the colour. */
html body .psc__top .psc__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--pc); }
html body .psc__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 0; }
html body .psc__src { flex: none; padding: 3px 10px; border-radius: 999px; background: #DDD6FF; color: #110A33; font: 800 12px/16px Manrope, "Manrope Fallback", Arial, sans-serif; }
html body .psc__sub b { font: 700 15px/1.3 Manrope, "Manrope Fallback", Arial, sans-serif; color: #5B6478; }
html body .psc__top h3 { flex: 1; margin: 0; font: 700 20px/1.2 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; color: #110A33; }
/* Oct 27 (Amar C14: bars, not scores): the "+34" pill is a share bar in the part's ring colour, grown when the part lights */
html body .psc__adds { position: relative; flex: none; display: block; width: 72px; height: 10px; margin-left: auto; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #DDD6FF; overflow: hidden; }
html body .psc__adds i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 999px; transform-origin: left center; transform: scaleX(0); transition: transform 600ms cubic-bezier(.23,1,.32,1); }
html body .psc__adds--0 i { background: var(--pc0); } html body .psc__adds--1 i { background: var(--pc1); } html body .psc__adds--2 i { background: var(--pc2); }
html body .psc__part.is-on .psc__adds i, html body .is-done .psc__adds i { transform: none; }
@media (prefers-reduced-motion: reduce) { html body .psc__adds i { transform: none; transition: none; } }
html body .psc__what { margin: 8px 0 0; font: 400 15px/1.5 Manrope, "Manrope Fallback", Arial, sans-serif; color: #110A33; text-wrap: pretty; }
html body .psc__what a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #DDD6FF; text-decoration-thickness: 2px; }
html body .psc__ex { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
html body .psc__ex span { padding: 3px 10px; border-radius: 999px; background: #FFF4D2; border: 1px solid #FFC61E; font: 600 13px/1.3 Manrope, Arial, sans-serif; color: #110A33; }
html body .psc__helps { margin: 10px 0 0; font: 400 14px/1.45 Manrope, Arial, sans-serif; color: #5B6478; text-wrap: pretty; }
html body .psc__helps b { color: #110A33; font-weight: 800; margin-right: 4px; }
/* the score card */
html body .psc__score { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; border: 2px solid #FFC61E; border-radius: 24px; background: #fff; box-shadow: 0 18px 40px -20px rgba(17, 10, 51, .3); text-align: center; }
html body .psc__acct { margin: 0; font: 600 14px/1.3 Manrope, Arial, sans-serif; color: #5B6478; }
html body .psc__acct b { color: #110A33; }
html body .psc__ring { position: relative; width: 180px; height: 180px; }
html body .psc__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
html body .psc__track, html body .psc__seg { fill: none; stroke-width: 12; }
html body .psc__track { stroke: #F6F4FF; }
html body .psc__seg { stroke-dasharray: 0 var(--c); stroke-dashoffset: var(--off); transition: stroke-dasharray 600ms var(--ease-out); }
html body .psc__seg--0 { stroke: var(--pc0); } html body .psc__seg--1 { stroke: var(--pc1); } html body .psc__seg--2 { stroke: var(--pc2); }
html body [data-step="1"] .psc__seg--0, html body [data-step="2"] .psc__seg--0, html body [data-step="3"] .psc__seg--0,
html body [data-step="2"] .psc__seg--1, html body [data-step="3"] .psc__seg--1, html body [data-step="3"] .psc__seg--2 { stroke-dasharray: var(--len) var(--c); }
html body .psc__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; }
html body .psc__num b { font: 800 52px/1 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: #110A33; font-variant-numeric: tabular-nums; }
html body .psc__num span { margin-top: 4px; font: 800 13px/1 Manrope, Arial, sans-serif; color: #341D99; opacity: 0; transition: opacity 320ms var(--ease-out); }
html body .is-done .psc__num span { opacity: 1; }
/* ANIM-P2 Oct 27: the stacked bar (.psc__bar, which animated width) and its legend repeated the ring; both removed with their markup. */
html body .psc__dot--0 { background: var(--pc0); } html body .psc__dot--1 { background: var(--pc1); } html body .psc__dot--2 { background: var(--pc2); }
html body .psc__trend { display: flex; align-items: flex-end; gap: 8px; width: 100%; padding-top: 8px; border-top: 1px solid #DDD6FF; }
html body .psc__trend svg { flex: 1; height: 48px; overflow: visible; }
html body .psc__trend svg { clip-path: inset(-4px 100% -4px -4px); }
html body .is-done .psc__trend svg { clip-path: inset(-4px -4px -4px -4px); }
/* F7 Oct 28: before the trend draws, its round line cap showed as a stray dot at the left of an empty row; hide it until the draw starts */
/* ANIM-P2 Oct 27: the trend draws in 900 ms after the ring (enter), and fades out in 240 ms when the loop empties (exit is faster than enter) */
html body .psc__trend svg { opacity: 0; transition: clip-path 240ms var(--ease-out), opacity 160ms var(--ease-out); }
html body .is-done .psc__trend svg { opacity: 1; transition: clip-path 900ms var(--ease-out) 200ms, opacity 160ms var(--ease-out) 200ms; }
/* F7 Oct 28: the score card stretches to the height of the three parts; centre its content instead of leaving the gap at the bottom */
html body .psc__score { justify-content: center; }
/* F7 Oct 28: hover, focus or tap a part to hold it (same as the pipeline stages); the held part shows a pointer and a focus ring */
html body .psc__part { cursor: pointer; }
html body .psc__part:focus-visible { outline: 2px solid #341D99; outline-offset: 3px; }
html body .psc__trend polyline { fill: none; stroke: #341D99; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
html body .psc__trend span { font: 600 12px/1 Manrope, Arial, sans-serif; color: #5B6478; white-space: nowrap; }
html body .psc__line { margin: 0; font: 700 16px/1.4 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: #110A33; text-wrap: balance; }
html body .psc__dyn { margin: -4px 0 0; font: 600 14px/1.4 Manrope, Arial, sans-serif; color: #341D99; }
html body .psc__bands { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }
html body .psc__bands span { padding: 3px 9px; border-radius: 999px; background: #F6F4FF; font: 500 12px/1.4 Manrope, Arial, sans-serif; color: #5B6478; }
html body .psc__bands b { color: #110A33; font-weight: 800; }
html body .psc__video { margin: 24px 0 0; text-align: center; }
html body .psc__video a { display: inline-flex; align-items: center; gap: 8px; font: 700 16px/1 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: #110A33; text-decoration: none; }
html body .psc__video a span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FFC61E; font-size: 10px; }
html body .psc__video a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 991px) {
  html body .psc__viz { grid-template-columns: minmax(0, 1fr); }
  html body .psc__score { order: -1; }
}
@media (max-width: 767px) {
  html body .psc { padding: 40px 0; }
  html body .psc__part { padding: 14px 14px 14px 18px; }
    html body .psc__top h3 { font-size: 17px; }
  html body .psc__what { font-size: 14px; }
  html body .psc__ring { width: 150px; height: 150px; }
  html body .psc__num b { font-size: 44px; }
  /* ANIM-P2 Oct 27: all three bands on one row at 390 ("Very Strong 80+" never wraps alone) */
  html body .psc__score { padding: 20px 16px; }
  html body .psc__bands { gap: 4px; }
  html body .psc__bands span { padding: 3px 7px; }
}
/* below 380 px the three bands cannot share a row: stack them, so none sits alone */
@media (max-width: 379px) { html body .psc__bands { flex-direction: column; align-items: center; } }
@media (prefers-reduced-motion: reduce) {
  html body .psc__part, html body .psc__seg, html body .psc__trend svg, html body .is-done .psc__trend svg, html body .psc__num span { transition: none; }
}