/* glen-design: v1 */
/* ============================================================================
   Sales and marketing: the channel instrument (proportional streams into the
   business), then pipeline, campaigns, web and marketing spend. Tokens only;
   both appearances come from the tokens. Prefix sm-.
   ========================================================================== */

.sm{ --sm-lane-min: 28px; }
.sm{ position: relative; min-width: 0; }
.sm-head > div:first-child{ flex: 1 1 480px; min-width: 0; }
.sm-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.sm-actions .btn--tint .ic{ color: var(--accent); }
.sm-views{ flex: none; }

/* --- figures -------------------------------------------------------------- */
.sm-figs{
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s3); margin-bottom: var(--s4);
}
.sm-fig{ display: grid; gap: var(--s1); align-content: start; padding: var(--s4); min-width: 0; }
.sm-fig small{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink-dim); }
.sm-fig .fig{ font-size: var(--fs-xl); color: var(--ink); margin: var(--s1) 0; white-space: nowrap; }
.sm-fig:first-child .fig{ font-size: var(--fs-2xl); }
.sm-dir{ display: flex; align-items: center; gap: var(--s1); margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; color: var(--ink-dim); max-width: none; }
.sm-dir .ic{ width: 14px; height: 14px; flex: none; }
.sm-dir.down .ic{ transform: rotate(180deg); }
.sm-dir.ok{ color: var(--ok); } .sm-dir.warn{ color: var(--warn); } .sm-dir.bad{ color: var(--bad); } .sm-dir.flat{ color: var(--ink-dim); }
.sm-quiet{ margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-dim); max-width: none; }
.sm-spark{ height: 28px; margin-top: var(--s2); }
.sm-spark svg{ width: 100%; height: 100%; }

/* --- hero: the channel river --------------------------------------------- */
.sm-hero{ padding: var(--s5); margin-bottom: var(--s4); }
.sm-hero-h{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.sm-hero-h h2{ font-size: var(--fs-lg); letter-spacing: -.015em; }
.sm-hero-h .meta{ margin: var(--s1) 0 0; max-width: 72ch; }

.sm-legend{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-sm); color: var(--ink-dim); }
.sm-legend li{ display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.sm-legend .k{ width: 20px; height: 12px; flex: none; border-radius: 4px; }
.k-flow{ background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 55%, var(--surface-1)), var(--accent)); }
.k-mkt{ background: var(--accent); }
.k-pay{ background: var(--ink-dim); }
.k-line{ background: linear-gradient(var(--accent), var(--accent)) center / 100% 3px no-repeat; }
.k-bar{ background: var(--accent); }
.k-spend{ background: repeating-linear-gradient(90deg, var(--ink-faint) 0 5px, transparent 5px 9px) center / 100% 2px no-repeat; }
.k-lost{ background: var(--ink-faint); }
.k-leak{ background: var(--bad); }

.sm-river{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(132px, 18%);
  gap: var(--s3); min-height: 420px; align-items: stretch;
}
.sm-lanes{ display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.sm-lane{
  --w: .1;
  position: relative; display: grid; grid-template-columns: minmax(140px, 28%) minmax(0, 1fr) minmax(160px, 30%);
  align-items: center; gap: var(--s3); flex: var(--w) 1 var(--sm-lane-min); min-height: var(--sm-lane-min);
  margin: 0; padding: 0; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; color: inherit; font: inherit; text-align: left;
}
.sm-lane-meta{ display: grid; min-width: 0; padding-left: var(--s2); line-height: 1.25; }
.sm-lane-meta b{ font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-lane-meta small{ font-size: var(--fs-sm); color: var(--ink-dim); font-family: var(--font-mono); }
.sm-lane-flow{ position: relative; height: 70%; min-height: 12px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.sm-lane-flow i{
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 45%, var(--surface-1)), var(--accent));
  transform-origin: left center; transform: scaleX(0);
}
.sm-lane:nth-child(even) .sm-lane-flow i{ background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 28%, var(--surface-1)), color-mix(in oklab, var(--accent) 78%, var(--ink))); }
.sm-lane-k{
  display: grid; align-content: center; gap: 0; min-width: 0; padding-right: var(--s2);
  font-size: var(--fs-sm); color: var(--ink-dim); line-height: 1.3; max-height: 100%; overflow: hidden;
}
.sm-lane-k span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-lane-k b{ color: var(--ink); font-weight: 500; }
.sm-lane .chip{ font-style: normal; font-size: var(--fs-micro); }

