/* =====================================================================================================
   t-tracker.css (hand-written, 20 Oct 2026): template "tracker" ("the dashboard") of the wine-and-rose pages:
   brand health tracking, brand funnel & KPI snapshot, corporate reputation, customer satisfaction & NPS.
   Loads after wine-chrome.css and wine-base.css. Prefix tr-. Desktop 1440.
   Motion: hero dashboard plays on load (CSS keyframes, html.wm-on only) and t-tracker.js steps its tabs once;
   the pinned story (.tr-pin, wine-motion data-pin) lights data-from / data-hl / data-seg / data-upto per step.
   Without .wm-on (reduced motion, ?static=1, no JS) everything shows in its final state.
   ===================================================================================================== */

body.t-tracker { --tr-a: #d6335e; --tr-b: #8e1a47; --tr-c: #b8a9b1; --tr-plum: #33102c; --tr-gold: #f6c98e; --tr-soft: #f2a7bc; }

/* ---------- keyframes (used only under html.wm-on) ---------- */
@keyframes tr-rise { from { opacity: 0; transform: translate3d(0, 46px, 0) scale(.97); } }
@keyframes tr-fade { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes tr-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tr-grow { from { transform: scaleX(0); } }
@keyframes tr-growy { from { transform: scaleY(0); } }
@keyframes tr-arc { from { stroke-dashoffset: var(--a, 100); } to { stroke-dashoffset: 0; } }
@keyframes tr-pop { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.94); } }

/* =====================================================================================================
   1. HERO + DASHBOARD
   ===================================================================================================== */
body.t-tracker .tr-hero { padding: 172px 0 206px; }
.tr-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.tr-hero__txt { padding-top: 6px; }
.tr-hero .wn-h1 { font-size: 56px; line-height: 62px; letter-spacing: -1.2px; }
.tr-hero .wn-lead { font-size: 18px; line-height: 29px; }
.tr-hero__glow2 { position: absolute; z-index: -1; left: -12%; bottom: -30%; width: 680px; height: 680px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,179,199,.15), rgba(255,179,199,0)); }
.tr-hero__vis { position: relative; min-width: 0; }

.tr-dash { position: relative; padding: 16px 18px 14px; border-radius: 22px; background: #fff; color: var(--ink); font-family: var(--text);
  box-shadow: 0 44px 90px rgba(8, 1, 6, .55), 0 0 0 1px rgba(255,179,199,.28), 0 0 80px rgba(232,70,111,.18); }
