/* Product View — shared visual system for THE PRODUCT modules (M01-M04).
   Used by landing.html and lab/product-view-lab.html. Monochrome + teal/alert data accents.
   Geometry: front cards span the column; base lane and deepest stack layer sit -18px left. */

.pv-card{ margin:0; align-self:start; background:var(--bg); border:var(--rule-bold) solid var(--rule); display:flex; flex-direction:column; }
.pv-card__bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-bottom:var(--rule-hair) solid var(--rule-muted); }
.pv-card__tag{ font-family:var(--font-mono); font-weight:var(--wt-med); font-size:var(--fs-micro); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--data-teal); border:var(--rule-hair) solid var(--data-teal); padding:2px var(--sp-2); }
.pv-card__metaR{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-muted); }
.pv-card__body{ padding:clamp(var(--sp-4),2vw,var(--sp-5)); }
.pv-card__title{ font-family:var(--font-grotesk); font-weight:var(--wt-semi); font-size:var(--fs-h4); line-height:var(--lh-snug); letter-spacing:var(--tr-tight); margin-bottom:var(--sp-3); }
.pv-card__quote{ font-family:var(--font-mono); font-style:italic; font-size:var(--fs-small); line-height:var(--lh-text); color:var(--text-muted); margin-bottom:var(--sp-4); }
.pv-card__chips{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.pv-chip{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-muted); border:var(--rule-hair) solid var(--rule-muted); padding:2px var(--sp-2); }
.pv-chip b{ color:var(--text); font-weight:var(--wt-semi); margin-left:var(--sp-1); }
.pv-card__stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:var(--rule-hair) solid var(--rule-muted); }
.pv-stat{ padding:var(--sp-3) var(--sp-2); border-left:var(--rule-hair) solid var(--rule-muted); text-align:center; }
.pv-stat:first-child{ border-left:0; }
.pv-stat__n{ display:block; font-family:var(--font-condensed); font-weight:var(--wt-bold); font-size:1.45rem; line-height:1; }
.pv-stat__l{ display:block; margin-top:var(--sp-1); font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-muted); }
.pv-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-top:var(--rule-hair) solid var(--rule-muted); }
.pv-card__footlabel{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-muted); }
.pv-spark{ width:132px; height:28px; flex:0 0 auto; }
/* activity row inside a result card: divider + label + sparkline, aligned to card content */
.pv-act{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:var(--rule-hair) solid var(--rule-muted); }
.pv-spark polyline{ fill:none; stroke:var(--data-teal); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.pv-card__kicker{ display:block; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--sp-2); }
/* "The move" eyebrow sits above the action heading as a small context label */
.pv-rec__eyebrow{ display:block; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--text-faint); margin-bottom:var(--sp-1); }
/* Action-verdict heading ("Launch ASAP") — a real title (sans, larger, sentence case) that reads as the call-to-action, no border */
.pv-card__kicker--go{ margin-bottom:var(--sp-3); font-family:var(--font-grotesk); font-size:var(--fs-body); line-height:var(--lh-snug); letter-spacing:var(--tr-tight); text-transform:none; color:var(--text); font-weight:var(--wt-semi); }
/* Source chips inside the recommendation block get a little breathing room before the quote */
.pv-rec__chips{ margin-bottom:var(--sp-3); }
.pv-side{ align-self:start; }
.pv-cardstack{ position:relative; }
.pv-cardstack .pv-card{ position:relative; z-index:4; }
.pv-cardstack__under{ position:absolute; inset:0; background:var(--bg); border:var(--rule-bold) solid var(--rule); }
.pv-cardstack__under--1{ transform:translate(-9px,9px); z-index:3; }
.pv-cardstack__under--2{ transform:translate(-18px,18px); z-index:2; }
.pv-cardstack__under--3{ display:none; } 
.pv-scan{ margin:0 0 clamp(12px,1.6vw,18px) -18px; width:100%; box-sizing:border-box; border:var(--rule-bold) solid var(--rule); background:var(--bg); display:grid; grid-template-columns:repeat(3,1fr); }
.pv-scan__cell{ padding:var(--sp-3) var(--sp-2); border-left:var(--rule-hair) solid var(--rule-muted); text-align:center; }
.pv-scan__cell:first-child{ border-left:0; }
.pv-scan__n{ display:block; font-family:var(--font-condensed); font-weight:var(--wt-bold); font-size:1.3rem; line-height:1; }
.pv-scan__l{ display:block; margin-top:var(--sp-1); font-family:var(--font-mono); font-size:9px; letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-muted); }
.pv-scan.pv-scan--flush{ margin-left:0; width:100%; }
.pv-scanning.pv-scanning--flush{ margin-left:-18px; }
/* M04: the card below the scan line is full-width (no -18 scan lane), so let the
   niche tag reach the card's right edge instead of the inset lane edge. */