.sm-sink{
  display: grid; align-content: center; justify-items: start; gap: var(--s2);
  padding: var(--s4); border-radius: var(--r); background: var(--accent); color: var(--on-accent);
  box-shadow: var(--shadow-2);
}
.sm-sink small{ font-size: var(--fs-sm); font-weight: 600; opacity: .85; }
.sm-sink .fig{ font-size: var(--fs-2xl); color: var(--on-accent); }
.sm-sink span{ font-size: var(--fs-sm); opacity: .85; }

.sm-read{ margin-top: var(--s5); padding-top: var(--s4); box-shadow: inset 0 1px 0 var(--line); }
.sm-read-h{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); }
.sm-read-h h3{ font: 600 var(--fs-lg)/1.25 var(--font-body); letter-spacing: -.01em; }
.sm-read-k{ margin: 0; font-size: var(--fs-sm); color: var(--ink-dim); max-width: none; }
.sm-read-k b{ color: var(--ink); font-weight: 600; }
.sm-read-line{ margin: var(--s2) 0 var(--s3); min-height: 1.5em; font-size: var(--fs-sm); color: var(--ink-dim); max-width: none; }
.sm-read-line b{ color: var(--ink); }
.sm-read-line .num{ color: var(--ink); }
.sm-read-line i{ font-style: normal; color: var(--ink-faint); margin: 0 var(--s1); }

/* --- plots ---------------------------------------------------------------- */
.sm-plot{ position: relative; min-height: 160px; border-radius: var(--r-sm); touch-action: pan-y; cursor: crosshair; outline-offset: 4px; }
.sm-plot--ch{ min-height: 180px; }
.sm-plot > svg{ position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.sm-plot .g{ stroke: var(--line); stroke-width: 1; }
.sm-plot .s-line{ fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.sm-plot .s-area{ stroke: none; }
.sm-plot .st0{ stop-color: var(--accent); stop-opacity: .22; }
.sm-plot .st1{ stop-color: var(--accent); stop-opacity: 0; }
.sm-plot .s-spend{ fill: none; stroke: var(--ink-faint); stroke-width: 1.75; stroke-dasharray: 5 5; stroke-linecap: round; }
.sm-xticks{ position: absolute; left: 0; right: 0; bottom: 0; height: 18px; pointer-events: none; }
.sm-xticks span{ position: absolute; transform: translateX(-50%); font: 400 var(--fs-micro)/1 var(--font-mono); color: var(--ink-faint); }
.sm-cross{ position: absolute; left: 0; width: 1px; pointer-events: none; background: var(--line-2); transform: translateX(var(--x, 0)); opacity: 0; }
.sm-pin{
  position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; opacity: 0;
  transform: translate(calc(var(--x, 0px) - 5px), calc(var(--y, 0px) - 5px)) scale(.4);
}
.sm-pin--a{ background: var(--accent); box-shadow: 0 0 0 3px var(--surface-1), 0 0 12px var(--glow); }
.sm-pin--b{ background: var(--surface-1); box-shadow: inset 0 0 0 2px var(--ink-faint); }
.sm-plot.scrubbing .sm-cross{ opacity: 1; }
.sm-plot.scrubbing .sm-pin{ opacity: 1; transform: translate(calc(var(--x, 0px) - 5px), calc(var(--y, 0px) - 5px)) scale(1); }
.sm-plot.scrubbing .sm-pin[hidden]{ display: none; }
.sm-plot:focus-visible{ outline: 2px solid var(--accent); }

/* --- bento ---------------------------------------------------------------- */
.sm-grid{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4); }
.sm-funnel, .sm-camps{ grid-column: span 6; min-width: 0; }
.sm-plotcard{ grid-column: span 6; min-width: 0; display: flex; flex-direction: column; }
.sm-social, .sm-mail, .sm-search, .sm-attr{ grid-column: span 6; min-width: 0; }
.sm-grid:not(:has(.sm-funnel)) .sm-camps,
.sm-grid:not(:has(.sm-camps)) .sm-funnel{ grid-column: 1 / -1; }
.sm-grid--mkt .sm-social{ grid-column: 1 / -1; }
.sm-read-line .sm-ex{ color: var(--ink-faint); font-weight: 400; }
.sm-card-h{ display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-bottom: var(--s4); }
.sm-card-h h3{ font: 600 var(--fs-lg)/1.25 var(--font-body); letter-spacing: -.01em; }
.sm-card-h .meta{ font-size: var(--fs-sm); }
.sm-plotcard .sm-legend{ margin-bottom: var(--s2); }

/* --- funnel --------------------------------------------------------------- */
.sm-funnel-b{ display: grid; gap: var(--s2); }
.sm-conv{ margin: var(--s1) 0; font-size: var(--fs-sm); color: var(--ink-dim); max-width: none; }
.sm-stage{
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; align-items: center; gap: var(--s3);
  width: 100%; min-height: var(--h-touch); padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-sm);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.sm-stage-h{ display: grid; min-width: 0; }
.sm-stage-h b{ font-size: var(--fs-base); font-weight: 600; }
.sm-stage-h span{ font-size: var(--fs-sm); color: var(--ink-dim); }
.sm-stage-bar{ display: block; height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.sm-stage-bar i{
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 50%, var(--surface-1)), var(--accent));
  transform-origin: left center; transform: scaleX(0);
}
.sm-stage-v{ font-size: var(--fs-base); font-weight: 500; }