.tr-dash__bar { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--wn-line); }
.tr-dash__ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--wn-wine); color: var(--mint); }
.tr-dash__ttl { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tr-dash__ttl b { font: 600 15px/20px var(--text); color: var(--ink); }
.tr-dash__ttl span { font: 400 12.5px/17px var(--text); color: var(--grey60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--wn-rose-10); flex: none; }
.tr-tab { height: 28px; padding: 0 11px; border-radius: 999px; font: 600 12.5px/1 var(--text); color: var(--grey70); white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.tr-tab:hover { color: var(--blue); }
.tr-tab[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(180,35,90,.3); }

/* KPI tiles */
.tr-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.tr-tile { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 11px 13px 10px; border-radius: 14px; background: var(--wn-page); border: 1px solid var(--wn-line); }
.tr-tile__l { font: 600 12px/15px var(--text); color: var(--grey70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-tile__v { font: 500 30px/34px var(--display); letter-spacing: -.6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-tile__d { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/16px var(--text); color: var(--grey60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-tile__d[data-dir="up"] { color: var(--blue); }
.tr-tile__d[data-dir="up"]::before { content: "\25B2"; font-size: 8px; }
.tr-tile__d[data-dir="down"] { color: var(--blue70); }
.tr-tile__d[data-dir="down"]::before { content: "\25BC"; font-size: 8px; }
.tr-tile__d[data-dir="note"] { font-weight: 400; }

/* panels */
.tr-pnls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.tr-pnl { position: relative; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--wn-line); background: #fff; }
.tr-pnl--a { grid-column: span 4; }
.tr-pnl--b { grid-column: span 2; }
.tr-pnl--c, .tr-pnl--d { grid-column: span 3; }
.tr-pnl__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tr-pnl__t { font: 600 13px/17px var(--text); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tr-pnl__m { flex: none; font: 400 11.5px/15px var(--text); color: var(--grey60); white-space: nowrap; }

/* keys */
.tr-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; font: 500 11.5px/15px var(--text); color: var(--grey70); }
.tr-keys span { display: inline-flex; align-items: center; gap: 6px; }
.tr-key { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--tr-a); }
.tr-key--a { background: var(--tr-a); }
.tr-key--b { background: var(--tr-b); }
.tr-key--c, .tr-key--p { background: var(--tr-c); }
.tr-key--d { background: var(--tr-plum); }
.tr-key--r { background: var(--tr-a); }
.tr-key--g { background: var(--tr-plum); }
.tr-key--o { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tr-b); }
.tr-key--sig { width: 8px; height: 8px; border-radius: 50%; background: var(--wn-bright); }
.tr-keys--fn { margin-bottom: 8px; }
.tr-keys--sp { margin: 8px 0 0; }

/* lines */
.tr-lines { display: block; width: 100%; height: auto; overflow: visible; }
.tr-grid { stroke: #efe6ea; stroke-width: 1; }
.tr-ax { font: 500 11.5px var(--text); fill: #6e6269; }
.tr-cur { transition: transform .55s var(--wn-ease-out); }
.tr-cur line { stroke: var(--tr-a); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .55; }
.tr-line { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tr-line--a { stroke: var(--tr-a); }
.tr-line--b { stroke: var(--tr-b); }
.tr-line--c { stroke: var(--tr-c); stroke-width: 2.2; }
.tr-dot { stroke: #fff; stroke-width: 2; transition: transform .55s var(--wn-ease-out); }
.tr-dot--a { fill: var(--tr-a); }
.tr-dot--b { fill: var(--tr-b); }
.tr-dot--c { fill: var(--tr-c); }

/* gauge */
.tr-gw { position: relative; width: 100%; max-width: 184px; margin: 2px auto 0; }
.tr-gauge { display: block; width: 100%; height: auto; overflow: visible; }
.tr-gauge__track { fill: none; stroke: #f3e6eb; stroke-width: 16; stroke-linecap: round; }
.tr-arc { fill: none; stroke-width: 16; stroke-linecap: round; transition: stroke-dasharray .6s var(--wn-ease-out); }
.tr-gw__v { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 500 30px/1 var(--display); letter-spacing: -.6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-gw__lo, .tr-gw__hi { position: absolute; bottom: -17px; font: 500 11px/14px var(--text); color: var(--grey60); }
.tr-gw__lo { left: 2px; }
.tr-gw__hi { right: 0; }
.tr-gw__f { margin-top: 22px; text-align: center; font: 400 11.5px/15px var(--text); color: var(--grey70); }

/* centred funnel bars */
.tr-fns { display: flex; flex-direction: column; gap: 6px; }
.tr-fn { display: grid; grid-template-columns: 96px minmax(0, 1fr) 38px; gap: 8px; align-items: center; }
.tr-fn__l { font: 500 12px/15px var(--text); color: var(--grey70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-fn__t { position: relative; height: 16px; }
.tr-fn__t i { position: absolute; inset: 0; border-radius: 5px; transform-origin: 50% 50%; transform: scaleX(var(--v, .5));
  transition: transform .6s var(--wn-ease-out); background: linear-gradient(90deg, #e8466f, #b4235a); }
.tr-fn b { font: 600 12.5px/1 var(--text); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
/* you against one rival: your bar, a thin rival bar under it, both from the left and sized by width (not scaled, so the
   thin bar keeps its full height and near-equal values still read as two bars), and both numbers */
.tr-fns--cmp { gap: 7px; }
.tr-fn--cmp { grid-template-columns: 84px minmax(0, 1fr) 34px 30px; gap: 6px; }
.tr-fn--cmp .tr-fn__t { height: 15px; }
.tr-fn--cmp .tr-fn__t i, .tr-fn--cmp .tr-fn__t s { position: absolute; left: 0; right: auto; width: calc(var(--v, .5) * 100%); transform: none;
  transform-origin: 0 50%; transition: width .6s var(--wn-ease-out); }
.tr-fn--cmp .tr-fn__t i { top: 0; bottom: auto; height: 9px; border-radius: 3px 5px 5px 3px; }
.tr-fn--cmp .tr-fn__t s { top: 11px; bottom: auto; height: 4px; border-radius: 2px; background: var(--tr-plum); text-decoration: none; }
.tr-fn--cmp em { font: 500 11.5px/1 var(--text); font-style: normal; text-align: right; color: var(--tr-plum); opacity: .78; font-variant-numeric: tabular-nums; }
.tr-fn--hd { margin-bottom: -3px; }
.tr-fn--hd b, .tr-fn--hd em { font: 600 10.5px/12px var(--text); color: var(--grey60); opacity: 1; }
.tr-key--thin { height: 4px; border-radius: 2px; }
.tr-fn__drop { display: flex; align-items: center; gap: 4px; margin: -1px 0 -1px 104px; font: 600 11px/14px var(--text); color: var(--blue); }
.tr-fn__drop svg { transform: rotate(90deg); }
.tr-pnl--a .tr-fn { grid-template-columns: 116px minmax(0, 1fr) 40px; }
.tr-pnl--a .tr-fn__drop { margin-left: 124px; }
.tr-pnl--a .tr-fn__t { height: 18px; }

/* reasons / ranking bars */
.tr-hbs { display: flex; flex-direction: column; gap: 7px; }
.tr-hb { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 34px; gap: 8px; align-items: center; }
.tr-hb span { font: 500 12px/15px var(--text); color: var(--grey70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-hb i { display: block; height: 9px; border-radius: 999px; background: var(--wn-rose-10); overflow: hidden; }
.tr-hb u { display: block; height: 100%; border-radius: inherit; background: var(--tr-soft); transform-origin: 0 50%; transform: scaleX(var(--v, .5)); }
.tr-hb.is-hi u { background: linear-gradient(90deg, #d6335e, #e8466f); }
.tr-hb.is-hi span { color: var(--ink); font-weight: 600; }
.tr-hb b { font: 600 12px/1 var(--text); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-pnl--a .tr-hb { grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 36px; }

/* paired bars */
.tr-pas { display: flex; flex-direction: column; gap: 6px; }
.tr-pa { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; align-items: center; }
.tr-pa__l { display: flex; align-items: center; gap: 6px; font: 500 12px/15px var(--text); color: var(--grey70); }
.tr-pa__b { display: flex; flex-direction: column; gap: 3px; }
.tr-pa__b > span { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 6px; align-items: center; }
.tr-pa__b i { display: block; height: 7px; border-radius: 999px; background: var(--tr-a); transform-origin: 0 50%; transform: scaleX(var(--v, .5));
  transition: opacity .35s ease; }
.tr-pa__b span[data-k="1"] i { background: var(--tr-plum); }
.tr-pa__b b { font: 600 11.5px/1 var(--text); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-dash[data-sel="0"] .tr-pa__b span[data-k="1"] i, .tr-dash[data-sel="1"] .tr-pa__b span[data-k="0"] i { opacity: .3; }
.tr-sig { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--wn-bright); }

/* scatter */
.tr-sc { position: relative; padding: 2px 6px 20px 22px; }
.tr-sc__box { position: relative; height: 104px; border-left: 1px solid #e3d6dc; border-bottom: 1px solid #e3d6dc;
  background-image: linear-gradient(#f4ecef 1px, transparent 1px); background-size: 100% 26px; background-position: 0 -1px; }
.tr-sc__pt { position: absolute; display: flex; align-items: center; gap: 4px; transform: translate(-6px, 50%); }
.tr-sc__pt i { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--tr-soft); box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e8dfe3;
  transition: transform .35s var(--wn-ease-out), background-color .35s ease; }
.tr-sc__pt em { font: 600 11px/1 var(--text); font-style: normal; color: var(--grey70); }
.tr-sc__x { position: absolute; left: 22px; bottom: 0; display: inline-flex; align-items: center; gap: 4px; font: 500 11px/14px var(--text); color: var(--grey60); }
.tr-sc__y { position: absolute; left: 0; bottom: 20px; writing-mode: vertical-rl; transform: rotate(180deg); font: 500 11px/14px var(--text); color: var(--grey60); white-space: nowrap; }
.tr-dash[data-sel="0"] .tr-sc__pt[data-k="0"] i, .tr-dash[data-sel="1"] .tr-sc__pt[data-k="1"] i, .tr-dash[data-sel="2"] .tr-sc__pt[data-k="2"] i,
.tr-dash[data-sel="3"] .tr-sc__pt[data-k="3"] i, .tr-dash[data-sel="4"] .tr-sc__pt[data-k="4"] i { background: var(--tr-a); transform: scale(1.3); }
.tr-dash[data-sel="0"] .tr-sc__pt[data-k="0"] em, .tr-dash[data-sel="1"] .tr-sc__pt[data-k="1"] em, .tr-dash[data-sel="2"] .tr-sc__pt[data-k="2"] em,
.tr-dash[data-sel="3"] .tr-sc__pt[data-k="3"] em, .tr-dash[data-sel="4"] .tr-sc__pt[data-k="4"] em { color: var(--ink); }

/* NPS 0-10 spread */
.tr-sp { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 5px; align-items: end; height: 92px; }
.tr-sp__c { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.tr-sp__c i { display: block; width: 100%; height: calc(var(--h) * 70px); border-radius: 4px 4px 2px 2px; transform-origin: 50% 100%; }
.tr-sp__c--d i { background: var(--tr-plum); }
.tr-sp__c--p i { background: #d9c6ce; }
.tr-sp__c--r i { background: var(--tr-a); }
.tr-sp__c span { font: 500 10.5px/1 var(--text); color: var(--grey60); }
.tr-sp__split { display: flex; gap: 2px; height: 22px; margin-top: 10px; border-radius: 7px; overflow: hidden; }
.tr-sp__seg { flex: var(--v) 1 0%; min-width: 0; display: flex; align-items: center; justify-content: center; transition: flex-grow .6s var(--wn-ease-out); }
.tr-sp__seg b { font: 600 11px/1 var(--text); color: #fff; font-variant-numeric: tabular-nums; }
.tr-sp__seg--d { background: var(--tr-plum); }
.tr-sp__seg--p { background: #d9c6ce; }
.tr-sp__seg--p b { color: var(--ink); }
.tr-sp__seg--r { background: var(--blue); }

/* foot chips */
.tr-dash__foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tr-dash__foot li { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--wn-rose-10);
  font: 600 11.5px/1 var(--text); color: var(--blue70); white-space: nowrap; }

/* ---------- per-page arrangements (tracker.py _dash, dash 'layout'); brand health keeps the default above ---------- */
/* narrow panels: the label goes on its own line above the bar, the meta under the title */
.tr-dash--nps .tr-pnl--c .tr-hb, .tr-dash--nps .tr-pnl--d .tr-hb, .tr-dash--funnel .tr-pnl--d .tr-hb {
  grid-template-columns: minmax(0, 1fr) 32px; column-gap: 8px; row-gap: 3px; }
.tr-dash--nps .tr-pnl--c .tr-hb span, .tr-dash--nps .tr-pnl--d .tr-hb span, .tr-dash--funnel .tr-pnl--d .tr-hb span { grid-column: 1 / -1; }
.tr-dash--nps .tr-pnl--b .tr-pnl__h, .tr-dash--nps .tr-pnl--c .tr-pnl__h, .tr-dash--nps .tr-pnl--d .tr-pnl__h,
.tr-dash--funnel .tr-pnl--b .tr-pnl__h, .tr-dash--funnel .tr-pnl--d .tr-pnl__h, .tr-dash--rep .tr-pnl--b .tr-pnl__h {
  flex-wrap: wrap; row-gap: 0; }

/* funnel: one large funnel leads (left, two rows), a small gauge and the reasons beside it, the scatter across the foot */
.tr-dash--funnel .tr-pnls { margin-top: 14px; grid-template-areas: "a a a a b b" "a a a a d d" "c c c c c c"; }
.tr-dash--funnel .tr-pnl--a { grid-area: a; display: flex; flex-direction: column; }
.tr-dash--funnel .tr-pnl--b { grid-area: b; }
.tr-dash--funnel .tr-pnl--c { grid-area: c; }
.tr-dash--funnel .tr-pnl--d { grid-area: d; }
.tr-dash--funnel .tr-gw { max-width: 128px; }
.tr-dash--funnel .tr-gw__v { font-size: 23px; bottom: 2px; }
.tr-dash--funnel .tr-gw__f { margin-top: 18px; }
.tr-dash--funnel .tr-sc__box { height: 98px; background-size: 100% 24.5px; }
.tr-bf { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.tr-bf__rows { display: flex; flex-direction: column; gap: 3px; }
.tr-bf__r { display: grid; grid-template-columns: 118px minmax(0, 1fr) 46px; gap: 10px; align-items: center; }
.tr-bf__l { font: 500 12.5px/16px var(--text); color: var(--grey70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-bf__t { position: relative; height: 40px; }
.tr-bf__t i { position: absolute; inset: 0; transform-origin: 50% 50%; opacity: calc(1 - var(--i, 0) * .09);
  background: linear-gradient(90deg, #b4235a, #8e1a47);
  clip-path: polygon(calc(50% - var(--v, .5) * 50%) 0, calc(50% + var(--v, .5) * 50%) 0, calc(50% + var(--n, .5) * 50%) 100%, calc(50% - var(--n, .5) * 50%) 100%);
  transition: clip-path .6s var(--wn-ease-out), opacity .4s ease; }
.tr-bf__r[data-dir="drop"] .tr-bf__t i { opacity: 1; background: linear-gradient(90deg, #ff8fab, #e8466f 40%, #d6335e); }
.tr-bf__r[data-dir="drop"] .tr-bf__l { color: var(--ink); font-weight: 600; }
.tr-bf__r b { font: 500 17px/1 var(--display); letter-spacing: -.2px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-bf__drop { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--wn-rose-10);
  border: 1px solid var(--wn-rose-20); font: 500 12.5px/16px var(--text); color: var(--grey70); white-space: nowrap; }
.tr-bf__drop svg { flex: none; color: var(--blue); transform: rotate(90deg); }
.tr-bf__dk { font: 600 11px/14px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.tr-bf__drop b { font: 500 20px/1 var(--display); letter-spacing: -.3px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-bf__drop em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }

/* NPS: the KPIs as one slim line, the 0 to 10 spread and the split lead across the full width, three small panels below */
.tr-tiles--strip { display: flex; gap: 8px; margin-top: 12px; }
.tr-tiles--strip .tr-tile { flex: 1 1 auto; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; }
.tr-tiles--strip .tr-tile__v { font-size: 20px; line-height: 24px; letter-spacing: -.3px; }
.tr-dash--nps .tr-pnls { grid-template-areas: "a a a a a a" "b b c c d d"; }
.tr-dash--nps .tr-pnl--a { grid-area: a; }
.tr-dash--nps .tr-pnl--b { grid-area: b; }
.tr-dash--nps .tr-pnl--c { grid-area: c; }
.tr-dash--nps .tr-pnl--d { grid-area: d; }
.tr-dash--nps .tr-sp { height: 110px; gap: 8px; }
.tr-dash--nps .tr-sp__c i { height: calc(var(--h) * 90px); border-radius: 5px 5px 2px 2px; }
.tr-dash--nps .tr-sp__c span { font-size: 11.5px; }
.tr-dash--nps .tr-sp__split { height: 30px; margin-top: 10px; border-radius: 9px; }
.tr-dash--nps .tr-sp__seg b { font-size: 13px; }
.tr-dash--nps .tr-pnl--c .tr-hbs, .tr-dash--nps .tr-pnl--d .tr-hbs { gap: 5px; }
.tr-dash--nps .tr-pnl--b { display: flex; flex-direction: column; }
.tr-dash--nps .tr-gw { max-width: 156px; margin-top: auto; }
.tr-dash--nps .tr-gw__f { margin-bottom: auto; }

/* reputation: the audience switch and the paired bars lead (bars run out from a centre column: the first audience to
   the left, the second to the right, as on the switch); the KPIs stack beside them over a small gauge */
.tr-dash--rep .tr-pnls { margin-top: 14px; grid-template-areas: "a a a a t t" "a a a a b b" "c c c d d d"; }
.tr-dash--rep .tr-pnl--a { grid-area: a; display: flex; flex-direction: column; }
.tr-dash--rep .tr-pnl--b { grid-area: b; }
.tr-dash--rep .tr-pnl--c { grid-area: c; }
.tr-dash--rep .tr-pnl--d { grid-area: d; }
.tr-dash--rep .tr-gw { max-width: 136px; }
.tr-dash--rep .tr-gw__v { font-size: 24px; bottom: 2px; }
.tr-dash--rep .tr-gw__f { margin-top: 18px; }
.tr-tiles--stack { grid-area: t; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; }
.tr-tiles--stack .tr-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "d v"; column-gap: 8px; row-gap: 1px;
  align-items: center; padding: 8px 12px; border-radius: 12px; }
.tr-tiles--stack .tr-tile__l { grid-area: l; }
.tr-tiles--stack .tr-tile__d { grid-area: d; font-size: 11px; line-height: 14px; }
.tr-tiles--stack .tr-tile__v { grid-area: v; font-size: 23px; line-height: 26px; }
.tr-pa__top { display: flex; justify-content: center; margin: 2px 0 8px; }
.tr-sw { padding: 4px; }
.tr-sw .tr-tab { height: 32px; padding: 0 22px; font-size: 13.5px; }
.tr-keys--fly { justify-content: center; margin-bottom: 4px; }
.tr-pas--fly { flex: 1; justify-content: space-around; gap: 8px; }
.tr-pas--fly .tr-pa { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); gap: 8px; }
.tr-pas--fly .tr-pa__b { display: contents; }
.tr-pas--fly .tr-pa__l { grid-column: 2; grid-row: 1; justify-content: center; text-align: center; color: var(--ink); white-space: nowrap; }
.tr-pas--fly .tr-pa__b > span { grid-row: 1; }
.tr-pas--fly .tr-pa__b > span[data-k="0"] { grid-column: 1; grid-template-columns: 30px minmax(0, 1fr); }
.tr-pas--fly .tr-pa__b > span[data-k="0"] b { order: -1; text-align: left; }
.tr-pas--fly .tr-pa__b > span[data-k="0"] i { transform-origin: 100% 50%; }
.tr-pas--fly .tr-pa__b > span[data-k="1"] { grid-column: 3; }
.tr-pas--fly .tr-pa__b i { height: 12px; }
.tr-pas--fly .tr-pa__b b { font-size: 12.5px; }
.tr-dash--rep[data-sel="0"] .tr-pa__b span[data-k="1"] i, .tr-dash--rep[data-sel="1"] .tr-pa__b span[data-k="0"] i { opacity: .4; }

/* Ask the study answer */
.tr-ask-wrap { position: absolute; z-index: 3; right: -26px; top: calc(100% - 4px); width: 336px; }
.tr-ask { padding: 16px 18px 14px; border-radius: 18px; background: rgba(26, 6, 22, .94); border: 1px solid rgba(255,179,199,.34);
  box-shadow: 0 24px 60px rgba(8, 1, 6, .6), 0 0 40px rgba(232,70,111,.2); color: #fff; }
.tr-ask__k { display: flex; align-items: center; gap: 8px; font: 600 12px/16px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--mint); }
.tr-ask__q { margin-top: 10px; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: rgba(255,179,199,.12); font: 600 14px/20px var(--text); color: #fff; }
.tr-ask__a { margin-top: 8px; font: 400 14px/21px var(--text); color: rgba(255,255,255,.88); }
.tr-ask__ok { display: flex; align-items: center; gap: 6px; margin-top: 10px; font: 500 12px/16px var(--text); color: var(--mint); }

/* hero load motion */
html.wm-on .tr-dash { animation: tr-rise 1.1s var(--wn-ease-out) .1s backwards; }
html.wm-on .tr-tile { animation: tr-fade .7s var(--wn-ease-out) backwards; animation-delay: calc(.4s + var(--i, 0) * .08s); }
html.wm-on .tr-pnl { animation: tr-fade .8s var(--wn-ease-out) backwards; }
html.wm-on .tr-pnl--a { animation-delay: .55s; }
html.wm-on .tr-pnl--b { animation-delay: .65s; }
html.wm-on .tr-pnl--c { animation-delay: .75s; }
html.wm-on .tr-pnl--d { animation-delay: .85s; }
html.wm-on .tr-line { stroke-dasharray: 1 1; animation: tr-draw 1.6s var(--wn-ease) backwards; animation-delay: calc(.7s + var(--i, 0) * .15s); }
html.wm-on .tr-fn__t i, html.wm-on .tr-fn__t s { animation: tr-grow 1s var(--wn-ease-out) backwards; animation-delay: calc(.8s + var(--i, 0) * .08s); }
html.wm-on .tr-fn__t s { animation-delay: calc(.95s + var(--i, 0) * .08s); }
html.wm-on .tr-bf__t i { animation: tr-grow 1s var(--wn-ease-out) backwards; animation-delay: calc(.7s + var(--i, 0) * .1s); }
html.wm-on .tr-bf__drop { animation: tr-pop .7s var(--wn-ease-out) 1.4s backwards; }
html.wm-on .tr-hb u { animation: tr-grow 1s var(--wn-ease-out) backwards; animation-delay: calc(1s + var(--i, 0) * .08s); }
html.wm-on .tr-pa__b i { animation: tr-grow 1s var(--wn-ease-out) backwards; animation-delay: calc(.8s + var(--i, 0) * .07s); }
html.wm-on .tr-sp__c i { animation: tr-growy .9s var(--wn-ease-out) backwards; animation-delay: calc(.7s + var(--i, 0) * .04s); }
html.wm-on .tr-arc { animation: tr-arc 1.4s var(--wn-ease-out) .7s backwards; }
html.wm-on .tr-sc__pt { animation: tr-pop .6s var(--wn-ease-out) backwards; animation-delay: calc(1s + var(--i, 0) * .08s); }
html.wm-on .tr-ask { animation: tr-pop .8s var(--wn-ease-out) 2.3s backwards; }

/* =====================================================================================================
   2. QUESTIONS STRIP
   ===================================================================================================== */
.tr-q { padding: 30px 0 32px; background: #fff; border-bottom: 1px solid var(--wn-line); }
.tr-q__k { margin-bottom: 16px; font: 600 13px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.tr-q__m .wn-marquee__track { gap: 14px; }
.tr-q__i { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 24px 0 18px; border-radius: 999px; background: var(--wn-page);
  border: 1px solid var(--wn-line); font: 500 19px/1 var(--display); letter-spacing: -.2px; color: var(--ink); white-space: nowrap; }
.tr-q__i svg { color: var(--purple); }

/* =====================================================================================================
   3. PROBLEM
   ===================================================================================================== */
.tr-prob__in { align-items: center; }
.tr-prob .wn-head { margin-bottom: 28px; }
.tr-prob__vis { min-width: 0; }
.tr-pvs { display: flex; flex-direction: column; gap: 18px; }
.tr-pvs--row { flex-direction: row; align-items: stretch; }
.tr-pv { position: relative; margin: 0; padding: 22px 24px 18px; border-radius: 22px; background: #fff; border: 1px solid var(--wn-line); box-shadow: var(--wn-shadow); }
.tr-pv figcaption, .tr-pv__lk { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.tr-pv figcaption b, .tr-pv__lk b { font: 600 17px/24px var(--text); color: var(--ink); }
.tr-pv figcaption span, .tr-pv__lk span { font: 400 15px/22px var(--text); color: var(--grey70); }
.tr-pv > svg { display: block; width: 100%; height: auto; overflow: visible; }
.tr-pv--warn { border-color: var(--wn-rose-20); }
.tr-pv__grid { stroke: #efe6ea; stroke-width: 1; fill: none; }
.tr-pv__l { fill: none; stroke: var(--tr-a); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* the problem lines draw once, in full, when the drawing is revealed */
html.wm-on .tr-prob__vis .tr-pv__l { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--wn-ease) .45s; }
html.wm-on .tr-prob__vis.is-in .tr-pv__l { stroke-dashoffset: 0; }
html.wm-on .tr-prob__vis .tr-pv__l--mute { transition-delay: .2s; }
.tr-pv__l--warn { stroke: var(--tr-b); }
.tr-pv__l--mute { stroke: #cdbec5; stroke-width: 2.4; }
.tr-pv__l--gold { stroke: var(--tr-plum); }
.tr-pv__cut { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 5 5; }
.tr-pv__tag { font: 600 12.5px var(--text); fill: var(--blue); }
.tr-pv__ax { font: 500 11.5px var(--text); fill: #6e6269; }
.tr-pv__pt { fill: var(--tr-a); stroke: #fff; stroke-width: 2; }
.tr-pv__pt--hi { fill: var(--tr-b); }
.tr-pv__v { font: 600 13px var(--text); fill: var(--ink); }
.tr-pv__v--hi { fill: var(--tr-b); }
.tr-pv__why { position: absolute; right: 9%; top: 47%; padding: 8px 14px; border-radius: 14px 14px 14px 4px; background: var(--wn-wine); color: #fff;
  font: 500 16px/20px var(--display); box-shadow: 0 10px 24px rgba(20,4,15,.25); }
.tr-pv--chips ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tr-pv--chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--wn-rose-10); color: var(--blue70); font: 600 14px/18px var(--text); }
.tr-keys--pv { gap: 6px 18px; margin: 4px 4px 0; font-size: 14px; line-height: 20px; }
.tr-prob .tr-key--g { background: var(--tr-plum); }
/* vertical bars (funnel problem) */
.tr-pv--one { flex: 0 0 34%; }
.tr-pv--full { flex: 1; min-width: 0; }
.tr-vbars { display: flex; align-items: flex-end; gap: 10px; height: 214px; }
.tr-vbars > span { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.tr-vbars i { display: block; height: 160px; border-radius: 10px 10px 4px 4px; background: var(--tr-soft); transform-origin: 50% 100%; transform: scaleY(var(--v, .5)); }
.tr-vbars .is-drop i, .tr-vbars--one i { background: linear-gradient(180deg, #e8466f, #b4235a); }
.tr-vbars--one > span { max-width: 96px; margin: 0 auto; }
.tr-vbars b { position: absolute; left: 0; right: 0; bottom: calc(var(--v, .5) * 160px + 38px); text-align: center; font: 600 15px/18px var(--text); color: var(--ink);
  transition: opacity .6s ease .5s; }
.tr-vbars em { margin-top: 10px; height: 20px; text-align: center; font: 500 12px/20px var(--text); font-style: normal; color: var(--grey70); white-space: nowrap; }
html.wm-on .tr-vbars:not(.is-in) b { opacity: 0; }
.tr-pv__drop { display: flex; align-items: center; gap: 6px; margin-top: 14px; font: 600 14px/19px var(--text); color: var(--blue); }
.tr-pv__drop svg { flex: none; transform: rotate(90deg); }

/* =====================================================================================================
   4. HOW IT RUNS: process rail + real numbers
   ===================================================================================================== */
.tr-proc { position: relative; --gap: 28px; }
.tr-proc__rail { position: absolute; top: 31px; left: 32px; right: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) - 32px); height: 2px;
  border-radius: 2px; background: var(--wn-line); overflow: hidden; }
.tr-proc__rail i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d6335e, #e8466f 60%, #ffb3c7); transform-origin: 0 50%; }
html.wm-on .tr-proc__rail i[data-scrub] { transform: scaleX(var(--wm-p)); }
.tr-proc__list { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.tr-proc__s { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tr-proc__n { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--wn-rose-20);
  box-shadow: 0 0 0 8px #fff; font: 500 20px/1 var(--display); color: var(--blue); }
.tr-proc__s:first-child .tr-proc__n { background: var(--blue); border-color: var(--blue); color: #fff; }
.tr-proc__s h3 { margin-top: 10px; font: 600 20px/27px var(--text); letter-spacing: -.2px; color: var(--ink); }
.tr-proc__s p { font: 400 16px/25px var(--text); color: var(--grey70); }
.tr-how__stats { margin-top: 80px; }

/* =====================================================================================================
   5. PINNED EXAMPLE STORY
   ===================================================================================================== */
.tr-pin { position: relative; background: #1a0616; color: #fff; overflow: clip; }
.tr-pin__sticky { position: relative; isolation: isolate; background: var(--wn-hero-bg); }
.tr-pin__glow { position: absolute; z-index: -1; left: -14%; top: 22%; width: 780px; height: 780px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232,70,111,.3), rgba(232,70,111,0)); }
html.wm-on .tr-pin__glow { transform: translate3d(calc(var(--wm-pin, 0) * 820px), 0, 0); }
.tr-pin__in { position: relative; display: flex; flex-direction: column; padding-top: 112px; padding-bottom: 112px; }
html.wm-on .tr-pin__in { height: 100%; padding-top: 150px; padding-bottom: 34px; }
.tr-pin__head { display: flex; flex-direction: column; gap: 10px; max-width: 1040px; margin-bottom: 26px; }
.tr-pin__h { font: 500 34px/42px var(--display); letter-spacing: -.6px; color: #fff; }
.tr-pin__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
html:not(.wm-on) .tr-pin__grid { align-items: start; }
.tr-pin__canvas { min-width: 0; }
.tr-pin__side { min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.tr-pin__bar { margin-top: 2px; }

/* the step rail */
.tr-rail { display: flex; margin: 0; padding: 0; list-style: none; }
.tr-rail li { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; font: 600 13px/16px var(--text); color: rgba(255,255,255,.8); }
.tr-rail li::before { content: ""; position: absolute; left: 34px; right: 4px; top: 14px; height: 2px; border-radius: 2px; background: rgba(255,179,199,.22);
  transition: background-color .5s ease; }
.tr-rail li:last-child::before { display: none; }
.tr-rail i { position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font: 600 13px/1 var(--text); font-style: normal;
  color: var(--mint); background: #1a0616; border: 1.5px solid rgba(255,179,199,.45); transition: background-color .4s ease, color .4s ease, border-color .4s ease, transform .4s var(--wn-ease-out); }
.tr-rail span { transition: color .4s ease; }
html.wm-on .tr-pin[data-active="0"] .tr-rail li:nth-child(1) i, html.wm-on .tr-pin[data-active="1"] .tr-rail li:nth-child(2) i,
html.wm-on .tr-pin[data-active="2"] .tr-rail li:nth-child(3) i, html.wm-on .tr-pin[data-active="3"] .tr-rail li:nth-child(4) i {
  background: var(--purple); border-color: var(--purple); color: #fff; transform: scale(1.14); box-shadow: 0 0 22px rgba(232,70,111,.55); }
html.wm-on .tr-pin[data-active="0"] .tr-rail li:nth-child(1) span, html.wm-on .tr-pin[data-active="1"] .tr-rail li:nth-child(2) span,
html.wm-on .tr-pin[data-active="2"] .tr-rail li:nth-child(3) span, html.wm-on .tr-pin[data-active="3"] .tr-rail li:nth-child(4) span { color: #fff; }
html.wm-on .tr-pin[data-active="1"] .tr-rail li:nth-child(-n+1) i, html.wm-on .tr-pin[data-active="2"] .tr-rail li:nth-child(-n+2) i,
html.wm-on .tr-pin[data-active="3"] .tr-rail li:nth-child(-n+3) i { background: rgba(255,179,199,.22); border-color: var(--mint); color: #fff; }
html.wm-on .tr-pin[data-active="1"] .tr-rail li:nth-child(-n+1)::before, html.wm-on .tr-pin[data-active="2"] .tr-rail li:nth-child(-n+2)::before,
html.wm-on .tr-pin[data-active="3"] .tr-rail li:nth-child(-n+3)::before { background: var(--mint); }

/* step text */
.tr-step { display: flex; flex-direction: column; gap: 14px; }
.tr-step__k { font: 600 13px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.tr-step__h { font: 500 32px/40px var(--display); letter-spacing: -.5px; color: #fff; }
.tr-step__p { font: 400 18px/29px var(--text); color: rgba(255,255,255,.88); }
.tr-step__chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: rgba(255,179,199,.12); border: 1px solid rgba(255,179,199,.36); font: 600 14px/18px var(--text); color: #fff; }
.tr-step__chip svg { color: var(--mint); }
html:not(.wm-on) .tr-step + .tr-step { margin-top: 36px; padding-top: 36px; border-top: 1px solid rgba(255,179,199,.2); }

/* step-driven states: data-from (appears at step k), data-seg (draws at step k), data-upto (fades after step k), data-hl (lit at step k) */
html.wm-on .tr-pin [data-from] { transition: opacity .6s var(--wn-ease), transform .8s var(--wn-ease-out), background-color .4s ease, box-shadow .4s ease; }
html.wm-on .tr-pin [data-from="1"], html.wm-on .tr-pin [data-from="2"], html.wm-on .tr-pin [data-from="3"] { opacity: 0; transform: translate3d(0, 14px, 0); }
html.wm-on .tr-pin[data-active="1"] [data-from="1"],
html.wm-on .tr-pin[data-active="2"] [data-from="1"], html.wm-on .tr-pin[data-active="2"] [data-from="2"],
html.wm-on .tr-pin[data-active="3"] [data-from="1"], html.wm-on .tr-pin[data-active="3"] [data-from="2"], html.wm-on .tr-pin[data-active="3"] [data-from="3"] {
  opacity: 1; transform: none; }
html.wm-on .tr-pin [data-seg] { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--wn-ease); }
html.wm-on .tr-pin[data-active="1"] [data-seg="1"],
html.wm-on .tr-pin[data-active="2"] [data-seg="1"], html.wm-on .tr-pin[data-active="2"] [data-seg="2"],
html.wm-on .tr-pin[data-active="3"] [data-seg="1"], html.wm-on .tr-pin[data-active="3"] [data-seg="2"], html.wm-on .tr-pin[data-active="3"] [data-seg="3"] {
  stroke-dashoffset: 0; }
html.wm-on .tr-pin [data-upto] { transition: opacity .5s ease; }
html.wm-on .tr-pin[data-active="3"] [data-upto="2"] { opacity: .14; }
.tr-pin [data-hl] { transition: background-color .4s ease, box-shadow .4s ease, opacity .6s var(--wn-ease), transform .8s var(--wn-ease-out); }
html.wm-on .tr-pin[data-active="0"] [data-hl~="0"], html.wm-on .tr-pin[data-active="1"] [data-hl~="1"],
html.wm-on .tr-pin[data-active="2"] [data-hl~="2"], html.wm-on .tr-pin[data-active="3"] [data-hl~="3"] {
  background-image: linear-gradient(rgba(255,179,199,.13), rgba(255,179,199,.13));
  box-shadow: 0 0 0 1px rgba(255,179,199,.6), 0 0 36px rgba(232,70,111,.34); }

/* canvas frame */
.tr-cv { position: relative; padding: 22px 24px; border-radius: 26px; background: var(--wn-glass-bg); border: 1px solid rgba(255,179,199,.24);
  box-shadow: 0 0 0 1px rgba(232,70,111,.1), 0 30px 70px rgba(8, 1, 6, .5); color: #fff; }
.tr-cv__keys { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; font: 500 13px/18px var(--text); color: rgba(255,255,255,.84); }
.tr-cv__keys span { display: inline-flex; align-items: center; gap: 8px; }
.tr-cv .tr-key--a { background: #e8466f; }
.tr-cv .tr-key--g { background: var(--tr-gold); }
.tr-cv .tr-key--m { background: rgba(255,255,255,.5); }
.tr-cv .tr-key--sig { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.tr-cv .tr-sig { background: var(--mint); }
.tr-cvc { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,179,199,.2); }
.tr-cvc__k { font: 600 14px/19px var(--text); color: #fff; }
.tr-cvc__s { margin-top: 4px; font: 400 13px/19px var(--text); color: rgba(255,255,255,.76); }
.tr-cvc__ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(232,70,111,.24); color: #fff; }
.tr-cvc--g .tr-cvc__ico { background: rgba(246,201,142,.2); color: var(--tr-gold); }
.tr-cvc__th { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tr-cvc__th li { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.tr-cvc__th span { font: 500 13px/16px var(--text); color: rgba(255,255,255,.84); }
.tr-cvc__th i { display: block; height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.tr-cvc__th u { display: block; height: 100%; border-radius: inherit; background: rgba(255,179,199,.55); transform-origin: 0 50%; transform: scaleX(var(--v, .5)); }
.tr-cvc__th li.hi u { background: linear-gradient(90deg, #d6335e, #ffb3c7); }
.tr-cvc__th li.hi span { color: #fff; font-weight: 600; }
.tr-cvc__th b { font: 600 13px/1 var(--text); text-align: right; color: #fff; font-variant-numeric: tabular-nums; }

/* brand health: lines over four waves */
.tr-cv__chart { position: relative; }
.tr-cv__chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.tr-cv__grid { fill: none; stroke: rgba(255,179,199,.14); stroke-width: 1; }
.tr-cv__ax { font: 500 13px var(--text); fill: rgba(255,255,255,.66); }
.tr-cv__wx { font-weight: 600; fill: rgba(255,255,255,.8); }
.tr-cv__evt { fill: none; stroke: rgba(255,179,199,.6); stroke-width: 1.5; stroke-dasharray: 5 6; }
.tr-cv__evtt { font: 600 13px var(--text); fill: var(--mint); }
.tr-cv__ln { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.tr-cv__ln--all { stroke: #e8466f; }
.tr-cv__ln--u35 { stroke: var(--tr-gold); }
.tr-cv__ln--pref { stroke: rgba(255,255,255,.5); stroke-width: 2.4; }
.tr-cv__pt { stroke: #2a0b22; stroke-width: 2.5; }
.tr-cv__pt--all { fill: #e8466f; }
.tr-cv__pt--u35 { fill: var(--tr-gold); }
.tr-cv__pt--pref { fill: #cbbcc4; }
.tr-cv__v { font: 600 13px var(--text); fill: #fff; }
.tr-cv__v--g { fill: var(--tr-gold); }
.tr-cv__v--m { fill: rgba(255,255,255,.74); }
.tr-cv__badge { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(26,6,22,.9); border: 1px solid rgba(246,201,142,.6); font: 600 13px/16px var(--text); color: #fff; }
.tr-cv__badge svg { color: var(--tr-gold); }
.tr-cv__badge--m { border-color: rgba(255,255,255,.32); color: rgba(255,255,255,.88); }
/* a badge that belongs to one step only (data-upto): it leaves when the next step's badge comes in; without motion
   only the final step's badge shows */
html.wm-on .tr-pin[data-active="3"] .tr-cv__badge[data-upto="2"] { opacity: 0; transform: translate3d(0, -10px, 0); }
html:not(.wm-on) .tr-cv__badge[data-upto] { display: none; }
.tr-cv__low { position: relative; margin-top: 8px; }
.tr-cv__tbl { width: 100%; border-collapse: collapse; font: 500 13px/18px var(--text); }
.tr-cv__tbl th, .tr-cv__tbl td { padding: 6px 10px; text-align: right; border-bottom: 1px solid rgba(255,179,199,.14); color: rgba(255,255,255,.88);
  font-weight: 500; font-variant-numeric: tabular-nums; }
.tr-cv__tbl tr:first-child th { font-weight: 600; color: rgba(255,255,255,.72); }
.tr-cv__tbl th:first-child { text-align: left; color: rgba(255,255,255,.74); }
.tr-cv__tbl td.is-key { color: var(--tr-gold); font-weight: 700; border-radius: 8px; }
.tr-cv__video { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding: 16px 18px; border-radius: 18px; background: #2a0b22; border: 1px solid rgba(255,179,199,.32); }
html.wm-on .tr-cv__video { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.tr-cv__play { width: 62px; height: 62px; flex: none; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(150deg, #e8466f, #8e1a47); color: #fff; }
.tr-cv__vk { font: 600 12px/16px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--mint); }
.tr-cv__vq { margin-top: 4px; font: 500 16px/23px var(--display); color: #fff; }
.tr-cv__vc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tr-cv__vc span { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,179,199,.36); font: 600 12px/16px var(--text); color: rgba(255,255,255,.9); }

/* brand funnel: stages, you against Brand B, with the reading on the right */
.tr-cv--funnel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.tr-cvf { display: flex; flex-direction: column; }
.tr-cvf ul { display: flex; flex-direction: column; gap: 12px; margin: auto 0; }
.tr-cvf__r { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 10px; border-radius: 14px; }
/* the funnel narrows: bars centred in their track, thicker; at step 0 only "Aware" is filled, the rest grow at step 1 */
.tr-cv--funnel .tr-cvf__b { gap: 6px; }
.tr-cv--funnel .tr-cvf__b i { height: 13px; transform-origin: 50% 50%; }
html.wm-on .tr-cv--funnel .tr-cvf__b i { transition: transform 1s var(--wn-ease-out); }
html.wm-on .tr-cv--funnel .tr-cvf__b b { transition: opacity .5s ease .2s; }
html.wm-on .tr-pin[data-active="0"] .tr-cvf__r ~ .tr-cvf__r .tr-cvf__b i { transform: scaleX(.03); }
html.wm-on .tr-pin[data-active="0"] .tr-cvf__r ~ .tr-cvf__r .tr-cvf__b b { opacity: 0; transition-delay: 0s; }
.tr-cvf__l { display: block; font: 600 13px/17px var(--text); color: #fff; }
.tr-cvf__b, .tr-cvr__b { display: flex; flex-direction: column; gap: 5px; }
.tr-cvf__b > span, .tr-cvr__b > span { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.tr-cvf__b i, .tr-cvr__b i { display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #d6335e, #e8466f); transform-origin: 0 50%; transform: scaleX(var(--v, .5)); }
.tr-cvf__b .g i, .tr-cvr__b .g i { background: var(--tr-gold); }
.tr-cvf__b b, .tr-cvr__b b { font: 600 13px/1 var(--text); text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.tr-cvf__drop { display: flex; align-items: center; gap: 6px; margin: -1px 12px; font: 600 12.5px/16px var(--text); color: var(--tr-gold); }
.tr-cvf__drop svg { flex: none; transform: rotate(90deg); }
.tr-cvf__side { display: flex; flex-direction: column; gap: 10px; }
.tr-cvc__brands { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tr-cvc__brands span { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,179,199,.3); font: 600 12px/16px var(--text); color: rgba(255,255,255,.88); }
.tr-cvc__brands span.me { background: var(--purple); border-color: var(--purple); color: #fff; }
.tr-cvc__conv { display: flex; gap: 8px; margin-top: 8px; }
.tr-cvc__conv span { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: rgba(232,70,111,.2); font: 500 12px/16px var(--text); color: rgba(255,255,255,.84); }
.tr-cvc__conv b { font: 500 26px/1.1 var(--display); color: #fff; }
.tr-cvc__conv .g { background: rgba(246,201,142,.16); }
.tr-cvc__conv .g b { color: var(--tr-gold); }
.tr-cvc__q { margin-top: 10px; font: 500 14px/20px var(--display); color: var(--mint); }
.tr-cvc--stamp { display: flex; align-items: center; gap: 14px; }
.tr-cvc__w { flex: none; padding: 9px 13px; border-radius: 12px; border: 2px dashed var(--tr-gold); font: 600 15px/1 var(--display); color: var(--tr-gold); transform: rotate(-4deg); }

/* corporate reputation: two audiences, paired bars, next round */
.tr-cvr__aud { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.tr-cvr__aud .tr-cvc { display: flex; align-items: flex-start; gap: 12px; }
.tr-cvr__rows ul { display: flex; flex-direction: column; gap: 4px; }
.tr-cvr__r { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 12px; border-radius: 12px; }
.tr-cvr__l { display: flex; align-items: center; gap: 8px; font: 600 14px/18px var(--text); color: #fff; }
.tr-cvr__b i { height: 9px; }
/* step 0 shows the measures with empty tracks; the scores grow in at step 1 */
.tr-cvr__b > span::before { content: ""; grid-area: 1 / 1; height: 9px; border-radius: 999px; background: rgba(255,255,255,.07); }
.tr-cvr__b > span > i { grid-area: 1 / 1; }
.tr-cvr__b > span > b { grid-area: 1 / 2; }
html.wm-on .tr-cvr__b i { transition: transform 1s var(--wn-ease-out); }
html.wm-on .tr-cvr__b b, html.wm-on .tr-cvr__rows .tr-cv__keys, html.wm-on .tr-cvr__rows .tr-sig { transition: opacity .5s ease .25s; }
html.wm-on .tr-pin[data-active="0"] .tr-cvr__b i { transform: scaleX(0); }
html.wm-on .tr-pin[data-active="0"] .tr-cvr__b b, html.wm-on .tr-pin[data-active="0"] .tr-cvr__rows .tr-sig { opacity: 0; transition-delay: 0s; }
html.wm-on .tr-pin[data-active="0"] .tr-cvr__rows .tr-cv__keys { opacity: .35; transition-delay: 0s; }
.tr-cvc--next { display: flex; align-items: center; gap: 12px; margin-top: 12px; border-style: dashed; }
.tr-cvc__tag { margin-left: auto; flex: none; padding: 6px 12px; border-radius: 999px; border: 1px dashed rgba(255,179,199,.55); font: 600 12.5px/16px var(--text); color: var(--mint); }

/* customer satisfaction: a dashboard that fills in panel by panel */
.tr-cv--nps { padding: 18px; }
.tr-cvn, .tr-cvn__slots { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 14px; }
.tr-cvn__slots { position: absolute; inset: 18px; }
.tr-cvn__slot { border-radius: 18px; border: 1.5px dashed rgba(255,179,199,.24); }
.tr-cvn { position: relative; }
.tr-cvn__p { min-width: 0; min-height: 214px; padding: 18px; border-radius: 18px; background: #2a0b22; border: 1px solid rgba(255,179,199,.24); }
.tr-cvn__score { display: flex; align-items: flex-end; gap: 14px; margin-top: 8px; }
.tr-cvn__score b { font: 500 64px/1 var(--display); letter-spacing: -1.6px; color: #fff; }
.tr-cvn__score span { padding-bottom: 6px; font: 500 13px/18px var(--text); color: rgba(255,255,255,.74); }
.tr-cvn__score s { font: 600 18px/24px var(--display); color: rgba(255,255,255,.8); }
.tr-cvn__spark { display: block; width: 100%; height: 54px; margin: 10px 0 6px; overflow: visible; }
.tr-cvn__spark path { fill: none; stroke: #e8466f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tr-cvn__spark circle { fill: #e8466f; }
.tr-cvn__spark circle.hi { fill: var(--tr-gold); }
.tr-cvn__p--video { display: flex; flex-direction: column; gap: 8px; }
.tr-cvn__p--video .tr-cv__play { width: 54px; height: 54px; border-radius: 14px; }
.tr-cvn__p--video .tr-cv__vq { font-size: 15px; line-height: 22px; }

/* =====================================================================================================
   6. KPI DEFINITIONS (ink)
   ===================================================================================================== */
.tr-kpis { overflow: hidden; }
.tr-kpis .wrap { position: relative; }
.tr-kpis__glow { position: absolute; right: -12%; top: -14%; width: 760px; height: 760px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214,51,94,.3), rgba(214,51,94,0)); }
.tr-kpis__grid { display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.tr-kpi { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 252px; padding: 24px 24px 22px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); border: 1px solid rgba(255,179,199,.18); }
.tr-kpi:hover { border-color: rgba(255,179,199,.5); background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); }
.tr-kpi--wide { grid-column: span 2; }
.tr-kpi__top { display: flex; align-items: center; justify-content: space-between; }
.tr-kpi__n { font: 600 12px/16px var(--text); letter-spacing: .1em; color: var(--mint); }
.tr-kpi__ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,179,199,.12); color: var(--mint); }
.tr-kpi h3 { margin-top: 6px; font: 500 22px/28px var(--display); letter-spacing: -.3px; color: #fff; }
.tr-kpi p { font: 400 15.5px/24px var(--text); color: rgba(255,255,255,.8); }
.tr-kpi__spark { display: block; margin-top: auto; width: 160px; height: 54px; overflow: visible; }
.tr-kpi__spark path { fill: none; stroke: #e8466f; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tr-kpi__bars { display: flex; align-items: flex-end; gap: 6px; height: 44px; margin-top: auto; }
.tr-kpi__bars i { width: 16px; height: 100%; border-radius: 4px 4px 2px 2px; background: rgba(255,179,199,.35); transform-origin: 50% 100%; transform: scaleY(var(--v, .5)); }
.tr-kpi__bars i:last-child { background: #e8466f; }
.tr-kpi__dots { display: flex; gap: 6px; margin-top: auto; }
.tr-kpi__dots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.14); }
.tr-kpi__dots i.mid { background: rgba(255,179,199,.42); }
.tr-kpi__dots i.on { background: #e8466f; }
html.wm-on .tr-kpis__grid:not(.is-in) .tr-kpi__bars i { transform: scaleY(0); }
html.wm-on .tr-kpi__bars i { transition: transform 1s var(--wn-ease-out) .5s; }

/* =====================================================================================================
   7. WHAT YOU GET: report tiles
   ===================================================================================================== */
.tr-reps { display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.tr-rep { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid var(--wn-line);
  transition: box-shadow .45s var(--wn-ease-out), border-color .3s ease; }
.tr-rep:hover { box-shadow: var(--wn-shadow); border-color: var(--wn-rose-20); }
.tr-rep--wide { grid-column: span 2; }
.tr-rep__pv { position: relative; height: 150px; display: grid; place-items: center; border-bottom: 1px solid var(--wn-line);
  background: radial-gradient(80% 90% at 85% 0%, rgba(232,70,111,.14), rgba(232,70,111,0) 70%), var(--wn-rose-10); }
.tr-rep__b { display: flex; flex-direction: column; gap: 8px; padding: 22px 26px 26px; }
.tr-rep__n { font: 600 12px/16px var(--text); letter-spacing: .1em; color: var(--blue); }
.tr-rep h3 { font: 600 20px/27px var(--text); letter-spacing: -.2px; color: var(--ink); }
.tr-rep p { font: 400 16px/25px var(--text); color: var(--grey70); }
.tr-mini { display: flex; }
.tr-mini--funnel { flex-direction: column; align-items: center; gap: 5px; width: 180px; }
.tr-mini--funnel i { display: block; height: 14px; width: calc(var(--v) * 100%); border-radius: 5px; background: linear-gradient(90deg, #e8466f, #b4235a); }
.tr-mini--funnel i:nth-child(2) { opacity: .9; }
.tr-mini--funnel i:nth-child(n+3) { background: var(--tr-soft); }
.tr-mini--line { width: 190px; height: 84px; overflow: visible; }
.tr-mini--line .g { fill: none; stroke: #ead9e0; stroke-width: 1; }
.tr-mini--line .l1 { fill: none; stroke: var(--tr-a); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tr-mini--line .l2 { fill: none; stroke: var(--tr-plum); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.tr-mini--paired { align-items: flex-end; gap: 16px; height: 86px; }
.tr-mini--paired b { display: flex; align-items: flex-end; gap: 4px; height: 100%; }
.tr-mini--paired i { width: 18px; height: 100%; border-radius: 5px 5px 2px 2px; background: var(--tr-a); transform-origin: 50% 100%; transform: scaleY(var(--v, .5)); }
.tr-mini--paired i.g { background: var(--tr-plum); }
.tr-mini--rank { flex-direction: column; gap: 7px; width: 190px; }
.tr-mini--rank i { display: block; height: 12px; width: calc(var(--v) * 100%); border-radius: 999px; background: var(--tr-soft); }
.tr-mini--rank i.hi { background: var(--tr-a); }
.tr-mini--chips { flex-wrap: wrap; justify-content: center; gap: 7px; width: 230px; }
.tr-mini--chips i { width: var(--w); height: 24px; border-radius: 999px; background: #fff; border: 1px solid var(--wn-rose-20); }
.tr-mini--chips i.a { background: var(--tr-a); border-color: var(--tr-a); }
.tr-mini--chips i.b { background: var(--wn-rose-20); }
.tr-mini--chat { position: relative; flex-direction: column; gap: 7px; width: 200px; }
.tr-mini--chat .q { align-self: flex-end; width: 130px; height: 26px; border-radius: 14px 14px 4px 14px; background: var(--tr-plum); }
.tr-mini--chat .a { width: 170px; height: 26px; border-radius: 14px 14px 14px 4px; background: #fff; border: 1px solid var(--wn-rose-20); }
.tr-mini--chat .a2 { width: 120px; height: 20px; border-radius: 12px; background: #fff; border: 1px solid var(--wn-rose-20); }
.tr-mini--chat em { position: absolute; left: -22px; top: 36px; color: var(--tr-a); }
.tr-mini--files { gap: 10px; }
.tr-mini--files b { width: 58px; height: 72px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; border-radius: 8px 18px 8px 8px;
  font: 700 12px/1 var(--text); color: #fff; box-shadow: 0 10px 20px rgba(30,10,26,.14); }
.tr-mini--files .p { background: var(--tr-a); transform: rotate(-6deg); }
.tr-mini--files .x { background: var(--tr-b); transform: translateY(-6px); }
.tr-mini--files .c { background: var(--tr-plum); transform: rotate(6deg); }
.tr-mini--gauge { width: 150px; overflow: visible; }
.tr-mini--gauge .t { fill: none; stroke: #f0dfe6; stroke-width: 12; stroke-linecap: round; }
.tr-mini--gauge .v { fill: none; stroke: var(--tr-a); stroke-width: 12; stroke-linecap: round; }
.tr-mini--donuts { gap: 18px; }
.tr-mini--donut { width: 78px; height: 78px; }
.tr-mini--donut circle { fill: none; stroke-width: 9; }
.tr-mini--donut .t { stroke: #f0dfe6; }
.tr-mini--donut .v { stroke: var(--tr-a); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.tr-mini--donut .v2 { stroke: var(--tr-plum); }
.tr-mini--video { align-items: center; gap: 14px; }
.tr-mini__play { width: 72px; height: 54px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(150deg, #e8466f, #8e1a47); color: #fff; }
.tr-mini__wave { display: flex; align-items: center; gap: 3px; height: 40px; }
.tr-mini__wave i { width: 4px; height: 100%; border-radius: 2px; background: var(--tr-a); transform: scaleY(var(--v, .5)); }
.tr-mini--cols { align-items: flex-end; gap: 8px; height: 86px; }
.tr-mini--cols i { width: 22px; height: 100%; border-radius: 6px 6px 2px 2px; background: var(--tr-soft); transform-origin: 50% 100%; transform: scaleY(var(--v, .5)); }
.tr-mini--cols i.hi { background: var(--tr-a); }
html.wm-on .tr-mini--cols i, html.wm-on .tr-mini--paired i { transition: transform 1s var(--wn-ease-out) .35s; }
html.wm-on .tr-reps:not(.is-in) .tr-mini--cols i, html.wm-on .tr-reps:not(.is-in) .tr-mini--paired i { transform: scaleY(0); }

/* =====================================================================================================
   8. WHEN TO USE IT
   ===================================================================================================== */
.tr-when__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tr-when__c { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px 30px 66px; border-radius: 24px; background: #fff;
  border: 1px solid var(--wn-line); color: var(--body); }
a.tr-when__c { transition: box-shadow .45s var(--wn-ease-out), border-color .3s ease; }
a.tr-when__c:hover { box-shadow: var(--wn-shadow); border-color: var(--wn-rose-20); }
.tr-when__c--use { padding-bottom: 30px; border-color: transparent; background: var(--wn-glass-bg); color: #fff; }
.tr-when__ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--wn-rose-10); color: var(--blue); }
.tr-when__c--use .tr-when__ico { background: rgba(255,179,199,.16); color: var(--mint); }
.tr-when__k { margin-top: 6px; font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.tr-when__c--use .tr-when__k { color: var(--mint); }
.tr-when__c h3 { font: 500 26px/32px var(--display); letter-spacing: -.4px; color: var(--ink); }
.tr-when__c--use h3 { color: #fff; }
.tr-when__c p { font: 400 17px/26px var(--text); color: var(--grey70); }
.tr-when__c--use p { color: rgba(255,255,255,.88); }
.tr-when__go { position: absolute; left: 30px; bottom: 26px; color: var(--blue); transition: transform .35s var(--wn-ease-out); }
a.tr-when__c:hover .tr-when__go { transform: translateX(6px); }

/* static / print safety */
@media print {
  .tr-ask-wrap { position: static; width: auto; margin-top: 16px; }
}

/* =====================================================================================================================
   RESPONSIVE (21 Oct 2026): small laptops, tablets and phones. Breakpoints, wm-lite and the header hooks are the ones at
   the top of wine-base.css; at 1200 and wider nothing below applies. Desktop first:
     1200  the hero headline scales, slightly tighter gaps
     1024  the hero stacks (dashboard under the text, the "Ask the study" answer under the dashboard instead of hanging
           off it), the pinned story becomes a stacked section (no pinning below 1024: html.wm-lite), process steps and
           report tiles two across, KPI cards two across
      768  phone layouts: the hero dashboard as a phone-size dashboard (KPI tiles 2 x 2, one panel per row, the wave tabs
           as a full-width switch), problem drawings stacked, process steps as a numbered list, every grid one column,
           chart badges listed under their chart, nothing under 12px, 44px taps
      480  the dashboard and the story canvas take a little of the side gutter; two-column rows inside cards stack
   Chart text: t-tracker.js keeps --tr-s (viewBox width / drawn width) on the charts with labels; below 1024 their labels
   are sized as max(<px>, calc(<px> * --tr-s)), so they read at that many CSS px at any chart width.
   ===================================================================================================================== */

/* ---------- 1200: small laptop ---------- */
@media (max-width: 1199.98px) {
  .tr-hero .wn-h1 { font-size: clamp(34px, 2.83vw + 22px, 56px); line-height: 1.1; letter-spacing: -.02em; }
  .tr-hero__grid { gap: 40px; }
  .tr-ask-wrap { right: -12px; }
  .tr-pin__grid { gap: 40px; }
  .tr-pin__h { font-size: 30px; line-height: 38px; }
}

/* ---------- 1024: tablet landscape and below ---------- */
@media (max-width: 1023.98px) {
  /* hero: the dashboard under the text; the answer card follows the dashboard */
  body.t-tracker .tr-hero { padding: var(--wn-hdr-clear, 96px) 0 88px; }
  .tr-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .tr-hero__txt { padding-top: 0; }
  .tr-hero__vis { max-width: 760px; }
  .tr-ask-wrap { position: relative; right: auto; top: auto; z-index: 1; width: auto; max-width: 420px; margin: -18px 18px 0 auto; }
  .tr-hero__glow2 { width: 520px; height: 520px; }
  /* problem */
  .tr-prob__vis { max-width: 720px; }
  /* process: two across, the rail (drawn for one row) off */
  .tr-proc__rail { display: none; }
  .tr-proc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .tr-how__stats { margin-top: 64px; }
  /* the example story: stacked (no pinning below 1024) */
  .tr-pin__in { padding-top: var(--wn-sec-y); padding-bottom: var(--wn-sec-y); }
  .tr-pin__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tr-pin__canvas { max-width: 760px; }
  .tr-pin__glow { width: 560px; height: 560px; }
  /* KPI cards and report tiles: two across */
  .tr-kpis__grid, .tr-reps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-kpis__glow { width: 560px; height: 560px; }
  .tr-when__g { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 720px; }
  /* chart labels at a readable size at any chart width (--tr-s from the script) */
  .tr-lines .tr-ax { font-size: max(12px, calc(12px * var(--tr-s, 1))); }
  .tr-pv svg .tr-pv__ax { font-size: max(12px, calc(12px * var(--tr-s, 1))); }
  .tr-pv svg .tr-pv__tag, .tr-pv svg .tr-pv__v { font-size: max(12.5px, calc(13px * var(--tr-s, 1))); }
  .tr-cv__chart svg .tr-cv__ax, .tr-cv__chart svg .tr-cv__evtt, .tr-cv__chart svg .tr-cv__v { font-size: max(13px, calc(12.5px * var(--tr-s, 1))); }
  /* small print in the dashboard and the story up to 12px */
  .tr-pnl__m, .tr-keys, .tr-fn--cmp em, .tr-fn--hd b, .tr-fn--hd em, .tr-fn__drop, .tr-pa__b b, .tr-sc__pt em, .tr-sc__x, .tr-sc__y, .tr-sp__c span,
  .tr-sp__seg b, .tr-dash__foot li, .tr-gw__lo, .tr-gw__hi, .tr-gw__f, .tr-bf__dk, .tr-tiles--stack .tr-tile__d { font-size: 12px; }
  .tr-fn--hd b, .tr-fn--hd em { line-height: 14px; }
  .tr-dash--nps .tr-sp__c span { font-size: 12px; }
  .tr-tab { height: 34px; min-width: 44px; }
  .tr-kpi p { font-size: 16px; line-height: 25px; }
}

/* ---------- 768: tablet portrait, phones ---------- */
@media (max-width: 767.98px) {
  body.t-tracker .tr-hero { padding: var(--wn-hdr-clear-m, 88px) 0 64px; }
  .tr-hero .wn-lead { font-size: 18px; line-height: 28px; }
  .tr-hero__vis { max-width: none; }
  /* the hero dashboard at phone size */
  .tr-dash { padding: 14px 12px 12px; border-radius: 20px; }
  .tr-dash__bar { flex-wrap: wrap; row-gap: 12px; }
  .tr-dash__ttl span { white-space: normal; }
  .tr-tabs { flex: 1 1 100%; }
  .tr-tab { flex: 1 1 0; height: 44px; padding: 0 6px; font-size: 14px; }
  .tr-sw .tr-tab { height: 44px; padding: 0 12px; font-size: 14px; }
  .tr-sw { width: 100%; }
  .tr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tr-tiles--strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tr-tiles--strip .tr-tile { flex-direction: column; align-items: flex-start; gap: 2px; }
  .tr-tile__l, .tr-tile__d { white-space: normal; }
  .tr-tile__v { font-size: 26px; line-height: 30px; }
  .tr-pnls, .tr-dash--funnel .tr-pnls, .tr-dash--nps .tr-pnls, .tr-dash--rep .tr-pnls { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .tr-pnl, .tr-pnl--a, .tr-pnl--b, .tr-pnl--c, .tr-pnl--d, .tr-dash--funnel .tr-pnl--a, .tr-dash--funnel .tr-pnl--b, .tr-dash--funnel .tr-pnl--c,
  .tr-dash--funnel .tr-pnl--d, .tr-dash--nps .tr-pnl--a, .tr-dash--nps .tr-pnl--b, .tr-dash--nps .tr-pnl--c, .tr-dash--nps .tr-pnl--d,
  .tr-dash--rep .tr-pnl--a, .tr-dash--rep .tr-pnl--b, .tr-dash--rep .tr-pnl--c, .tr-dash--rep .tr-pnl--d, .tr-tiles--stack { grid-column: auto; grid-area: auto; }
  .tr-tiles--stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-tiles--stack .tr-tile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l" "v" "d"; }
  .tr-pnl { padding: 12px 12px; }
  .tr-pnl__t { white-space: normal; }
  .tr-pnl__h { flex-wrap: wrap; row-gap: 2px; }
  .tr-gw, .tr-dash--funnel .tr-gw, .tr-dash--nps .tr-gw, .tr-dash--rep .tr-gw { max-width: 200px; }
  .tr-fn, .tr-pnl--a .tr-fn { grid-template-columns: 104px minmax(0, 1fr) 40px; }
  .tr-fn--cmp { grid-template-columns: 96px minmax(0, 1fr) 36px 34px; }
  .tr-fn__drop, .tr-pnl--a .tr-fn__drop { margin-left: 112px; }
  .tr-hb, .tr-pnl--a .tr-hb { grid-template-columns: minmax(0, 140px) minmax(0, 1fr) 36px; }
  .tr-hb span, .tr-fn__l, .tr-bf__l { white-space: normal; overflow: visible; text-overflow: clip; }
  .tr-pa { grid-template-columns: 112px minmax(0, 1fr); }
  .tr-pas--fly .tr-pa { grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); }
  .tr-pas--fly .tr-pa__l { white-space: normal; }
  .tr-bf__r { grid-template-columns: 96px minmax(0, 1fr) 44px; }
  .tr-bf__drop { flex-wrap: wrap; white-space: normal; }
  .tr-sp { gap: 4px; }
  .tr-dash--nps .tr-sp { gap: 4px; }
  .tr-ask-wrap { max-width: none; margin: 14px 0 0; }
  .tr-ask { padding: 14px 16px 12px; }
  .tr-ask__q, .tr-ask__a { font-size: 15px; line-height: 22px; }
  .tr-pv__drop { font-size: 15px; line-height: 21px; }
  .tr-cvc__s { font-size: 14px; line-height: 20px; }
  .tr-cvc__q { font-size: 15px; line-height: 21px; }
  .tr-cv__vq, .tr-cvn__p--video .tr-cv__vq { font-size: 16px; line-height: 23px; }
  /* questions strip */
  .tr-q { padding: 24px 0 26px; }
  .tr-q__i { height: 46px; padding: 0 18px 0 14px; font-size: 16px; }
  /* problem drawings */
  .tr-pvs--row { flex-direction: column; }
  .tr-pv--one { flex: none; }
  .tr-pv { padding: 18px 16px 16px; border-radius: 20px; }
  .tr-pv figcaption b, .tr-pv__lk b { font-size: 16px; line-height: 22px; }
  .tr-pv figcaption span, .tr-pv__lk span { font-size: 14px; line-height: 20px; }
  .tr-pv__why { font-size: 14px; line-height: 18px; padding: 6px 10px; }
  .tr-vbars { gap: 6px; height: 196px; }
  .tr-vbars i { height: 140px; }
  .tr-vbars b { bottom: calc(var(--v, .5) * 140px + 40px); font-size: 14px; }
  .tr-vbars em { margin: 10px -8px 0; height: 20px; }
  .tr-keys--pv { font-size: 14px; }
  /* process: a numbered list */
  .tr-proc__list { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .tr-proc__s { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-items: start; }
  .tr-proc__n { grid-row: 1 / span 2; width: 52px; height: 52px; box-shadow: none; font-size: 18px; }
  .tr-proc__s h3 { margin-top: 2px; font-size: 19px; line-height: 26px; }
  .tr-how__stats { margin-top: 48px; }
  /* the example story */
  .tr-pin__h { font-size: clamp(26px, 1.98vw + 22px, 32px); line-height: 1.2; }
  .tr-pin__head { margin-bottom: 24px; }
  .tr-pin__side { gap: 22px; }
  .tr-step__h { font-size: 24px; line-height: 30px; }
  .tr-step__p { font-size: 17px; line-height: 27px; }
  html:not(.wm-on) .tr-step + .tr-step { margin-top: 28px; padding-top: 28px; }
  .tr-cv { padding: 18px 16px; border-radius: 22px; }
  .tr-cv__keys { font-size: 14px; }
  /* chart badges: listed under the chart instead of floating over it */
  .tr-cv__chart { display: flex; flex-wrap: wrap; gap: 8px; }
  .tr-cv__chart > svg { flex: 1 1 100%; }
  /* the values sit on the points: the y-axis labels would only crowd them at this size */
  .tr-cv__chart > svg .tr-cv__ax:not(.tr-cv__wx) { display: none; }
  .tr-cv__badge { position: static; white-space: normal; }
  .tr-cv__chart .tr-cv__badge svg { flex: none; width: 14px; height: 14px; }
  .tr-cv__low { overflow-x: auto; overscroll-behavior-x: contain; }
  .tr-cv__tbl th, .tr-cv__tbl td { padding: 6px 8px; }
  .tr-cv__video { align-items: flex-start; padding: 14px; gap: 12px; }
  .tr-cv__play { width: 52px; height: 52px; }
  .tr-cv--funnel { grid-template-columns: minmax(0, 1fr); }
  .tr-cvf__r { grid-template-columns: 84px minmax(0, 1fr); padding: 8px 6px; }
  .tr-cvr__r { grid-template-columns: 112px minmax(0, 1fr); padding: 7px 8px; }
  .tr-cvr__l { font-size: 14px; }
  .tr-cvc--next { flex-wrap: wrap; }
  .tr-cvc__tag { margin-left: 52px; }
  .tr-cvn { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .tr-cvn__slots { display: none; }
  .tr-cvn__p { min-height: 0; padding: 16px; }
  .tr-cvn__score b { font-size: 52px; }
  .tr-cvc__th li { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 36px; }
  /* KPI cards, report tiles, when to use it: one column */
  .tr-kpis__grid, .tr-reps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tr-kpi--wide, .tr-rep--wide { grid-column: auto; }
  .tr-kpi { min-height: 0; padding: 22px 20px 20px; }
  .tr-kpi p { font-size: 16px; line-height: 25px; }
  .tr-kpi__spark { margin-top: 8px; }
  .tr-kpi__bars, .tr-kpi__dots { margin-top: 8px; }
  .tr-rep__pv { height: 132px; }
  .tr-rep__b { padding: 20px 20px 22px; }
  .tr-rep h3 { font-size: 19px; line-height: 26px; }
  .tr-when__c { padding: 24px 22px 60px; }
  .tr-when__c--use { padding-bottom: 24px; }
  .tr-when__c h3 { font-size: 22px; line-height: 28px; }
  .tr-when__c p { font-size: 16px; line-height: 25px; }
  .tr-when__go { left: 22px; bottom: 22px; }
  .tr-kpis__glow { width: 420px; height: 420px; }
}

/* ---------- 480: phone ---------- */
@media (max-width: 479.98px) {
  /* the dashboard and the story canvas take a little of the side gutter */
  .tr-hero__vis, .tr-pin__canvas { margin-left: -12px; margin-right: -12px; }
  .tr-ask-wrap { margin-left: 12px; margin-right: 12px; }
  .tr-fn, .tr-pnl--a .tr-fn { grid-template-columns: 92px minmax(0, 1fr) 38px; }
  .tr-fn--cmp { grid-template-columns: 86px minmax(0, 1fr) 34px 32px; }
  .tr-fn__drop, .tr-pnl--a .tr-fn__drop { margin-left: 0; }
  .tr-hb, .tr-pnl--a .tr-hb { grid-template-columns: minmax(0, 1fr) 36px; column-gap: 8px; row-gap: 3px; }
  .tr-hb span { grid-column: 1 / -1; }
  .tr-pa { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tr-pas--fly .tr-pa { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); gap: 6px; }
  .tr-bf__r { grid-template-columns: 84px minmax(0, 1fr) 40px; gap: 8px; }
  .tr-cvr__aud { grid-template-columns: minmax(0, 1fr); }
  .tr-cvr__r { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tr-cvf__r { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tr-cvc__tag { margin-left: 0; }
  .tr-cvc__conv { flex-direction: column; }
  .tr-cv__tbl { font-size: 12.5px; }
}

/* ---------- touch screens of any width: 44px taps, no hover states that stick after a tap ---------- */
@media (hover: none) and (pointer: coarse) {
  .tr-tab, .tr-sw .tr-tab { min-height: 44px; min-width: 44px; }
  .tr-kpi:hover { border-color: rgba(255,179,199,.18); background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); }
  .tr-rep:hover, a.tr-when__c:hover { box-shadow: none; border-color: var(--wn-line); }
  a.tr-when__c:hover .tr-when__go { transform: none; }
}