.pv-scanning.pv-scanning--full{ width:auto; margin-left:0; }  /* M04: front card sits at 0 (no lane shift) — align the scan label to it */
.pv-dash{ box-sizing:border-box; margin-left:-18px; width:100%; border:var(--rule-bold) solid var(--rule); background:var(--bg); }
/* M02: crop the competitor list mid-row + fade, so it reads as a scrollable feed
   with more rows below (the list keeps going). */
/* Hard brutalist crop: card edge cuts through the middle of a hook line to imply more rows below — no soft fade. */
.pv-dash{ max-height:483px; overflow:hidden; }
@media (max-width:720px){ .pv-dash{ max-height:none; } }
.pv-dash .pv-scan{ margin:0; border:0; border-bottom:var(--rule-bold) solid var(--rule); }
.pv-dash .pv-leader{ border:0; }
.pv-scanning{ box-sizing:border-box; width:100%; margin:0 0 var(--sp-2) -18px; display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-caption); letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-faint); }
.pv-niche{ margin-left:auto; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-muted); white-space:nowrap; }
.pv-niche__lbl{ margin-right:var(--sp-2); }
.pv-niche b{ color:var(--text); font-weight:var(--wt-semi); }
.pv-dots{ display:inline-flex; gap:3px; align-self:center; }
.pv-dots i{ width:3px; height:3px; background:var(--text-faint); display:block; animation:pv-blink 1.4s steps(1) infinite; }
.pv-dots i:nth-child(2){ animation-delay:.22s; }
.pv-dots i:nth-child(3){ animation-delay:.44s; }
@keyframes pv-blink{ 0%,55%{opacity:1} 75%,100%{opacity:.12} }
@media (prefers-reduced-motion: reduce){ .pv-dots i{ animation:none; } }
.pv-leader{ border:var(--rule-bold) solid var(--rule); background:var(--bg); }
.pv-leader__head{ display:flex; justify-content:space-between; padding:var(--sp-3) var(--sp-4); border-bottom:var(--rule-hair) solid var(--rule-muted); font-family:var(--font-mono); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:var(--tr-label-sm); color:var(--text-muted); }
.pv-leader__list{ list-style:none; margin:0; padding:0; }
.pv-leader__row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto 50px; gap:var(--sp-3); align-items:center; padding:var(--sp-3) var(--sp-4); border-top:var(--rule-hair) solid var(--rule-muted); }
.pv-leader__row:first-child{ border-top:0; }
.pv-leader__rank{ font-family:var(--font-condensed); font-weight:700; font-size:1.2rem; line-height:1; color:var(--text-faint); }
.pv-leader__hook{ font-family:var(--font-mono); font-style:italic; font-size:var(--fs-caption); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-leader__src{ font-family:var(--font-mono); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:var(--tr-label-sm); color:var(--text-muted); }
.pv-leader__delta{ font-family:var(--font-mono); font-size:var(--fs-caption); white-space:nowrap; }
.pv-leader__delta.up{ color:var(--data-teal); }
.pv-leader__delta.down{ color:var(--data-alert); }
.pv-spark2{ width:50px; height:16px; }
.pv-spark2 polyline{ fill:none; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.pv-spark2.up polyline{ stroke:var(--data-teal); }
.pv-spark2.down polyline{ stroke:var(--data-alert); }
.pv-leader__foot{ border-top:var(--rule-bold) solid var(--rule); padding:var(--sp-3) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); }
.pv-leader__frow{ display:flex; gap:var(--sp-3); align-items:baseline; }
.pv-leader__fk{ flex:0 0 84px; white-space:nowrap; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-faint); }
.pv-leader__fv{ font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--text); }
.pv-leader__fv .gap{ color:var(--data-teal); font-weight:var(--wt-semi); }
.pv-leader__fv.muted{ color:var(--text-muted); }
.pv-leader__frow--apply{ align-items:center; }
.pv-btn{ margin-left:auto; white-space:nowrap; font-family:var(--font-mono); font-weight:var(--wt-med); font-size:9px; letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-muted); background:transparent; border:var(--rule-hair) solid var(--rule-muted); padding:5px var(--sp-3); cursor:default; pointer-events:none; }
.pv-v1{ position:relative; }
.pv-result{ position:relative; margin:clamp(12px,1.6vw,18px) 0 34px; width:100%; }
.pv-result__card{ position:relative; z-index:4; box-sizing:border-box; width:100%; background:var(--bg); border:var(--rule-bold) solid var(--rule); padding:clamp(var(--sp-3),1.6vw,var(--sp-4)) clamp(var(--sp-4),2vw,var(--sp-5)); }
/* Top row: label (+meta) flow left and wrap; the button is pinned to the card's top-right
   corner at every width so it never overflows the fixed-width card. */