/* --- campaigns ------------------------------------------------------------ */
.sm-camp-list{ display: grid; gap: var(--s2); }
.sm-camp{
  display: grid; gap: var(--s1); width: 100%; padding: var(--s3) var(--s4); border: 0; border-radius: var(--r-sm);
  background: var(--surface-2); color: inherit; font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line);
}
.sm-camp-h{ display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.sm-camp-h b{ font-size: var(--fs-base); font-weight: 600; }
.sm-camp-s{ font-size: var(--fs-sm); color: var(--ink-dim); }
.sm-camp-figs{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s2); }
.sm-camp-figs small{ display: block; font-size: var(--fs-sm); color: var(--ink-dim); }
.sm-camp-figs b{ font-size: var(--fs-lg); font-weight: 500; }
.sm-camp-ret{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink-dim); }

.sm-spot{ box-shadow: var(--shadow-2), 0 0 0 2px var(--accent), 0 0 32px var(--glow); }

/* --- marketing: the leak cascade ----------------------------------------- */
.sm-cascade-read{ margin: 0 0 var(--s4); font-size: var(--fs-base); color: var(--ink-dim); max-width: 72ch; }
.sm-cascade-read b{ color: var(--ink); }
.sm-cascade{ display: grid; gap: var(--s4); }
.sm-step{
  display: grid; gap: var(--s2); width: 100%; min-height: var(--h-touch); padding: var(--s3);
  border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.sm-step-h{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.sm-step-h b{ font-size: var(--fs-base); font-weight: 600; }
.sm-step-h .num{ font-size: var(--fs-lg); font-weight: 500; }
.sm-step-track{
  position: relative; display: block; height: 16px; border-radius: var(--r-pill);
  background: var(--surface-3); overflow: visible;
}
.sm-step-kept, .sm-step-lost{
  position: absolute; left: 0; top: 0; height: 100%; width: 100%; border-radius: inherit;
  transform-origin: left center; transform: scaleX(0);
}
.sm-step-lost{ background: var(--ink-faint); opacity: .45; }
.sm-step-lost.is-max{ background: var(--bad); opacity: .72; }
.sm-step-kept{
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 50%, var(--surface-1)), var(--accent));
  z-index: 1;
}
.sm-drip{
  position: absolute; top: 100%; left: calc(var(--kept, 0) * 100%); z-index: 2;
  width: var(--s2); height: var(--s2); border-radius: 50%;
  background: var(--bad); box-shadow: 0 0 10px var(--bad); pointer-events: none;
  transform: translateX(-50%);
}
.sm-step-drop{ font-size: var(--fs-sm); color: var(--ink-dim); }
.sm-step-drop.is-max{ color: var(--bad); font-weight: 600; }
.sm-step.is-leak .sm-step-h b{ color: var(--ink); }
.sm-step[aria-pressed="true"]{ background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }

/* --- social --------------------------------------------------------------- */
.sm-soc-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.sm-soc{
  display: grid; gap: var(--s1); align-content: start; min-width: 0; min-height: var(--h-touch);
  padding: var(--s4); border: 0; border-radius: var(--r); cursor: pointer;
  background: var(--surface-2); color: inherit; font: inherit; text-align: left;
  box-shadow: inset 0 0 0 1px var(--line);
}
.sm-soc small{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink-dim); }
.sm-soc .fig{ font-size: var(--fs-xl); margin: var(--s1) 0; }

/* --- email ---------------------------------------------------------------- */
.sm-mail-read{ margin: 0 0 var(--s4); font-size: var(--fs-base); color: var(--ink-dim); max-width: 62ch; }
.sm-mail-figs{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.sm-mail-figs small{ display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-dim); }
.sm-mail-figs .fig{ font-size: var(--fs-xl); margin: var(--s1) 0; }
.sm-mail-ask .ic{ color: var(--accent); }

/* --- search queries ------------------------------------------------------- */
.sm-queries{ list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s1); }
.sm-query{
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: var(--h-touch);
  padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-sm);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.sm-query .num{ color: var(--ink-faint); min-width: 1.5em; }
.sm-query b{ font-size: var(--fs-base); font-weight: 600; }

/* --- attribution: independent shares, not parts of a whole ---------------- */
.sm-attr-note{ margin: 0 0 var(--s4); max-width: 68ch; }
.sm-touches{ display: grid; gap: var(--s2); }
.sm-touch{
  display: grid; gap: var(--s2); width: 100%; min-height: var(--h-touch); padding: var(--s2) var(--s3);
  border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.sm-touch-h{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.sm-touch-h b{ font-size: var(--fs-base); font-weight: 600; }
.sm-touch-bar{ display: block; height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.sm-touch-bar i{
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 50%, var(--surface-1)), var(--accent));
  transform-origin: left center; transform: scaleX(0);
}

/* --- hover and press ------------------------------------------------------ */
@media (hover: hover) and (pointer: fine){
  .sm-lane:hover{ transform: translateY(-2px); }
  .sm-lane:hover .sm-lane-flow i{ filter: brightness(1.08); }
  .sm-river.is-hot .sm-lane:not([aria-pressed="true"]):not(:hover){ opacity: .55; }
  .sm-lane[aria-pressed="true"] .sm-lane-flow{ box-shadow: 0 0 0 1px var(--accent), 0 0 16px var(--glow); }
  .sm-stage:hover{ transform: translateY(-2px); background: var(--surface-2); }
  .sm-stage:hover .sm-stage-bar i{ filter: brightness(1.08); }
  .sm-camp:hover{ transform: translateY(-3px); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-2); }
  .sm-fig:hover .sm-dir:not(.flat):not(.down) .ic{ transform: translateY(-2px); }
  .sm-fig:hover .sm-dir.down .ic{ transform: rotate(180deg) translateY(-2px); }
  .sm-fig:hover .sm-dir.flat .ic{ transform: translateX(2px); }
  .sm-views button:hover{ transform: translateY(-1px); }
  .sm-step:hover{ transform: translateY(-2px); background: var(--surface-2); }
  .sm-step:hover .sm-step-kept{ filter: brightness(1.08); }
  .sm-soc:hover{ transform: translateY(-3px); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-2); }
  .sm-query:hover{ transform: translateY(-2px); background: var(--surface-2); }
  .sm-touch:hover{ transform: translateY(-2px); background: var(--surface-2); }
  .sm-touch:hover .sm-touch-bar i{ filter: brightness(1.08); }
  .sm-soc:hover .sm-dir:not(.flat):not(.down) .ic{ transform: translateY(-2px); }
  .sm-soc:hover .sm-dir.down .ic{ transform: rotate(180deg) translateY(-2px); }
}
.sm-lane:active, .sm-stage:active, .sm-camp:active,
.sm-step:active, .sm-soc:active, .sm-query:active, .sm-touch:active,
.sm-views button:active{ transform: scale(.97); }