.pv-result__top{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3); padding-right:128px; }
.pv-result__card{ position:relative; }
.pv-result__card .pv-btn{ position:absolute; top:clamp(var(--sp-3),1.6vw,var(--sp-4)); right:clamp(var(--sp-4),2vw,var(--sp-5)); margin:0; }
.pv-result__k{ display:block; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--text-muted); white-space:nowrap; }
.pv-result__move{ margin-top:var(--sp-2); }
.pv-result__move .pv-leader__fk{ flex-basis:70px; }
.pv-result__move .pv-leader__fv{ white-space:nowrap; }
.pv-result__lead{ margin:0 0 var(--sp-4); font-family:var(--font-grotesk); font-weight:var(--wt-med); font-size:var(--fs-small); line-height:var(--lh-snug); color:var(--text); }
.pv-result__lead b{ color:var(--data-teal); font-weight:var(--wt-semi); }
.pv-result__sub{ margin:0; font-family:var(--font-mono); font-size:var(--fs-caption); line-height:var(--lh-text); color:var(--text-muted); }
/* verbatim customer voice reads in full ink, not muted */
.pv-result__sub--quote{ color:var(--text); }
.pv-result__sub b{ color:var(--data-teal); font-weight:var(--wt-med); }
.pv-result__orow + .pv-result__orow{ margin-top:var(--sp-2); }
.pv-segcard{ margin-left:-18px; width:100%; box-sizing:border-box; }
.pv-segcard--report{ margin-bottom:clamp(var(--sp-5),3vw,var(--sp-7)); }
.pv-sentiment{ display:flex; width:132px; height:8px; flex:0 0 auto; border:var(--rule-hair) solid var(--rule-muted); }
.pv-sentiment i{ display:block; height:100%; }
.pv-sentiment__pos{ background:var(--text); }
.pv-sentiment__neg{ background:var(--bg-inset); }
.pv-sat{ color:var(--data-alert); font-weight:var(--wt-bold); }
.pv-card__themes{ display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.pv-theme{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); }
.pv-theme--head span{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-faint); }
.pv-theme__name{ font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--text); }
.pv-theme__n{ font-family:var(--font-condensed); font-weight:var(--wt-bold); font-size:var(--fs-small); color:var(--text); font-variant-numeric:tabular-nums; }
.pv-theme__n--alert{ color:var(--data-alert); }
.pv-livesym{ display:inline-block; width:13px; height:13px; margin-right:7px; vertical-align:-2px; }
.pv-livesym--lg{ width:16px; height:16px; }
.pv-livesym i{ display:block; width:100%; height:100%; background-color:var(--ink-0); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; transition:transform .55s cubic-bezier(.5,0,.2,1), opacity .12s linear, background-color .25s ease; }
.pv-scanning .pv-livesym{ margin-right:0; }
.pv-cardstack .pv-leader{ position:relative; z-index:4; }
.pv-card__intel{ display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.pv-intel{ display:flex; align-items:baseline; gap:var(--sp-3); }
/* Stacked variant — label sits above its value instead of in a left column */
.pv-intel--stack{ flex-direction:column; align-items:stretch; gap:var(--sp-2); }
.pv-intel--stack .pv-intel__k{ flex:none; }
.pv-intel__k{ flex:0 0 96px; white-space:nowrap; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-faint); }
.pv-intel__v{ font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--text); }
/* Stacked value: the quote wraps freely (last two words kept together via  ), its metric on its own line below */
.pv-intel__v--stack{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pv-intel__quote{ text-wrap:pretty; }
/* hairline scale: border removed — at this height it would swallow the fill */
.pv-satbar{ display:flex; height:2.5px; margin-bottom:var(--sp-2); }
.pv-satbar i{ display:block; height:100%; }
.pv-satbar__sat{ background:transparent; }
.pv-satbar__wedge{ background:var(--data-teal); }
.pv-satbar__neg{ background:var(--bg-inset); }
.pv-satbar__cap{ display:flex; justify-content:space-between; margin-bottom:var(--sp-4); font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-muted); }
.pv-satbar__cap .teal{ color:var(--data-teal); }
.pv-intel__v .teal{ color:var(--data-teal); font-weight:var(--wt-semi); }
.pv-intel__v .alert{ color:var(--data-alert); font-weight:var(--wt-semi); }
/* Recommendation block — separated from the proof above by a hairline. */
.pv-rec{ margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:var(--rule-hair) solid var(--rule-muted); }
/* Flush variant — no divider rule, blocks just separated by spacing */
.pv-rec--flush{ padding-top:0; border-top:none; }
/* Signal accent — marks an emerging/new item with a teal top line. */
.pv-rec--signal{ border-top:2px solid var(--data-teal); }
.pv-result__card--signal{ border-top:2px solid var(--data-teal); }
/* Result cards carrying an intel block (pain / feedback cards): hug the quote to the title,
   then one clear gap before the intel rows — fixes uneven vertical rhythm. */