/* --- motion (additive) ---------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .sm-lane, .sm-stage, .sm-camp, .sm-step, .sm-soc, .sm-query, .sm-touch, .sm-views button{
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
  }
  .sm-lane-flow i, .sm-stage-bar i, .sm-step-kept, .sm-step-lost, .sm-touch-bar i{
    transition: transform var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger)), filter var(--dur-base) ease;
  }
  .sm-lanes.in .sm-lane-flow i, .sm-funnel-b.in .sm-stage-bar i, [data-draw].in .sm-lane-flow i, [data-draw].in .sm-stage-bar i{ transform: scaleX(1); }
  .sm-funnel-b.in .sm-stage-bar i{ transform: scaleX(var(--p, 0)); }
  .sm-funnel-b.done .sm-stage-bar i{ transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) ease; }
  .sm-cascade.in .sm-step-kept{ transform: scaleX(var(--kept, 0)); }
  .sm-cascade.in .sm-step-lost{ transform: scaleX(var(--p, 0)); }
  .sm-cascade.done .sm-step-kept, .sm-cascade.done .sm-step-lost,
  .sm-touches.done .sm-touch-bar i{ transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) ease; }
  .sm-touches.in .sm-touch-bar i{ transform: scaleX(var(--p, 0)); }
  .sm-cascade.in .sm-drip{
    animation: sm-drip var(--loop-flow) var(--ease-in-out) infinite;
  }
  @keyframes sm-drip{
    0%   { transform: translateX(-50%) translateY(0); opacity: 0; }
    12%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateX(-50%) translateY(var(--s5)); opacity: 0; }
  }
  .sm-series{ clip-path: inset(-12px 100% -12px -12px); transition: clip-path var(--dur-reveal) var(--ease-out) var(--dur-base); }
  .sm-plot.in .sm-series{ clip-path: inset(-12px -12px -12px -12px); }
  .sm-cross, .sm-pin{ transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
  .sm-dir .ic{ transition: transform var(--dur-base) var(--ease-out); }
  .sm-spot{ transition: box-shadow var(--dur-slow) var(--ease-out); }
  .settled .sm-lane-flow i, .settled .sm-stage-bar i{ transform: scaleX(1); transition: none; }
  .settled .sm-funnel-b .sm-stage-bar i{ transform: scaleX(var(--p, 0)); }
  .settled .sm-cascade .sm-step-kept{ transform: scaleX(var(--kept, 0)); }
  .settled .sm-cascade .sm-step-lost, .settled .sm-touches .sm-touch-bar i{ transform: scaleX(var(--p, 0)); }
  .settled .sm-series{ clip-path: none; transition: none; }
}
.sm-funnel-b.in .sm-stage-bar i, .sm-funnel-b.done .sm-stage-bar i{ transform: scaleX(var(--p, 0)); }
.sm-lanes.in .sm-lane-flow i, .sm-lanes.done .sm-lane-flow i, [data-draw].in .sm-lane-flow i{ transform: scaleX(1); }
.sm-cascade.in .sm-step-kept, .sm-cascade.done .sm-step-kept{ transform: scaleX(var(--kept, 0)); }
.sm-cascade.in .sm-step-lost, .sm-cascade.done .sm-step-lost,
.sm-touches.in .sm-touch-bar i, .sm-touches.done .sm-touch-bar i{ transform: scaleX(var(--p, 0)); }
.motion-paused .sm-drip{ animation-play-state: paused; }

@media (prefers-reduced-motion: reduce){
  .sm-lane-flow i, .sm-stage-bar i{ transform: scaleX(1); }
  .sm-funnel-b .sm-stage-bar i{ transform: scaleX(var(--p, 0)); }
  .sm-step-kept{ transform: scaleX(var(--kept, 0)); }
  .sm-step-lost, .sm-touch-bar i{ transform: scaleX(var(--p, 0)); }
  .sm-drip{ transform: translateX(-50%); animation: none; }
}

/* --- breakpoints ---------------------------------------------------------- */
@media (max-width: 1280px){
  .sm-figs{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm-lane{ grid-template-columns: minmax(120px, 32%) minmax(0, 1fr); }
  .sm-lane-k{ display: none; }
  .sm-soc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px){
  .sm-funnel, .sm-camps, .sm-plotcard, .sm-social, .sm-mail, .sm-search, .sm-attr{ grid-column: 1 / -1; }
  .sm-river{ grid-template-columns: 1fr; min-height: 0; }
  .sm-sink{ min-height: 96px; }
  .sm-lane{ flex: var(--w) 1 var(--h-touch); min-height: var(--h-touch); }
  .sm-mail-figs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .sm-actions{ width: 100%; }
  .sm-views{ width: 100%; }
  .sm-views button{ flex: 1; min-height: var(--h-touch); }
  #smAsk{ flex: 1 1 100%; min-height: var(--h-touch); }
  .sm-figs{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .sm-fig{ padding: var(--s3); }
  .sm-fig:first-child{ grid-column: 1 / -1; }
  .sm-fig .fig, .sm-fig:first-child .fig{ font-size: var(--fs-xl); }
  .sm-hero{ padding: var(--s4); }
  .sm-lane{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s2); }
  .sm-lane-meta b{ font-size: var(--fs-sm); }
  .sm-stage{ grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h v" "b b"; gap: var(--s2); }
  .sm-stage-h{ grid-area: h; } .sm-stage-v{ grid-area: v; } .sm-stage-bar{ grid-area: b; }
  .sm-camp-figs{ gap: var(--s2); }
  .sm-camp-figs b{ font-size: var(--fs-base); }
  .sm-plot, .sm-plot--ch{ min-height: 140px; }
  .sm-soc-grid{ grid-template-columns: 1fr; }
  .sm-mail-figs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-mail-figs .fig{ font-size: var(--fs-lg); }
  .sm-soc .fig{ font-size: var(--fs-lg); }
}