.pv-result__card:has(.pv-card__intel) .pv-result__lead{ margin-bottom:var(--sp-2); }
.pv-result__card:has(.pv-card__intel) .pv-result__sub{ margin-bottom:var(--sp-4); }
/* Themes variant: keep the lead + its sub tight as one group, then a clear gap before "More opportunities" */
.pv-result__card:has(.pv-card__themes) .pv-result__lead{ margin-bottom:var(--sp-2); }
.pv-result__card:has(.pv-card__themes) .pv-result__sub{ margin-bottom:20px; }
.pv-result__card:has(.pv-card__intel) .pv-card__intel{ margin-bottom:0; }
.pv-result__topR{ display:flex; align-items:center; gap:var(--sp-3); }
.pv-result__meta{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-muted); white-space:nowrap; }
.pv-new{ display:inline-block; vertical-align:middle; margin-right:var(--sp-2); padding:1px 6px; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label-sm); text-transform:uppercase; font-weight:var(--wt-bold); color:var(--bg); background:var(--text); }

/* M02 — competitor activity board: organised by pain/angle per competitor
   (scaling vs cooling), with the hook as a supporting detail — not a hook leaderboard. */
.pv-comp{ border-top:var(--rule-hair) solid var(--rule-muted); padding-bottom:var(--sp-2); }
.pv-comp:first-of-type{ border-top:0; }
.pv-comp__name{ padding:var(--sp-3) var(--sp-4) var(--sp-2); font-family:var(--font-condensed); font-weight:var(--wt-bold); font-size:var(--fs-small); letter-spacing:var(--tr-label-sm); text-transform:uppercase; }
.pv-comp__rows{ list-style:none; margin:0; padding:0; }
.pv-comp__row{ padding:var(--sp-1) var(--sp-4) var(--sp-2); }
.pv-comp__main{ display:flex; align-items:baseline; gap:var(--sp-2); }
.pv-comp__dir{ flex:0 0 auto; width:11px; font-family:var(--font-mono); font-size:var(--fs-caption); }
.pv-comp__dir.up{ color:var(--data-teal); }
.pv-comp__dir.down{ color:var(--data-alert); }
.pv-comp__pain{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--text); }
.pv-comp__vol{ flex:0 0 auto; white-space:nowrap; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-muted); }
.pv-comp__hook{ margin:4px 0 0 calc(11px + var(--sp-2)); font-family:var(--font-mono); font-style:italic; font-size:var(--fs-micro); color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* angle tag (system category) + human driver in plain language next to it */
.pv-comp__driver{ margin:4px 0 0 calc(11px + var(--sp-2)); display:flex; align-items:center; gap:var(--sp-2); font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--text-muted); }
.pv-comp__tag{ flex:0 0 auto; font-size:9px; line-height:1.5; letter-spacing:var(--tr-label-sm); text-transform:uppercase; color:var(--text-faint); border:var(--rule-hair) solid var(--rule-muted); padding:1px 5px; }